/*
	Hero — a flexible, full-height section: solid colour or an image with the
	same overlay treatment as Page Banner, and content independently
	positioned on two axes — Content Alignment (top/middle/bottom) and
	Horizontal Alignment (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. 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;
}

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

/*
	Content Alignment (vertical) and Horizontal Alignment are independent
	axes, each its own set of modifier classes touching only its own
	align-items/justify-items property — not nine paired combinations for
	every possible vertical+horizontal pairing. .flex-section--hero's own
	place-items: center above is the shared default for both axes; each
	modifier here only overrides the one property its own axis owns.
*/
.hero--align-top {
	align-items: start;
}

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

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

.hero--halign-left {
	justify-items: start;

	& .hero__content {
		text-align: left;
	}
}

.hero--halign-center {
	justify-items: center;
}

.hero--halign-right {
	justify-items: end;

	& .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 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;
	/* Same narrower cap Banner's own content group uses
	   (.banner__inner, components.css) — --container-condensed (720px),
	   not --container-max (1300px, the full site container width). Not
	   centered independently the way .banner__inner isn't either — the
	   Horizontal Alignment modifiers above (justify-items on the section)
	   already position this narrower box within the row, so there's
	   nothing extra to add here for that. */
	max-width: var(--container-condensed);
	/* 80px on every side by default (Inline/Wide) — no longer tied to
	   .container's own gutter convention (--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. Full
	   overrides padding-inline back to --container-gutter below (see that
	   rule for why) but never touches padding-block, so it still inherits
	   this same 80px top/bottom. */
	padding: var(--space-10); /* 80px */
	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);
	}
}

/*
	Overrides whichever .heading-style-* size the editor picked (typography.css)
	with Hero's own fixed 48px — independent of Style, same "block-specific
	display size, not a step in the reusable scale" treatment CTA's and Page
	Banner's own heading/title overrides already use. sd_render_heading()
	appends this as an extra class alongside .heading-style-*, so both classes
	land on the same element; since this rule and .heading-style-* share
	specificity (0,1,0 each), source order is what wins — this file loads
	after typography.css (main.css's @import order), so it wins on the tie.
*/
.hero__heading {
	font-size: var(--hero-heading-size);
}

/*
	Full has no .container wrapping the section at all (edge-to-edge, same
	reasoning as Video) — .hero__content is the only thing standing between
	its own text and the true viewport edge, so its horizontal spacing is
	what actually determines whether that text lines up with the rest of
	the page's content. --container-gutter (24px), not --space-10 (80px): a
	matching inner gutter is the same inset .container applies to its own
	content, not an arbitrary Hero-only value. Inline/Wide keep the full
	80px: their own section-level padding-inline (.hero--inline/.hero--wide
	above) already handles edge-of-viewport spacing, so .hero__content's
	own padding there is purely internal breathing room, not doing
	alignment duty the way it is here. padding-block is untouched here, so
	Full still gets that same 80px top/bottom from the base rule above.
*/
.hero--full .hero__content {
	padding-inline: var(--container-gutter);
}

/*
	Left/Right alignment on Full needs more than the matching gutter above:
	.hero__content is now narrower than .container (--container-condensed,
	720px, vs. --container-max, 1300px — see .hero__content's own comment),
	so its box no longer shares .container's own edges the way it did
	before that change. Flush against the row's own edge via justify-items
	(start/end, hero--halign-left/-right above) lands it at the TRUE
	viewport edge, not where .container's edge actually is once .container
	itself is centered at a narrower max-width than the viewport.
	max(0px, (100vw - container-max) / 2) is exactly the offset
	.container's own margin-inline: auto produces at any viewport width —
	0 once the viewport is narrower than --container-max (.container then
	fills the full available width, same as this clamps to 0 too), and the
	true centering gap once it's wider. Pushing/pulling .hero__content by
	that same amount, on top of the matching padding-inline above, is what
	makes its text land exactly where .container's own text does — Center
	needs neither: there's no single edge to line up with a centered box.
*/
.hero--full.hero--halign-left .hero__content {
	margin-inline-start: max(0px, (100vw - var(--container-max)) / 2);
}

.hero--full.hero--halign-right .hero__content {
	margin-inline-end: max(0px, (100vw - var(--container-max)) / 2);
}