/* ==========================================================================
   Widget — Video Hero (Copy + Video)
   The Split Hero's copy column beside a framed video on the site grid. Type,
   rhythm and link come from split-hero.css, which this widget also loads.
   Mobile-first: copy over video, then side by side from 900px up.
   ========================================================================== */

.o-video-hero {
	--o-video-width: 55%; /* Overridden inline by the "Video width" control. */

	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 1.5rem + 3vw, 5rem); /* 40 -> 80 */
	align-items: center;
}

.o-video-hero__text {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   The frame
   Holds its shape before anything loads, so the poster, the player and the
   loop all land in the same box and nothing below it jumps.
   -------------------------------------------------------------------------- */
.o-video-hero__media {
	min-width: 0;
}

.o-video-hero__frame {
	position: relative;
	aspect-ratio: var(--o-video-ratio, 16 / 9);
	overflow: hidden;
	background-color: var(--o-navy);
	box-shadow: var(--o-shadow-card);
}

.o-video-hero__poster,
.o-video-hero__video,
.o-video-hero__frame iframe,
.o-video-hero__frame > video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.o-video-hero__poster,
.o-video-hero__video {
	object-fit: cover;
}

.o-video-hero__poster {
	transition: transform var(--o-transition-slow);
}

/* A player the visitor started is letterboxed, never cropped. */
.o-video-hero__frame.is-playing > video {
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Play button
   The whole poster is the button; the disc is where the eye goes. Same disc
   as the Testimonials video story.
   -------------------------------------------------------------------------- */
/*
 * A file frame is a working native player until the script has swapped its
 * controls for the button, so it only takes the scrim once that is done.
 */
.o-video-hero__frame--play:not(.o-video-hero__frame--file):not(.is-playing)::after,
.o-video-hero__frame--file.is-ready:not(.is-playing)::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--o-scrim-light);
	pointer-events: none;
}

.o-video-hero__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--o-white);
	cursor: pointer;
}

.o-video-hero__play[hidden] {
	display: none;
}

.o-video-hero__play:focus-visible {
	outline-offset: -6px;
}

.o-video-hero__play-disc {
	display: grid;
	place-items: center;
	width: clamp(4rem, 3rem + 2vw, 5rem); /* 64 -> 80 */
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--o-orange);
	box-shadow: var(--o-shadow-float);
	transition: background-color var(--o-transition), transform var(--o-transition);
}

.o-video-hero__play-glyph {
	width: 55%;
	height: auto;
}

.o-video-hero__play:hover .o-video-hero__play-disc,
.o-video-hero__play:focus-visible .o-video-hero__play-disc {
	background-color: var(--o-orange-dark);
	transform: scale(1.06);
}

.o-video-hero__frame--play:hover .o-video-hero__poster {
	transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Silent loop: pause / play in the lower corner
   -------------------------------------------------------------------------- */
.o-video-hero__toggle {
	position: absolute;
	right: var(--o-space-md);
	bottom: var(--o-space-md);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(15, 31, 64, 0.6);
	color: var(--o-white);
	box-shadow: var(--o-shadow-float);
	cursor: pointer;
	transition: background-color var(--o-transition);
}

.o-video-hero__toggle[hidden] {
	display: none;
}

.o-video-hero__toggle:hover,
.o-video-hero__toggle:focus-visible {
	background-color: var(--o-orange);
}

.o-video-hero__toggle-glyph {
	width: 20px;
	height: 20px;
}

/* Shows the action, not the state: pause while playing, play while paused. */
.o-video-hero__frame--loop:not(.is-paused) .o-video-hero__toggle-glyph--play,
.o-video-hero__frame--loop.is-paused .o-video-hero__toggle-glyph--pause {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.o-video-hero__play:hover .o-video-hero__play-disc,
	.o-video-hero__play:focus-visible .o-video-hero__play-disc,
	.o-video-hero__frame--play:hover .o-video-hero__poster {
		transform: none;
	}
}

/* Editor-only affordance so the frame is visible while a page is being built. */
.o-video-hero__frame--empty {
	display: grid;
	place-items: center;
	border: 2px dashed var(--o-rule);
	background-color: transparent;
	box-shadow: none;
	color: var(--o-text-soft);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   The wave pattern
   The shared .o-pattern (components.css) across the whole band - behind the
   copy and the video alike, never clipped at the frame. The default fade keeps
   the waves strongest on the video side and lightens them under the copy
   without letting them run out, so no wave stops halfway across.
   -------------------------------------------------------------------------- */
.o-video-hero__pattern {
	opacity: 0.3;
}

.o-video-hero__pattern--soft-right {
	--o-pattern-fade: linear-gradient(to left, #000 0%, #000 35%, rgba(0, 0, 0, 0.35) 100%);
}

.o-video-hero__pattern--soft-left {
	--o-pattern-fade: linear-gradient(to right, #000 0%, #000 35%, rgba(0, 0, 0, 0.35) 100%);
}

/* --------------------------------------------------------------------------
   Side by side
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-video-hero--media-right {
		grid-template-columns: minmax(0, 1fr) var(--o-video-width);
	}

	.o-video-hero--media-left {
		grid-template-columns: var(--o-video-width) minmax(0, 1fr);
	}

	/* The copy stays first in the markup; the grid moves the video across. */
	.o-video-hero--media-left .o-video-hero__media {
		grid-column: 1;
		grid-row: 1;
	}

	.o-video-hero--media-left .o-video-hero__text {
		grid-column: 2;
		grid-row: 1;
	}
}