/* ==========================================================================
   VO4U Hero — front-end styles
   Varianten: A (split + carousel), E (foto + zwevende kaart), F (split + USP)
   Thema's: Klassiek (donker) en Fris (licht, lime als accent)
   ========================================================================== */

/* ---------- Thema: Klassiek (standaard, huidige stijl) ---------- */
.vo4u-hero--theme-klassiek {
	--vo4u-bg: #1F2A38;
	--vo4u-panel-bg: #ffffff;
	--vo4u-heading: #1F2A38;
	--vo4u-sub: #4a5560;
	--vo4u-badge-bg: #EAF3DE;
	--vo4u-badge-text: #3B6D11;
	--vo4u-cta-primary-bg: #97C459;
	--vo4u-cta-primary-text: #173404;
	--vo4u-cta-secondary-bg: rgba(255, 255, 255, 0.9);
	--vo4u-cta-secondary-text: #1F2A38;
	--vo4u-cta-secondary-border: rgba(31, 42, 56, 0.18);
	--vo4u-usp-bar-bg: #EAF3DE;
	--vo4u-usp-icon: #639922;
	--vo4u-usp-title: #1F2A38;
	--vo4u-usp-sub: #6b757f;
	--vo4u-divider: rgba(31, 42, 56, 0.1);
	--vo4u-card-shadow: 0 18px 48px rgba(15, 42, 56, 0.22);
	--vo4u-overlay: rgba(15, 42, 56, 0.25);
}

/* ---------- Thema: Fris (licht, lime als signatuur) ---------- */
.vo4u-hero--theme-fris {
	--vo4u-bg: #F4F7EE;
	--vo4u-panel-bg: #ffffff;
	--vo4u-heading: #1F2A38;
	--vo4u-sub: #5F6B72;
	--vo4u-badge-bg: #F4F7EE;
	--vo4u-badge-text: #5B7F2E;
	--vo4u-cta-primary-bg: #97C459;
	--vo4u-cta-primary-text: #173404;
	--vo4u-cta-secondary-bg: #ffffff;
	--vo4u-cta-secondary-text: #1F2A38;
	--vo4u-cta-secondary-border: #D6DCE2;
	--vo4u-usp-bar-bg: #F4F7EE;
	--vo4u-usp-icon: #639922;
	--vo4u-usp-title: #1F2A38;
	--vo4u-usp-sub: #5F6B72;
	--vo4u-divider: #EAEDF0;
	--vo4u-card-shadow: 0 12px 32px rgba(31, 42, 56, 0.16);
	--vo4u-overlay: rgba(244, 247, 238, 0.18);
}

.vo4u-hero {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--vo4u-bg, #1F2A38);
}

/* Banner met golf: de sectie wordt geclipt naar de golfvorm (clip-path
   inline gezet vanuit de widget). De clip-path snijdt de onderste strook
   golvend uit. Om te voorkomen dat tekst/USP-balk in die uitgesneden golf
   valt, schuift alleen de CONTENT omhoog via een spacer-marge — de
   achtergrond, foto en video lopen gewoon door tot de onderrand zodat ze
   ook in de bolling zichtbaar zijn. */
.vo4u-hero--has-wave .vo4u-hero__panel,
.vo4u-hero--has-wave .vo4u-hero__panel-wrap {
	padding-bottom: calc(var(--vo4u-wave-height, 70px) + 24px);
}

.vo4u-hero--has-wave.vo4u-hero--f .vo4u-hero__usps {
	margin-bottom: var(--vo4u-wave-height, 70px);
}

.vo4u-hero--has-wave {
	-webkit-clip-path: var(--vo4u-wave-clip);
	clip-path: var(--vo4u-wave-clip);
}

.vo4u-hero *,
.vo4u-hero *::before,
.vo4u-hero *::after {
	box-sizing: border-box;
}

/* ---------- Gedeeld: tekstpaneel ---------- */
.vo4u-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 40px;
}

.vo4u-hero__badge {
	display: inline-block;
	width: fit-content;
	padding: 4px 11px;
	border-radius: 6px;
	background: var(--vo4u-badge-bg);
	color: var(--vo4u-badge-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vo4u-hero__heading {
	margin: 0;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--vo4u-heading);
}

.vo4u-hero__sub {
	margin: 0;
	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.6;
	color: var(--vo4u-sub);
}

/* ---------- Gedeeld: CTA-knoppen ---------- */
.vo4u-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.vo4u-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.12s ease, color 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
	cursor: pointer;
}

.vo4u-hero__cta:hover {
	transform: translateY(-1px);
}

.vo4u-hero__cta:active {
	transform: translateY(0);
}

