/**
 * Hero background gallery — image + YouTube carousel.
 *
 * Slides stack absolutely; cross-fade by opacity.
 *
 * @package WEO
 */

/* ─── Slide stack ─── */

.hero__gallery {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* Slides stack by DOM order; opacity alone controls visibility.
   No z-index here — keeps the slides below .section__bg-overlay (z-index: 1)
   so the dark overlay renders on top, matching single-image hero behaviour. */
.hero__gallery-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.hero__gallery-slide.is-active {
	opacity: 1;
}

.hero__gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Self-hosted native <video> — cover-fit via object-fit ───
   Reuses .hero__gallery-img for sizing; just needs block display (videos are
   inline by default, which leaves a baseline gap) and no pointer interaction. */
.hero__gallery-video {
	display: block;
	pointer-events: none;
}

/* ─── YouTube / Vimeo iframe — cover-fit ─── */

/* Iframes ignore object-fit, so we replicate cover behaviour with container
   queries: the iframe is sized relative to its OWN slide rather than the
   viewport, so it works for any hero height (full-viewport or padded).
   16:9 ratio anchored — overflow clipped by .hero__gallery's overflow:hidden. */
.hero__gallery-slide--youtube,
.hero__gallery-slide--vimeo {
	container-type: size;
}

.hero__gallery-slide--youtube iframe,
.hero__gallery-slide--vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Fallback for browsers without container queries (very old). */
	width: 100%;
	height: 100%;
	/* Cover-fit: width = max(slide-width, slide-height × 16/9);
	              height = max(slide-height, slide-width × 9/16). */
	width: max(100%, 177.78cqh);
	height: max(100%, 56.25cqw);
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: 0;
}

@media (max-width: 639px) {
	.hero__gallery {
		height: 60dvh;
	}
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
	.hero__gallery-slide {
		transition: none;
	}
}