/*
	Hero — a flexible, full-height section: solid colour or an image with the
	same overlay treatment as Page Banner, top/middle/bottom-aligned content
	that's always centered horizontally, and an optional whole-section link
	in place of a visible button.

	.hero__media and .hero__content are stacked in the same CSS Grid cell
	(grid-area: 1 / 1) rather than the image being position: absolute — a
	normal-flow grid item is laid out within the grid's own content box, so
	it can never paint through padding onto the section's own border the way
	an absolutely positioned element can. That's also why the section needs
	no general padding override of its own at all: spacing against an
	adjacent block comes entirely from layout.css's general block-rhythm
	rules (margin-block — Hero is one of the two blocks, alongside Video,
	excluded from that system's "bands get padding-block back" rule, since
	this section has no internal padding need of its own to restore). The
	image is real content now, not a background layer, so it's naturally
	inset by the section's own padding-inline (Inline/Wide only — see
	.hero--inline/.hero--wide below) the same way any other block's image
	would be.

	The 800px fixed height (below) belongs to the GRID ROW — i.e. the box
	that actually holds the image and the content stacked on it — not to
	the section as a whole. .flex-section--hero itself carries no height of
	its own; it sizes to fit that row plus its own margin-block, so the
	image is exactly 800px regardless of viewport (margin-block's own
	clamp() varies by viewport), and the section's total height is 800px
	PLUS that margin, not 800px inclusive of it. An earlier version put the
	800px directly on the section (min-height + max-height, later just
	height) — technically also a fixed value, but the wrong box: the
	section's own vertical spacing (padding-block at the time; margin-block
	now) ate into it, so the image itself rendered shorter than 800px, more
	so at wider viewports where that spacing's own clamp is larger.
*/
.flex-section--hero {
	position: relative;
	isolation: isolate;
	display: grid;
	/* Fixed, not 1fr — this row is what's 800px, always, regardless of
	   either child's own content (object-fit: cover on .hero__image fills
	   it exactly either way, see .hero__media below). Content taller than
	   that gets clipped, same as it already did horizontally — a
	   heading/text/button combination long enough to need more than 800px
	   will be cut off rather than growing the row, so keep Hero copy
	   short. Clipping this reliably needs more than just overflow: hidden
	   here — see .hero__content's own min-height: 0 for why, and where the
	   actual fix lives. */
	grid-template-rows: 50rem; /* 800px */
	place-items: center;
	overflow: hidden;
}

@media (max-width: 47.99em) {
	.flex-section--hero {
		grid-template-rows: 37.5rem; /* 600px */
	}
}

/*
	No Hero-specific flush rule here anymore — Full, with an image, carries
	.has-full-bleed-band (hero.php), so layout.css's own general band-flush
	rule already covers a full-bleed Hero sitting next to another band (a
	real background colour, Video, CTA with a background image, another
	Hero set to Full) or being the first block on the page. One shared rule
	instead of a Hero-specific copy of it.
*/

.hero--align-top {
	place-items: start center;
}

.hero--align-middle {
	place-items: center center;
}

.hero--align-bottom {
	place-items: end center;
}

/*
	Inline matches the normal .container exactly — no breakout at all, so it
	sits flush with any other in-flow content on the page.

	Wide is 96px (--space-11, the token closest to the requested 100px)
	wider than the normal .container on each side — not full-bleed. It's
	just a bigger max-width, so on a viewport narrower than that it
	naturally shrinks to fit, same mechanism .container itself already
	uses — no separate breakpoint logic needed.

	Full has nothing to add here: full-bleed is this section's natural
	default width (no .container wrapping it), same reasoning as the Video
	block.

	padding-inline here matches .container's own convention exactly — same
	reasoning as .container's: on a viewport narrower than the max-width,
	this keeps the image and content off the very edge of the screen.
*/
.hero--inline {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.hero--wide {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--space-11));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/*
	grid-area: 1 / 1 on both stacks them in the section's single implicit
	cell; grid-template-rows: 50rem above makes that cell exactly 800px,
	not just shrink to whichever of the two is taller. .hero__media fills
	its cell exactly (width/height: 100%) regardless of place-items, since
	an explicit size on a grid item overrides the container's own
	align-items/justify-items; .hero__content has no explicit size, so
	place-items (above) is what actually positions it — Top/Middle/Bottom,
	always centered horizontally.
*/
.hero__media {
	position: relative;
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	/* Grid items default to min-height: auto — "never shrink below my own
	   content's natural size" — which could otherwise let this row grow
	   past its own fixed 50rem (see .hero__content's own min-height: 0
	   below for the actual culprit; this is defensive, since .hero__media's
	   explicit height: 100% makes it unlikely to be the cause itself, but
	   it shares the row either way). */
	min-height: 0;
}

.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same colour + blend mode as Page Banner's overlay (components.css) —
   --hero-overlay is set inline per instance, same reasoning as
   --page-banner-overlay. Positioned relative to .hero__media itself (which
   is position: relative, above), not the section, so it exactly matches
   the image's own box. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-dark-bg);
	opacity: var(--hero-overlay, 0.5);
	mix-blend-mode: multiply;
}

.hero__content {
	/* position: relative, not just a grid-area coincidence — .hero__media is
	   position: relative (for its ::after overlay), which makes it a
	   POSITIONED element; positioned elements always paint above static
	   ones regardless of DOM order. Without this, .hero__content (left at
	   the default position: static) painted BEHIND the image every time,
	   entirely hidden, no matter what order the two were written in. */
	position: relative;
	grid-area: 1 / 1;
	max-width: var(--container-max);
	padding-inline: var(--container-gutter);
	/* Extra breathing room for the content specifically, on top of the
	   section's own padding-block, when Content Alignment is Top or
	   Bottom — otherwise the heading/text/button would sit flush against
	   the section's own padded edge instead of having its own margin. */
	padding-block: var(--space-5);
	text-align: center;
	/* Defends against the grid-blowout quirk: grid items default to
	   min-height: auto ("never shrink below my own content's natural
	   size"), which is what let a long heading/text/button combination
	   inflate this row past its own cap back when grid-template-rows was
	   1fr (a flexible track, sized in part from content). Now that it's a
	   fixed length (50rem, see .flex-section--hero above), the row itself
	   can no longer grow from content the same way — but min-height: 0
	   stays as a second guarantee that .hero__content never tries to claim
	   more than the row actually has, and its own overflow: hidden below
	   is what clips long copy within that fixed height instead of letting
	   it spill out. */
	min-height: 0;
	overflow: hidden;

	& > * + * {
		margin-block-start: var(--space-5);
	}
}

/*
	Link Whole Section: stretched over the entire section (not just the
	grid-stacked media/content cell), same pattern as .card__link — an
	invisible full-cover <a> rather than wrapping the section's own content
	in one, which would nest interactive/flow content awkwardly and isn't
	how the button's own link data is meant to render. It's deliberately
	NOT a grid item (no grid-area) — position: absolute; inset: 0 here
	targets .flex-section--hero itself (the nearest positioned ancestor),
	covering the full section including its padding, which is what you want
	for a click/tap target. Placed after .hero__content in the DOM
	(hero.php) so it paints on top with no z-index needed, same reasoning
	as .card__link.
*/
.hero__link {
	position: absolute;
	inset: 0;
}