.vo4u-hero__cta--primary {
	background: var(--vo4u-cta-primary-bg);
	color: var(--vo4u-cta-primary-text);
}

.vo4u-hero__cta--primary:hover {
	color: #ffffff;
	filter: brightness(0.94);
}

.vo4u-hero__cta--secondary {
	background: var(--vo4u-cta-secondary-bg);
	color: var(--vo4u-cta-secondary-text);
	border: 1px solid var(--vo4u-cta-secondary-border);
}

.vo4u-hero__cta--secondary:hover {
	filter: brightness(0.97);
}

/* ---------- Gedeeld: media ---------- */
.vo4u-hero__media {
	position: relative;
	min-height: 280px;
	background: var(--vo4u-bg, #1F2A38);
}

.vo4u-hero__photo,
.vo4u-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.vo4u-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vo4u-hero__photo--placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #2b3a4a, #2b3a4a 16px, #31414f 16px, #31414f 32px);
}

.vo4u-hero__photo--placeholder span {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 500;
}

/* ---------- Carousel ---------- */
.vo4u-hero__carousel {
	position: absolute;
	inset: 0;
}

.vo4u-hero__slide {
	opacity: 0;
	transition: opacity 0.7s ease;
}

.vo4u-hero__slide.is-active {
	opacity: 1;
}

.vo4u-hero__dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
	z-index: 3;
}

.vo4u-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.vo4u-hero__dot.is-active {
	background: #ffffff;
}

/* ==========================================================================
   VARIANT A — split-hero met fotocarousel
   ========================================================================== */
.vo4u-hero--a .vo4u-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	min-height: inherit;
}

.vo4u-hero--a .vo4u-hero__panel {
	background: var(--vo4u-panel-bg);
}

/* ==========================================================================
   VARIANT E — grote foto/video met zwevende tekstkaart
   ========================================================================== */
.vo4u-hero--e {
	display: flex;
	align-items: center;
}

.vo4u-hero--e .vo4u-hero__media {
	position: absolute;
	inset: 0;
	min-height: inherit;
}

.vo4u-hero--e .vo4u-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vo4u-overlay);
	z-index: 1;
}

.vo4u-hero--e .vo4u-hero__panel-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 40px;
}

.vo4u-hero--e .vo4u-hero__panel {
	max-width: 540px;
	padding: 32px 34px;
	border-radius: 14px;
	background: var(--vo4u-panel-bg);
	box-shadow: var(--vo4u-card-shadow);
}

.vo4u-hero--e .vo4u-hero__dots--on-media {
	z-index: 3;
}

/* ==========================================================================
   VARIANT F — split-hero met USP's eronder (standaard)
   ========================================================================== */
.vo4u-hero--f {
	background: var(--vo4u-panel-bg);
	display: flex;
	flex-direction: column;
}

.vo4u-hero--f .vo4u-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	flex: 1;
}

.vo4u-hero--f .vo4u-hero__media {
	min-height: 100%;
}

/* ==========================================================================
   USP'S — gedeelde basis + drie plaatsingen (bar / card / pills)
   ========================================================================== */

/* Gedeeld: icoon en tekstblok. */
.vo4u-hero__usp-icon {
	display: inline-flex;
	font-size: 22px;
	color: var(--vo4u-usp-icon);
	flex-shrink: 0;
}

.vo4u-hero__usp-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.vo4u-hero__usp-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.vo4u-hero__usp-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--vo4u-usp-title);
}

.vo4u-hero__usp-sub {
	font-size: 12px;
	color: var(--vo4u-usp-sub);
}

/* ---------- Plaatsing: BALK onder de banner ---------- */
.vo4u-hero__usps--bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--vo4u-divider);
	background: var(--vo4u-usp-bar-bg);
}

.vo4u-hero__usps--bar .vo4u-hero__usp {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 16px 22px;
}

.vo4u-hero__usps--bar .vo4u-hero__usp + .vo4u-hero__usp {
	border-left: 1px solid var(--vo4u-divider);
}

/* ---------- Plaatsing: IN DE KAART, onder de knoppen ---------- */
.vo4u-hero__usps--card {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 0.5px solid var(--vo4u-divider);
}

.vo4u-hero__usps--card .vo4u-hero__usp {
	display: flex;
	align-items: center;
	gap: 7px;
}

.vo4u-hero__usps--card .vo4u-hero__usp-icon {
	font-size: 17px;
}

.vo4u-hero__usps--card .vo4u-hero__usp-title {
	font-size: 12px;
}

.vo4u-hero__usps--card .vo4u-hero__usp-sub {
	font-size: 11px;
}

