/* hero.css */

/* ---- structure ---- */
.section_hero {
	min-height: 100svh;
	color: var(--mapped-text-body);
	background-color: #eff0f100;
	flex-flow: column;
	justify-content: center;
	align-items: flex-start;
	display: flex;
	position: relative;
	overflow: hidden;
}

.hero_heading_container {
	z-index: 3;
	width: 100%;
	max-width: 37.6em;
	padding-right: var(--mapped-padding-sm);
	padding-left: var(--mapped-padding-sm);
	grid-column-gap: var(--mapped-padding-sm);
	grid-row-gap: var(--mapped-padding-sm);
	flex-flow: column;
	display: flex;
	position: relative;
}

.hero_bg-video {
	z-index: 1;
	aspect-ratio: auto;
	transform-origin: 50%;
	object-fit: cover;
	width: 100%;
	height: 125%;
	position: absolute;
	inset: -10% 0% 0%;
}

/* Readability scrim over the hero video — light, and directional only where it
 * has to be.
 *
 * This was built heavy for a previous clip: a bright white studio, where white
 * text needed a lot of help. The footage now is dark throughout (measured
 * luminance behind the heading runs 0.001–0.10 across the 38s), which is what
 * the hero was designed for in the first place. Carrying the heavy version over
 * would have crushed the footage to near-black for the sake of a problem it
 * does not have.
 *
 * What is left is a gentle overall wash, a little more weight at the very top
 * so the navbar holds, and a soft wedge from the left. The wedge is not
 * decoration: the clip has bright frames — headlights, body panels — that pass
 * behind the paragraph, and with the wash alone that measured 2.2:1 at its
 * worst. It clears by 60% of the width, so the middle and right of the frame
 * keep the footage. Verified across nine frames spanning the clip: nothing
 * below 4.5:1 for body text or 3:1 for the heading.
 */
.darken {
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.18);
	background-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.34) 0%,
			rgba(0, 0, 0, 0.16) 12%,
			rgba(0, 0, 0, 0) 26%
		),
		linear-gradient(
			100deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0.42) 32%,
			rgba(0, 0, 0, 0) 62%
		);
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}

/* Narrow screens: the copy runs nearly the full width and sits over the middle
   of the frame, so a touch more through the body of it. */
@media screen and (max-width: 767px) {
	.darken {
		background-color: rgba(0, 0, 0, 0.28);
	}
}

.hero_para-wrap {
	max-width: 28em;
}

.hero_scroll-darken {
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	background-color: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}

/* ---- overrides ---- */
/* The hero heading container runs wider than the default measure. */
.hero_heading_container {
	max-width: 31.6em;
}

/* Poster frame shown while the hero video buffers. */
.hero_video {
	/* Shown before the first frame decodes, and it matches the <video>'s own
	   poster. */
	background-image: url("/assets/video/autovision-home-poster.jpg");
	background-size: cover;
	background-position: center;
}

/* ---------------------------------------------------------------------------
   The hero's scroll cue

   Same chevrons and label as the car stage further down the page: those classes
   (.scroll-hint__chev, .scroll-hint__text) live in pages/home-extra.css and
   carry no positioning of their own, so both cues share one set of rules rather
   than one being a copy that drifts. Only the wrapper differs — the stage's
   #scroll-hint is fixed to the viewport, this one is anchored to the foot of
   the hero.

   z-index 3 puts it above the scrim (2) alongside the heading, and it never
   takes a click: the whole thing is decorative and the section behind it
   scrolls normally.
   --------------------------------------------------------------------------- */
.hero_scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 7em;
	transform: translateX(-50%);
	width: 24px;
	height: 24px;
	z-index: 3;
	pointer-events: none;
}

/* The label hangs below the chevrons; the stage sets that offset on its own
   fixed wrapper, so it is restated here against this one. */
.hero_scroll-cue .scroll-hint__text {
	top: 5.5em;
}

/* On a phone the hero is shorter and the label was landing 7px off the bottom
   edge of the section. */
@media screen and (max-width: 767px) {
	.hero_scroll-cue {
		bottom: 6em;
	}
}

/* ---------------------------------------------------------------------------
   The hero's booking button

   With the copy gone the section has one control left. It sits on the centre
   line, directly above the scroll cue, so the two read as one stack: button,
   chevrons, label. Left-aligned it had nothing to anchor to once the heading
   and paragraph went.

   `bottom` clears the chevrons (which start at 7em and animate downward) plus a
   gap, so the button never sits on top of them. The wrapper's vertical padding
   is zeroed first — without that, `bottom` positions the .padding box rather
   than the button inside it.
   --------------------------------------------------------------------------- */
.section_hero .hero_actions {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(9.5em + 24px);
	z-index: 3;
	width: auto;
}

.section_hero .hero_actions .padding {
	padding-top: 0;
	padding-bottom: 0;
}

@media screen and (max-width: 767px) {
	.section_hero .hero_actions {
		bottom: calc(8em + 24px);
	}
}