/* components/hero/hero.css — loaded lazily when hero component renders */

/* ── Base ───────────────────────────────────────────────────────────────── */
.mvc-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	--hero-overlay-opacity: 0.4;
}

/* ── Height variants ────────────────────────────────────────────────────── */
.mvc-hero--full { min-height: 100dvh; }
.mvc-hero--tall { min-height: 75vh; min-height: clamp(480px, 75vh, 800px); }
.mvc-hero--md   { min-height: 55vh; min-height: clamp(360px, 55vh, 600px); }
.mvc-hero--sm   { min-height: 360px; }

/* ── Background media ───────────────────────────────────────────────────── */
.mvc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.mvc-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ── Slideshow crossfade ────────────────────────────────────────────────── */

/*
 * Each slide: visible 5s, fade 1s, hidden for remainder of cycle.
 * Cycle = N × 6s. Each slide starts its own animation at delay = index × 6s.
 * Keyframe % = time / total-cycle-duration.
 *
 * 2 slides: cycle=12s  → hold=5s(41.66%), fade=1s(8.33%), hidden=50%
 * 3 slides: cycle=18s  → hold=5s(27.77%), fade=1s(5.55%), hidden=66.66%
 * 4 slides: cycle=24s  → hold=5s(20.83%), fade=1s(4.16%), hidden=75%
 * 5 slides: cycle=30s  → hold=5s(16.66%), fade=1s(3.33%), hidden=80%
 */

.mvc-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
}

/* 2 slides */
@keyframes mvc-slide-2 {
	0%      { opacity: 1; }
	41.66%  { opacity: 1; }
	50%     { opacity: 0; }
	100%    { opacity: 0; }
}
.mvc-hero--slides-2 .mvc-hero__slide           { animation: mvc-slide-2 12s linear infinite; }
.mvc-hero--slides-2 .mvc-hero__slide:nth-child(1) { animation-delay:  0s; opacity: 1; }
.mvc-hero--slides-2 .mvc-hero__slide:nth-child(2) { animation-delay: -6s; }

/* 3 slides */
@keyframes mvc-slide-3 {
	0%      { opacity: 1; }
	27.77%  { opacity: 1; }
	33.33%  { opacity: 0; }
	100%    { opacity: 0; }
}
.mvc-hero--slides-3 .mvc-hero__slide           { animation: mvc-slide-3 18s linear infinite; }
.mvc-hero--slides-3 .mvc-hero__slide:nth-child(1) { animation-delay:   0s; opacity: 1; }
.mvc-hero--slides-3 .mvc-hero__slide:nth-child(2) { animation-delay:  -6s; }
.mvc-hero--slides-3 .mvc-hero__slide:nth-child(3) { animation-delay: -12s; }

/* 4 slides */
@keyframes mvc-slide-4 {
	0%      { opacity: 1; }
	20.83%  { opacity: 1; }
	25%     { opacity: 0; }
	100%    { opacity: 0; }
}
.mvc-hero--slides-4 .mvc-hero__slide           { animation: mvc-slide-4 24s linear infinite; }
.mvc-hero--slides-4 .mvc-hero__slide:nth-child(1) { animation-delay:   0s; opacity: 1; }
.mvc-hero--slides-4 .mvc-hero__slide:nth-child(2) { animation-delay:  -6s; }
.mvc-hero--slides-4 .mvc-hero__slide:nth-child(3) { animation-delay: -12s; }
.mvc-hero--slides-4 .mvc-hero__slide:nth-child(4) { animation-delay: -18s; }

