/**
 * Banner Slideshow
 *
 * Scoped under .banner--slideshow so legacy single-image / video
 * banner styling in the civic theme is untouched.
 *
 * Stacked absolute layers crossfade via opacity. Respects
 * prefers-reduced-motion.
 */

.banner.banner--slideshow {
	position: relative;
	overflow: hidden;
}

.banner.banner--slideshow .banner-slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.banner.banner--slideshow .banner-slideshow__slide {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1200ms ease-in-out;
	will-change: opacity;
}

.banner.banner--slideshow .banner-slideshow__slide.is-active {
	opacity: 1;
}

/* Container content (title, etc.) sits above the slide stack. */
.banner.banner--slideshow > .container {
	position: relative;
	z-index: 2;
}

/* Optional dark overlay for legibility of the banner title over busy
   project photography. Kept light so the imagery still leads. */
.banner.banner--slideshow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 13, 13, 0.10) 0%, rgba(13, 13, 13, 0.35) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Hide the alt-text spans visually but keep them accessible. Mirrors
   WordPress's screen-reader-text utility in case the theme doesn't
   already define it. */
.banner.banner--slideshow .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.banner.banner--slideshow .banner-slideshow__slide {
		transition: none;
	}
	.banner.banner--slideshow .banner-slideshow__slide.is-active {
		animation: none;
	}
}