/**
 * Shared AJAX listing loader.
 *
 * Single source of truth for the loading experience on every AJAX-powered
 * listing: Blog (.blog-listing), Resource Room (.resource-listing) and Swag
 * Shop (.aws-shop-loop / .aws-shop-results). All three render the same
 * .blog-listing__overlay + .blog-listing__spinner markup, so styling them
 * together here keeps the overlay, centred loader and behaviour identical.
 *
 * (The front-end course catalog in the ng-cle-compliance plugin mirrors this
 * same design in its own stylesheet.)
 */

/* Overlay: covers the results and veils them while a request is in flight.
   Positioned against each listing root, which is already position: relative. */
.blog-listing .blog-listing__overlay,
.resource-listing .blog-listing__overlay,
.aws-shop-results .blog-listing__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 250, 246, 238, 0.86 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease, visibility 220ms ease;
	z-index: 5;
	border-radius: 8px;
}

@supports ( ( -webkit-backdrop-filter: blur( 4px ) ) or ( backdrop-filter: blur( 4px ) ) ) {
	.blog-listing .blog-listing__overlay,
	.resource-listing .blog-listing__overlay,
	.aws-shop-results .blog-listing__overlay {
		background: rgba( 250, 246, 238, 0.6 );
		-webkit-backdrop-filter: blur( 4px ) saturate( 120% );
		backdrop-filter: blur( 4px ) saturate( 120% );
	}
}

/* Spinner presented as a soft white chip, centred in the overlay, so it reads
   as an intentional loader rather than a stray ring over the content. */
.blog-listing .blog-listing__spinner,
.resource-listing .blog-listing__spinner,
.aws-shop-results .blog-listing__spinner {
	width: 52px;
	height: 52px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 4px solid rgba( 195, 148, 84, 0.2 );
	border-top-color: var( --color-primary, #c39454 );
	background: #ffffff;
	box-shadow: 0 6px 18px rgba( 33, 24, 8, 0.12 );
	animation: awsListingSpin 0.7s linear infinite;
}

/* Reveal while the listing root carries .is-loading. */
.blog-listing.is-loading .blog-listing__overlay,
.resource-listing.is-loading .blog-listing__overlay,
.aws-shop-loop.is-loading .blog-listing__overlay {
	opacity: 1;
	visibility: visible;
}

/* The overlay is anchored to a results wrapper around the grid (+ pagination)
   so it covers ONLY the updating content — the search form and category tabs
   stay visible and clickable while loading. The wrapper also absorbs the
   Bootstrap .row negative gutter, so the overlay fully covers the cards with
   no clipped edges. (Swag Shop plays this role with .aws-shop-results.) */
.blog-listing__results,
.resource-listing__results {
	position: relative;
	padding-left: calc( var( --bs-gutter-x, 1.5rem ) * 0.5 );
	padding-right: calc( var( --bs-gutter-x, 1.5rem ) * 0.5 );
}

/* Guarantee enough height to keep the spinner centred even for short/empty
   result sets, and lock interaction on the results only while loading, so
   stray clicks can't reach the veiled cards. Applies only during loading, so
   no permanent layout change. */
.blog-listing.is-loading .blog-listing__results,
.resource-listing.is-loading .resource-listing__results,
.aws-shop-loop.is-loading .aws-shop-results {
	min-height: 220px;
	pointer-events: none;
	user-select: none;
}

/* Swag Shop also locks its toolbar controls while loading (original behaviour;
   the blog tabs / resource search intentionally stay interactive). */
.aws-shop-loop.is-loading .aws-shop-toolbar {
	pointer-events: none;
}

@keyframes awsListingSpin {
	to {
		transform: rotate( 360deg );
	}
}