/* ============================================================
   Hero - homepage (Page Sections layout "hero", brief 4.1;
   notes home-desktop 3.3 and home-mobile 3.3)
   Full-bleed photo under the hero overlay, the page's single H1,
   the lead, the primary button and the "Not sure where to
   start?" link.
   - Mobile (< 768): 702px tall, a centred column sitting low
     (45px off the bottom, as designed), leaving the top of the
     photo clear for the subject of the mobile photo.
   - Tablet (768-1023): the desktop composition (text left,
     climber right) at 600px, growing to the desktop height by
     1024; H1 on two lines; lead 560px wide; actions on one row.
   - Desktop (>= 1024): the screen's height below the header, at least
     714px (as designed) and at most 62.5vw; the content centred in it,
     as designed (Miles 2026-10-11, with Sam's climbers-on-a-crag photo;
     for the previous group photo it sat high, in the sky).
   Overlay and text shadows are measured from the design PDFs (desktop:
   black 20%; phones add the navy fade). The object-position values
   frame the climber in the original placeholder photo (QH13). Since
   2026-10-10 the hero row can set the framing in wp-admin ("Photo
   position and mirroring", section-hero.php): --hero-pos (tablet and
   desktop), --hero-pos-mobile, --hero-zoom (tablet and desktop) and
   .hero--mirrored; without them, the values below.
   ============================================================ */

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 702px;
	padding-block: 48px 45px;
	background-color: var(--color-surface-dark); /* shows only if there is no photo */
	color: var(--color-text-on-dark);
}

/* Photo + overlay. Named __bg, not __media, so the tablet media
   guard in main.css never caps this full-bleed image. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden; /* a zoomed photo stays inside the hero */
}

/* Mirrored in wp-admin: the photo (and its overlay, which is symmetric
   left to right) flips about the hero's centre. */
.hero--mirrored .hero__bg {
	transform: scaleX(-1);
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay-hero);
}

.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-pos-mobile, 73% 100%); /* phones without a mobile photo: the climber, bottom-aligned */
}

/* The optional mobile photo (<source> below 768px) is an art-directed
   crop, already centred on its subject. The tablet and desktop rules
   below repeat this selector so the main photo is framed there. */
.hero--mobile-photo .hero__img {
	object-position: var(--hero-pos-mobile, 50% 100%);
}

.hero__content {
	text-align: center;
}

/* ---------- Heading ---------- */

.hero__title {
	color: var(--color-heading-on-dark);
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
	text-shadow: var(--text-shadow-hero);
}

/* One line per field: the designed break after "Mountaineering".
   Line 2 still wraps on phones ("Built around your / Progression"). */
.hero__title-line {
	display: block;
}

/* ---------- Lead ---------- */

/* 21px below the H1 at every width: Koulen's line box carries space
   below the caps (about 9px at 36/40, 16px at 64/72), so this gives
   the designed visible gaps - 35px on phones, 42px on desktop. */
.hero__lead {
	max-width: 36rem;
	margin: 21px auto 0;
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	text-shadow: var(--text-shadow-hero-lead);
}

.hero__nowrap {
	white-space: nowrap;
}

/* ---------- Actions: button + "Not sure where to start?" ---------- */

.hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 21px;
	margin-top: 33px;
}

.hero__secondary {
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
	text-shadow: var(--text-shadow-hero-lead);
}

/* Phones: the question on its own line, the link centred under it. */
.hero__secondary-prefix {
	display: block;
}

.hero__secondary-link {
	gap: 12px;
	font-weight: inherit;
}

/* Phones use the bolder, larger icon arrow (home-mobile 2.7). */
.hero__secondary-link .icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.4;
}

/* Hover and focus: the arrow turns Light Orange and slides right (the
   arrow-link rule in main.css). The label stays Cream with its designed
   underline - Light Orange text over the photo is only about 3.3:1 at
   18px. The CTA band's "Get In Touch" link behaves the same. */
.hero__secondary-link:hover .icon,
.hero__secondary-link:focus-visible .icon {
	color: var(--color-link-hover-on-dark);
}

/* ============================================================
   Tablet and up: the desktop composition
   ============================================================ */

@media (min-width: 768px) {
	/* 600px at 834, rising to the desktop 714px by 1024 so wider
	   tablets keep the climber clear of the heading. Padding is
	   7px heavier below: the H1 line box carries about 12px of
	   space above the caps (Koulen at 64/72) that the button
	   lacks below, so this gives the designed desktop framing:
	   caps 174px from the top, button 169px from the bottom. */
	.hero {
		justify-content: center;
		min-height: clamp(600px, 60vw + 99.6px, 714px);
		padding-block: 64px 71px;
	}

	/* The desktop file draws one black layer at 20% over the photo
	   (no gradient); tablet shares the desktop composition. */
	.hero__bg::after {
		background: var(--overlay-hero-desktop);
	}

	/* The hero photo is uploaded at the desktop framing (1440 x 714 at
	   2x). Narrower than that, cover trims the sides: 66% keeps the
	   climber (about 62-85% across the photo) right of the text. */
	.hero__img,
	.hero--mobile-photo .hero__img {
		object-position: var(--hero-pos, 66% 50%);
		transform: scale(var(--hero-zoom, 1));
		transform-origin: var(--hero-pos, 66% 50%);
	}

	.hero__content {
		text-align: left;
	}

	.hero__lead {
		max-width: 560px;
		margin-inline: 0;
	}

	.hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 26px;
		margin-top: 41px;
	}

	.hero__secondary {
		font-weight: var(--fw-semibold);
	}

	.hero__secondary-prefix {
		display: inline;
	}

	/* Thin arrow, 14px after the label as designed. */
	.hero__secondary-link {
		gap: 10px;
	}

	/* The link follows the question on the same line here, so the
	   focus ring sits closer (global offset 3px) to stay clear of
	   the "?". */
	.hero__secondary-link:focus-visible {
		outline-offset: 1px;
	}

	.hero__secondary-link .icon {
		width: 18px;
		height: 18px;
		stroke-width: 2;
	}
}

/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 1024px) {
	/* Fills the screen below the header (Miles 2026-10-11: at a fixed 714px
	   the hero became a thin strip on wide screens, about 3.6:1 at 2560),
	   never shorter than the designed 714px, and at most 62.5vw tall
	   (16:10) so a very tall window does not stretch it into a tower. The
	   header's height is measured by navigation.js (--header-slot-h); the
	   fallback is header.css's own sum. Browsers without svh keep 714px. */
	.hero {
		min-height: 714px;
		min-height: max(714px, min(calc(100svh - var(--toolbar-fixed-h) - var(--header-slot-h, calc(var(--header-utility-h) + var(--border-hairline) + var(--header-bar-h)))), 62.5vw));
	}

	/* Exact fit at 1440 (the photo is the designed crop); on narrower
	   desktops the sides trim and 70% keeps the climber clear of the
	   lead; wider screens trim top and bottom evenly. */
	.hero__img,
	.hero--mobile-photo .hero__img {
		object-position: var(--hero-pos, 70% 50%);
		transform-origin: var(--hero-pos, 70% 50%);
	}

	/* 790px at 1440 as designed; narrower below so the longest line
	   never runs into the climber. */
	.hero__lead {
		max-width: min(790px, 55vw);
	}
}