/* ---------- Plaatsing: PILLEN op de foto ---------- */
.vo4u-hero__usps--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.vo4u-hero__usps--pills .vo4u-hero__usp {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.vo4u-hero__usps--pills .vo4u-hero__usp-icon {
	font-size: 16px;
}

.vo4u-hero__usps--pills .vo4u-hero__usp-title {
	font-size: 12px;
}

/* ==========================================================================
   GOLF onderaan — zie .vo4u-hero--has-wave bovenaan.
   ========================================================================== */

/* Accentkleur op de eerste regel van de kop. */
.vo4u-hero__heading-accent {
	color: inherit;
}

/* ==========================================================================
   VARIANTEN L–P — foto domineert, tekst minimaal
   ========================================================================== */

/* ---------- Gedeeld: foto-panes, scrims, content-lagen ---------- */
.vo4u-hero__pane {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	background: var(--vo4u-bg);
}

/* Pane-modifiers (--left/--right/--main/--tile) erven het basisgedrag;
   alleen --tile heeft een eigen minimumhoogte voor de mozaïek-tegels. */
.vo4u-hero__pane--tile {
	min-height: 140px;
}

.vo4u-hero__pane .vo4u-hero__photo,
.vo4u-hero__pane .vo4u-hero__video {
	position: absolute;
	inset: 0;
}

/* Scrim = donker verloop over de foto zodat tekst leesbaar blijft. */
.vo4u-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.vo4u-hero__scrim--bottom {
	background: linear-gradient(0deg, rgba(15, 28, 40, 0.85) 0%, rgba(15, 28, 40, 0.15) 45%, rgba(15, 28, 40, 0) 70%);
}

.vo4u-hero__scrim--top {
	background: linear-gradient(180deg, rgba(15, 28, 40, 0.85) 0%, rgba(15, 28, 40, 0.15) 45%, rgba(15, 28, 40, 0) 70%);
}

.vo4u-hero__scrim--mid {
	background: linear-gradient(90deg, rgba(15, 28, 40, 0.78) 0%, rgba(15, 28, 40, 0.32) 50%, rgba(15, 28, 40, 0.1) 100%);
}

.vo4u-hero__scrim--full {
	background: rgba(15, 28, 40, 0.45);
}

.vo4u-hero__scrim--corner {
	background: linear-gradient(120deg, rgba(15, 28, 40, 0.62) 0%, rgba(15, 28, 40, 0) 58%);
}

/* Content-laag ligt boven de scrim. */
.vo4u-hero__content {
	position: absolute;
	z-index: 2;
}

/* Tekst onderin de foto. */
.vo4u-hero__content--bottom {
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 36px;
}

/* Tekst bovenin de foto. */
.vo4u-hero__content--top {
	left: 0;
	right: 0;
	top: 0;
	padding: 36px 36px 32px;
}

/* Tekst verticaal gecentreerd op de foto. */
.vo4u-hero__content--mid {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px;
}

.vo4u-hero__content--center {
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 36px;
}

.vo4u-hero__content--corner {
	left: 0;
	max-width: 52%;
	padding: 34px 36px;
}

/* Variant O: verticale positie van het hoek-tekstblok. */
.vo4u-hero__content--corner.vo4u-hero__content--vpos-top {
	top: 0;
}

.vo4u-hero__content--corner.vo4u-hero__content--vpos-mid {
	top: 50%;
	transform: translateY(-50%);
}

.vo4u-hero__content--corner.vo4u-hero__content--vpos-bottom {
	bottom: 0;
}

/* Paneel dat op een foto ligt: geen kaart-achtergrond, lichte tekst. */
.vo4u-hero__panel--on-media {
	padding: 0;
	background: transparent;
	box-shadow: none;
	max-width: 620px;
}

.vo4u-hero__panel--on-media .vo4u-hero__heading {
	color: #ffffff;
}

.vo4u-hero__panel--on-media .vo4u-hero__sub {
	color: rgba(255, 255, 255, 0.88);
}

.vo4u-hero__content--center .vo4u-hero__panel--on-media {
	align-items: center;
}

/* ---------- Variant L — fullscreen foto, tekst onderin ---------- */
.vo4u-hero--l {
	position: relative;
}

.vo4u-hero--l .vo4u-hero__media {
	position: absolute;
	inset: 0;
	min-height: inherit;
}

/* ---------- Variant M — twee foto's, smalle tekstkolom ---------- */
.vo4u-hero--m .vo4u-hero__triptych {
	display: grid;
	grid-template-columns: 1fr minmax(200px, 260px) 1fr;
	min-height: inherit;
}

.vo4u-hero--m .vo4u-hero__column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--vo4u-panel-bg);
	text-align: center;
}

