/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HERO — FULL-HEIGHT BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.page-hero {
	position: relative;
	width: 100%;
	/* 82vh, but never taller than three-quarters of the screen's WIDTH.
	   
	   82vh on its own depends on viewport height and ignores width entirely.
	   That is a banner on a landscape screen and a portrait panel on a
	   portrait one: at iPad portrait it came out 968px tall against an 805px
	   width — 1.2 times taller than wide — leaving 76px of the next section
	   visible below a 64px header and a 72px announcement bar. Nothing on
	   screen suggested there was a page underneath.
	   
	   min() rather than a media query because the cap is self-correcting: it
	   only ever binds when the viewport is taller than it is wide, so every
	   landscape size keeps exactly the height it has today —
	   
	     1440x900   82vh = 738   75vw = 1080   ->  738, unchanged
	     1280x800   82vh = 656   75vw =  960   ->  656, unchanged
	     1180x820   82vh = 672   75vw =  885   ->  672, unchanged
	     820x1180   82vh = 968   75vw =  604   ->  604, capped
	     1024x1366  82vh = 1120  75vw =  768   ->  768, capped
	   
	   75 is chosen, not arbitrary: it puts the portrait hero at 51% of the
	   screen height, which is where the phone rule at the foot of this file
	   already sits (52svh). Portrait tablets therefore land on the proportion
	   phones were tuned to, rather than on a number of their own. */
	height: min(82vh, 75vw);
	min-height: 520px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
}

/* Single image fallback (non-home heroes) */
.page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Fade in only after the image file has downloaded (JS adds .is-loaded).
   The dark overlay keeps the hero looking intentional while it loads. */
@media (prefers-reduced-motion: no-preference) {
	.page-hero__bg img {
		opacity: 0;
		transition: opacity 0.4s ease;
	}
	.page-hero__bg img.is-loaded {
		opacity: 1;
	}
}

/* ── Slideshow — home hero ── */
.page-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.page-hero__slide.is-active {
	opacity: 1;
}

/* Respect reduced-motion — show first slide statically, no transition */
@media (prefers-reduced-motion: reduce) {
	.page-hero__slide {
		transition: none;
		opacity: 0;
	}
	.page-hero__slide.is-active {
		opacity: 1;
	}
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1;
}

.page-hero__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 2rem var(--ci-container-padding, 2rem);
}

.page-hero__title {
	font-family: var(--ci-font-primary);
	font-size: clamp(2rem, 5.5vw, 4.5rem);
	font-weight: 400;
	line-height: 1.15;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.75);
}

/* ── Liquid glass panel — optional wrapper around hero content ── */
.page-hero__glass {
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(24px) saturate(1.4) brightness(1.08);
	-webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 1.5rem;
	padding: 2.25rem 3.5rem;
}

.page-hero__glass .page-hero__title {
	text-shadow: none;
}

.page-hero__glass .page-hero__subtitle {
	text-shadow: none;
}

@media (max-width: 640px) {
	.page-hero__glass {
		padding: 1.75rem 1.5rem;
	}
}

.page-hero__subtitle {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	font-weight: 300;
	color: #ffffff;
	margin: 0.75rem 0 0;
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8);
}

/* ── Mobile ─────────────────────────────────────────────────────────────────
   The subtitle gets a heavier weight, a darker wash and a tighter shadow on
   phones. Measured on /cornerstones-curriculum/ at 390px, sampling white text
   against the photograph composited with the overlay at 196 points across the
   subtitle's own box:

                        worst    median   area below AA
       before            4.12      5.66        23%
       after             5.73      7.55         0%

   At 17px and weight 300 this is normal text as far as WCAG is concerned —
   3:1 would need 24px — so 4.5:1 is the bar, and nearly a quarter of it was
   under. Desktop is deliberately left alone: the same copy renders there at
   20px over two lines rather than 17px over seven, and reads fine.

   Why each of the three:

     WEIGHT 400. The largest gain and the cheapest. Lato Light at 17px has
     roughly 1.2px stems, which shimmer against a busy photograph rather than
     holding an edge. Note this does not move the contrast numbers at all —
     WCAG measures colour, not stroke weight — but it is the change you see
     most.

     OVERLAY 0.55. This is the one the numbers come from, and the only one
     that clears the AA shortfall on its own.

     SHADOW 3px at 0.9 alpha, from 16px at 0.8. A wide blur lifts the whole
     area behind the text without defining any edge; a tight, denser shadow
     hugs the glyphs, which is where legibility actually comes from.

   Not adopted, both on the preview page if they are ever wanted: left-aligning
   the subtitle, and a gradient scrim in place of the flat wash (which keeps
   more of the photograph, at the cost of tuning it per hero).
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.page-hero {
		height: 52svh;
		min-height: 300px;
	}

	.page-hero__overlay {
		background: rgba(0, 0, 0, 0.55);
	}

	.page-hero__subtitle {
		font-weight: 400;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	}
}