/* WBI Video Hero — front end + editor preview. Self-contained (no theme deps).
   The poster is painted as the section background so first paint never waits on
   the <video> element; --wbi-vh-poster / --wbi-vh-overlay are set inline by
   render.php (front end) and the editor edit() (preview). */

.wbi-video-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	min-height: clamp(560px, 80vh, 760px);
	background-color: #141110;
	background-image: var(--wbi-vh-poster, none);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

/* Poster as a real <img> (preloadable, high priority) — a far better LCP
   candidate than a CSS background. Sits below the video, which paints over it
   once it starts. */
.wbi-video-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.wbi-video-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* Legibility scrim over the video/poster. */
.wbi-video-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 17, 15, var(--wbi-vh-overlay, 0.35));
	z-index: 2;
	pointer-events: none;
}

.wbi-video-hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0.6rem;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(4rem, 10vh, 7rem) max(2rem, 6vw) clamp(2.5rem, 6vh, 4.5rem);
}

.wbi-video-hero__tagline {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 1rem;
	text-shadow: 0 1px 4px rgba(20, 17, 15, 0.6);
}

.wbi-video-hero__heading {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 2px 12px rgba(20, 17, 15, 0.6);
}

.wbi-video-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.wbi-video-hero__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}

.wbi-video-hero__btn--primary {
	background: #fff;
	color: #141110;
}

.wbi-video-hero__btn--secondary {
	border: 2px solid #fff;
	color: #fff;
}

.wbi-video-hero__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Pause / play control (WCAG 2.2.2). Hidden until view.js actually starts the
   video, so it only appears when there is moving content to pause. */
.wbi-video-hero__toggle {
	position: absolute;
	z-index: 5;
	right: max(1rem, 3vw);
	bottom: max(1rem, 3vh);
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(20, 17, 15, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wbi-video-hero.is-playing .wbi-video-hero__toggle {
	display: inline-flex;
}

.wbi-video-hero__toggle:hover {
	background: rgba(20, 17, 15, 0.8);
	border-color: #fff;
}

.wbi-video-hero__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.wbi-video-hero__icon {
	fill: currentColor;
	pointer-events: none;
}

/* Show the pause bars while playing, the play triangle while paused. */
.wbi-video-hero__icon--play { display: none; }
.wbi-video-hero.is-paused .wbi-video-hero__icon--pause { display: none; }
.wbi-video-hero.is-paused .wbi-video-hero__icon--play { display: inline; }

/* Reduced motion: never show/animate the video — the poster stands in, and
   there is nothing to pause. */
@media (prefers-reduced-motion: reduce) {
	.wbi-video-hero__video,
	.wbi-video-hero__toggle {
		display: none;
	}
}

/* ── Background-layer variant (wbi/video-bg) ──────────────────────────────────
   Dropped as the first child of a section; the video fills the section as an
   absolute background and the section's OTHER children (your GB text blocks)
   are lifted above it. No edits to Global Styles required. */
:where(*):has(> .wbi-video-bg):has(> .wbi-video-bg) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Bottom-align content robustly: if the section is given a fixed height that
	   is shorter than the content, the excess clips from the TOP and the content
	   (e.g. the heading) stays pinned to the bottom — instead of overflowing and
	   being clipped at the bottom. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* A full-bleed video section shouldn't carry the generic section padding
	   (which would float the content up from the bottom edge). The inner block
	   supplies its own padding. The doubled :has keeps this above gbp-section. */
	padding: 0;
}
/* Everything in the section except the video layer sits above the scrim.
   min-height:0 cancels any `min-height:inherit` that would force a child taller
   than the section (which is what pushes text past a fixed-height bottom edge). */
:where(*):has(> .wbi-video-bg) > :not(.wbi-video-bg) {
	position: relative;
	z-index: 2;
	min-height: 0;
}

.wbi-video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: #141110;
	color: #fff; /* the pause control inherits white */
}
/* Legibility scrim over the video (poster z0 < video z1 < scrim z1 < text z2 < toggle z5). */
.wbi-video-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 17, 15, var(--wbi-vh-overlay, 0.35));
	z-index: 1;
	pointer-events: none;
}
.wbi-video-bg.is-playing .wbi-video-hero__toggle {
	display: inline-flex;
}

/* Editor preview: the block has no <video>, only the poster background + text. */
.wbi-video-hero.is-editor-preview {
	min-height: clamp(420px, 60vh, 620px);
}