/* =========================================================================
   Responsive Video Banner — front-end styles
   Config comes from per-instance CSS variables set inline by the shortcode:
     --rvb-min-h  --rvb-vh  --rvb-max-h  --rvb-focal-x  --rvb-focal-y  --rvb-accent
   Responsive breakpoints below override the consuming PROPERTIES (height,
   etc.) rather than the variables, so inline config keeps working.
   ========================================================================= */

.rvb {
	position: relative;
	width: 100%;
	height: clamp(var(--rvb-min-h, 440px), var(--rvb-vh, 82vh), var(--rvb-max-h, 860px));
	overflow: clip;
	isolation: isolate;
	background: #0c0e16;
	color: #f4f1ea;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.rvb *,
.rvb *::before,
.rvb *::after { box-sizing: border-box; }

/* Poster background: paints instantly and is the fallback when no JS / reduced motion. */
.rvb__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ---- Self-hosted <video>: cover the banner directly ---------------------- */
.rvb__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--rvb-focal-x, 50%) var(--rvb-focal-y, 50%);
	display: block;
}

/* ---- YouTube / Vimeo iframe: oversize + center so it covers ------------- */
/* The iframe's pixel width/height are set by JS (ResizeObserver) to the
   smallest 16:9 box that fully covers the banner; we just center it here. */
.rvb__embed {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none; /* background video shouldn't capture clicks */
	overflow: hidden;
}
.rvb__embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	/* width/height set inline by JS; fallback keeps it covering before JS runs */
	width: 100%;
	height: 100%;
}

/* ---- Legibility scrim ---------------------------------------------------- */
.rvb__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(8,10,18,.86) 0%, rgba(8,10,18,.45) 34%, rgba(8,10,18,.10) 60%, transparent 78%),
		linear-gradient(105deg, rgba(8,10,18,.55) 0%, rgba(8,10,18,.18) 42%, transparent 70%);
}
.rvb--no-scrim .rvb__scrim { display: none; }

/* ---- Content ------------------------------------------------------------- */
.rvb__content {
	position: relative;
	z-index: 2;
	height: 100%;
	width: min(1180px, 92%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: clamp(28px, 6vh, 72px);
	gap: clamp(14px, 2.4vh, 26px);
}
.rvb--center .rvb__content {
	justify-content: center;
	align-items: center;
	text-align: center;
}

.rvb__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	align-self: flex-start;
	font-size: clamp(.7rem, .62rem + .3vw, .82rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--rvb-accent, #e8b04b);
	font-weight: 700;
}
.rvb--center .rvb__eyebrow { align-self: center; }
.rvb__eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--rvb-accent, #e8b04b);
	display: inline-block;
}

.rvb__title {
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(2.3rem, 1.2rem + 5.2vw, 5.4rem);
	line-height: .98;
	letter-spacing: -.01em;
	margin: 0;
	max-width: 16ch;
	text-wrap: balance;
}
.rvb--center .rvb__title { max-width: 20ch; }
.rvb__title em { font-style: italic; color: var(--rvb-accent, #e8b04b); }

.rvb__sub {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, .92rem + .5vw, 1.22rem);
	line-height: 1.55;
	color: rgba(244,241,234,.78);
}

.rvb__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.rvb--center .rvb__actions { justify-content: center; }

.rvb__btn {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	border: 0;
	padding: .92em 1.7em;
	border-radius: 999px;
	text-decoration: none;
	font-size: clamp(.9rem, .85rem + .2vw, 1rem);
	transition: transform .18s ease, background .18s ease, color .18s ease;
}
.rvb__btn:hover { transform: translateY(-2px); }
.rvb__btn--solid { background: var(--rvb-accent, #e8b04b); color: #1a1205; }
.rvb__btn--solid:hover { filter: brightness(1.08); }
.rvb__btn--ghost {
	background: rgba(244,241,234,.08);
	color: #f4f1ea;
	border: 1px solid rgba(244,241,234,.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.rvb__btn--ghost:hover { background: rgba(244,241,234,.16); }

/* ---- Play / pause toggle ------------------------------------------------- */
.rvb__toggle {
	position: absolute;
	z-index: 3;
	right: clamp(16px, 3vw, 32px);
	top: clamp(16px, 3vw, 32px);
	width: 46px;
	height: 46px;
	border-radius: 999px;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: #f4f1ea;
	border: 1px solid rgba(244,241,234,.4);
	background: rgba(8,10,18,.4);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background .18s ease, transform .18s ease;
}
.rvb__toggle:hover { background: rgba(8,10,18,.7); transform: scale(1.06); }
.rvb__toggle svg { width: 18px; height: 18px; fill: currentColor; }
.rvb__ico-pause { display: none; }
.rvb.is-playing .rvb__ico-play { display: none; }
.rvb.is-playing .rvb__ico-pause { display: block; }

/* ---- Responsive breakpoints (override the height property directly) ------ */
@media (max-aspect-ratio: 3/4) { /* portrait / tall phones & tablets */
	.rvb { height: clamp(var(--rvb-min-h, 440px), 74vh, var(--rvb-max-h, 860px)); }
}
@media (max-height: 520px) and (orientation: landscape) { /* short landscape phones */
	.rvb { height: clamp(300px, 96vh, var(--rvb-max-h, 860px)); }
	.rvb__content { justify-content: center; }
}
@media (min-width: 1700px) { /* ultra-wide: a touch more height to limit top/bottom crop */
	.rvb { height: clamp(var(--rvb-min-h, 440px), var(--rvb-vh, 82vh), 1000px); }
}

/* ---- Reduced motion / data saver: poster only --------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rvb__media,
	.rvb__embed,
	.rvb__toggle { display: none; }
}