.vo4u-hero--m .vo4u-hero__column .vo4u-hero__panel {
	align-items: center;
	text-align: center;
}

/* ---------- Variant N — fullscreen foto, gecentreerde tekst ---------- */
.vo4u-hero--n {
	position: relative;
	display: flex;
	flex-direction: column;
}

.vo4u-hero--n .vo4u-hero__media {
	position: absolute;
	inset: 0;
	min-height: inherit;
}

/* ---------- Variant O — grote foto, USP's zwevend rechts ---------- */
.vo4u-hero--o {
	position: relative;
}

.vo4u-hero--o .vo4u-hero__media {
	position: absolute;
	inset: 0;
	min-height: inherit;
}

/* ---------- Variant P — foto-mozaïek ---------- */
.vo4u-hero--p .vo4u-hero__mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 5px;
	min-height: inherit;
}

.vo4u-hero--p .vo4u-hero__mosaic-main {
	position: relative;
	overflow: hidden;
}

.vo4u-hero--p .vo4u-hero__mosaic-side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 5px;
}

/* ==========================================================================
   USP-MODES voor de nieuwe varianten — inline / strip / float
   ========================================================================== */

/* inline = lichte vinkjes-rij, op een foto (variant L). */
.vo4u-hero__usps--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-top: 14px;
}

.vo4u-hero__usps--inline .vo4u-hero__usp {
	display: flex;
	align-items: center;
	gap: 7px;
}

.vo4u-hero__usps--inline .vo4u-hero__usp-icon {
	font-size: 16px;
	color: var(--vo4u-cta-primary-bg);
}

.vo4u-hero__usps--inline .vo4u-hero__usp-title {
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
}

/* strip = doorzichtige balk onder de banner (variant N, P). */
.vo4u-hero__usps--strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	padding: 13px 20px;
	background: rgba(15, 28, 40, 0.92);
}

.vo4u-hero__usps--strip .vo4u-hero__usp {
	display: flex;
	align-items: center;
	gap: 7px;
}

.vo4u-hero__usps--strip .vo4u-hero__usp-icon {
	font-size: 16px;
	color: var(--vo4u-cta-primary-bg);
}

.vo4u-hero__usps--strip .vo4u-hero__usp-title {
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
}

/* float = losse zwevende kaartjes, rechts op de foto (variant O). */
.vo4u-hero__usps--float {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-width: 260px;
}

.vo4u-hero__usps--float .vo4u-hero__usp {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	background: var(--vo4u-panel-bg);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(15, 28, 40, 0.22);
}

.vo4u-hero__usps--float .vo4u-hero__usp-icon {
	font-size: 18px;
}

.vo4u-hero__usps--float .vo4u-hero__usp-title {
	font-size: 12px;
}

/* ==========================================================================
   FULLSCREEN — banner + USP's samen de schermhoogte
   ========================================================================== */
.vo4u-hero--fullscreen {
	min-height: calc(100vh - var(--vo4u-header-offset, 90px));
	display: flex;
	flex-direction: column;
}

/* De hoofd-inhoud pakt de resterende ruimte; de USP-strip houdt zijn
   natuurlijke hoogte zodat banner + strip samen precies passen.
   De &-zelf-selector (.vo4u-hero--fullscreen.vo4u-hero--fullscreen) verhoogt
   de specificiteit zodat dit altijd wint van de variant-regels. */
.vo4u-hero--fullscreen.vo4u-hero--fullscreen .vo4u-hero__grid,
.vo4u-hero--fullscreen.vo4u-hero--fullscreen .vo4u-hero__triptych,
.vo4u-hero--fullscreen.vo4u-hero--fullscreen .vo4u-hero__mosaic,
.vo4u-hero--fullscreen.vo4u-hero--fullscreen .vo4u-hero__panel-wrap {
	flex: 1 1 auto;
	min-height: 0;
}

.vo4u-hero--fullscreen .vo4u-hero__usps--bar,
.vo4u-hero--fullscreen .vo4u-hero__usps--strip {
	flex: 0 0 auto;
}

/* Variant L/N/O hebben een absoluut gepositioneerde media-laag; die volgt
   automatisch de section-hoogte. De content-lagen ook. Niets extra nodig. */

/* Op heel lage schermen (liggend mobiel): niet forceren, anders wordt
   alles samengeperst. Dan telt min-height gewoon als bodem. */
@media (max-height: 520px) {
	.vo4u-hero--fullscreen {
		min-height: 520px;
	}
}

