/* ==========================================================================
   Homepage hero image slider (template-parts/home/home-hero.php).
   A stack of full-bleed background-image layers that crossfade into each
   other; assets/js/hero-slider.js swaps which one carries .is-active.
   Sits behind the existing .hero::before overlay and .hero-inner content
   from assets/css/layout/hero.css, so none of that needs to change.
   ========================================================================== */
.hero--slider { background-image: none; }

.hero-slider {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1200ms ease;
	will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }

/* The gradient overlay and text content must render above the slides. */
.hero--slider::before { z-index: 1; }
.hero--slider .hero-inner { z-index: 2; }

/* Fill the first screen exactly: the full window height minus the sticky
   header (its bar + 1px bottom border), so no strip of the next section
   shows under the photo on taller screens. 640px stays the minimum on
   short screens, and content that needs more room still grows it.
   svh (small viewport height) keeps it steady while phone browser bars
   slide in and out; plain vh is the fallback for older browsers. */
.hero.hero--slider {
	min-height: max(640px, calc(100vh - var(--header-h) - 1px));
	min-height: max(640px, calc(100svh - var(--header-h) - 1px));
}
/* When logged in, WordPress's admin bar sits above the header. */
body.admin-bar .hero.hero--slider {
	min-height: max(640px, calc(100vh - var(--header-h) - 1px - 32px));
	min-height: max(640px, calc(100svh - var(--header-h) - 1px - 32px));
}
@media (max-width: 782px) {
	body.admin-bar .hero.hero--slider {
		min-height: max(480px, calc(100vh - var(--header-h) - 1px - 46px));
		min-height: max(480px, calc(100svh - var(--header-h) - 1px - 46px));
	}
}
@media (max-width: 780px) {
	.hero.hero--slider {
		min-height: max(480px, calc(100vh - var(--header-h) - 1px));
		min-height: max(480px, calc(100svh - var(--header-h) - 1px));
	}
}

/* Phone held sideways (short screen): the 640/480px minimum would fill more
   than the whole screen, so the banner is just the visible height instead.
   Nothing changes on a phone held upright. */
@media (orientation: landscape) and (max-height: 520px) {
	.hero.hero--slider,
	body.admin-bar .hero.hero--slider {
		min-height: calc(100vh - var(--header-h) - 1px);
		min-height: calc(100svh - var(--header-h) - 1px);
	}
}

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