/* 5 slides */
@keyframes mvc-slide-5 {
	0%      { opacity: 1; }
	16.66%  { opacity: 1; }
	20%     { opacity: 0; }
	100%    { opacity: 0; }
}
.mvc-hero--slides-5 .mvc-hero__slide           { animation: mvc-slide-5 30s linear infinite; }
.mvc-hero--slides-5 .mvc-hero__slide:nth-child(1) { animation-delay:   0s; opacity: 1; }
.mvc-hero--slides-5 .mvc-hero__slide:nth-child(2) { animation-delay:  -6s; }
.mvc-hero--slides-5 .mvc-hero__slide:nth-child(3) { animation-delay: -12s; }
.mvc-hero--slides-5 .mvc-hero__slide:nth-child(4) { animation-delay: -18s; }
.mvc-hero--slides-5 .mvc-hero__slide:nth-child(5) { animation-delay: -24s; }

/* Respect reduced motion — show only first slide, no animation */
@media (prefers-reduced-motion: reduce) {
	.mvc-hero__slide                    { animation: none !important; opacity: 0 !important; }
	.mvc-hero__slide:nth-child(1)       { opacity: 1 !important; }
}

.mvc-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * YouTube / Vimeo embed variant. Iframes can't use object-fit, so we size the
 * iframe larger than its container and scale it to "cover" via aspect-ratio +
 * absolute positioning. The 177.77vh / 56.25vw values are 16:9 (16/9 = 1.7777,
 * 9/16 = 0.5625) — whichever side is constrained by the viewport, the other
 * grows past it so the visible area is always filled.
 *
 * pointer-events:none keeps the iframe from stealing clicks from CTAs that sit
 * above it in the hero content layer.
 */
.mvc-hero__video--embed {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: 177.7777778vh;   /* 16:9 of viewport height */
	height: 56.25vw;        /* 9:16 of viewport width — whichever wins, the other overflows */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* Mobile: hide video, show fallback image */
@media (max-width: 767px) {
	.mvc-hero--video .mvc-hero__video { display: none; }
	.mvc-hero__img--video-fallback     { display: block; }
}

@media (min-width: 768px) {
	.mvc-hero__img--video-fallback { display: none; }
}

/* ── Parallax (single image only) ───────────────────────────────────────── */
/*
 * Parallax paints the image as a fixed-attachment background on .mvc-hero__media
 * and hides the <img> tag. The image URL is passed via the --hero-bg-image
 * custom property set inline by hero.php.
 *
 * iOS Safari and most mobile browsers ignore background-attachment: fixed
 * (or render it badly), so we disable below 1024px and fall back to the
 * regular scrolling image. The <img> is restored on those breakpoints.
 */
.mvc-hero--parallax .mvc-hero__media {
	background-image: var(--hero-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.mvc-hero--parallax .mvc-hero__img {
	display: none;
}

@media (max-width: 1023px) {
	.mvc-hero--parallax .mvc-hero__media {
		background-image: none;
		background-attachment: scroll;
	}
	.mvc-hero--parallax .mvc-hero__img {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mvc-hero--parallax .mvc-hero__media {
		background-attachment: scroll;
	}
}

/* ── Overlay ────────────────────────────────────────────────────────────── */
/*
 * Overlay direction is auto-derived from hero_layout in hero.php:
 *   layout=left     → .mvc-hero--overlay-left   (soft fade from left)
 *   layout=right    → .mvc-hero--overlay-right  (soft fade from right)
 *   layout=centered → .mvc-hero--overlay-bottom (bottom-heavy gradient)
 *   layout=split    → .mvc-hero--overlay-bottom
 * Side directions use a soft, wide gradient so the dark side reads as
 * moody lighting rather than an obvious overlay panel.
 */
.mvc-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mvc-hero--overlay-bottom .mvc-hero__overlay {
	background: var(--mvc-gradient-overlay,
		linear-gradient(to top,
			rgba(0,0,0,calc(var(--hero-overlay-opacity) * 1.4)) 0%,
			rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.7)) 50%,
			rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.2)) 100%));
}

.mvc-hero--overlay-left .mvc-hero__overlay {
	background: linear-gradient(to right,
		rgba(0,0,0,calc(var(--hero-overlay-opacity) * 1.7)) 0%,
		rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.9)) 30%,
		rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.3)) 60%,
		transparent 100%);
}

