/* ==========================================================================
   Widget — Hero
   Figma node 133:234. A full-bleed photograph under a scrim, with the lockup
   and tagline centred over it on the navy field.
   ========================================================================== */

/*
 * The comp is 900 tall on a 1920 stage. Expressed against the viewport instead
 * so the hero is never taller than the screen it is on, with a floor that keeps
 * it a hero rather than a strip on a short laptop window. The shared
 * "Minimum height" control in Section Layout overrides this when a page needs
 * something else.
 */
.o-section--hero {
	min-height: max(30rem, min(88svh, 900px));
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   The photograph
   Drawn between <section> and the container, so it reaches the viewport edges
   while the copy stays on the 1440 grid. The shared .o-section__overlay comes
   after this in the markup and therefore paints on top of it.
   -------------------------------------------------------------------------- */
.o-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.o-hero__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--o-hero-focal, center center);
}

/*
 * The comp darkens the photograph twice - 10% on the image and 16% over it -
 * which composites to roughly a quarter of black. Matches the widget's control
 * default; see the note on .o-section__overlay in base.css for why it is
 * written here as well.
 */
.o-section--hero .o-section__overlay {
	opacity: 0.25;
}

/* --------------------------------------------------------------------------
   The background video
   Stacked directly over the photograph, same box, same crop. It starts
   invisible and is faded in by hero.js once it is genuinely playing, so a
   video that never loads - or never starts - leaves the photograph on screen
   rather than a black rectangle.
   -------------------------------------------------------------------------- */
.o-hero__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--o-hero-focal, center center);
	opacity: 0;
	transition: opacity 600ms ease;
}

.o-hero__video.is-playing {
	opacity: 1;
}

/*
 * A visitor who has asked for less movement never gets the video at all -
 * hero.js removes it. This is the belt to that pair of braces, covering the
 * moment before the script runs.
 */
@media (prefers-reduced-motion: reduce) {
	.o-hero__video {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   The copy stack
   Margins rather than a flex gap, because the comp butts the tagline straight
   against the lockup - the drawn artwork carries its own breathing room, and a
   gap on top of that opens a hole.
   -------------------------------------------------------------------------- */
.o-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

.o-hero > * + * {
	margin-top: 1.5rem;
}

.o-hero__lockup + .o-hero__tagline {
	margin-top: 0;
}

.o-hero__cta {
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Lockup
   The width control is a ceiling, not a size: below it the artwork tracks the
   column so it never overflows a phone.
   -------------------------------------------------------------------------- */
.o-hero__lockup {
	margin: 0;
	width: 100%;
	max-width: min(var(--o-lockup-width, 881px), 100%);
	line-height: 0;
}

.o-hero__lockup-img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Tagline
   -------------------------------------------------------------------------- */
.o-hero__tagline {
	margin: 0;
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(0.9375rem, 0.7rem + 1.1vw, 1.625rem); /* 15 -> 26, per the comp */
	letter-spacing: 0.017em; /* 0.45px at 26px */
	line-height: 1.3;
	text-transform: uppercase;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Typed heading, used instead of the lockup on interior pages
   The shared block is width-limited and bottom-spaced for a mid-page section;
   in a hero the stack above owns both.
   -------------------------------------------------------------------------- */
.o-section--hero .o-section-heading {
	max-width: none;
	margin-bottom: 0;
}

.o-section--hero .o-section-heading__title {
	font-size: var(--o-fs-display);
	font-weight: var(--o-fw-semibold);
	line-height: var(--o-lh-tight);
	text-transform: uppercase;
	text-wrap: balance;
}

.o-section--hero .o-section-heading__intro {
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Transparent header
   When the header floats over the hero, centring the copy in the whole section
   sits it too high - half of it is behind the header. Padding the copy stack,
   rather than the section, keeps this clear of the shared "Section padding"
   control.
   -------------------------------------------------------------------------- */
.o-body--transparent-header .o-section--hero .o-hero {
	padding-top: var(--o-header-height);
}

@media (max-width: 900px) {
	.o-body--transparent-header .o-section--hero .o-hero {
		padding-top: var(--o-header-height-compact);
	}
}