/* ==========================================================================
   RONDLEIDING-POPUP (lightbox)
   ========================================================================== */
.vo4u-hero__popup[hidden] {
	display: none;
}

.vo4u-hero__popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.vo4u-hero__popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 20, 28, 0.82);
	cursor: pointer;
}

.vo4u-hero__popup-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 880px;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.vo4u-hero__popup-title {
	padding: 16px 52px 14px 22px;
	font-size: 16px;
	font-weight: 600;
	color: #1F2A38;
	border-bottom: 1px solid rgba(31, 42, 56, 0.1);
}

.vo4u-hero__popup-x {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(31, 42, 56, 0.08);
	color: #1F2A38;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.vo4u-hero__popup-x:hover {
	background: rgba(31, 42, 56, 0.16);
}

.vo4u-hero__popup-body {
	position: relative;
	background: #000000;
}

/* Video: vaste 16:9 verhouding. */
.vo4u-hero__popup-video {
	display: block;
	width: 100%;
	max-height: 78vh;
}

.vo4u-hero__popup-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.vo4u-hero__popup-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Foto-slideshow. */
.vo4u-hero__popup-gallery {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #000000;
}

.vo4u-hero__popup-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.vo4u-hero__popup-slide.is-active {
	opacity: 1;
}

.vo4u-hero__popup-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #1F2A38;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.vo4u-hero__popup-nav:hover {
	background: #ffffff;
}

.vo4u-hero__popup-nav--prev {
	left: 12px;
}

.vo4u-hero__popup-nav--next {
	right: 12px;
}

.vo4u-hero__popup-empty {
	margin: 0;
	padding: 48px 24px;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

@media (max-width: 480px) {
	.vo4u-hero__popup {
		padding: 12px;
	}

	.vo4u-hero__popup-nav {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
	.vo4u-hero--a .vo4u-hero__grid,
	.vo4u-hero--f .vo4u-hero__grid {
		grid-template-columns: 1fr;
	}

	.vo4u-hero--a .vo4u-hero__media,
	.vo4u-hero--f .vo4u-hero__media {
		min-height: 260px;
		order: -1;
	}

	.vo4u-hero__panel {
		padding: 28px;
	}

	.vo4u-hero--e .vo4u-hero__panel {
		max-width: none;
	}

	.vo4u-hero--e .vo4u-hero__panel-wrap {
		padding: 24px;
	}

	/* USP-balk stapelt op mobiel. */
	.vo4u-hero__usps--bar {
		grid-template-columns: 1fr;
	}

	.vo4u-hero__usps--bar .vo4u-hero__usp + .vo4u-hero__usp {
		border-left: none;
		border-top: 1px solid var(--vo4u-divider);
	}

	/* Variant M: drie kolommen worden gestapeld, foto's boven en onder. */
	.vo4u-hero--m .vo4u-hero__triptych {
		grid-template-columns: 1fr;
	}

	.vo4u-hero--m .vo4u-hero__pane {
		min-height: 200px;
	}

	/* Variant O: zwevende USP's worden een normale rij onder de tekst. */
	.vo4u-hero--o .vo4u-hero__media {
		position: relative;
		min-height: 280px;
	}

	.vo4u-hero--o .vo4u-hero__content--corner {
		position: relative;
		max-width: none;
	}

	/* Op mobiel staat het hoek-blok van variant O statisch; positie-transform resetten. */
	.vo4u-hero__content--corner.vo4u-hero__content--vpos-mid,
	.vo4u-hero__content--corner.vo4u-hero__content--vpos-top,
	.vo4u-hero__content--corner.vo4u-hero__content--vpos-bottom {
		top: auto;
		bottom: auto;
		transform: none;
	}

	.vo4u-hero__usps--float {
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: none;
		padding: 16px;
	}

	/* Variant P: mozaïek wordt één kolom. */
	.vo4u-hero--p .vo4u-hero__mosaic {
		grid-template-columns: 1fr;
	}

	.vo4u-hero--p .vo4u-hero__mosaic-side {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.vo4u-hero__content--bottom,
	.vo4u-hero__content--top,
	.vo4u-hero__content--mid,
	.vo4u-hero__content--corner {
		padding: 24px;
	}
}

@media (max-width: 480px) {
	.vo4u-hero__panel {
		padding: 22px;
	}

	.vo4u-hero__cta {
		flex: 1;
		min-width: 140px;
	}

	.vo4u-hero__usps--strip {
		gap: 8px 16px;
	}
}

/* Respecteer reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.vo4u-hero__slide {
		transition: none;
	}

	.vo4u-hero__cta {
		transition: none;
	}
}