/*
	Hero — a flexible, full-height section: an image with the same global
	overlay treatment Banner/CTA use, and content independently aligned on
	both axes (Vertical: Top/Middle/Bottom; Horizontal: Left/Center/Right).

	.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.
*/
.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;
}

/*
	No Hero-specific flush rule here — 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.
*/

/*
	Vertical and horizontal are two independent classes (hero.php), so each
	sets only its own axis — align-items (vertical) / justify-items
	(horizontal) — rather than the place-items shorthand either used to.
	Two shorthand rules would fight: whichever class's selector happened to
	win the cascade would silently reset the OTHER axis back to its own
	default, since place-items always sets both align-items and
	justify-items at once even when you only meant to change one.
*/
.hero--align-top {
	align-items: start;
}

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

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

.hero--align-h-left {
	justify-items: start;
}

.hero--align-h-center {
	justify-items: center;
}

.hero--align-h-right {
	justify-items: end;
}

/*
	.hero__content's own text-align follows the same Horizontal Alignment
	choice — a left-justified content box with centred text inside it reads
	as a mistake far more often than an intentional look, so the two travel
	together rather than being independently configurable.
*/
.hero--align-h-left .hero__content {
	text-align: left;
}

.hero--align-h-right .hero__content {
	text-align: right;
}

/*
	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 align-items/
	justify-items, since an explicit size on a grid item overrides the
	container's own alignment; .hero__content has no explicit size, so
	align-items/justify-items (the .hero--align-{top,middle,bottom} /
	.hero--align-h-{left,center,right} rules above) are what actually
	position it on each axis independently.
*/
.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;
}

/*
	The theme's existing global overlay — same three custom properties
	.flex-section--cta's own background layer already consumes (cta.css),
	set once from Theme Settings > Style Guide > Image Overlay, not
	per-block. 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(--overlay-color);
	opacity: var(--overlay-opacity);
	mix-blend-mode: var(--overlay-blend);
}

.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;
	/* Caps the heading/text/button column at 1000px — not --container-max
	   (1400px, the section's own width) and not --container-condensed
	   (720px, a different fixed value) — an exact, deliberate dimension
	   for this content column specifically, same reasoning as Hero's own
	   fixed 800px row height. */
	max-width: 62.5rem; /* 1000px */
	/* 48px on all four sides — no longer split between padding-inline tied
	   to .container's own gutter (24px) and a separate padding-block.
	   Breathing room for the content specifically, on top of the section's
	   own margin-block: without this, Left/Right (Horizontal Alignment) or
	   Top/Bottom (Vertical Alignment) would sit flush against the section's
	   own edge instead of having their own margin. */
	padding: var(--space-8); /* 48px */
	/* The Horizontal Alignment default (Center) — .hero--align-h-left/-right
	   .hero__content above override this for the other two choices. */
	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);
	}
}

/* Matches Options'/Benefits'/Resources' own card text size. */
.hero__text {
	font-size: var(--card-text-font-size); /* 20px */
}

/*
	48px specifically between text and button — wider than the 24px
	.hero__content > * + * gives every other pair (e.g. header-to-text).
	Specificity (.hero__text + .hero__cta) beats the generic rule
	regardless of source order.
*/
.hero__text + .hero__cta {
	margin-block-start: var(--space-8); /* 48px */
}

/*
	Room for an optional second (outline) button next to the first.
	justify-content, not just the inherited text-align from .hero__content
	(above) — that centres/aligns inline content, but a flex row's own
	children need the flex-specific property, same reasoning as .cta__buttons
	(blocks/cta/cta.css) and .section-header__cta (blocks/section-header/
	section-header.css). Follows the same three Horizontal Alignment
	choices .hero__content's own text-align already does, defaulting to
	centred to match that rule's own Center default.
*/
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.hero--align-h-left .hero__cta {
	justify-content: flex-start;
}

.hero--align-h-right .hero__cta {
	justify-content: flex-end;
}

/*
	Heading colour matches the rest of the content (--section-fg — light
	when there's an image, per the inline style hero.php sets; the ordinary
	--color-default-fg otherwise), not layout.css's own bg-default h1..h6
	rule. That rule deliberately gives headings their own distinct colour
	on a *plain* default-background block — real, correct behaviour
	everywhere else — but Hero is always bg-default even when it has a
	photo behind it (it has no Background colour select at all, see
	hero.php's own docblock), so that global rule was winning over the
	inline --section-fg override and rendering the heading in dark green
	against a photo the rest of the content already read light on.
	Specificity here (.flex-section--hero .hero__content h2) beats
	.bg-default h1..h6 outright, not just on a source-order tie.
*/
.flex-section--hero .hero__content h2 {
	color: var(--section-fg);
}