/* ==========================================================================
   Hero section — Option 1: full-bleed media, content overlaid bottom-left.
   Reference frame: 1600x900. Header sits on top of this, hence the white text.
   ========================================================================== */

.section--hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Explicit, so the aspect-ratio below can never run backwards and shrink the
	   full-bleed width once max-height clamps the height. */
	width: 100%;
	/* Follow the hero media's own 16:9. The height used to be a flat 900 cap
	   while the width stayed fluid, so the wider the screen the further the box
	   drifted from the video's ratio and the more object-fit: cover had to cut
	   (2560x900 discarded ~37% of the frame). Matching 16:9 makes the crop zero
	   on a 16:9 screen and much smaller everywhere else. */
	aspect-ratio: 16 / 9;
	/* 900/1600 of the reference frame, but never taller than the viewport. */
	min-height: min(900px, 100svh);
	max-height: 100svh;
	overflow: hidden;
	color: var(--white);
	background: var(--dark);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media img,
.hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero copy sits in a 1440 column (x=80 at 1600), NOT the header's 1456 —
   the logo's own padding is what makes the two align visually in the design. */
.hero__inner {
	position: relative;
	z-index: 1;
	max-width: calc(1440px + 2 * var(--container-pad));
	/* 900 - 848 (CTA bottom) in the reference frame. */
	padding-bottom: clamp(2rem, 5.8vw, 52px);
	padding-top: calc(var(--header-h) + 2rem);
}

.hero__heading {
	max-width: 1097px;
	margin: 0;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.06vw, 49px);
	line-height: 1.327;
	letter-spacing: -0.01em;
	color: var(--white);
	/* Honour the line breaks the editor types, as the design is hard-broken. */
	white-space: pre-line;
}

/* 792 - 756 in the reference frame. */
.hero__cta {
	margin-top: clamp(1.5rem, 2.25vw, 36px);
}

@media (max-width: 900px) {
	.section--hero {
		min-height: min(720px, 100svh);
	}
}

@media (max-width: 600px) {
	.hero__heading {
		font-size: clamp(1.6rem, 7vw, 2rem);
	}
}