.mvc-hero--overlay-right .mvc-hero__overlay {
	background: linear-gradient(to left,
		rgba(0,0,0,calc(var(--hero-overlay-opacity) * 1.7)) 0%,
		rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.9)) 30%,
		rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.3)) 60%,
		transparent 100%);
}

/* On narrow screens, side overlays don't help legibility — the text
 * usually stacks full-width — so fall back to the bottom gradient. */
@media (max-width: 767px) {
	.mvc-hero--overlay-left .mvc-hero__overlay,
	.mvc-hero--overlay-right .mvc-hero__overlay {
		background: linear-gradient(to top,
			rgba(0,0,0,calc(var(--hero-overlay-opacity) * 1.4)) 0%,
			rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.7)) 50%,
			rgba(0,0,0,calc(var(--hero-overlay-opacity) * 0.2)) 100%);
	}
}

/* ── Inner content ──────────────────────────────────────────────────────── */
.mvc-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--space-16);
}

.mvc-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* ── Layout variants ────────────────────────────────────────────────────── */
.mvc-hero--centered .mvc-hero__content {
	align-items: center;
	text-align: center;
	max-width: 800px;
	margin-inline: auto;
}

/*
 * Left/right hero layouts: tighten container so text sits closer to the
 * viewport edge (the default .mvc-container caps width and adds large
 * inline padding, which leaves left-aligned hero text floating well in
 * from the edge — looks weak on wide screens).
 */
.mvc-hero--left .mvc-hero__inner,
.mvc-hero--right .mvc-hero__inner {
	max-width: none;
	padding-inline: var(--space-8);
}

@media (min-width: 1024px) {
	.mvc-hero--left .mvc-hero__inner,
	.mvc-hero--right .mvc-hero__inner {
		padding-inline: var(--space-10);
	}
}

.mvc-hero--left .mvc-hero__content {
	align-items: flex-start;
	max-width: 650px;
}

.mvc-hero--right .mvc-hero__inner {
	display: flex;
	justify-content: flex-end;
}

.mvc-hero--right .mvc-hero__content {
	align-items: flex-end;
	text-align: right;
	max-width: 650px;
}

.mvc-hero--right .mvc-hero__subheadline {
	margin-left: auto;
}

.mvc-hero--right .mvc-hero__ctas {
	justify-content: flex-end;
}

.mvc-hero--split .mvc-hero__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
	max-width: none;
}

@media (max-width: 767px) {
	.mvc-hero--split .mvc-hero__content {
		grid-template-columns: 1fr;
	}
}

/* ── Text color ─────────────────────────────────────────────────────────── */
.mvc-hero--light .mvc-hero__headline,
.mvc-hero--light .mvc-hero__subheadline {
	color: var(--color-text-inverse);
}

.mvc-hero--dark .mvc-hero__headline,
.mvc-hero--dark .mvc-hero__subheadline {
	color: var(--color-heading);
}

/* ── Eyebrow ────────────────────────────────────────────────────────────── */
.mvc-hero__eyebrow {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvc-color-accent, var(--color-accent));
	margin: 0;
}

.mvc-hero--light .mvc-hero__eyebrow {
	color: var(--mvc-color-accent, var(--color-accent));
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.mvc-hero__headline {
	font-size: var(--text-5xl);
	font-weight: var(--mvc-font-weight-heading, var(--font-weight-bold, 700));
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

.mvc-hero__subheadline {
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	max-width: 60ch;
	margin: 0;
}

.mvc-hero--centered .mvc-hero__subheadline {
	margin-inline: auto;
}

@media (max-width: 767px) {
	.mvc-hero__headline { font-size: var(--text-4xl); }
	.mvc-hero__subheadline { font-size: var(--text-lg); }
}

@media (max-width: 479px) {
	.mvc-hero__headline { font-size: var(--text-3xl); }
}

/* ── CTAs ───────────────────────────────────────────────────────────────── */
.mvc-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.mvc-hero--centered .mvc-hero__ctas {
	align-self: center;
	justify-content: center;
}

/* ── Inline rating row (hero_trust_bar toggle) ───────────────────────────────
   Slim "stars · rating · count" row beneath the CTAs. Inherits text color from
   .mvc-hero--light / --dark via currentColor so it reads correctly on any bg.
   Star glyph styling lives in utilities.css (.mvc-stars / .mvc-star). */
.mvc-hero__rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	opacity: 0.95;
}

.mvc-hero--centered .mvc-hero__rating {
	justify-content: center;
}

.mvc-hero__rating .mvc-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
}

.mvc-hero__rating-value {
	font-weight: var(--font-weight-bold, 700);
}

.mvc-hero__rating-sep {
	opacity: 0.6;
}

.mvc-hero__rating-count {
	font-weight: var(--font-weight-medium);
}

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Cinematic overlay — full-height, strong dark vignette, text bottom-left */
.mvc-hero--style-cinematic-overlay {
	min-height: 100dvh;
}
.mvc-hero--style-cinematic-overlay .mvc-hero__overlay {
	background: linear-gradient(
		to top,
		rgba(0,0,0,0.85) 0%,
		rgba(0,0,0,0.35) 50%,
		rgba(0,0,0,0.1) 100%
	);
}
.mvc-hero--style-cinematic-overlay .mvc-hero__content {
	align-items: flex-start;
	max-width: 700px;
	padding-block: var(--space-24) var(--space-20);
}

/* Cinematic clean — same framing as cinematic-overlay, NO dark gradient.
   For video backgrounds where the overlay would crush motion and color.
   Text-shadow keeps the headline legible against bright moments in the
   footage without dimming the video itself. */
.mvc-hero--style-cinematic-clean {
	min-height: 100dvh;
}
.mvc-hero--style-cinematic-clean .mvc-hero__overlay {
	background: none;
}
.mvc-hero--style-cinematic-clean .mvc-hero__content {
	align-items: flex-start;
	max-width: 700px;
	padding-block: var(--space-24) var(--space-20);
	text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

/* Split image right/left — section becomes a two-column grid */
.mvc-hero--style-split-image-right,
.mvc-hero--style-split-image-left {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 60vh;
	background-color: var(--color-surface);
	overflow: hidden;
}

/* Pull media out of absolute flow — make it a normal grid child */
.mvc-hero--style-split-image-right .mvc-hero__media,
.mvc-hero--style-split-image-left .mvc-hero__media {
	position: relative;
	inset: unset;
	min-height: 480px;
}

/* Image right: media goes to column 2 */
.mvc-hero--style-split-image-right .mvc-hero__media { order: 2; }

.mvc-hero--style-split-image-right .mvc-hero__overlay,
.mvc-hero--style-split-image-left .mvc-hero__overlay { display: none; }

/* Inner fills its grid cell, centers content vertically */
.mvc-hero--style-split-image-right .mvc-hero__inner,
.mvc-hero--style-split-image-left .mvc-hero__inner {
	position: static;
	display: flex;
	align-items: center;
	padding: var(--space-12) var(--space-10);
	width: 100%;
}

/* Dark text — overrides mvc-hero--light */
.mvc-hero--style-split-image-right .mvc-hero__headline,
.mvc-hero--style-split-image-left .mvc-hero__headline,
.mvc-hero--style-split-image-right .mvc-hero__subheadline,
.mvc-hero--style-split-image-left .mvc-hero__subheadline {
	color: var(--color-heading) !important;
}

/* Centered overlay — wide card spanning most of the hero width */
.mvc-hero--style-centered-overlay .mvc-hero__inner {
	padding-inline: var(--space-6);
}
.mvc-hero--style-centered-overlay .mvc-hero__content {
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding: var(--space-12) var(--space-16);
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
	.mvc-hero--style-centered-overlay .mvc-hero__content {
		padding: var(--space-8) var(--space-6);
	}
}

/* Gradient fade — deep brand gradient background, no image needed */
.mvc-hero--style-gradient-fade {
	background: var(--mvc-gradient-hero,
		linear-gradient(150deg, #080e25 0%, var(--mvc-color-primary, var(--color-primary)) 55%, #0f2060 100%));
}
.mvc-hero--style-gradient-fade .mvc-hero__media  { display: none; }
.mvc-hero--style-gradient-fade .mvc-hero__overlay { display: none; }
.mvc-hero--style-gradient-fade .mvc-hero__headline,
.mvc-hero--style-gradient-fade .mvc-hero__subheadline { color: var(--color-brand-light, #ffffff); }

/* Gradient mesh — radial ambient mesh for premium hero sections */
.mvc-hero--style-gradient-mesh {
	background: var(--mvc-gradient-mesh-dark,
		radial-gradient(ellipse 80% 60% at 20% 40%, rgba(27,43,107,0.55) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 70%, rgba(37,99,235,0.22) 0%, transparent 60%),
		#0f172a);
}
.mvc-hero--style-gradient-mesh .mvc-hero__media  { display: none; }
.mvc-hero--style-gradient-mesh .mvc-hero__overlay { display: none; }
.mvc-hero--style-gradient-mesh .mvc-hero__headline,
.mvc-hero--style-gradient-mesh .mvc-hero__subheadline { color: var(--color-brand-light, #ffffff); }

/* Brand overlay — photo hero with navy-brand gradient overlay instead of plain black */
.mvc-hero--style-brand-overlay .mvc-hero__overlay {
	background: var(--mvc-gradient-overlay-brand,
		linear-gradient(to top,
			rgba(27,43,107,0.92) 0%,
			rgba(27,43,107,0.48) 50%,
			transparent 100%));
}

/* Minimal text — light surface, dark text, no media */
.mvc-hero--style-minimal-text {
	background-color: var(--color-bg-alt);
	min-height: 360px;
}
.mvc-hero--style-minimal-text .mvc-hero__media { display: none; }
.mvc-hero--style-minimal-text .mvc-hero__overlay { display: none; }
.mvc-hero--style-minimal-text .mvc-hero__headline,
.mvc-hero--style-minimal-text .mvc-hero__subheadline {
	color: var(--color-heading);
}

/* ── Stacked layouts (text above or below banner image) ─────────────────────
 *
 * Image becomes a full-bleed banner in its own band; text sits in a separate
 * band above or below. Differs from base hero (text overlaid on bg media):
 *
 *   - Section is a 2-row grid: [media] + [content], not a flex/absolute stack
 *   - .mvc-hero__media leaves absolute flow and takes its height from the
 *     hero_height variant (full / tall / md / sm)
 *   - Section's own min-height is cleared so the content band grows naturally
 *   - Overlay is suppressed in PHP (no text-on-image legibility concern)
 *   - Parallax falls back to a regular scrolling banner (background-attachment
 *     fixed doesn't make sense on a band that scrolls past the viewport)
 *   - Order swap on .mvc-hero--stacked-text-top puts content in row 1
 */
.mvc-hero--stacked {
	display: grid;
	grid-template-rows: auto auto;
	align-items: stretch;
	min-height: 0;
}

/* Media band: leaves absolute flow, takes height from hero_height variants */
.mvc-hero--stacked .mvc-hero__media {
	position: relative;
	inset: unset;
	width: 100%;
}

.mvc-hero--stacked.mvc-hero--full .mvc-hero__media { height: 75vh; height: clamp(480px, 75vh, 800px); }
.mvc-hero--stacked.mvc-hero--tall .mvc-hero__media { height: 60vh; height: clamp(400px, 60vh, 640px); }
.mvc-hero--stacked.mvc-hero--md   .mvc-hero__media { height: 45vh; height: clamp(320px, 45vh, 520px); }
.mvc-hero--stacked.mvc-hero--sm   .mvc-hero__media { height: 320px; }

/* Content band: leaves absolute flow, sits in its own row */
.mvc-hero--stacked .mvc-hero__inner {
	position: relative;
	padding-block: var(--space-12);
}

/* Text-top: content first, banner second */
.mvc-hero--stacked-text-top .mvc-hero__inner   { order: 1; }
.mvc-hero--stacked-text-top .mvc-hero__media   { order: 2; }
.mvc-hero--stacked-text-bottom .mvc-hero__media { order: 1; }
.mvc-hero--stacked-text-bottom .mvc-hero__inner { order: 2; }

/* Default alignment for stacked text — centered like the base centered layout.
 * Headlines and CTAs sit in a clean column rather than running edge-to-edge. */
.mvc-hero--stacked .mvc-hero__content {
	align-items: center;
	text-align: center;
	max-width: 800px;
	margin-inline: auto;
}
.mvc-hero--stacked .mvc-hero__subheadline { margin-inline: auto; }
.mvc-hero--stacked .mvc-hero__ctas        { justify-content: center; }
.mvc-hero--stacked .mvc-hero__rating      { justify-content: center; }

/* Stacked text uses on-page colors, not light-on-image. The base
 * .mvc-hero--light rules force inverse text color assuming text sits on a
 * dark image; in stacked mode the content band has no image behind it. */
.mvc-hero--stacked.mvc-hero--light .mvc-hero__headline,
.mvc-hero--stacked.mvc-hero--light .mvc-hero__subheadline {
	color: var(--color-heading);
}

/* Parallax + stacked: parallax CSS hides the <img> and paints a fixed bg on
 * .mvc-hero__media. Neither works inside a scrolling band — restore the img
 * and drop the fixed-attachment paint. */
.mvc-hero--stacked.mvc-hero--parallax .mvc-hero__media {
	background-image: none;
	background-attachment: scroll;
}
.mvc-hero--stacked.mvc-hero--parallax .mvc-hero__img {
	display: block;
}

/* ── Video caption mode ─────────────────────────────────────────────────── */

/* Height classes still apply; video fills the section naturally via object-fit */
.mvc-hero--video-caption-mode .mvc-hero__inner {
	display: none; /* no overlay content */
}

.mvc-hero-caption {
	padding-block: var(--space-8) var(--space-6);
	background: var(--hero-caption-bg, transparent);
	text-align: center;
}

.mvc-hero-caption--has-bg {
	padding-block: var(--space-10) var(--space-8);
}

.mvc-hero-caption__eyebrow {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvc-color-accent, var(--color-accent));
	margin: 0 0 var(--space-3);
}

.mvc-hero-caption__headline {
	font-size: var(--text-4xl);
	font-weight: var(--mvc-font-weight-heading, var(--font-weight-bold, 700));
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--hero-caption-color, var(--color-heading));
	margin: 0 auto;
	max-width: 800px;
}

@media (max-width: 767px) {
	.mvc-hero-caption__headline { font-size: var(--text-3xl); }
}

@media (max-width: 767px) {
	.mvc-hero--style-split-image-right,
	.mvc-hero--style-split-image-left {
		grid-template-columns: 1fr;
	}
	.mvc-hero--style-split-image-right .mvc-hero__media,
	.mvc-hero--style-split-image-left .mvc-hero__media {
		min-height: 260px;
		order: -1;
	}
	.mvc-hero--style-split-image-right .mvc-hero__inner,
	.mvc-hero--style-split-image-left .mvc-hero__inner {
		padding: var(--space-8) var(--space-6);
	}
}

/* ── Hero Search Bar ─────────────────────────────────────────────────────────
   Opt-in search field + popular-search pill tags. Designed for dark/overlay
   heroes: the input is a frosted glass pill so it reads cleanly over any
   background. The tag pills inherit the hero text colour and use a subtle
   semi-transparent fill. */

.mvc-hero__search {
	width: 100%;
	max-width: 38rem;
	margin-block-start: var(--space-8);
}

/* Centre the search bar when the hero layout is centred */
.mvc-hero--centered .mvc-hero__search {
	margin-inline: auto;
}

/* ── Input row ── */

.mvc-hero-search {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.mvc-hero-search__field-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.mvc-hero-search__input {
	width: 100%;
	padding: var(--space-4) var(--space-14, 3.5rem) var(--space-4) var(--space-5);
	border-radius: var(--radius-full, 999px);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: var(--text-base);
	line-height: 1.4;
	outline: none;
	transition: border-color var(--duration-fast, 150ms) ease,
	            background  var(--duration-fast, 150ms) ease,
	            box-shadow  var(--duration-fast, 150ms) ease;
	/* Suppress browser default search-cancel button */
	-webkit-appearance: none;
	appearance: none;
}

.mvc-hero-search__input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.mvc-hero-search__input:focus {
	border-color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* On light/color hero backgrounds use dark input treatment */
.mvc-hero--light .mvc-hero-search__input,
.mvc-hero--color .mvc-hero-search__input {
	border-color: var(--color-border, rgba(15, 23, 42, 0.2));
	background: #fff;
	color: var(--color-text);
}

.mvc-hero--light .mvc-hero-search__input::placeholder,
.mvc-hero--color .mvc-hero-search__input::placeholder {
	color: var(--color-text-muted);
}

.mvc-hero--light .mvc-hero-search__input:focus,
.mvc-hero--color .mvc-hero-search__input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-subtle, rgba(30, 64, 175, 0.12));
	background: #fff;
}

/* ── Submit button ── */

.mvc-hero-search__btn {
	position: absolute;
	inset-inline-end: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full, 999px);
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-primary, #1e40af);
	cursor: pointer;
	transition: background var(--duration-fast, 150ms) ease,
	            transform  var(--duration-fast, 150ms) ease;
	flex-shrink: 0;
}

.mvc-hero-search__btn:hover,
.mvc-hero-search__btn:focus-visible {
	background: #fff;
	transform: scale(1.06);
}

.mvc-hero--light .mvc-hero-search__btn,
.mvc-hero--color .mvc-hero-search__btn {
	background: var(--color-primary);
	color: var(--color-on-primary, #fff);
}

.mvc-hero--light .mvc-hero-search__btn:hover,
.mvc-hero--color .mvc-hero-search__btn:hover {
	background: var(--color-primary-dark, var(--color-primary));
}

/* ── Popular search tags ── */

.mvc-hero-search__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.mvc-hero-search__tags-label {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
}

.mvc-hero--light .mvc-hero-search__tags-label,
.mvc-hero--color .mvc-hero-search__tags-label {
	color: var(--color-text-muted);
}

.mvc-hero-search__tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvc-hero-search__tag {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full, 999px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: background var(--duration-fast, 150ms) ease,
	            border-color var(--duration-fast, 150ms) ease;
	white-space: nowrap;
}

.mvc-hero-search__tag:hover,
.mvc-hero-search__tag:focus-visible {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.7);
}

.mvc-hero--light .mvc-hero-search__tag,
.mvc-hero--color .mvc-hero-search__tag {
	border-color: var(--color-border, rgba(15, 23, 42, 0.15));
	background: var(--color-surface-alt, rgba(15, 23, 42, 0.04));
	color: var(--color-text);
}

.mvc-hero--light .mvc-hero-search__tag:hover,
.mvc-hero--color .mvc-hero-search__tag:hover {
	background: var(--color-primary-subtle, rgba(30, 64, 175, 0.08));
	border-color: var(--color-primary);
	color: var(--color-primary);
}

@media (max-width: 639px) {
	.mvc-hero__search {
		max-width: 100%;
	}

	.mvc-hero-search__tags-label {
		width: 100%;
	}
}