/* =========================================================================
   Vida Verde — main stylesheet. The ONLY stylesheet. Token-driven, mobile-first.
   Instrument Serif (display) + Manrope (body) · caramel #c3966f (decorative)
   + espresso #3c291c (CTA) · cream / warm ink. NO GREEN.
   Shadow + hover language borrowed from the Tidii build (layered soft shadows,
   translateY lifts, cubic-bezier(.2,.8,.2,1) easing).
   ========================================================================= */

/* ---------- 1. Design tokens (lockstep with vidaverde-core Design screen) -- */

:root {
	/* Brand — caramel #c3966f (decorative accent) + espresso #3c291c (CTA / text
	   accent). No green. --vida-brown is the primary strong accent (buttons,
	   links, readable accent text); caramel is the softer decorative fill / icon
	   / label colour. Design screen maps color_accent → --vida-brown,
	   color_accent2 → --vida-caramel. */
	--vida-brown:        #3c291c;
	--vida-brown-deep:   #2a1c12;
	--vida-caramel:      #c3966f;
	--vida-caramel-deep: #a9784f;
	/* ⚠ Tekst-veilige caramel. --vida-caramel (2.48) en --vida-caramel-deep (3.58)
	   halen AA NIET op cream — die twee zijn alleen voor ICONEN en vlakken.
	   Zodra caramel als TEKST wordt gebruikt: dit token. 5.72 op cream, 6.12 op
	   wit, 4.67 op stone — AA op alle drie de ondergronden. (Brief §20) */
	--vida-caramel-text: #7f5a3c;
	--vida-caramel-soft: rgba(195, 150, 111, 0.14);
	--vida-caramel-ring: rgba(195, 150, 111, 0.34);

	/* Ink & surfaces — warm neutrals (no green tint) */
	--vida-ink:         #2b1f16;
	--vida-ink-2:       #4a4038;
	--vida-muted:       #6b6058;
	--vida-white:       #ffffff;
	--vida-cream:       #faf7f0;
	--vida-cream-2:     #f2eee3;
	/* Warm stone / sand — the secondary neutral the brief asks for. Additive:
	   it sits between cream and line, and does NOT introduce green. */
	--vida-stone:       #e8e0d2;
	--vida-stone-soft:  #f0eae0;
	--vida-line:        rgba(60, 41, 28, 0.12);
	--vida-line-light:  rgba(255, 255, 255, 0.16);
	--vida-bg:          var(--vida-white); /* sticky-header reads this */

	/* Typography — editorial pairing (UI/UX brief §3): Instrument Serif for
	   emotional headings, Manrope for body / nav / UI.
	   ⚠ This REPLACES Montserrat from spec §3.1 — a deliberate, recorded
	   deviation. The Customizer can still swap both halves.
	   ⚠ Instrument Serif ships weight 400 only. Never set a bold weight on a
	   display heading: the browser would synthesise it and smear the letterforms.
	   Emphasis comes from SIZE and ITALIC, not weight. */
	--ff-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
	--ff-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

	/* Larger, more editorial than the old scale — h1/h2 lead the page. */
	--fs-h1:   clamp(2.75rem, 1.3rem + 5.4vw, 5.25rem);
	--fs-h2:   clamp(2rem, 1.1rem + 3.2vw, 3.5rem);
	--fs-h3:   clamp(1.35rem, 1.05rem + 1.15vw, 2rem);
	--fs-h4:   clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
	--fs-h5:   1.1rem;
	--fs-h6:   1rem;
	--fs-body: 1.0625rem;
	--fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);

	/* Serif sets tighter and lower than a geometric sans at the same size. */
	--lh-head: 1.06;
	--lh-body: 1.7;
	--ls-head: -0.015em;
	--ls-body: 0;
	--ls-tight: 0.14em; /* eyebrows / labels / buttons — never user-overridden */
	--fw-display: 400;  /* see the Instrument Serif warning above */

	/* Spacing & layout */
	--vida-gutter:        28px;
	--vida-container-max: 1240px;
	/* Brief §7 — major sections breathe at 120–160px on large desktop. */
	--vida-section-pad:   clamp(72px, 7vw + 28px, 150px);
	--vida-section-pad-lg: clamp(88px, 9vw + 32px, 180px); /* hero-adjacent / full-bleed */
	--vida-header-h:      92px; /* brief §1 — slightly taller header */

	/* Radii */
	--vida-radius-sm:   10px;
	--vida-radius-md:   14px;
	--vida-radius-lg:   18px;
	--vida-radius-xl:   24px;
	--vida-radius-pill: 999px;
	/* ⚠ Knoppen zijn nu PILVORMIG, naar het Tidii-systeem (klantbesluit
	   2026-09-25). Hier stond 8px met de notitie "pill = chips + badges only,
	   NOT buttons (brief §16)" — die briefregel is hiermee bewust losgelaten. */
	--vida-radius-btn:  999px;
	--vida-radius-2xl:  32px;

	/* Shadows — Tidii-layered, warm-tinted */
	--vida-shadow-card: 0 4px 16px rgba(43, 31, 22, 0.06);
	--vida-shadow-lift: 0 18px 44px rgba(43, 31, 22, 0.12);
	--vida-shadow-pop:  0 24px 70px rgba(43, 31, 22, 0.16);
	--vida-shadow-cta:  0 12px 32px rgba(60, 41, 28, 0.26);
	--vida-shadow-cta-hover: 0 18px 40px rgba(60, 41, 28, 0.42); /* Tidii-sterkte */

	/* Motion — brief §15. Calm language: small, slow, never bouncing. */
	--vida-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
	--vida-dur-fast:   0.25s;
	--vida-dur:        0.45s;
	--vida-dur-slow:   0.7s;
	--vida-img-zoom:   1.04;  /* brief caps image hover zoom at 1.03–1.05 */
	--vida-lift:       -3px;  /* brief caps card lift at 3–4px */
}

/* Brief §15 + §20 — honour reduced-motion globally rather than per-component. */
@media (prefers-reduced-motion: reduce) {
	:root { --vida-img-zoom: 1; --vida-lift: 0px; --vida-dur-fast: 0.01ms; --vida-dur: 0.01ms; --vida-dur-slow: 0.01ms; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important; scroll-behavior: auto !important;
	}
}

/* ---------- 2. Reset ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	color: var(--vida-ink);
	background: var(--vida-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
.vida-skip:focus {
	clip-path: none; width: auto; height: auto; z-index: 100000;
	top: 10px; left: 10px; padding: 10px 18px;
	background: var(--vida-brown); color: #fff; border-radius: var(--vida-radius-sm);
}

/* ---------- 3. Typography ----------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-display);
	/* ⚠ 400, not 700. Instrument Serif has a single weight; asking for bold makes
	   the browser synthesise it, which smears the letterforms. If the display
	   font is swapped back to a sans in the Customizer, raise this with it. */
	font-weight: var(--fw-display);
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	color: var(--vida-ink);
	text-wrap: balance;
}
/* Selective serif italic for emphasis (brief §3) — e.g. "elk met een <em>eigen
   karakter</em>". Used sparingly; never for whole headings. */
h1 em, h2 em, h3 em, .vida-em { font-style: italic; font-weight: inherit; }

/* Small caps-ish labels and UI keep the body sans, never the display serif. */
.vida-eyebrow, .vida-btn, button, input, select, textarea { font-family: var(--ff-body); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
p  { color: var(--vida-ink-2); }

.vida-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 0.8125rem; font-weight: 700;
	letter-spacing: var(--ls-tight); text-transform: uppercase;
	color: var(--vida-brown);
}
.vida-eyebrow::before {
	content: ""; width: 26px; height: 2px; border-radius: 2px;
	background: var(--vida-caramel);
}
.vida-eyebrow--light { color: #fff; }
.vida-eyebrow--light::before { background: var(--vida-caramel); }

.vida-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--vida-ink-2); max-width: 62ch; }

.vida-prose > * + * { margin-top: 1.1em; }
.vida-prose h2, .vida-prose h3 { margin-top: 1.6em; }
.vida-prose ul { list-style: disc; padding-left: 1.3em; color: var(--vida-ink-2); }
.vida-prose ol { list-style: decimal; padding-left: 1.3em; color: var(--vida-ink-2); }
.vida-prose a { color: var(--vida-brown); text-decoration: underline; text-underline-offset: 3px; }
.vida-prose__thumb img { border-radius: var(--vida-radius-lg); box-shadow: var(--vida-shadow-card); }
.vida-prose { max-width: 820px; }

/* ---------- 4. Buttons --------------------------------------------------- */

/* Brief §16 — three levels only:
     .vida-btn--primary    filled espresso   → Boek je verblijf, Bekijk beschikbaarheid
     .vida-btn--ghost      outlined          → Bekijk de suites, Route plannen  (= "secondary")
     .vida-btn--link       text + arrow      → Ontdek meer →, Bekijk de suite →
   ⚠ Radius is deliberately restrained (8px), NOT the pill it used to be — the
   brief calls pill buttons out by name. --vida-radius-pill still exists for
   chips and badges, which SHOULD stay round. */
.vida-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 26px;
	font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em;
	line-height: 1; white-space: nowrap;
	border-radius: var(--vida-radius-btn);
	/* ⚠ Altijd een 2px rand, ook als hij onzichtbaar is. Anders is een outline-
	   knop 4px hoger/breder dan een gevulde en springt een rij knoppen. */
	border: 2px solid transparent;
	transition: transform var(--vida-dur-fast) var(--vida-ease), box-shadow var(--vida-dur-fast) var(--vida-ease),
		background var(--vida-dur-fast) ease, color var(--vida-dur-fast) ease, border-color var(--vida-dur-fast) ease;
}
/* Maatvariant, naar Tidii's --lg: voor hero- en slot-CTA's. */
.vida-btn--lg { padding: 18px 32px; font-size: 0.97rem; }
.vida-btn--sm { padding: 10px 18px; font-size: 0.875rem; }
.vida-btn svg { transition: transform var(--vida-dur-fast) var(--vida-ease); }
.vida-btn:hover svg { transform: translateX(3px); }

/* Accessibility §20 — a visible focus ring on every control, not just buttons. */
.vida-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--vida-brown);
	outline-offset: 3px;
	border-radius: var(--vida-radius-btn);
}

/* Third level: text + arrow. No box, no border. */
.vida-btn--link {
	padding: 4px 0; gap: 8px; background: none; border: 0;
	color: var(--vida-brown); font-weight: 600;
	border-bottom: 1px solid transparent; border-radius: 0;
}
.vida-btn--link:hover { color: var(--vida-brown-deep); border-bottom-color: currentColor; }

.vida-btn--primary {
	background: var(--vida-brown); color: #fff;
	box-shadow: var(--vida-shadow-cta);
}
.vida-btn--primary:hover {
	background: var(--vida-brown-deep); color: #fff;
	transform: translateY(var(--vida-lift));
	box-shadow: var(--vida-shadow-cta-hover);
}
.vida-btn--ghost {
	border: 2px solid var(--vida-line);
	color: var(--vida-ink); background: transparent;
}
.vida-btn--ghost:hover {
	border-color: var(--vida-brown); color: var(--vida-brown);
	background: var(--vida-caramel-soft);
	transform: translateY(var(--vida-lift));
	box-shadow: var(--vida-shadow-card);
}
.vida-btn--light {
	background: #fff; color: var(--vida-brown);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.vida-btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24); color: var(--vida-brown-deep); }
.vida-btn--lg { padding: 16px 34px; font-size: 1.0625rem; }
.vida-btn--sm { padding: 10px 18px; font-size: 0.85rem; }

/* ---------- 5. Layout ----------------------------------------------------- */

.vida-container {
	max-width: var(--vida-container-max);
	margin-inline: auto;
	padding-inline: var(--vida-gutter);
}
.vida-section { padding-block: var(--vida-section-pad); }
.vida-section--cream { background: var(--vida-cream); }
/* Dark feature band — espresso gradient (class name kept for template compat). */
.vida-section--green {
	background: linear-gradient(150deg, #1c130c 0%, #3c291c 60%, #573c26 130%);
	color: #fff;
}
.vida-section--green h2, .vida-section--green p { color: #fff; }

.vida-section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.vida-section__head--center { max-width: 760px; margin-inline: auto; text-align: center; }
.vida-section__head--center .vida-eyebrow { justify-content: center; }
.vida-section__head--center .vida-section__intro { margin-inline: auto; }
.vida-section__head h2 { margin-top: 12px; }
.vida-section__intro { margin-top: 14px; color: var(--vida-muted); }
.vida-section__more { margin-top: clamp(28px, 3vw, 44px); }

.vida-grid { display: grid; gap: 26px; }
.vida-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.vida-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.vida-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* ---------- 6. Header ------------------------------------------------------ */

/* Sticky + achtergrond komen uit inc/components/sticky-header.php (inline CSS,
   dus die wint van dit bestand). Hier alleen wat daar niet in staat. */
.vida-site-header {
	background: var(--vida-bg);
	border-bottom: 1px solid var(--vida-line);
}
.vida-logo-light { display: none; }


.vida-header__inner {
	display: flex; align-items: center; gap: 22px;
	min-height: var(--vida-header-h);
	/* Full-width header bar — the container cap is lifted here on purpose. */
	max-width: none;
	padding-inline: clamp(20px, 2.5vw, 44px);
}
.vida-header__brand { flex: 0 0 auto; }
.vida-logo { display: inline-flex; align-items: center; gap: 9px; }
.vida-logo__mark { color: var(--vida-brown); display: inline-flex; }
.vida-logo__text {
	font-family: var(--ff-display); font-weight: 700; font-size: 1.3rem;
	color: var(--vida-ink); letter-spacing: -0.01em;
}
.vida-logo__text em { font-style: italic; color: var(--vida-brown); }
.custom-logo { width: 160px; height: auto; } /* default; overridden by the Customizer logo-width inline CSS */
.vida-header__brand .custom-logo-link { display: inline-flex; align-items: center; }

.vida-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.vida-menu { display: flex; align-items: center; gap: 4px; }
.vida-menu > li { position: relative; }
.vida-menu > li > a {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	padding: 10px 12.5px; border-radius: var(--vida-radius-pill);
	font-weight: 700; font-size: 0.8rem; color: var(--vida-ink-2);
	text-transform: uppercase; letter-spacing: 0.05em;
	transition: background 0.2s, color 0.2s;
}
.vida-menu > li > a:hover,
.vida-menu > li.current-menu-item > a,
.vida-menu > li.current-menu-ancestor > a {
	color: var(--vida-brown); background: var(--vida-caramel-soft);
}
.vida-menu li.menu-item-has-children > a::after {
	content: ""; width: 7px; height: 7px; margin-left: 2px;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: 0.55;
	transition: transform 0.2s var(--vida-ease);
}
.vida-menu li.menu-item-has-children:hover > a::after { transform: rotate(225deg) translateY(-1px); }

/* ⚠ Het pijltje is voor de BALK, niet voor de panelen. De selector hierboven is
   `.vida-menu li` (elk niveau), dus de kolomkoppen in het mega-paneel kregen hem
   ook — en zo'n geroteerd vierkantje leest daar als een los streepje achter de
   tekst. Zichtbaar bij ATTRACTIES, ACTIVITEITEN en WELLNESS (de drie met
   onderliggende items); CULTUUR en NATUUR hadden het niet. Vandaar de scheve
   aanblik. Binnen een paneel dus uit. */
.vida-menu .sub-menu li.menu-item-has-children > a::after { content: none; }

/* Dropdown panels — fade + lift, Tidii pop shadow */
.vida-menu .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	min-width: 240px; padding: 10px;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg);
	box-shadow: var(--vida-shadow-pop);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity 0.2s, visibility 0.2s, transform 0.2s var(--vida-ease);
}
.vida-menu li:hover > .sub-menu,
.vida-menu li:focus-within > .sub-menu,
.vida-menu li.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.vida-menu .sub-menu a {
	display: block; padding: 9px 13px; border-radius: var(--vida-radius-sm);
	font-size: 0.9rem; font-weight: 500; color: var(--vida-ink-2);
	transition: background 0.15s, color 0.15s;
}
.vida-menu .sub-menu a:hover { background: var(--vida-caramel-soft); color: var(--vida-brown); }
/* Active submenu item (e.g. the suite you're viewing) */
.vida-menu .sub-menu .current-menu-item > a,
.vida-menu .sub-menu .current_page_item > a { background: var(--vida-caramel-soft); color: var(--vida-brown); font-weight: 700; }
.vida-mn__list .current-menu-item > a, .vida-mn__list .current_page_item > a { color: var(--vida-brown); font-weight: 700; }

/* Third level: default flyout … */
.vida-menu .sub-menu .sub-menu { top: -10px; left: 100%; }

/* … except inside the Highlights mega item: kolommen naast elkaar.

   ⚠ Dit stond op `position: static`. Daardoor rekende het paneel zijn `top: 100%`
   af tegen de HEADER in plaats van tegen het menu-item zelf, en opende het
   **25px lager** dan alle andere dropdowns (gemeten: 84px tegen 59px). Dat is
   precies het "hij hangt lager" dat opviel. Met `position: relative` valt het
   op dezelfde lijn als Suites, Extra's en Evenementen — automatisch, zonder een
   hardgecodeerde offset die bij elke hoogtewijziging opnieuw scheef gaat. */
.vida-menu > li.vida-mega { position: relative; }
.vida-menu > li.vida-mega > .sub-menu {
	left: 50%; transform: translateX(-50%) translateY(-8px);
	/* Kolommen zo breed als hun inhoud. Met gelijke kolommen (`flex: 1 1 0`)
	   eisten de LEGE categorieën Cultuur en Natuur evenveel ruimte op als de
	   gevulde, waardoor het paneel half leeg oogde én de langere labels
	   ("Kabelbaan Valkenburg") over twee regels braken. */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 22px;
	padding: 18px 20px;
	/* ⚠ `width: max-content` is hier niet optioneel. Het paneel staat absoluut
	   gepositioneerd, dus zijn breedte is shrink-to-fit — en een flexcontainer
	   MET wrap mag dan zijn smalste vorm kiezen. Zonder deze regel klapten alle
	   kolommen onder elkaar tot één smalle kolom. Nu rekent hij de breedte op
	   één regel uit en wrapt hij pas als de max-width echt vol is. */
	width: max-content;
	min-width: 0;
	max-width: min(1040px, calc(100vw - 40px));
}
/* Kolommen zo breed als hun inhoud, niet uitgerekt. */
.vida-menu > li.vida-mega > .sub-menu > li.menu-item-has-children { flex: 0 0 auto; }

/* ⚠ Categorieën ZONDER items (Cultuur, Natuur) kregen een volwaardige kolomkop
   met een leeg vlak eronder — een gat van een halve paneelbreedte dat eruitzag
   als een laadfout. Ze blijven bereikbaar, maar als chip achteraan in plaats van
   als lege kolom. */
.vida-menu > li.vida-mega > .sub-menu > li:not(.menu-item-has-children) {
	order: 2;
	align-self: center;
}
.vida-menu > li.vida-mega > .sub-menu > li:not(.menu-item-has-children) > a {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--vida-ink-2);
	background: var(--vida-cream-2);
	border-radius: var(--vida-radius-pill);
	padding: 7px 15px;
}
.vida-menu > li.vida-mega > .sub-menu > li:not(.menu-item-has-children) > a:hover {
	background: var(--vida-caramel-soft);
	color: var(--vida-brown);
}
.vida-menu > li.vida-mega:hover > .sub-menu,
.vida-menu > li.vida-mega:focus-within > .sub-menu,
.vida-menu > li.vida-mega.is-open > .sub-menu {
	transform: translateX(-50%) translateY(0);
}
.vida-menu > li.vida-mega > .sub-menu > li { min-width: 0; }
/* Eén regel per item: het paneel is nu breed genoeg, en afbreken maakte de
   kolommen ongelijk hoog. */
.vida-menu > li.vida-mega .sub-menu .sub-menu a { white-space: nowrap; }
.vida-menu > li.vida-mega > .sub-menu > li > a {
	font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--ls-tight); color: var(--vida-caramel-text);
}
.vida-menu > li.vida-mega > .sub-menu > li > a:hover { background: var(--vida-caramel-soft); color: var(--vida-caramel-text); }
/* ⚠ De pagina waar je op staat kreeg hier de standaard `.current-menu-item`-pil.
   Op een kolomKOP ziet dat eruit als een ingedrukte knop tussen vier gewone
   labels — in de schermafbeelding leek WELLNESS daardoor een los element. De
   markering blijft, maar als onderstreping in plaats van een vlak. */
.vida-menu > li.vida-mega > .sub-menu > li.current-menu-item > a,
.vida-menu > li.vida-mega > .sub-menu > li.current-menu-ancestor > a {
	background: none;
	color: var(--vida-brown);
	box-shadow: inset 0 -2px 0 var(--vida-caramel);
}
.vida-menu > li.vida-mega .sub-menu .sub-menu {
	position: static; display: block; min-width: 0; padding: 4px 0 0;
	border: 0; box-shadow: none; transform: none;
	/* Inherit the mega panel's state — NOT a hard `visible`. Forcing visibility
	   here left the columns hit-testable while the panel was invisible, so the
	   panel's tall absolute box hovered the page content below and re-opened the
	   menu (phantom hover ~200px under the bar). */
	opacity: 1; visibility: inherit;
}
/* ⚠⚠ HIER GEEN HOVERBRUG TERUGZETTEN.
   Er stond een onzichtbare strook van 14px bóven het paneel, om te voorkomen dat
   de muis :hover verloor in het gat tussen de balk en het paneel. Sinds het
   paneel op dezelfde lijn opent als de andere dropdowns (0.58.0) is dat gat er
   niet meer: het menu-item eindigt op 67px en het paneel begint op 59px — ze
   overlappen al 8px.

   De strook lag daardoor precies OVER de menubalk, van x=283 tot x=1055. Gevolg:
   met de muis op "Suites" hield die strook het Highlights-paneel open, en omdat
   alle panelen op z-index 60 staan won het latere element in de DOM — je kreeg
   het Highlights-paneel te zien terwijl je Suites aanwees.

   Is er ooit weer een echt gat, maak de brug dan smal en plaats hem binnen de
   breedte van het menu-item, niet over de hele paneelbreedte. */

.vida-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
/* Zelfde pilvorm als de taalknop ernaast — die is volledig rond. */
.vida-header__cta { padding: 11px 24px; border-radius: var(--vida-radius-pill); }

/* Language switcher */
.vida-lang { position: relative; }
.vida-lang__btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 14px; border-radius: var(--vida-radius-pill);
	border: 1.5px solid var(--vida-line);
	font-weight: 600; font-size: 0.85rem;
	transition: border-color 0.2s, background 0.2s, transform 0.2s var(--vida-ease), box-shadow 0.25s var(--vida-ease);
}
.vida-lang__btn:hover { border-color: var(--vida-brown); background: var(--vida-caramel-soft); transform: translateY(-1px); box-shadow: var(--vida-shadow-card); }
.vida-lang__caret { opacity: 0.55; transition: transform 0.2s var(--vida-ease); }
.vida-lang.is-open .vida-lang__caret { transform: rotate(180deg); }
.vida-lang__panel {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
	min-width: 180px; padding: 8px;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg); box-shadow: var(--vida-shadow-pop);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity 0.2s, visibility 0.2s, transform 0.2s var(--vida-ease);
}
.vida-lang.is-open .vida-lang__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.vida-lang__opt {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 9px 12px; border-radius: var(--vida-radius-sm);
	font-size: 0.9rem; font-weight: 500; text-align: left;
	transition: background 0.15s, color 0.15s;
}
.vida-lang__opt:hover { background: var(--vida-caramel-soft); color: var(--vida-brown); }
.vida-lang__opt.is-current { background: var(--vida-cream); font-weight: 700; }

/* ---------- 7. Hero + booking bar ---------------------------------------- */

.vida-hero {
	position: relative; display: grid; align-content: center;
	/* ⚠ minmax(0,1fr), niet de impliciete auto-track: een grid-track groeit
	   anders mee met de min-content-breedte van zijn kind. De datumpill in de
	   boekingsbalk is ~467px breed en blies de hero-container op tot buiten een
	   390px-scherm — onzichtbaar, want html heeft overflow-x: clip. */
	grid-template-columns: minmax(0, 1fr);
	min-height: 88vh; padding-block: clamp(90px, 12vw, 150px);
	background: linear-gradient(160deg, var(--vida-ink), #3c291c);
	overflow: clip;
}
/* ⚠ isolation:isolate is hier dragend. De dia's gebruiken onderling z-index
   (is-prev 1 / is-active 2) voor de cross-fade; zonder een eigen stacking
   context van .vida-hero__bg tellen die z-indexen mee in de hero zelf en
   schilderen de foto's OVER .vida-hero__inner (z-index 1) heen — titel,
   subtitel en boekingsbalk verdwijnen dan tijdens elke overgang. */
.vida-hero__bg { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.vida-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Carousel: stacked images cross-fade; only the active one is visible.
   ⚠ De VORIGE dia blijft er vol zichtbaar onder liggen tot de nieuwe klaar
   is. Faden we ze allebei tegelijk, dan staan ze halverwege allebei op ~0.5 en
   schemert een kwart van de donkere hero-achtergrond erdoorheen: een zichtbare
   donkere flits bij elke wissel. */
.vida-hero--carousel .vida-hero__img { opacity: 0; z-index: 0; transition: opacity 1.2s ease; }
.vida-hero--carousel .vida-hero__img.is-prev { opacity: 1; z-index: 1; transition: none; }
.vida-hero--carousel .vida-hero__img.is-active { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
	.vida-hero--carousel .vida-hero__img { transition: none; }
}
/* Vlakke overlay over de HELE foto (klantbesluit 2026-09-25). Dit verving
   bewust de eerdere elliptische scrim, die alleen het midden verdonkerde en aan
   de randen naar 0 zakte zodat de foto daar zijn kleur hield. Eén waarde, geen
   verloop — de dichtheid in het midden blijft gelijk aan wat er stond (0.60),
   dus alleen de randen worden donkerder. */
.vida-hero__scrim {
	position: absolute; inset: 0;
	background: rgba(16, 26, 18, 0.60);
}
/* Brief §18 — hero op mobiel 80–90svh: genoeg foto in beeld, maar de content
   eronder mag zichtbaar aanzetten. svh, niet vh, i.v.m. de adresbalk. */
@media (max-width: 860px) {
	.vida-hero { min-height: 86svh; padding-block: clamp(64px, 14vw, 96px); }
}

@media (max-width: 900px) {
	/* Op een telefoon loopt de tekst bijna van rand tot rand en staat er meer
	   tekst over de foto, dus een tikje dichter. De oude mobiele regel was vooral
	   nodig om de ELLIPS te verbreden (95% i.p.v. 52%); met een vlakke overlay
	   blijft alleen het verschil in dichtheid over. */
	.vida-hero__scrim { background: rgba(16, 26, 18, 0.68); }
}
/* Hero-bediening: thumbnails uiterst linksonder, pijlen uiterst rechtsonder.
   Eén thumbnail per suite — de dia's komen uit vida_hero_slides().
   ⚠ Bewust NIET in de .vida-container-kolom (klantbesluit 2026-09-25): de rij
   loopt over de volle breedte en plakt in de hoeken. De kleine inset houdt ze
   van de schermrand af; op 0 raken ze de rand en oogt het afgesneden. */
.vida-hero__controls {
	position: absolute; z-index: 2; inset-inline: 0;
	bottom: clamp(14px, 2vw, 22px);
	display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
	padding-inline: clamp(14px, 1.6vw, 22px);
	/* De rij zelf vangt geen klikken op; alleen de knoppen erin. */
	pointer-events: none;
}
.vida-hero__thumbs {
	display: flex; gap: 10px; margin: 0; padding: 0; list-style: none;
	pointer-events: auto;
	/* Meer suites dan er passen → schuiven in plaats van afbreken. */
	overflow-x: auto; scrollbar-width: none;
}
.vida-hero__thumbs::-webkit-scrollbar { display: none; }
.vida-hero__thumb {
	position: relative; display: block; flex: 0 0 auto;
	width: 116px; height: 78px; padding: 0; overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 10px;
	background: none; cursor: pointer;
	opacity: 0.72;
	transition: opacity 0.25s var(--vida-ease), border-color 0.25s var(--vida-ease), transform 0.25s var(--vida-ease);
}
.vida-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vida-hero__thumb:hover { opacity: 1; transform: translateY(-2px); }
.vida-hero__thumb.is-active { opacity: 1; border-color: #fff; }
/* Naam over de onderrand — leesbaar zonder de foto te verbergen. */
.vida-hero__thumb-name {
	position: absolute; inset-inline: 0; bottom: 0;
	padding: 14px 6px 4px;
	font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
	color: #fff; text-align: center; line-height: 1.15;
	background: linear-gradient(180deg, rgba(16, 26, 18, 0), rgba(16, 26, 18, 0.82));
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vida-hero__arrows { display: flex; gap: 10px; pointer-events: auto; flex: 0 0 auto; }
.vida-hero__arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	/* De pijlen staan BUITEN de scrim, dus op onbewerkte foto: die kan licht of
	   donker zijn. Een donkere pil met witte rand leest op allebei; een lichte
	   transparante pil verdween op de heldere deurpartij van Quarto Verde. */
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	background: rgba(16, 26, 18, 0.42); color: #fff;
	cursor: pointer; backdrop-filter: blur(6px);
	transition: background 0.25s var(--vida-ease), border-color 0.25s var(--vida-ease), transform 0.25s var(--vida-ease);
}
.vida-hero__arrow:hover { background: #fff; color: var(--vida-brown); border-color: #fff; transform: translateY(-2px); }

/* De bedieningsrij mag de inhoud nooit overlappen: extra ruimte onderin.
   ⚠ Samen met de padding-top uit sticky-header.php is dit precies afgestemd op
   min-height: 78vh — meer padding en de hero groeit voorbij die 78vh, want
   min-height is een ondergrens, geen vaste hoogte. */
.vida-hero--carousel { padding-bottom: clamp(118px, 9.7vw, 140px); }

@media (max-width: 860px) {
	/* Op een telefoon is de hero al vol (titel, boekingsbalk, trust-regel).
	   Thumbnails worden compacter en verliezen hun naam; de pijlen blijven,
	   want zonder hen heeft de bezoeker hier geen enkele controle. */
	.vida-hero__thumb { width: 64px; height: 46px; border-radius: 8px; }
	.vida-hero__thumb-name { display: none; }
	.vida-hero__arrow { width: 40px; height: 40px; }
	.vida-hero--carousel { padding-bottom: clamp(118px, 26vw, 150px); }
}
@media (max-width: 460px) {
	/* Op een 390px-scherm liep de rij met 4 thumbnails + pijlen net over de
	   breedte heen, waardoor de laatste suite half achter de pijlen verdween.
	   Iets compacter en alles past zonder te hoeven schuiven. */
	.vida-hero__controls { gap: 10px; padding-inline: 16px; }
	.vida-hero__thumbs { gap: 7px; }
	.vida-hero__thumb { width: 52px; height: 38px; }
	.vida-hero__arrows { gap: 7px; }
	.vida-hero__arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	.vida-card, .vida-card:hover,
	.vida-suite-card, .vida-suite-card:hover { transition: none; transform: none; }
	.vida-suite-card__bar { transition: none; }
	.vida-hero__thumb, .vida-hero__arrow { transition: none; }
	.vida-hero__thumb:hover, .vida-hero__arrow:hover { transform: none; }
}
.vida-hero__topfade {
	position: absolute; inset-inline: 0; top: 0; height: 190px; z-index: 0;
	background: linear-gradient(180deg, rgba(16, 26, 18, 0.42), rgba(16, 26, 18, 0));
	pointer-events: none;
}
.vida-hero__inner { position: relative; z-index: 1; text-align: center; }
/* H1 in twee regels: merknaam groot, daaronder de soort. "Vida Verde" is een
   eigennaam en krijgt notranslate, anders vertaalt Google Translate het merk. */
.vida-hero__title-sub {
	display: block; margin-top: 0.18em;
	/* 40% kleiner dan de 0.4em waarmee deze regel begon. */
	font-size: 0.24em; font-weight: 400; letter-spacing: 0.18em;
	text-transform: uppercase; opacity: 0.92;
}
.vida-hero__title {
	color: #fff; margin-top: 20px;
	/* Brief §2: fors groter en editoriaal. De schaduw vervangt het donkere
	   paneel — leesbaarheid zonder een blok over de foto te leggen. */
	font-size: clamp(2.9rem, 6.4vw, 5.4rem);
	line-height: 1.02;
	max-width: 15ch; margin-inline: auto;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.42);
}
.vida-hero__sub {
	margin: 20px auto 0; max-width: 46ch; /* ingetogen tekstbreedte */
	color: rgba(255, 255, 255, 0.94); font-size: clamp(1.02rem, 1.2vw, 1.18rem);
	line-height: 1.6; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.vida-hero__booking { margin-top: clamp(30px, 4vw, 46px); }
/* Klein en elegant houden — bewust geen kaders, iconen of kleurvlakken. */

/* Booking bar — frosted pill widget (Cloudbeds-style). Outer container is a
   translucent frosted capsule; inside sit white pills (dates, guests) + ghost
   pills (add-code) + a solid brown Search button. Posts to Cloudbeds unchanged. */
.vida-cb {
	max-width: 960px; margin: 0 auto; padding: 14px;
	background: rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--vida-radius-sm);
	box-shadow: 0 24px 60px -20px rgba(28, 19, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	text-align: left;
}
/* De kortingscode-toggle staat buiten de hoofdrij (absolute onderaan), zodat
   hij de drie hoofdelementen niet kan laten wrappen. */
.vida-cb { position: relative; }
/* Rechtsboven de balk: daar is lege ruimte tussen subtitel en boekingsbalk, en
   het botst niet met de trust-regel eronder. */


/* Brief §2 — hiërarchie: Aankomst → Vertrek | gasten | dominante CTA, op één
   regel. De kortingscode is bewust GEEN pill meer: als vierde gelijkwaardig blok
   duwde hij de CTA naar een eigen regel, waardoor de balk brak. */
.vida-cb__row { display: flex; align-items: stretch; gap: 12px; flex-wrap: nowrap; }
.vida-cb__dates { flex: 1 1 auto; min-width: 0; }
.vida-cb__guests { flex: 0 0 auto; }

/* Shared pill */
.vida-cb__pill {
	display: inline-flex; align-items: center; gap: 12px;
	min-height: 62px; padding: 0 24px;
	border-radius: var(--vida-radius-sm);
	font-size: 1rem; font-weight: 600; color: var(--vida-ink);
	transition: background 0.2s var(--vida-ease), box-shadow 0.2s var(--vida-ease), transform 0.2s var(--vida-ease);
}
.vida-cb__ico { display: inline-flex; color: var(--vida-ink); }
.vida-cb__dates, .vida-cb__guests { background: #fff; box-shadow: 0 6px 18px -8px rgba(28, 19, 12, 0.25); }
.vida-cb__dates:hover, .vida-cb__guests:hover { box-shadow: 0 10px 24px -8px rgba(28, 19, 12, 0.32); }

/* Date sub-fields */
.vida-cb__dates { flex: 1 1 340px; }
.vida-cb__date { display: inline-flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.vida-cb__lbl {
	font-size: 10px; font-weight: 700; letter-spacing: var(--ls-tight);
	text-transform: uppercase; color: var(--vida-caramel-text);
}
.vida-cb__date input[type="date"] {
	border: 0; padding: 0; background: transparent; color: var(--vida-ink);
	font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; width: 100%;
}
.vida-cb__date input[type="date"]:focus { outline: none; }
.vida-cb__date input::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }
.vida-cb__sep { color: var(--vida-caramel); display: inline-flex; }

/* Guests select styled as pill text */
.vida-cb__guests { position: relative; cursor: pointer; }
.vida-cb__guests select {
	border: 0; background: transparent; font: inherit; font-weight: 600;
	color: var(--vida-ink); cursor: pointer; padding-right: 4px; appearance: none;
}
.vida-cb__guests select:focus { outline: none; }

/* ⚠ Deze regels staan BEWUST hier, ná `.vida-cb__pill`. De knop draagt beide
   klassen en beide selectors wegen even zwaar, dus de laatste in het bestand
   wint. Stond dit blok eerder in het bestand, dan zette `.vida-cb__pill` de
   kleur terug op `--vida-ink` en was "Kortingscode" weer donker op de donkere
   herofoto. Niet naar boven verplaatsen. */
/* Kortingscode — stille tekstknop BOVEN de balk, op de herofoto.

   ⚠ Hij stond op `top: -30px`, waardoor hij half over de bovenrand van de balk
   viel (gemeten: 29px overlap). Nu verankerd aan de onderkant: `bottom: 100%`
   plus een marge, dus hij raakt de balk per definitie niet meer, ongeacht zijn
   eigen hoogte of de tekstlengte in een andere taal.

   ⚠ Wit, niet --vida-ink. Alle drie de plekken waar deze balk staat (homepage-,
   pagina- en suitehero) liggen op een donkere foto; donkere inkt verdween daarin.
   Zie de dubbele regel die hieronder is opgeruimd. */
.vida-cb__code-toggle {
	position: absolute; right: 2px; top: auto; bottom: calc(100% + 10px);
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 0; padding: 0;
	background: none !important; backdrop-filter: none !important;
	border: 0 !important; box-shadow: none !important;
	font-size: 0.84rem; font-weight: 600; line-height: 1.25;
	color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.vida-cb__code-toggle:hover,
.vida-cb__code-toggle:focus-visible,
.vida-cb__code-toggle.is-active { color: #fff; text-decoration: underline; }
.vida-cb__code-toggle .vida-cb__ico { color: inherit; }
.vida-cb__code-toggle .vida-cb__ico svg { width: 14px; height: 14px; }
.vida-cb__code-toggle { order: 10; }

/* Search button */
.vida-cb__search {
	flex: 0 0 auto; font-size: 1.02rem; padding-inline: 32px; letter-spacing: 0.01em;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 62px; padding: 0 34px; flex: 0 0 auto;
	font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
	background: var(--vida-brown); border-radius: var(--vida-radius-sm);
	box-shadow: var(--vida-shadow-cta);
	transition: background 0.2s, transform 0.2s var(--vida-ease), box-shadow 0.25s var(--vida-ease);
}
.vida-cb__search:hover { background: var(--vida-brown-deep); transform: translateY(-1px); box-shadow: var(--vida-shadow-cta-hover); }
.vida-cb__search .vida-cb__ico { color: #fff; } /* white search glyph on the brown button */

/* Promo code drawer */
.vida-cb__code-wrap { padding: 12px 12px 4px; }
.vida-cb__code-input {
	width: 100%; max-width: 320px; padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--vida-radius-sm);
	background: rgba(255, 255, 255, 0.9); color: var(--vida-ink); font: inherit;
}
.vida-cb__code-input:focus { outline: none; border-color: var(--vida-brown); box-shadow: 0 0 0 3px var(--vida-caramel-ring); }

.vida-cb__tagline {
	margin: 12px 6px 2px; font-size: 13px; font-weight: 600;
	color: #fff; text-shadow: 0 1px 6px rgba(28, 19, 12, 0.5);
}
.vida-cb__tagline::before { content: "\2713\0020"; color: var(--vida-caramel); font-weight: 700; }

/* ---------- 8. Cards ------------------------------------------------------- */

.vida-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-xl); overflow: clip;
	box-shadow: var(--vida-shadow-card);
	transition: transform 0.25s var(--vida-ease), box-shadow 0.3s var(--vida-ease), border-color 0.25s var(--vida-ease);
}
/* Accentbalk, zelfde gedrag als op de suitekaart. */
.vida-card__bar {
	position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
	background: var(--vida-brown);
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.35s var(--vida-ease);
}
.vida-card:hover .vida-card__bar { transform: scaleX(1); }
/* Tidii-hover: hoger optillen, zwaardere schaduw en de rand kleurt mee. */
.vida-card { position: relative; }
.vida-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vida-shadow-pop);
	border-color: var(--vida-brown);
}
.vida-card__media { display: block; aspect-ratio: 4 / 3; overflow: clip; }
.vida-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s var(--vida-ease);
}
.vida-card:hover .vida-card__media img { transform: scale(1.05); }

/* Kaart zonder klanttekst: geen link, dus ook GEEN hoverreactie. Een kaart die
   optilt en oplicht belooft dat er iets achter zit; hier is dat niet zo.
   ⚠ Alles wat hover doet moet hier uit: optillen, schaduw, randkleur, de
   accentbalk en het inzoomen van de foto. */
.vida-card--static { cursor: default; }
.vida-card--static:hover {
	transform: none;
	box-shadow: var(--vida-shadow-card);
	border-color: var(--vida-line);
}
.vida-card--static:hover .vida-card__bar { transform: scaleX(0); }
.vida-card--static:hover .vida-card__media img { transform: none; }
.vida-card--static .vida-card__title { color: var(--vida-ink); }

/* Merkplaatje voor items zonder eigen foto: espressovlak met het witte logo,
   in exact hetzelfde mediakader als een echte foto — zo houden alle kaarten in
   een rij dezelfde hoogte. Gedeeld met de arrangementenstrip op de homepage. */
.vida-card__logo {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--vida-brown), var(--vida-ink));
}
.vida-card__logo img {
	width: min(52%, 190px); height: auto; opacity: 0.9;
	object-fit: contain;
}
/* ⚠ De mediakaders zijn position:relative nodig, anders vult het absolute
   merkplaatje de hele kaart. */
.vida-card__media, .aroom-img { position: relative; }
.vida-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.vida-card__title { font-size: var(--fs-h4); }
.vida-card__title a { transition: color 0.2s; }
.vida-card__title a:hover { color: var(--vida-brown); }
.vida-card__meta {
	display: flex; flex-wrap: wrap; gap: 8px 16px;
	font-size: 0.85rem; color: var(--vida-muted);
}
.vida-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.vida-card__meta svg { color: var(--vida-caramel); }
.vida-card__excerpt { font-size: 0.95rem; color: var(--vida-muted); }
.vida-card__price { margin-top: auto; font-weight: 700; color: var(--vida-brown); }
/* Minimal bordered card — quiet by default, subtly firms up on hover. No shadow. */
.vida-card--flat {
	background: transparent;
	border: 1px solid var(--vida-line);
	box-shadow: none;
	transition: border-color 0.25s var(--vida-ease), background 0.25s var(--vida-ease), transform 0.25s var(--vida-ease);
}
.vida-card--flat:hover {
	background: var(--vida-caramel-soft);
	border-color: var(--vida-caramel-ring);
	box-shadow: none;
	transform: translateY(-2px);
}
.vida-media-placeholder {
	display: grid; place-items: center; width: 100%; height: 100%;
	min-height: 200px; aspect-ratio: 4 / 3;
	background: linear-gradient(140deg, var(--vida-cream), var(--vida-cream-2));
	color: var(--vida-caramel);
}

.vida-checklist { display: grid; gap: 10px; margin-block: 18px; }
.vida-checklist li { display: flex; align-items: baseline; gap: 10px; color: var(--vida-ink-2); }
.vida-checklist svg { flex: 0 0 auto; color: var(--vida-brown); transform: translateY(2px); }
.vida-checklist--cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- 8b. Home suites — 2×2 grid, pills + data (Mayflower pattern) ---- */

.vida-suites-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(22px, 2.4vw, 30px);
}
/* ── Werkpunt 4: mobiele sticky boekingsknop (brief §18) ────────────────────
   ⚠ Alleen mobiel, en pas zichtbaar voorbij de hero — de brief zegt expliciet
   dat hij geen belangrijke inhoud mag afdekken. Standaard volledig verborgen
   (ook voor screenreaders) tot JS hem aanzet. */
.vida-mbook { display: none; }
@media (max-width: 860px) {
	.vida-mbook {
		display: flex; align-items: center; justify-content: center;
		position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 55;
		min-height: 52px; padding: 14px 20px;
		border-radius: 10px; background: var(--vida-brown); color: #fff;
		font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
		box-shadow: 0 10px 30px rgba(43, 31, 22, 0.28);
		opacity: 0; visibility: hidden; transform: translateY(12px);
		transition: opacity 0.3s var(--vida-ease), transform 0.3s var(--vida-ease), visibility 0.3s;
	}
	.vida-mbook.is-on { opacity: 1; visibility: visible; transform: none; }
	/* Ruimte onder de footer zodat de knop de laatste regel niet afdekt. */
	body.vida-has-mbook .vida-footer__legal { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .vida-mbook { transition: none; } }

/* ── Werkpunt 3: duurzaamheidsstatements (brief §9) ─────────────────────────
   Geen tweede kolom met afgeronde blokjes, maar grote getallen/woorden. */
.vida-sust__stats { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.vida-sust__stat { margin: 0; }
.vida-sust__stat dt {
	font-family: var(--ff-display); font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	line-height: 1.08; color: #fff;
}
.vida-sust__stat dd {
	margin: 6px 0 0; font-size: 0.86rem; letter-spacing: var(--ls-tight);
	text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 560px) { .vida-sust__stats { grid-template-columns: 1fr; gap: 20px; } }

/* ── Werkpunt 3: reviews — bronregel onder de score (brief §11) ─────────────*/
.vida-revs2__sources {
	margin: 10px 0 0; font-size: 0.82rem; letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.66);
}

/* ── Werkpunt 3: locatie zonder dozen (brief §12) ───────────────────────────
   ⚠ De contactgegevens stonden in een witte kaart. Die is weg; alleen haarlijnen
   scheiden de regels nog. */
.vida-location__address { margin-top: 10px; font-size: 1.02rem; color: var(--vida-muted); }
.vida-location__contact {
	background: none !important; border: 0 !important; box-shadow: none !important;
	padding: 0 !important; margin: 26px 0 26px;
}
.vida-location__contact li {
	padding: 13px 0; border-bottom: 1px solid var(--vida-line);
	display: flex; align-items: center; gap: 12px;
}
.vida-location__contact li:first-child { border-top: 1px solid var(--vida-line); }

/* ── Werkpunt 2: bestemmingssectie (brief §8) ───────────────────────────────
   Full-bleed foto met kop eroverheen. Scrim is een verloop van onderaf zodat de
   lucht bovenin open blijft — hetzelfde principe als de hero, maar simpeler:
   hier staat alle tekst onderaan. */
.vida-dest {
	position: relative; overflow: clip;
	min-height: min(74vh, 680px);
	display: grid; align-content: center;
	padding-block: clamp(60px, 8vw, 110px);
	background: var(--vida-ink);
	/* ⚠ minmax(0,1fr) net als bij .vida-hero: anders rekt een grid-track mee met
	   de min-content van zijn kind en valt de inhoud op mobiel buiten beeld. */
	grid-template-columns: minmax(0, 1fr);
}
.vida-dest__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Zijpaneel in plaats van een wash over het hele beeld (klantreferentie): links
   staat het espressovlak vrijwel dicht en loopt het naar rechts uit naar niets,
   zodat de foto rechts volledig open blijft. Horizontaal verloop, geen verticaal. */
.vida-dest__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg,
		rgba(60, 41, 28, 0.97) 0%,
		rgba(60, 41, 28, 0.94) 24%,
		rgba(60, 41, 28, 0.76) 44%,
		rgba(60, 41, 28, 0.40) 63%,
		rgba(60, 41, 28, 0.12) 82%,
		rgba(60, 41, 28, 0) 100%);
}
.vida-dest__inner { position: relative; z-index: 1; }
/* Kolom links; de tekst mag niet doorlopen tot in het open deel van de foto. */
.vida-dest__inner > * { max-width: min(52ch, 56%); }
.vida-dest__title {
	color: #fff; margin-top: 14px; max-width: min(18ch, 56%);
	font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.06;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
}
.vida-dest__body { margin-top: 16px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.vida-dest__stats {
	margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
	/* ⚠ De kolomruimte stond op 80px: de drie cijfers (samen ~469px) pasten dan
	   niet meer binnen het espressovlak en sprongen naar een tweede rij. */
	display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3.4vw, 50px);
	max-width: min(52ch, 64%);
}
.vida-dest__stat { margin: 0; }
.vida-dest__stat dt {
	font-family: var(--ff-display); font-size: clamp(1.7rem, 2.6vw, 2.5rem);
	line-height: 1; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.vida-dest__stat dd {
	margin: 6px 0 0; font-size: 0.86rem; letter-spacing: var(--ls-tight);
	text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
}

/* ── Werkpunt 2: "Ontdek het Heuvelland" (brief §8) ─────────────────────────
   ⚠ Bewust GEEN kaarten: geen rand, geen witte doos, geen schaduw. De foto is
   de knop; alleen de titel en één regel eronder. */
.vida-explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
/* Flexkolom zodat de "Ontdek meer"-links op één lijn staan, ook als één
   omschrijving over twee regels loopt (Ontdekken doet dat). */
.vida-explore__item { display: flex; flex-direction: column; color: inherit; height: 100%; }
.vida-explore__media {
	display: block; aspect-ratio: 4 / 5; overflow: clip;
	border-radius: var(--vida-radius-lg); background: var(--vida-cream-2);
}
.vida-explore__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--vida-ease); }
.vida-explore__item:hover .vida-explore__media img { transform: scale(1.04); }
.vida-explore__body { display: flex; flex-direction: column; flex: 1; padding-top: 18px; }
.vida-explore__title { display: block; font-family: var(--ff-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; color: var(--vida-ink); }
.vida-explore__text { display: block; margin-top: 6px; font-size: 0.95rem; color: var(--vida-muted); }
.vida-explore__link {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: auto; padding-top: 12px; align-self: flex-start;
	font-size: 0.82rem; font-weight: 700; letter-spacing: var(--ls-tight);
	text-transform: uppercase; color: var(--vida-brown);
	transition: gap 0.25s var(--vida-ease);
}
.vida-explore__item:hover .vida-explore__link { gap: 12px; }
@media (max-width: 860px) {
	.vida-explore__grid { grid-template-columns: 1fr; gap: 30px; }
	.vida-explore__media { aspect-ratio: 16 / 10; }
	.vida-dest { min-height: 62svh; }
	/* ⚠ Op een telefoon is er geen "rechterhelft" om open te laten: een
	   horizontaal verloop zou de tekst op onbewerkte foto zetten. Daarom hier
	   weer een verticaal verloop en een kolom over de volle breedte. */
	.vida-dest__scrim {
		background: linear-gradient(0deg,
			rgba(60, 41, 28, 0.92) 0%,
			rgba(60, 41, 28, 0.80) 45%,
			rgba(60, 41, 28, 0.55) 72%,
			rgba(60, 41, 28, 0.30) 100%);
	}
	.vida-dest__inner > *,
	.vida-dest__title,
	.vida-dest__stats { max-width: 100%; }
}

/* Brief §4 — differentiators als typografie, niet als kaarten. Alleen een
   haarlijn scheidt ze; geen achtergrond, geen rand, geen icoon. */
.vida-usps { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 0; }
.vida-usps__item { padding: 16px 0; border-top: 1px solid var(--vida-line); }
.vida-usps__item:last-child { border-bottom: 1px solid var(--vida-line); }
.vida-usps__title {
	display: block; font-family: var(--ff-display);
	font-size: 1.12rem; line-height: 1.3; color: var(--vida-ink);
}
.vida-usps__text { display: block; margin-top: 4px; font-size: 0.93rem; color: var(--vida-muted); }

/* Brief §5 — de foto draagt de kaart (~57% van de hoogte), niet het kader.
   Rand weg, schaduw lichter, lift max 3px: de brief noemt "dramatic card
   elevation" expliciet als iets om te vermijden. Kaarten blijven hier wél,
   want vier suites naast elkaar is precies waar vergelijken telt (§6). */
/* Suitekaart volgt hetzelfde systeem als .vida-card (Tidii-referentie): zelfde
   radius, rand en schaduw, plus de accentbalk die bij hover binnenschuift. Hij
   week hiervoor af met een kleinere radius, geen rand en eigen schaduwwaarden. */
.vida-suite-card {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-xl); overflow: clip;
	box-shadow: var(--vida-shadow-card);
	transition: transform 0.25s var(--vida-ease), box-shadow 0.3s var(--vida-ease), border-color 0.25s var(--vida-ease);
}
.vida-suite-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vida-shadow-pop);
	border-color: var(--vida-brown);
}
/* De accentbalk uit Tidii's dienstkaart: schuift van links in bij hover. */
.vida-suite-card__bar {
	position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
	background: var(--vida-brown);
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.35s var(--vida-ease);
}
.vida-suite-card:hover .vida-suite-card__bar { transform: scaleX(1); }
.vida-suite-card__link svg { transition: transform 0.2s var(--vida-ease); }
.vida-suite-card:hover .vida-suite-card__link svg { transform: translateX(3px); }
.vida-suite-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: clip; background: var(--vida-cream-2); }
/* Mini-carrousel: max. 3 foto's gestapeld, kruislings faden. Zelfde truc als de
   hero — de vorige blijft er vol onder liggen zodat de kaartachtergrond niet
   door de overgang heen schemert. */
.vida-suite-card__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; z-index: 0;
	transition: opacity 0.5s ease, transform 0.9s var(--vida-ease);
}
.vida-suite-card__img.is-prev { opacity: 1; z-index: 1; transition: transform 0.9s var(--vida-ease); }
.vida-suite-card__img.is-active { opacity: 1; z-index: 2; }
.vida-suite-card:hover .vida-suite-card__img { transform: scale(1.04); }
/* De link dekt het hele mediavlak af, de bolletjes liggen erboven. */
.vida-suite-card__media-link { position: absolute; inset: 0; z-index: 3; }
.vida-suite-card__dots {
	position: absolute; z-index: 4; left: 0; right: 0; bottom: 10px;
	display: flex; justify-content: center; gap: 7px;
}
.vida-suite-card__dot {
	width: 8px; height: 8px; padding: 0; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: rgba(16, 26, 18, 0.35); cursor: pointer;
	transition: background 0.2s, transform 0.2s var(--vida-ease);
}
.vida-suite-card__dot:hover { transform: scale(1.2); }
.vida-suite-card__dot.is-active { background: #fff; }
.vida-suite-card__media .vida-media-placeholder { position: relative; z-index: 1; }
.vida-suite-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2vw, 30px); }
.vida-suite-card__title { font-size: var(--fs-h4); }
.vida-suite-card__title a { transition: color 0.2s; }
.vida-suite-card__title a:hover { color: var(--vida-brown); }
/* Eén emotionele regel; groter en donkerder dan de oude excerpt zodat hij
   leest als positionering en niet als bijschrift. */
.vida-suite-card__lede { margin: 8px 0 16px; font-size: 1rem; line-height: 1.5; color: var(--vida-ink-2); }

.vida-suite-card__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.vida-suite-card__pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: var(--vida-radius-pill);
	font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em;
	background: var(--vida-cream); color: var(--vida-muted);
}
.vida-suite-card__pill svg { color: var(--vida-caramel-deep); flex: none; }
.vida-suite-card__pill--over {
	z-index: 4;
	position: absolute; top: 14px; left: 14px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	color: var(--vida-ink); box-shadow: var(--vida-shadow-card);
}
.vida-suite-card__pill--over svg { color: var(--vida-brown); }
.vida-suite-card__pill--accent {
	background: var(--vida-caramel-soft); color: var(--vida-brown-deep);
}
.vida-suite-card__pill--accent svg { color: var(--vida-brown); }

/* Geen scheidingslijn meer: de kaart heeft al genoeg lijnen. */
.vida-suite-card__foot {
	margin-top: auto; padding-top: 18px;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
}
.vida-suite-card__price { font-size: 0.92rem; color: var(--vida-muted); }
.vida-suite-card__link {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 0.85rem; font-weight: 700; letter-spacing: var(--ls-tight);
	text-transform: uppercase; color: var(--vida-brown);
	transition: gap 0.25s var(--vida-ease);
}
.vida-suite-card:hover .vida-suite-card__link { gap: 12px; }
.vida-suite-card__price b { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 700; color: var(--vida-brown); }
.vida-suite-card__price small {
	display: block; font-size: 0.68rem; font-weight: 700;
	letter-spacing: var(--ls-tight); text-transform: uppercase;
	color: var(--vida-muted); margin-bottom: 2px;
}

@media (max-width: 760px) {
	.vida-suites-grid { grid-template-columns: 1fr; }
}

/* ---------- 9. Welcome / sustainability / location ------------------------- */

.vida-welcome__grid {
	display: grid; gap: clamp(30px, 5vw, 70px); align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.vida-welcome__grid--flip .vida-welcome__body { order: -1; }
.vida-welcome__media img,
.vida-welcome__media .vida-media-placeholder {
	border-radius: var(--vida-radius-xl); box-shadow: var(--vida-shadow-lift);
	width: 100%; object-fit: cover; aspect-ratio: 4 / 3.4;
}
/* Tweekolomsweergave: de foto loopt even hoog door als de tekstkolom ernaast.
   ⚠ De vaste aspect-ratio moet daarvoor los — die bepaalde de hoogte en maakte
   de foto korter dan de tekst. Onder deze breedte staat alles onder elkaar en
   blijft de aspect-ratio juist wél nodig, anders heeft de foto geen hoogte. */
@media (min-width: 880px) {
	.vida-welcome__grid { align-items: stretch; }
	/* ⚠ De foto ligt ABSOLUUT in zijn cel. Anders bepaalt zíj de rijhoogte: de
	   welkomfoto is staand (1365×2048), dus op volle breedte werd hij ~860px
	   hoog en rekte de tekstkolom mee — het omgekeerde van de bedoeling. Zo
	   telt de foto niet mee voor de hoogte, bepaalt de TEKST de rij, en vult de
	   foto precies die hoogte. */
	.vida-welcome__media { position: relative; }
	.vida-welcome__media img,
	.vida-welcome__media .vida-media-placeholder {
		position: absolute; inset: 0;
		aspect-ratio: auto; height: 100%; width: 100%;
	}
}
.vida-welcome__body h2 { margin-block: 12px 16px; }

/* Introblok op Over Ons. Eigen modifier, zodat de welkomsectie op de homepage
   ongemoeid blijft. */
/* ⚠ De kop stond op de volle h2-schaal (56px) en overheerste het blok. */
.vida-welcome__grid--intro .vida-welcome__body h2 {
	font-size: clamp(1.8rem, 2.7vw, 2.35rem); line-height: 1.12;
	margin-block: 0 var(--vida-intro-gap);
}
/* ⚠ De afstand tussen kop → lead was 16px en tussen lead → tekst 0px: de lead
   en de alinea plakten aan elkaar. Eén waarde voor beide tussenruimtes. */
.vida-welcome__grid--intro { --vida-intro-gap: 18px; }
.vida-welcome__grid--intro .vida-welcome__body > * { margin-block: 0; }
.vida-welcome__grid--intro .vida-welcome__body > * + * { margin-top: var(--vida-intro-gap); }
.vida-welcome__grid--intro .vida-lead { font-size: 1.08rem; line-height: 1.6; color: var(--vida-ink-2); }

@media (min-width: 880px) {
	/* Foto loopt 30px boven en onder de tekstkolom uit — de tekst staat dan
	   rustig binnen het beeldvlak in plaats van er strak tegenaan. */
	.vida-welcome__grid--intro .vida-welcome__media { margin-block: -30px; }
}

.vida-sust__grid {
	display: grid; gap: clamp(30px, 5vw, 70px); align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.vida-sust h2 { margin-block: 12px 16px; }
.vida-sust__body { color: rgba(255, 255, 255, 0.88); margin-bottom: 24px; }
.vida-sust__points { display: grid; gap: 14px; }
.vida-sust__points li {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 20px; border: 1px solid var(--vida-line-light);
	border-radius: var(--vida-radius-md);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(4px);
	transition: transform 0.25s var(--vida-ease), background 0.25s;
}
.vida-sust__points li:hover { transform: translateX(6px); background: rgba(255, 255, 255, 0.1); }
.vida-sust__icon {
	display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
	border-radius: 50%; background: var(--vida-caramel); color: var(--vida-ink);
}

.vida-location__grid {
	display: grid; gap: clamp(30px, 5vw, 60px); align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.vida-location__grid h2 { margin-block: 12px 14px; }
/* Distance chips */
.vida-location__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vida-location__chips li {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px; border-radius: var(--vida-radius-pill);
	background: #fff; border: 1px solid var(--vida-line);
	font-size: 0.85rem; font-weight: 600; color: var(--vida-ink);
	box-shadow: var(--vida-shadow-card);
}
.vida-location__chips svg { color: var(--vida-caramel-deep); flex: none; }
/* Contact block sits in a clean card */
.vida-location__contact {
	margin-block: 24px; padding: 22px 24px; gap: 14px;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg); box-shadow: var(--vida-shadow-card);
}
.vida-location__contact svg { color: var(--vida-caramel-deep); }
.vida-location__map { position: relative; }
.vida-location__map iframe,
.vida-contact__map iframe {
	width: 100%; aspect-ratio: 4 / 3; border: 0;
	border-radius: var(--vida-radius-xl); box-shadow: var(--vida-shadow-pop);
}
/* Sticky-note trust seal — hangs off the LEFT EDGE of the map, vertically centred.
   ⚠ Do not move it back to the top-left corner: the Google embed renders its own
   place card along the top of the map and the note covered the address text.
   Google also puts a photo thumbnail bottom-left, its logo bottom-centre and the
   zoom/compass bottom-right, so the mid-left edge is the only reliably clear
   zone — and the note sits mostly outside the iframe there anyway. */
.vida-stickynote {
	position: absolute; top: 50%; left: -42px; z-index: 3;
	display: grid; justify-items: center; gap: 5px; text-align: center;
	width: 150px; padding: 18px 14px 16px;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-md);
	box-shadow: 0 18px 42px rgba(43, 31, 22, 0.24);
	transform: translateY(-50%) rotate(-6deg);
	transition: transform 0.3s var(--vida-ease), box-shadow 0.3s var(--vida-ease);
}
.vida-stickynote::before {
	content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
	width: 34px; height: 6px; border-radius: 3px; background: var(--vida-caramel); opacity: 0.55;
}
.vida-stickynote:hover { transform: translateY(calc(-50% - 3px)) rotate(-3deg); box-shadow: 0 24px 52px rgba(43, 31, 22, 0.3); }
.vida-stickynote__top { margin-top: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vida-brown); }
.vida-stickynote__stars { display: inline-flex; gap: 2px; color: var(--vida-caramel); }
.vida-stickynote__stars svg { fill: currentColor; stroke: none; }
.vida-stickynote__score { font-family: var(--ff-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--vida-ink); }
.vida-stickynote__count { font-size: 0.74rem; color: var(--vida-muted); }
@media (max-width: 1120px) {
	/* Not enough gutter left of the map to hang it outside — tuck it inside the
	   map's bottom-right, clear of the place card at the top. */
	.vida-stickynote { top: auto; bottom: 18px; left: auto; right: 14px; transform: rotate(-4deg); }
	.vida-stickynote:hover { transform: rotate(-2deg) translateY(-3px); }
}
@media (max-width: 900px) {
	.vida-stickynote { position: static; transform: rotate(-3deg); margin: 0 auto 22px; right: auto; bottom: auto; }
	.vida-stickynote:hover { transform: rotate(-1deg) translateY(-3px); }
}

/* ---------- 10. CTA banner -------------------------------------------------- */

.vida-cta {
	background: linear-gradient(140deg, var(--vida-cream), var(--vida-cream-2));
	padding-block: var(--vida-section-pad);
}
.vida-cta__inner {
	position: relative; z-index: 1;
	text-align: center; max-width: 680px; margin-inline: auto;
	display: grid; gap: 18px; justify-items: center;
}
.vida-cta__inner .vida-eyebrow { justify-content: center; }

/* Full-bleed image variant — a striking closing CTA */
.vida-cta--image {
	position: relative; overflow: clip;
	padding-block: clamp(90px, 11vw, 150px);
	background: var(--vida-ink);
}
.vida-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Twee lagen: een diagonale kleurwas voor de sfeer, plus een egale bodem zodat
   witte kop en knop op ELKE foto leesbaar blijven — een verloop alleen liet de
   lichte plekken in de tuinfoto doorschijnen. */
.vida-cta__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(150deg, rgba(28, 19, 12, 0.72) 0%, rgba(28, 19, 12, 0.46) 55%, rgba(60, 41, 28, 0.68) 130%),
		rgba(28, 19, 12, 0.34);
}
.vida-cta--image h2 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3); }
.vida-cta--image p { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; }
.vida-cta__ratingwrap { margin-top: 6px; }

/* ---------- Suite-archief: één suite per rij, om en om -------------------- */

.vida-suiterow {
	display: grid; grid-template-columns: minmax(0, 1fr);
	background: var(--vida-bg);
}
/* ⚠ Alle rijen wit (klantbesluit). Er stond om en om wit/crème, wat hier de
   scheiding tussen twee rijen droeg. Nu doet een haarlijn dat werk, anders
   lopen twee opeenvolgende tekstkolommen visueel in elkaar over. */
.vida-suiterow + .vida-suiterow { border-top: 1px solid var(--vida-line); }

.vida-suiterow__media {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 3; background: var(--vida-cream-2);
}
/* Gestapelde foto's die kruislings faden — zelfde aanpak als hero en kaart:
   de vorige blijft er vol onder liggen zodat de achtergrond niet doorschemert. */
.vida-suiterow__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; z-index: 0; transition: opacity 0.5s ease;
}
.vida-suiterow__img.is-prev { opacity: 1; z-index: 1; transition: none; }
.vida-suiterow__img.is-active { opacity: 1; z-index: 2; }

.vida-suiterow__dots {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px;
	display: flex; justify-content: center; gap: 8px;
}
.vida-suiterow__dot {
	width: 9px; height: 9px; padding: 0; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: rgba(16, 26, 18, 0.35); cursor: pointer;
	transition: background 0.2s, transform 0.2s var(--vida-ease);
}
.vida-suiterow__dot:hover { transform: scale(1.2); }
.vida-suiterow__dot.is-active { background: #fff; }

.vida-suiterow__body { display: flex; align-items: center; }
.vida-suiterow__inner {
	width: 100%; max-width: 620px;
	padding: clamp(36px, 5vw, 76px) var(--vida-gutter);
	margin-inline: auto;
}
.vida-suiterow__title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; margin-block: 10px 14px; }
.vida-suiterow__title a { transition: color 0.2s; }
.vida-suiterow__title a:hover { color: var(--vida-brown); }
.vida-suiterow__lede { color: var(--vida-ink-2); line-height: 1.6; }

.vida-suiterow__facts {
	list-style: none; margin: 22px 0 26px; padding: 18px 0;
	border-top: 1px solid var(--vida-line); border-bottom: 1px solid var(--vida-line);
	display: flex; flex-wrap: wrap; gap: 12px 28px;
}
.vida-suiterow__facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; }
.vida-suiterow__facts svg { color: var(--vida-caramel-deep); flex: none; }

.vida-suiterow__price { margin: 0 0 16px; font-weight: 700; color: var(--vida-brown); }
.vida-suiterow__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 900px) {
	/* Twee gelijke helften: de foto loopt van de schermrand tot precies het
	   midden, de tekst vult de andere helft. Geen container eromheen — daarom
	   staan deze rijen bewust BUITEN .vida-container. */
	.vida-suiterow { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.vida-suiterow__media { aspect-ratio: auto; min-height: clamp(460px, 44vw, 620px); }
	/* ⚠ Omgekeerde rij: alleen de KOLOMMEN wisselen, de DOM-volgorde niet — zo
	   leest een schermlezer en het toetsenbord nog steeds foto → tekst. */
	.vida-suiterow--flip .vida-suiterow__media { grid-column: 2; grid-row: 1; }
	.vida-suiterow--flip .vida-suiterow__body  { grid-column: 1; grid-row: 1; }
	/* ⚠ Tekstblok GECENTREERD in zijn helft. Het stond met margin-inline: 0 auto
	   (en omgekeerd bij --flip) tegen de middenlijn geplakt: aan de ene kant een
	   klein gaatje, aan de andere kant een gat van honderden pixels. Nu even veel
	   ruimte links en rechts. */
	.vida-suiterow__inner,
	.vida-suiterow--flip .vida-suiterow__inner { margin-inline: auto; padding-inline: clamp(40px, 4vw, 64px); }
}
@media (prefers-reduced-motion: reduce) {
	.vida-suiterow__img { transition: none; }
	.vida-suiterow__dot:hover { transform: none; }
}

/* ---------- Rijen met inhoud (highlights + evenementen) -------------------- */

.vida-suiterow--content .vida-suiterow__inner { padding-block: clamp(32px, 4vw, 56px); }
.vida-suiterow--content .vida-suiterow__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 12px; }
.vida-suiterow__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.vida-suiterow__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; }
.vida-suiterow__list svg { color: var(--vida-caramel-deep); flex: none; margin-top: 3px; }
.vida-suiterow__practical {
	margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--vida-line);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px;
}
.vida-suiterow__practical dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vida-muted); }
.vida-suiterow__practical dd { margin: 2px 0 0; font-size: 0.92rem; color: var(--vida-ink); }
.vida-suiterow__cta { margin-top: 18px; font-style: italic; color: var(--vida-ink-2); }

/* Vergrootknop op de foto — opent de reeks in de popup. */
.vida-suiterow__zoom {
	position: absolute; z-index: 4; right: 14px; top: 14px;
	width: 42px; height: 42px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	background: rgba(16, 26, 18, 0.42); color: #fff;
	cursor: pointer; backdrop-filter: blur(6px);
	transition: background 0.2s var(--vida-ease), transform 0.2s var(--vida-ease);
}
.vida-suiterow__zoom:hover { background: #fff; color: var(--vida-brown); transform: scale(1.06); }

/* ---------- Fotopopup ------------------------------------------------------ */

.vida-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	display: none; place-items: center;
	background: rgba(16, 26, 18, 0.92);
	padding: clamp(16px, 4vw, 56px);
}
.vida-lightbox.is-open { display: grid; }
.vida-lightbox__img {
	max-width: min(1200px, 92vw); max-height: 82vh;
	width: auto; height: auto; object-fit: contain;
	border-radius: var(--vida-radius-md); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.vida-lightbox__close,
.vida-lightbox__nav {
	position: absolute; z-index: 2;
	width: 48px; height: 48px; border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.1); color: #fff;
	font-size: 1.6rem; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 0.2s var(--vida-ease);
}
.vida-lightbox__close:hover,
.vida-lightbox__nav:hover { background: #fff; color: var(--vida-brown); }
.vida-lightbox__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.vida-lightbox__nav--prev { left: clamp(10px, 3vw, 32px); }
.vida-lightbox__nav--next { right: clamp(10px, 3vw, 32px); }
/* Eén foto: navigatie en teller hebben dan geen functie. */
.vida-lightbox.has-one .vida-lightbox__nav,
.vida-lightbox.has-one .vida-lightbox__count { display: none; }
.vida-lightbox__count {
	position: absolute; bottom: clamp(12px, 3vw, 28px); left: 0; right: 0;
	text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; margin: 0;
}
/* ⚠ Achtergrond niet mee laten scrollen zolang de popup open staat. */
body.vida-noscroll { overflow: hidden; }

.vida-section--tight { padding-block: clamp(36px, 4vw, 58px); }

/* ---------- 11. Page hero / factbox / singles ------------------------------- */

.vida-page-hero {
	padding: clamp(56px, 7vw, 96px) 0;
	background:
		radial-gradient(60% 120% at 85% 0%, var(--vida-caramel-soft), transparent 60%),
		var(--vida-cream);
	border-bottom: 1px solid var(--vida-line);
}
.vida-page-hero__sub { margin-top: 12px; font-size: 1.1rem; color: var(--vida-muted); max-width: 60ch; }

.vida-suite-single__gallery {
	display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 50px);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.vida-suite-single__shot img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--vida-radius-lg); box-shadow: var(--vida-shadow-card);
}
.vida-suite-single__gallery .vida-suite-single__shot:first-child { grid-column: 1 / -1; }
.vida-suite-single__gallery .vida-suite-single__shot:first-child img { aspect-ratio: 21 / 9; }
.vida-suite-single__grid {
	display: grid; gap: clamp(30px, 4vw, 60px);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.vida-suite-single__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.vida-factbox {
	position: sticky; top: calc(var(--vida-header-h) + 20px);
	display: grid; gap: 18px;
	padding: 26px; background: var(--vida-cream);
	border: 1px solid var(--vida-line); border-radius: var(--vida-radius-xl);
	box-shadow: var(--vida-shadow-card);
}
.vida-factbox__title { font-size: var(--fs-h5); }
.vida-factbox dl { display: grid; gap: 10px; }
.vida-factbox dl > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--vida-line); padding-bottom: 10px; }
.vida-factbox dt { color: var(--vida-muted); font-size: 0.9rem; }
.vida-factbox dd { font-weight: 600; text-align: right; }
.vida-suite-single__booking { margin-top: clamp(40px, 5vw, 70px); }

.vida-contact__grid {
	display: grid; gap: clamp(30px, 4vw, 60px);
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	align-items: start;
}
.vida-contact__list { margin-block: 22px; font-size: 1.05rem; }
.vida-contact__form { margin-top: 26px; }

/* Contact page — direct-contact + map (left), message form (right) */
.vida-contact2__intro { margin-bottom: clamp(32px, 4vw, 48px); }
.vida-contact2 {
	display: grid; gap: clamp(30px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: start;
}
.vida-contact2__h { margin-bottom: 22px; }
.vida-contact2__list { display: grid; gap: 16px; margin-bottom: 30px; }
.vida-contact2__list li { display: flex; gap: 14px; align-items: flex-start; }
.vida-contact2__ic {
	display: grid; place-items: center; flex: none; width: 44px; height: 44px;
	border-radius: 50%; background: var(--vida-caramel-soft); color: var(--vida-caramel-deep);
}
.vida-contact2__k { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--vida-muted); margin-bottom: 2px; }
.vida-contact2__list a, .vida-contact2__list span > span:not(.vida-contact2__k) { font-weight: 600; color: var(--vida-ink); }
.vida-contact2__list a:hover { color: var(--vida-brown); }

.vida-contact2__map { position: relative; }
.vida-contact2__map iframe { aspect-ratio: 4 / 3.4; }
.vida-contact2__mapcard {
	position: absolute; left: 16px; right: 16px; bottom: 16px;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-md); padding: 18px 20px;
	box-shadow: var(--vida-shadow-lift);
}
.vida-contact2__mapcard strong { display: block; font-family: var(--ff-display); font-size: 1.05rem; }
.vida-contact2__mapcard p { margin: 4px 0 12px; font-size: 0.9rem; color: var(--vida-muted); }

/* Form card */
.vida-form {
	background: var(--vida-cream); border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-xl); padding: clamp(26px, 3vw, 44px);
	box-shadow: var(--vida-shadow-card);
}
.vida-form__title { margin-bottom: 22px; }
.vida-form__form { display: grid; gap: 18px; }
.vida-form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.vida-form__field { display: grid; gap: 7px; }
.vida-form__field > span { font-size: 0.82rem; font-weight: 700; color: var(--vida-ink-2); }
.vida-form__field input, .vida-form__field textarea {
	width: 100%; padding: 13px 16px; font-size: 1rem;
	color: var(--vida-ink); background: #fff;
	border: 1px solid var(--vida-line); border-radius: var(--vida-radius-sm);
	transition: border-color 0.18s, box-shadow 0.18s;
}
.vida-form__field textarea { resize: vertical; min-height: 120px; }
.vida-form__field input:focus, .vida-form__field textarea:focus {
	outline: none; border-color: var(--vida-brown); box-shadow: 0 0 0 3px var(--vida-caramel-ring);
}
.vida-form__field input::placeholder, .vida-form__field textarea::placeholder { color: var(--vida-muted); opacity: 0.75; }
.vida-form__submit { justify-content: center; margin-top: 4px; }
.vida-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vida-form__notice { padding: 14px 18px; border-radius: var(--vida-radius-sm); margin-bottom: 20px; font-weight: 600; }
.vida-form__notice--ok { background: rgba(60, 41, 28, 0.06); color: var(--vida-brown); border: 1px solid var(--vida-caramel); }
.vida-form__notice--err { background: rgba(180, 50, 40, 0.08); color: #9a2f24; border: 1px solid rgba(180, 50, 40, 0.3); }

@media (max-width: 880px) {
	.vida-contact2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.vida-form__row { grid-template-columns: 1fr; }
}

.vida-reviews__embed { min-height: 200px; }
.vida-404 { text-align: center; }

/* Breadcrumbs (spec §5) */
.vida-crumbs { margin-bottom: 14px; font-size: 0.82rem; color: var(--vida-muted); }
.vida-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; }
.vida-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.vida-crumbs li + li::before { content: "›"; opacity: 0.5; margin-inline: 2px; }
.vida-crumbs a { transition: color 0.15s; }
.vida-crumbs a:hover { color: var(--vida-brown); }
.vida-crumbs [aria-current] { color: var(--vida-ink-2); font-weight: 600; }
/* ⚠ Op een fotohero staat het kruimelpad op een DONKERE ondergrond. Alleen de
   links waren wit; de container, de scheidingstekens en de huidige pagina
   erfden de kleur voor lichte achtergronden (#6b6058) en waren daar vrijwel
   onleesbaar. */
.rm-hero .vida-crumbs { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.rm-hero .vida-crumbs [aria-current] { color: #fff; }
.rm-hero .vida-crumbs a { color: rgba(255, 255, 255, 0.92); }
.rm-hero .vida-crumbs a:hover { color: #fff; }

/* Extra's — catalogue cards, detail page, read-more */
.vida-card__more a {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 0.9rem; color: var(--vida-brown);
}
.vida-card__more a:hover { color: var(--vida-brown-deep); }
.vida-card__more svg { transition: transform 0.2s var(--vida-ease); }
.vida-card__more a:hover svg { transform: translateX(3px); }
.vida-card__icn { color: var(--vida-brown); display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.vida-card--catalog .vida-card__body { padding: 34px 30px; }
.vida-card--catalog:hover .vida-card__title { color: var(--vida-brown); }
.vida-extra-single__hero { margin-bottom: clamp(30px, 4vw, 50px); }
.vida-extra-single__hero img {
	width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
	border-radius: var(--vida-radius-xl); box-shadow: var(--vida-shadow-lift);
}
.vida-extra-single__related { margin-top: clamp(44px, 5vw, 70px); }
.vida-extra-single__related h2 { margin-bottom: 24px; font-size: var(--fs-h3); }

/* Boek Nu — embedded Cloudbeds engine (spec §4.10) */
.vida-boeken__engine iframe {
	width: 100%; height: max(70vh, 640px); border: 0;
	background: #fff; border-radius: var(--vida-radius-lg);
	box-shadow: var(--vida-shadow-card); border: 1px solid var(--vida-line);
}
.vida-boeken__fallback { margin-top: 14px; font-size: 0.9rem; color: var(--vida-muted); }
.vida-boeken__fallback a { color: var(--vida-brown); font-weight: 600; }

/* Beschikbaarheidssectie op de suitepagina (spec §4.3) — cream band zodat hij
   niet tegen de witte fotogrid erboven aanplakt; iets lagere iframe dan /boeken/,
   want hier is het een blok binnen de pagina, niet de hele pagina. */
/* Wit met een haarlijn erboven, niet cream: de "Onze Suites"-carrousel eronder
   is al cream, en twee aangrenzende cream banden lopen visueel in elkaar over
   (conventie: geen twee opeenvolgende secties met dezelfde ondergrond). */

/* Reviews — meerdere widgetbronnen onder elkaar (spec §4.7) */
.vida-reviews__block + .vida-reviews__block { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--vida-line); }
.vida-reviews__title { margin: 0 0 22px; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.vida-reviews__empty {
	margin-top: 10px; padding: 40px 32px; text-align: center;
	background: var(--vida-cream); border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg);
}
.vida-reviews__empty p { margin: 0; }
.vida-reviews__hint { margin-top: 10px !important; font-size: 0.9rem; color: var(--vida-muted); max-width: 62ch; margin-inline: auto !important; }
.vida-reviews__badge { margin-top: 22px; display: flex; justify-content: center; }

.vida-pagination { margin-top: 40px; }
.vida-pagination .nav-links { display: flex; gap: 8px; justify-content: center; }
.vida-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px;
	padding-inline: 12px; border-radius: var(--vida-radius-pill);
	border: 1.5px solid var(--vida-line); font-weight: 600; font-size: 0.9rem;
	transition: all 0.2s var(--vida-ease);
}
.vida-pagination .page-numbers.current,
.vida-pagination .page-numbers:hover { background: var(--vida-brown); border-color: var(--vida-brown); color: #fff; }

/* ---------- 11b. Suite single — Mayflower room-page pattern -------------------- */

.rm-hero { position: relative; height: clamp(420px, 72vh, 660px); overflow: clip; background: var(--vida-ink); }
/* Vult het hele vak; de uitsnede zit expliciet in het midden. ⚠ De suitefoto's
   zijn 1,33–1,50:1 en dit vak is ~2,18:1, dus er gaat hoe dan ook hoogte af —
   gecentreerd betekent dat er boven en onder evenveel wegvalt. */
.rm-hero-img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
/* ⚠ Zwaarder dan voorheen: het kruimelpad is klein en lichtgrijs en viel weg op
   lichte foto's (Quarto Verde, Zen Loft). Verticaal verloop voor de titel plus
   een egale bodemlaag, zodat het ook op een overbelichte foto leesbaar blijft. */
.rm-hero-scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 30, 22, 0.42) 0%, rgba(20, 30, 22, 0.22) 38%, rgba(16, 26, 18, 0.86) 100%),
		rgba(16, 26, 18, 0.18);
}
/* ⚠ Verticaal GECENTREERD, niet onderaan verankerd: kruimelpad, titel en de
   boekingsbalk vormen samen één blok dat midden in de hero staat. Stond eerder
   op bottom: …, met de balk als losse sectie eronder. */
.rm-hero-inner {
	position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
	z-index: 2; text-align: center; padding: 0 clamp(20px, 4vw, 48px);
}
.rm-hero-inner .vida-eyebrow { justify-content: center; }
/* ⚠ Op de suitepagina valt de boekingsbalk ~86px over de onderrand van de hero.
   Zonder extra ruimte schuift die balk over de ondertitel heen. Alleen de
   suite-hero, want .rm-hero--page (archieven) heeft geen balk. */

@media (max-width: 860px) {
	/* Daar staat de balk onder het beeld, dus de hero heeft die ruimte niet nodig. */

}
.rm-hero-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin-top: 14px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.rm-hero-sub { color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 600; margin-top: 14px; }

/* Page/archive hero — same treatment as suites, a touch shorter (it's a header,
   not a full room hero). Subtitle reads as a sentence, not an uppercase label. */
/* ⚠ Geen eigen hoogte meer: page-hero en suite-hero zijn nu even hoog
   (klantbesluit). Stond op clamp(340px,50vh,480px) tegenover clamp(420px,72vh,
   660px) op de suites, waardoor de pagina's onderling verschilden. */
.rm-hero--page .rm-hero-sub {
	text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 400;
	color: rgba(255, 255, 255, 0.9); max-width: 60ch; margin-inline: auto;
}

.rm-split { padding-block: var(--vida-section-pad); }
.rm-split-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.rm-copy-title { font-size: var(--fs-h2); margin-top: 12px; }
.rm-copy-sub { font-size: 1.15rem; line-height: 1.55; font-weight: 600; color: var(--vida-caramel-text); margin-top: 14px; max-width: 46ch; }
.rm-copy-body { margin-top: 22px; }
.rm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Kenmerken uit de klantdocumenten — twee kolommen, compacte vinkjes. Staat
   los van het grote "Voorzieningen"-blok verderop (Booking.com-lijst). */
.rm-features {
	list-style: none; margin: 22px 0 26px; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px;
}
.rm-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.95rem; line-height: 1.4; }
.rm-features svg { flex: 0 0 auto; margin-top: 2px; color: var(--vida-brown); }
@media (max-width: 560px) { .rm-features { grid-template-columns: minmax(0, 1fr); } }
/* Afsluitende regel van de klant, onder de knoppen. */
.rm-cta-line { margin-top: 10px; font-size: 0.95rem; color: var(--vida-ink-2); font-style: italic; }
.rm-note { margin-top: 14px; font-size: 0.85rem; color: var(--vida-muted); }
.rm-note::before { content: "\2713\0020"; color: var(--vida-brown); font-weight: 700; }
/* Facts strip — 4 boxes in a row, floating just below the hero. Slightly wider
   than the body container so each box has room for a one-line label. */
/* Boekingsbalk binnen de hero, onder de titel. */
.rm-hero-book { margin-top: clamp(22px, 3vw, 34px); }
.rm-hero-book .vida-cloudbeds, .rm-hero-book form { margin-inline: auto; }
.rm-hero-book { max-width: 1100px; margin-inline: auto; }



/* Lopende band met de suitefeiten, direct boven Voorzieningen. Espresso vlak
   tussen twee lichte secties: het geeft de pagina ritme en zet de harde feiten
   even apart van het verhaal. */
.rm-specs-band {
	background: var(--vida-brown);
	padding-block: clamp(18px, 2vw, 24px);
	overflow: hidden;
}
/* Zachte fade aan beide randen, zodat items niet hard afgekapt in- en uitlopen. */
.rm-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rm-marquee__track {
	display: flex; width: max-content;
	animation: rm-marquee 44s linear infinite;
}
.rm-marquee:hover .rm-marquee__track { animation-play-state: paused; }
.rm-marquee__set { display: flex; margin: 0; padding: 0; list-style: none; }
.rm-marquee__item {
	display: inline-flex; align-items: center; gap: 9px;
	padding-inline: clamp(20px, 2.4vw, 34px);
	white-space: nowrap;
}
/* Ruit als scheiding — op elk item, zodat de naad tussen twee sets net zo
   oogt als elke andere overgang. */
.rm-marquee__item::after {
	content: ""; width: 5px; height: 5px; margin-left: clamp(20px, 2.4vw, 34px);
	background: var(--vida-caramel); transform: rotate(45deg); opacity: 0.55;
}
.rm-marquee__item svg { color: #fff; flex: none; }
/* Label wit en vet, net als de waarde. Het onderscheid komt nu van grootte,
   hoofdletters en letterspatiëring — niet meer van kleur. */
.rm-marquee__label {
	font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: #fff; font-weight: 700;
}
.rm-marquee__value { color: #fff; font-weight: 600; font-size: 0.95rem; }

/* ⚠ Verschuift precies 25% = één van de vier sets. Klopt dat getal niet met het
   aantal sets in de markup, dan springt de band bij elke herhaling. */
@keyframes rm-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-25%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	/* Niet laten lopen; dan moet je er wel zelf langs kunnen schuiven. */
	.rm-marquee__track { animation: none; }
	.rm-marquee { overflow-x: auto; scrollbar-width: none; }
	.rm-marquee::-webkit-scrollbar { display: none; }
}

/* Afsluitende regel op een extra-pagina. Zelfde toon als de suite-CTA. */
.vida-extra__cta {
	margin-top: 22px; padding-top: 18px;
	border-top: 1px solid var(--vida-line);
	font-size: 1rem; font-style: italic; color: var(--vida-ink-2);
}

/* De zijkolom blijft meelopen, zodat de boekingsknop in beeld blijft terwijl je
   de tekst leest. Daarvoor stond hier een klein blok dat al na één scherm uit
   beeld was en een lege rechterkolom achterliet. */
@media (min-width: 900px) {
	.vida-extra-single .vida-suite-single__aside { position: sticky; top: calc(var(--vida-header-h) + 22px); }
}
.vida-factbox__how { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vida-line); }
.vida-factbox__how h3 {
	font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--vida-muted); margin-bottom: 8px;
}
.vida-factbox__how ul { margin: 0; padding-left: 1.05em; }
.vida-factbox__how li { font-size: 0.9rem; line-height: 1.45; margin-bottom: 5px; }

/* ⚠ De koppen stonden op de volle h2-schaal: een kop van ~40px boven een lijstje
   van vier regels. Op deze pagina's een maat kleiner. */
.vida-extra-single .vida-prose h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 14px; }

.vida-extra__how { margin: 0 0 4px; padding-left: 1.1em; }
.vida-extra__how li { margin-bottom: 6px; line-height: 1.5; }
.vida-extra__cta-link {
	display: inline-flex; align-items: center; gap: 6px;
	margin-left: 6px; font-style: normal; font-weight: 700;
	color: var(--vida-brown); text-decoration: underline; text-underline-offset: 3px;
}
.vida-extra__cta-link svg { transition: transform 0.2s var(--vida-ease); }
.vida-extra__cta-link:hover svg { transform: translateX(3px); }

.rm-gallery { position: sticky; top: calc(var(--vida-header-h) + 22px); }
.rmg { position: relative; aspect-ratio: 4 / 3; border-radius: var(--vida-radius-xl); overflow: clip; background: var(--vida-cream); box-shadow: var(--vida-shadow-lift); }
.rmg-stage { position: absolute; inset: 0; }
.rmg-slide { position: absolute; inset: 0; padding: 0; cursor: zoom-in; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--vida-ease); display: block; width: 100%; }
.rmg-slide.is-active { opacity: 1; visibility: visible; }
.rmg-slide img { width: 100%; height: 100%; object-fit: cover; }
.rmg-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 15px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
	color: #fff; display: grid; place-items: center;
	box-shadow: 0 8px 22px rgba(16, 12, 8, 0.25);
	transition: background 0.25s var(--vida-ease), box-shadow 0.25s var(--vida-ease);
}
.rmg-nav:hover { background: rgba(255, 255, 255, 0.3); }
.rmg-nav svg { transition: transform 0.25s var(--vida-ease); }
.rmg-prev:hover svg { transform: translateX(-3px); }
.rmg-next:hover svg { transform: translateX(3px); }
.rmg-prev { left: 14px; } .rmg-next { right: 14px; }
.rmg-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; font-size: 12px; letter-spacing: 0.08em; color: #fff; background: rgba(16, 26, 18, 0.6); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: var(--vida-radius-pill); }
.rmg-viewall { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 600; color: var(--vida-ink); background: #fff; border: 1.5px solid var(--vida-line); border-radius: var(--vida-radius-pill); padding: 11px 20px; transition: all 0.25s var(--vida-ease); }
.rmg-viewall:hover { border-color: var(--vida-brown); color: var(--vida-brown); transform: translateY(-1px); box-shadow: var(--vida-shadow-card); }
.rmg-viewall svg { color: var(--vida-caramel-deep); }
.rm-gallery-empty { aspect-ratio: 4 / 3; border-radius: var(--vida-radius-xl); }

/* Full-screen lightbox (built in main.js) */
.vida-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(14, 22, 16, 0.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--vida-ease); }
.vida-lb.is-open { opacity: 1; visibility: visible; }
.vida-lb-fig { max-width: min(1200px, 92vw); max-height: 86vh; margin: 0; text-align: center; }
.vida-lb-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--vida-radius-md); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.vida-lb-cap { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; margin-top: 14px; min-height: 1em; }
.vida-lb-close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; display: grid; place-items: center; transition: all 0.25s var(--vida-ease); }
.vida-lb-close:hover { background: var(--vida-brown); border-color: var(--vida-brown); }
.vida-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; transition: all 0.25s var(--vida-ease); }
.vida-lb-nav:hover { background: var(--vida-brown); border-color: var(--vida-brown); }
.vida-lb-prev { left: clamp(12px, 3vw, 40px); } .vida-lb-next { right: clamp(12px, 3vw, 40px); }
.vida-lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.75); }

/* Amenities grid — 3 per row on a soft tinted band */
.rm-amen { padding-block: var(--vida-section-pad); background: var(--vida-cream); }
.rm-amen-head { margin-bottom: 34px; }
.rm-amen-head h2 { margin-top: 10px; }
.rm-amen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
@media (max-width: 760px) { .rm-amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .rm-amen-grid { grid-template-columns: 1fr; } }

/* Suite photo grid — rounded tiles, click to open the lightbox */
.rm-photos { padding-block: var(--vida-section-pad); background: #fff; }
.rm-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rm-photo {
	padding: 0; border: 0; cursor: zoom-in; overflow: clip;
	aspect-ratio: 4 / 3; border-radius: var(--vida-radius-lg);
	box-shadow: var(--vida-shadow-card);
	transition: transform 0.3s var(--vida-ease), box-shadow 0.3s var(--vida-ease);
}
.rm-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--vida-ease); }
.rm-photo:hover { transform: translateY(-3px); box-shadow: var(--vida-shadow-lift); }
.rm-photo:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .rm-photos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rm-photos-grid { grid-template-columns: 1fr; } }
.rm-amen-item { display: flex; align-items: center; gap: 14px; font-size: 0.97rem; color: var(--vida-ink); padding-bottom: 20px; border-bottom: 1px solid var(--vida-line); }
.rm-amen-item svg { color: var(--vida-brown); flex: none; }
.rm-amen-grid.is-clamped .rm-amen-item.is-extra { display: none; }
.rm-amen-grid.is-open .rm-amen-item.is-extra { display: flex; }
/* A pill, not bare text — it previously carried styling identical to
   .rm-amen-subhead above it, so the only control in the section read as a label. */
.rm-amen-more {
	margin-top: 30px; display: inline-flex; align-items: center; gap: 9px;
	font-size: 0.78rem; letter-spacing: var(--ls-tight); text-transform: uppercase;
	font-weight: 700; color: var(--vida-brown); cursor: pointer;
	background: #fff; padding: 13px 24px;
	border: 1px solid var(--vida-line); border-radius: 999px;
	transition: transform 0.3s var(--vida-ease), box-shadow 0.3s var(--vida-ease), border-color 0.3s var(--vida-ease);
}
.rm-amen-more:hover { border-color: var(--vida-brown); transform: translateY(-2px); box-shadow: var(--vida-shadow-card); }
.rm-amen-more .arr { transition: transform 0.3s var(--vida-ease); }
.rm-amen-more[aria-expanded="true"] .arr { transform: rotate(180deg); }

/* Grouped feature blocks — kitchenette / badkamer / uitzicht, as white cards */
.rm-amen-groups {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px; margin-bottom: 46px;
	/* Cards hug their own content — a short list (one "Tuinzicht" line) must not
	   be stretched to the height of the longest card next to it. */
	align-items: start;
}
.rm-amen-group {
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg); padding: 26px 26px 22px;
	box-shadow: var(--vida-shadow-card);
}
.rm-amen-group-title {
	display: flex; align-items: center; gap: 11px; margin: 0 0 16px;
	font-size: 1rem; line-height: 1.3;
}
.rm-amen-group-title svg { color: var(--vida-caramel); flex: none; }
/* Multi-column inside the card: with only two cards each is ~half the container,
   and a single column of 8 short items left most of the card empty. */
.rm-amen-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 11px 22px;
}
.rm-amen-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.93rem; color: var(--vida-ink); }
.rm-amen-list svg { color: var(--vida-brown); flex: none; margin-top: 2px; }

/* Highlight / event detail blocks — copy left, facts aside (spec appendix) */
/* ---------- Detailpagina's highlight + evenement: compacter ---------------- */

/* ⚠ Deze pagina's dragen weinig tekst: intro, een lijstje en wat feiten. Met de
   standaard sectiepadding (128,8px boven én onder) stond er 257px leegte tussen
   twee blokken van nauwelijks 140px inhoud. Hier een eigen, veel kleinere maat. */
.single-highlight .vida-section,
.single-vida_event .vida-section { padding-block: clamp(40px, 4.4vw, 64px); }
/* De intro pakt de volle breedte maar leest prettiger op leeslengte. */
/* ⚠ De intro stond GECENTREERD op ~790px breed: bij vijf regels lopende tekst
   geeft dat een rafelige, moeilijk leesbare blokvorm. Links uitgelijnd op
   leeslengte. */
/* ⚠ De intro stond GECENTREERD op ~790px: bij vijf regels lopende tekst geeft
   dat een rafelig blok. Links uitgelijnd op leeslengte.
   ⚠⚠ .vida-lede IS zelf de .vida-container (zie de opmerking verderop), dus
   NIET zijn eigen max-width of marges aanpassen — dan schuift het hele blok
   naar de schermrand. De KINDEREN krijgen de leesbreedte. */
.single-highlight .vida-lede,
.single-vida_event .vida-lede { text-align: left; }
.single-highlight .vida-lede > *,
.single-vida_event .vida-lede > * { max-width: 68ch; margin-inline: 0; }
/* Slot-CTA hoeft hier niet zo hoog te zijn als op de landingspagina's. */
.single-highlight .vida-cta--image,
.single-vida_event .vida-cta--image { padding-block: clamp(64px, 7vw, 96px); }
/* Het feitenblok stond als losse kaartjes onder elkaar; als één omlijnd blok
   met haarlijnen ertussen oogt het rustiger en scheelt het hoogte. */
.vida-detail__aside { gap: 0; background: var(--vida-bg); border: 1px solid var(--vida-line); border-radius: var(--vida-radius-lg); overflow: clip; }
.vida-detail__fact { border: 0; border-radius: 0; box-shadow: none; padding: 16px 20px; }
.vida-detail__fact + .vida-detail__fact { border-top: 1px solid var(--vida-line); }

.vida-detail__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 860px) { .vida-detail__grid { grid-template-columns: 1fr; } }
.vida-detail__main .vida-prose { margin-top: 14px; }
.vida-detail__aside { display: grid; gap: 18px; }
.vida-detail__fact {
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg); padding: 22px 24px;
	box-shadow: var(--vida-shadow-card);
}
.vida-detail__fact-label {
	display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
	font-size: 0.74rem; letter-spacing: var(--ls-tight); text-transform: uppercase;
	font-weight: 700; color: var(--vida-brown);
}
.vida-detail__fact-label svg { color: var(--vida-caramel); flex: none; }
.vida-detail__fact-value { font-size: 1rem; color: var(--vida-ink); }
.vida-detail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vida-detail__list li { display: flex; gap: 9px; font-size: 0.93rem; color: var(--vida-ink-2); }
.vida-detail__list li::before { content: "—"; color: var(--vida-caramel); flex: none; }
.vida-detail__link { justify-self: start; }

/* Breadcrumbs (spec §5) — inside the hero, riding the existing scrim */
.vida-crumbs { margin-bottom: 16px; }
.vida-crumbs__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 4px 8px;
	font-size: 0.8rem; letter-spacing: 0.02em;
}
/* The hero scrim is deliberately weakest mid-gradient (0.08), which is exactly
   where this sits — the huge title carries on size alone, 13px text does not.
   Hence near-solid white plus a shadow, so it stays legible on any photo. */
.vida-crumbs__list { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
.vida-crumbs__item { display: inline-flex; align-items: center; gap: 8px; }
.vida-crumbs__item a { color: rgba(255, 255, 255, 0.92); text-decoration: none; transition: color 0.25s var(--vida-ease); }
.vida-crumbs__item a:hover { color: #fff; text-decoration: underline; }
.vida-crumbs__item [aria-current="page"] { color: #fff; font-weight: 600; }
/* Non-linking crumbs (e.g. the pageless "Highlights" header) */
.vida-crumbs__item span:not([aria-current]):not(.vida-crumbs__sep) { color: rgba(255, 255, 255, 0.92); }
.vida-crumbs__sep { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 520px) { .vida-crumbs__list { font-size: 0.74rem; } }

/* Detail-page lede — the one-line intro on highlight/event pages, set like a
   pull quote: centred, larger, and held to ~65% of the container. */
/* Constrain the CHILDREN, not .vida-lede itself — it is also the .vida-container,
   so putting max-width here would override the container's own 1240px cap and
   the lede would keep growing on wide screens. */
.vida-lede { text-align: center; }
.vida-lede > * { max-width: 65%; margin-inline: auto; }
.vida-lede p {
	font-size: clamp(1.375rem, 1.6vw, 1.5rem); /* 22 → 24px */
	line-height: 1.5;
	color: var(--vida-ink);
}
.vida-lede p + p { margin-top: 0.7em; }
@media (max-width: 860px) {
	.vida-lede > * { max-width: 100%; }
}

/* Events — anchor nav + "Binnenkort" badge on seasonal events */
.vida-ev-anchors { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(34px, 4vw, 54px); }
.vida-ev-anchors__link {
	display: inline-flex; padding: 11px 20px; border-radius: 999px;
	background: #fff; border: 1px solid var(--vida-line);
	font-size: 0.82rem; letter-spacing: var(--ls-tight); text-transform: uppercase;
	font-weight: 700; color: var(--vida-brown); text-decoration: none;
	transition: border-color 0.3s var(--vida-ease), transform 0.3s var(--vida-ease);
}
.vida-ev-anchors__link:hover { border-color: var(--vida-brown); transform: translateY(-2px); }
.vida-hl-group__intro { margin: -6px 0 26px; color: var(--vida-muted); max-width: 62ch; }
.vida-card__media { position: relative; }
.vida-card__badge {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	padding: 7px 14px; border-radius: 999px;
	background: var(--vida-brown); color: #fff;
	font-size: 0.68rem; letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 700;
}

/* Highlight category overview — spec asks for a true 2-column grid */
.vida-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .vida-hl-grid { grid-template-columns: 1fr; } }

/* Sideways nav between highlight categories */
.vida-hl-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(40px, 5vw, 64px); }
.vida-hl-switch__label {
	margin-right: 6px; font-size: 0.78rem; letter-spacing: var(--ls-tight);
	text-transform: uppercase; font-weight: 700; color: var(--vida-brown);
}
.vida-hl-switch__chip {
	display: inline-flex; padding: 10px 18px; border-radius: 999px;
	background: #fff; border: 1px solid var(--vida-line);
	font-size: 0.9rem; color: var(--vida-ink); text-decoration: none;
	transition: border-color 0.3s var(--vida-ease), transform 0.3s var(--vida-ease);
}
.vida-hl-switch__chip:hover { border-color: var(--vida-brown); transform: translateY(-2px); }
.vida-hl-intro { margin-bottom: clamp(28px, 3vw, 44px); }

/* Over Ons — subpage hub cards (client spec 2026-08-17) */
.vida-about__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.vida-about__card {
	display: flex; flex-direction: column; overflow: clip;
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg); box-shadow: var(--vida-shadow-card);
	text-decoration: none; color: inherit;
	transition: transform 0.3s var(--vida-ease), box-shadow 0.3s var(--vida-ease);
}
.vida-about__card:hover { transform: translateY(-4px); box-shadow: var(--vida-shadow-lift); }
.vida-about__card-media { display: block; aspect-ratio: 16 / 10; overflow: clip; background: var(--vida-cream); }
.vida-about__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--vida-ease); }
.vida-about__card:hover .vida-about__card-media img { transform: scale(1.05); }
.vida-about__card-media .vida-media-placeholder { width: 100%; height: 100%; }
.vida-about__card-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; flex: 1; }
.vida-about__card-body h3 { margin: 0; font-size: 1.18rem; }
.vida-about__card-text { color: var(--vida-ink-2); font-size: 0.94rem; line-height: 1.55; }
.vida-about__card-link {
	margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.78rem; letter-spacing: var(--ls-tight); text-transform: uppercase;
	font-weight: 700; color: var(--vida-brown);
}
.vida-about__card:hover .vida-about__card-link svg { transform: translateX(3px); }
.vida-about__card-link svg { transition: transform 0.3s var(--vida-ease); }

/* Uitzicht — a chip row, not a card (it is never more than 1–2 values) */
.rm-amen-views { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 44px; }
.rm-amen-views-label {
	display: inline-flex; align-items: center; gap: 9px; margin-right: 4px;
	font-size: 0.78rem; letter-spacing: var(--ls-tight); text-transform: uppercase;
	font-weight: 700; color: var(--vida-brown);
}
.rm-amen-views-label svg { color: var(--vida-caramel); }
.rm-amen-chip {
	display: inline-flex; align-items: center; padding: 9px 17px;
	background: #fff; border: 1px solid var(--vida-line); border-radius: 999px;
	font-size: 0.9rem; color: var(--vida-ink);
}

/* Caveats + rookbeleid — no ticks, no card; a quiet footnote block */
.rm-amen-notes { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--vida-line); }
.rm-amen-notes-title {
	margin: 0 0 12px; font-size: 0.78rem; letter-spacing: var(--ls-tight);
	text-transform: uppercase; font-weight: 700; color: var(--vida-muted);
}
.rm-amen-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rm-amen-notes li { display: flex; gap: 11px; font-size: 0.88rem; color: var(--vida-muted); }
.rm-amen-notes li::before { content: "—"; color: var(--vida-caramel); flex: none; }
.rm-amen-subhead {
	margin: 0 0 22px; font-size: 0.78rem; letter-spacing: var(--ls-tight);
	text-transform: uppercase; font-weight: 700; color: var(--vida-brown);
}
/* Block-level flex so the note drops below the inline-flex "Meer voorzieningen"
   button instead of sitting on the same line as it. */
.rm-amen-note {
	margin-top: 28px; display: flex; width: fit-content; align-items: center; gap: 9px;
	font-size: 0.88rem; color: var(--vida-muted);
}
.rm-amen-note svg { color: var(--vida-brown); flex: none; }

/* "Onze Suites" carousel */
.arooms { padding-block: var(--vida-section-pad); background: var(--vida-cream); }
.arooms-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; }
.arooms-head h2 { margin-top: 10px; }
/* Reviews — split testimonial slider on a warm espresso band */
.vida-reviews {
	background: linear-gradient(160deg, #241a12 0%, #3c291c 58%, #5a3f28 130%);
	color: #fff;
}
.vida-reviews h2 { color: #fff; }
.vida-reviews .vida-eyebrow { color: #fff; }

.vida-revs2 {
	display: grid; gap: clamp(36px, 5vw, 80px); align-items: center;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.vida-revs2__aside h2 { margin-block: 14px 0; }
.vida-revs2__intro { margin-top: 18px; color: rgba(255, 255, 255, 0.78); max-width: 42ch; }
.vida-revs2__ratingwrap { margin-top: 22px; }
.vida-revs2__nav { display: flex; gap: 12px; margin-top: 34px; }

/* Arrow-icon forward nudge on hover — shared by every nav button */
.arooms-btn svg, .vida-revs2__btn svg { transition: transform 0.25s var(--vida-ease); }
[data-vida-revs-prev]:hover svg, .arooms-prev:hover:not(:disabled) svg { transform: translateX(-4px); }
[data-vida-revs-next]:hover svg, .arooms-next:hover:not(:disabled) svg { transform: translateX(4px); }

/* Reviews slider — circular outline buttons */
.vida-revs2__btn {
	width: 60px; height: 60px; border-radius: 50%;
	border: 1.5px solid var(--vida-line-light); background: transparent; color: #fff;
	display: grid; place-items: center; cursor: pointer;
	transition: background 0.3s var(--vida-ease), border-color 0.3s var(--vida-ease), color 0.3s var(--vida-ease), transform 0.3s var(--vida-ease), box-shadow 0.3s var(--vida-ease);
}
.vida-revs2__btn:hover { background: var(--vida-caramel); border-color: var(--vida-caramel); color: var(--vida-ink); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }

/* Stage — testimonials stacked; only the active one shows */
.vida-revs2__stage { position: relative; }
.vida-revq {
	position: absolute; inset: 0; margin: 0;
	display: flex; flex-direction: column; align-items: flex-start;
	opacity: 0; visibility: hidden; transform: translateX(24px);
	transition: opacity 0.45s var(--vida-ease), transform 0.45s var(--vida-ease), visibility 0.45s;
	pointer-events: none;
}
.vida-revq.is-active { position: relative; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.vida-revq__mark {
	font-family: var(--ff-display); font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
	line-height: 0.7; color: var(--vida-caramel); margin-bottom: 8px;
}
.vida-revq__text {
	margin: 0; font-family: var(--ff-body); font-weight: 500;
	font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.28; color: #fff;
	letter-spacing: 0;
}
.vida-revq__by { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.vida-revq__avatar {
	width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.vida-revq__avatar--initial {
	display: grid; place-items: center; background: var(--vida-caramel);
	color: var(--vida-ink); font-family: var(--ff-display); font-weight: 600; font-size: 1.4rem;
}
.vida-revq__ident { display: flex; flex-direction: column; gap: 2px; }
.vida-revq__author { font-weight: 700; color: #fff; }
.vida-revq__meta { font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); }

@media (max-width: 860px) {
	.vida-revs2 { grid-template-columns: 1fr; gap: 32px; }
}

/* Highlights archive — grouped by type */
.vida-hl-group + .vida-hl-group { margin-top: clamp(40px, 5vw, 64px); }
.vida-hl-group__title {
	display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
	font-size: var(--fs-h3);
}
.vida-hl-group__title::after {
	content: ""; flex: 1; height: 1px; background: var(--vida-line);
}

.arooms-actions { display: flex; align-items: center; gap: 16px; flex: none; flex-wrap: wrap; }
.arooms-nav { display: flex; gap: 12px; flex: none; align-items: center; }
.arooms-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--vida-line); background: #fff; color: var(--vida-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--vida-shadow-card); transition: background 0.3s var(--vida-ease), border-color 0.3s var(--vida-ease), color 0.3s var(--vida-ease), transform 0.3s var(--vida-ease), box-shadow 0.3s var(--vida-ease); }
.arooms-btn:hover:not(:disabled) { background: var(--vida-brown); border-color: var(--vida-brown); color: #fff; box-shadow: var(--vida-shadow-cta); transform: translateY(-2px); }
.arooms-btn:active { transform: translateY(0); }
.arooms-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.arooms-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 16px 4px 40px; scrollbar-width: none; }
.arooms-track::-webkit-scrollbar { display: none; }
/* Brief §10 — grotere beelden, minder kaderwerk. Rand weg, schaduw lichter;
   ⚠ deze component draait óók de "Onze Suites"-carrousel op de suitepagina, dus
   de verandering werkt daar bewust in door (zelfde beeldtaal). */
.aroom-card { flex: 0 0 calc((100% - 48px) / 2.4); scroll-snap-align: start; background: #fff; border: 0; border-radius: var(--vida-radius-lg); overflow: clip; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(43, 31, 22, 0.05), 0 12px 28px rgba(43, 31, 22, 0.07); transition: transform 0.4s var(--vida-ease), box-shadow 0.4s var(--vida-ease); }
.aroom-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43, 31, 22, 0.06), 0 18px 40px rgba(43, 31, 22, 0.11); }
/* Beeld dominanter: 4/3 → 5/4. */
.aroom-img { display: block; aspect-ratio: 5 / 4; overflow: clip; background: var(--vida-cream-2); }
.aroom-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--vida-ease); }
.aroom-card:hover .aroom-img img { transform: scale(1.04); }
.aroom-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.aroom-body h3 { font-size: var(--fs-h4); }
.aroom-body h3 a:hover { color: var(--vida-brown); }
.aroom-tag { margin-top: 8px; color: var(--vida-muted); font-size: 0.9rem; flex: 1; }
.aroom-price { margin-top: 10px; font-weight: 700; font-size: 0.95rem; color: var(--vida-brown); }
.aroom-link { margin-top: 14px; font-size: 0.78rem; letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 700; color: var(--vida-brown); }
.aroom-link:hover { color: var(--vida-caramel-text); }

@media (max-width: 980px) {
	.rm-split-grid { grid-template-columns: 1fr; }
	.rm-gallery { position: static; order: -1; }
}
@media (max-width: 760px) {
	.aroom-card { flex-basis: 82%; max-width: 340px; }
}
@media (max-width: 560px) {
	.rm-hero { height: clamp(360px, 64vh, 480px); }
	.arooms-head { flex-wrap: wrap; }
}

/* ---------- 11c. Rating badge (TrustIndex) — reusable, site-wide ------------- */
.vida-rating { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.vida-rating__stars { display: inline-flex; gap: 2px; color: var(--vida-caramel); }
.vida-rating__stars svg { fill: currentColor; stroke: none; }
.vida-rating__score { font-weight: 700; color: var(--vida-ink); }
.vida-rating__count { color: var(--vida-muted); font-weight: 500; }
.vida-rating:hover .vida-rating__count { color: var(--vida-brown); }
/* On dark bands (reviews, footer, image CTA) */
.vida-reviews .vida-rating__score, .vida-footer .vida-rating__score, .vida-cta--image .vida-rating__score { color: #fff; }
.vida-reviews .vida-rating__count, .vida-footer .vida-rating__count, .vida-cta--image .vida-rating__count { color: rgba(255, 255, 255, 0.82); }
.vida-reviews .vida-rating:hover .vida-rating__count, .vida-footer .vida-rating:hover .vida-rating__count, .vida-cta--image .vida-rating:hover .vida-rating__count { color: #fff; }

/* ---------- 11d. Partners marquee — "also found on" carousel ----------------- */
.vida-partners { background: var(--vida-cream); padding-block: clamp(36px, 4vw, 56px); overflow: hidden; }
.vida-partners__label {
	text-align: center; font-size: 0.78rem; font-weight: 700;
	letter-spacing: var(--ls-tight); text-transform: uppercase;
	color: var(--vida-caramel-text); margin-bottom: 26px;
}
.vida-marquee {
	overflow: hidden; padding-block: 26px; /* room so the hover lift + shadow aren't clipped */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Two identical copies tile seamlessly only if EVERY item (incl. the last of the
   first copy) carries the same trailing gap — so use margin-right, not `gap`.
   translateX(-50%) then lands exactly one copy over = no jump. */
.vida-marquee__track { display: flex; width: max-content; animation: vida-marq 34s linear infinite; }
.vida-marquee__track .vida-chip { margin-right: 16px; }
.vida-marquee:hover .vida-marquee__track { animation-play-state: paused; }
@keyframes vida-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vida-chip {
	display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
	padding: 12px 22px; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-pill); background: #fff;
	font-weight: 600; font-size: 0.9rem; color: var(--vida-ink);
	box-shadow: var(--vida-shadow-card);
	transition: border-color 0.2s var(--vida-ease), color 0.2s var(--vida-ease), transform 0.2s var(--vida-ease), box-shadow 0.2s var(--vida-ease);
}
.vida-chip:hover { border-color: var(--vida-brown); color: var(--vida-brown); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(43, 31, 22, 0.16); }
.vida-marquee__label { text-transform: none; }
.vida-chip__ico { display: inline-flex; }
.vida-chip__ico svg { color: var(--vida-caramel-deep); }
@media (prefers-reduced-motion: reduce) {
	.vida-marquee { -webkit-mask-image: none; mask-image: none; }
	.vida-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---------- 12. Footer -------------------------------------------------------- */

/* Near-black footer — wordmark + social left, four link columns right, a rule,
   then a legal row. */
.vida-footer { background: #131313; color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }
.vida-footer a { color: rgba(255, 255, 255, 0.62); transition: color 0.2s; }
.vida-footer a:hover { color: #fff; }

.vida-footer__top {
	display: grid; gap: clamp(40px, 5vw, 72px);
	grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2.4fr);
	padding-block: clamp(48px, 6vw, 84px) clamp(36px, 4vw, 56px);
}
.vida-footer__logo {
	font-family: var(--ff-display); font-weight: 600; font-size: 1.7rem;
	color: #fff; letter-spacing: -0.01em;
}
.vida-footer__logo em { font-style: italic; color: var(--vida-caramel); }
.vida-footer__logo-img { width: 170px; height: auto; display: block; }
.vida-footer__rating { margin-top: 22px; }
.vida-footer__social { display: flex; gap: 16px; margin-top: 34px; }
.vida-footer__social a { color: rgba(255, 255, 255, 0.85); }
.vida-footer__social a:hover { color: #fff; }

.vida-footer__cols {
	display: grid; gap: 32px 40px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vida-footer__heading {
	font-family: var(--ff-body); font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase; color: #fff;
	margin-bottom: 22px;
}
.vida-footer__col ul { display: grid; gap: 15px; }
.vida-footer__col a { line-height: 1.35; }

.vida-footer__rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); margin: 0; }

.vida-footer__legal {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px;
	padding-block: clamp(28px, 3vw, 40px);
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.vida-footer__legal a { color: rgba(255, 255, 255, 0.82); }
.vida-footer__legal a:hover { color: #fff; }
.vida-footer__legal-end {
	margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
	text-transform: none; letter-spacing: 0; font-weight: 500;
	color: rgba(255, 255, 255, 0.4);
}
.vida-footer__legal-end a { color: rgba(255, 255, 255, 0.5); }

@media (max-width: 900px) {
	.vida-footer__top { grid-template-columns: 1fr; gap: 40px; }
	.vida-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
	.vida-footer__cols { grid-template-columns: 1fr; }
	.vida-footer__legal-end { margin-left: 0; width: 100%; }
}

/* ---------- 13. Responsive header --------------------------------------------- */

.vida-mn__trigger { display: none; }

@media (max-width: 1099px) {
	.vida-header__nav { display: none; }
	.vida-mn__trigger { display: inline-flex; }
	.vida-header__inner { justify-content: space-between; }
	.vida-header__nav + .vida-header__actions { margin-left: auto; }
}
@media (max-width: 560px) {
	.vida-header__cta { display: none; } /* CTA lives in the mobile drawer */
	.vida-hero { min-height: 72vh; }
	.vida-cb { border-radius: var(--vida-radius-md); padding: 12px; }
	.vida-cb__row { gap: 10px; }
	.vida-cb__pill, .vida-cb__search { min-height: 56px; }
	.vida-cb__dates { flex: 1 1 100%; justify-content: space-between; }
	/* De datumpill zelf moet ook kunnen krimpen: als één nowrap-blok is hij
	   ~467px breed en dat is breder dan de telefoon. */
	.vida-cb__dates { flex-wrap: wrap; row-gap: 4px; padding-inline: 16px; }
	.vida-cb__dates .vida-cb__sep { display: none; }
	.vida-cb__date { flex: 1 1 45%; min-width: 0; }

	/* Brief §18 — stapelen: datums | gasten | CTA. De kortingscode blijft
	   absoluut boven de balk staan, anders wordt het een vierde rij.
	   ⚠ Verankerd aan de ONDERKANT (`bottom: 100%`), niet met `top: -28px`. Op
	   de telefoon brak het label over twee regels en groeide het naar beneden de
	   balk in — gemeten: 29px overlap over de bovenrand. Vanaf de onderkant kan
	   dat per definitie niet, hoe hoog het label ook wordt. */
	.vida-cb__row { flex-wrap: wrap; }
	/* ⚠ `min-height: 0` hoort hier óók. De mobiele `.vida-cb__pill`-regel hierboven
	   zet 56px minimumhoogte, en de knop draagt die klasse: het label werd dus
	   56px hoog voor één regel tekst en reikte daarmee tot in de introzin boven de
	   balk. Tekst hoort de hoogte te bepalen, niet de pilmaat. */
	.vida-cb__code-toggle {
		position: absolute; top: auto; bottom: calc(100% + 8px); right: 0;
		margin-top: 0; min-height: 0; padding: 0;
	}
	.vida-cb__dates { flex: 1 1 100%; }
	.vida-cb__guests { flex: 1 1 100%; justify-content: center; }
	.vida-cb__search { flex: 1 1 100%; justify-content: center; }

}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Scroll-animatie — richtinggevoelig onthullen + golf over de koppen
   ==========================================================================
   Zie de JS-noot in main.js. Kern: de klassen hieronder worden PAS door JS
   gezet. Een element zonder .vida-reveal is dus gewoon volledig zichtbaar —
   valt de JS uit, dan is er niets weg, alleen de beweging.

   --vida-dir is 1 (naar beneden gescrold) of -1 (naar boven). Die vermenigvuldigt
   de verschuiving, zodat de inhoud meebeweegt met de richting waarin je leest.
   ⚠ Geen `transform` op de hero — die moet bij de eerste paint al staan (LCP). */

.vida-reveal {
	--vida-dir: 1;
	opacity: 0;
	transform: translate3d(0, calc(var(--vida-dir) * 34px), 0);
	transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
	            transform .62s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

.vida-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Koppen: elk woord zit in een masker en klapt van boven naar beneden open.
   De vertraging per woord staat inline (JS), dat maakt de golf. */
.vida-reveal-words {
	--vida-dir: 1;
}

.vida-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* Anders knipt overflow de staarten van de g, j en p af. */
	padding-bottom: .12em;
	margin-bottom: -.12em;
}

.vida-word__in {
	display: inline-block;
	transform: translate3d(0, calc(var(--vida-dir) * 108%), 0);
	opacity: 0;
	transition: transform .72s cubic-bezier(.22, .61, .36, 1),
	            opacity .52s ease;
}

.vida-reveal-words.is-in .vida-word__in {
	transform: none;
	opacity: 1;
}

/* Rijen op de overzichten: de foto en de tekst komen net iets uit elkaar,
   dat leest rustiger dan één blok dat in zijn geheel omhoog schuift. */
.vida-suiterow.vida-reveal .vida-suiterow__media { transition-delay: .06s; }
.vida-suiterow.vida-reveal .vida-suiterow__body  { transition-delay: .14s; }

/* Kaartenrijen lopen per kaart op, maar houden het kort — bij twaalf kaarten
   wordt een lange trap juist vervelend, vandaar de cap op het 6e kind. */
.vida-reveal:nth-child(2)  { transition-delay: .05s; }
.vida-reveal:nth-child(3)  { transition-delay: .10s; }
.vida-reveal:nth-child(4)  { transition-delay: .15s; }
.vida-reveal:nth-child(5)  { transition-delay: .20s; }
.vida-reveal:nth-child(n+6) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
	.vida-reveal,
	.vida-word__in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Ankers vanuit de dropdowns: de sticky balk mag de titel niet afdekken. */
.vida-suiterow[id],
.vida-tile[id] { scroll-margin-top: 108px; }

/* ==========================================================================
   Tegelraster — items die alleen een titel hebben
   ==========================================================================
   Een volle rij zet een foto naast een tekstkolom. Staat daar niets in, dan is
   die halve breedte leeg — zichtbaar op /highlights/activiteiten/ bij
   Fietsroutes, Cauberg en Natuurwandelingen. Die items staan hier compact bij
   elkaar in plaats van elk een schermhoogte op te eisen.

   ⚠ Geen link en geen hover-lift: er is geen detailpagina meer, en zonder
   klanttekst valt er ook niets te lezen. Alleen de foto opent groot. */

.vida-tiles__title {
	font-family: var(--vida-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	margin: 0 0 clamp(18px, 2.4vw, 26px);
}

/* Eigen ondergrond, zodat de band zichtbaar losstaat van de witte rijen erboven.
   Volgt de afwisselingsregel: geen twee aangrenzende vlakken op dezelfde kleur. */
.vida-tiles-band {
	background: linear-gradient(140deg, var(--vida-cream), var(--vida-cream-2));
	border-top: 1px solid var(--vida-line);
}

/* ⚠ Vast 3 naast elkaar (3×1), niet auto-fill. Met auto-fill bepaalt de
   containerbreedte het aantal kolommen, en dan viel het raster bij een smaller
   venster stilletjes terug naar één kolom — precies de lege ruimte die deze
   tegels moesten oplossen. */
.vida-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.2vw, 26px);
}

@media (max-width: 860px) {
	.vida-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.vida-tiles { grid-template-columns: 1fr; }
}

.vida-tile {
	background: #fff;
	border-radius: var(--vida-radius-md);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 26, 18, .06), 0 8px 24px rgba(16, 26, 18, .06);
	display: flex;
	flex-direction: column;
}

.vida-tile__media {
	position: relative;
	/* Vaste verhouding: alle tegels even hoog, ook die met het logo. */
	aspect-ratio: 4 / 3;
	background: var(--vida-espresso, #2f2a24);
	overflow: hidden;
	isolation: isolate;
}

.vida-tile__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s var(--vida-ease);
}
.vida-tile__img.is-active { opacity: 1; z-index: 2; }

/* ⚠ Zonder deze laag valt de uitgaande foto meteen weg en zie je de donkere
   achtergrond doorschijnen tijdens de cross-fade. Zelfde truc als de rijen. */
.vida-tile__img.is-prev { opacity: 1; z-index: 1; transition: none; }

/* Logo-placeholder: alleen waar de klant geen foto aanleverde. */
.vida-tile__logo {
	position: absolute; inset: 0;
	display: grid; place-items: center;
}
.vida-tile__logo img {
	width: min(52%, 150px);
	height: auto;
	opacity: .85;
}

.vida-tile__zoom {
	position: absolute; z-index: 4; right: 10px; top: 10px;
	width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid rgba(255, 255, 255, .7);
	background: rgba(16, 26, 18, .42); color: #fff;
	cursor: pointer; backdrop-filter: blur(6px);
	transition: background .2s var(--vida-ease), transform .2s var(--vida-ease);
}
.vida-tile__zoom:hover { background: #fff; color: var(--vida-brown); transform: scale(1.06); }

.vida-tile__dots {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px;
	display: flex; justify-content: center; gap: 6px;
}
.vida-tile__dot {
	width: 7px; height: 7px; padding: 0; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .9);
	background: rgba(16, 26, 18, .35); cursor: pointer;
	transition: background .2s, transform .2s var(--vida-ease);
}
.vida-tile__dot:hover { transform: scale(1.2); }
.vida-tile__dot.is-active { background: #fff; }

.vida-tile__body {
	padding: clamp(14px, 1.6vw, 18px) clamp(15px, 1.8vw, 20px) clamp(16px, 2vw, 22px);
}

.vida-tile__title {
	font-family: var(--vida-font-display);
	font-size: 1.06rem;
	line-height: 1.3;
	margin: 0;
}

.vida-tile__meta {
	margin: 6px 0 0;
	font-size: .86rem;
	opacity: .72;
}

/* ==========================================================================
   HOMEPAGE — PREMIUM REFINEMENT PASS (thema 0.61.0, 2026-09-26)
   ==========================================================================
   ⚠ ALLES WAT HIERONDER STAAT IS TERUG TE DRAAIEN DOOR DIT HELE BLOK TE
   VERWIJDEREN. Geen enkele bestaande regel erboven is aangepast of geschrapt;
   dit blok overschrijft ze alleen waar nodig. Eén uitzondering op "CSS-only":
   niets. Er zijn geen templatewijzigingen voor deze pass.

   ⚠ Alles is gescoopt op `.home` zodra de klasse óók buiten de homepage leeft
   (.vida-hero → suitepagina's, .vida-welcome/.vida-sust → Over Ons,
   .vida-reviews → Beoordelingen, .vida-cb → alle hero's). Zo kan deze pass
   geen andere pagina veranderen. Homepage-eigen klassen (.vida-suite-card,
   .vida-dest, .vida-explore) staan er zonder scope bij — die bestaan nergens
   anders.

   Wat NIET is aangeraakt en waarom, staat in CHANGELOG.md 0.61.0. */

/* ── Ritme: meer lucht tussen de secties ──────────────────────────────────
   De pagina liep als een aaneenschakeling van blokken; dit geeft elke sectie
   ademruimte zonder de compositie te verplaatsen. */
.home .vida-section { padding-block: clamp(84px, 9vw, 132px); }
.home .vida-section__head { margin-bottom: clamp(40px, 4.6vw, 64px); }

/* ── Secundaire tekst was te klein (brief §15) ────────────────────────────
   Introzinnen onder een kop stonden op body-formaat (17px) in gedempt grijs.
   Op lead-formaat leest de pagina rustiger en minder "webshop". */
.home .vida-section__intro {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--vida-ink-2);
	max-width: 58ch;
}

/* ── Hero ────────────────────────────────────────────────────────────────
   ⚠ De vlakke overlay van 0.60 was een expliciet klantbesluit (2026-09-25:
   "niet alleen het midden donker, de héle foto"). Die afspraak blijft staan —
   het verloop hieronder dekt nog steeds de VOLLEDIGE foto. Alleen de verdeling
   verandert: lichter aan de bovenkant, waar alleen lucht en muur zitten, en
   dichter onderin achter titel en boekingsbalk. Gemiddeld ~0.56 tegen 0.60, dus
   de foto houdt detail terwijl de tekst juist méér contrast krijgt. */
.home .vida-hero__scrim {
	background: linear-gradient(
		180deg,
		rgba(16, 26, 18, 0.40) 0%,
		rgba(16, 26, 18, 0.52) 34%,
		rgba(16, 26, 18, 0.66) 68%,
		rgba(16, 26, 18, 0.76) 100%
	);
}

/* De naam mag domineren (brief §3). */
.home .vida-hero__title {
	font-size: clamp(3.1rem, 7vw, 6rem);
	line-height: 0.98;
	letter-spacing: -0.015em;
}
.home .vida-hero__sub {
	font-size: clamp(1.08rem, 1.35vw, 1.3rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.96);
}

/* ── Boekingsbalk: onderdeel van de hero, geen widget erop (brief §4) ──── */
.home .rm-hero-book,
.home .vida-hero__booking { max-width: 1180px; margin-inline: auto; }
/* ⚠ `:not(.vida-cb__code-toggle)` is dragend. De kortingscodeknop draagt óók
   `.vida-cb__pill`; zonder de uitsluiting kreeg dat tekstlabel hier 68px
   minimumhoogte en botste het weer tegen de introzin in de hero — precies de
   overlap die in 0.60.1 is opgelost. */
.home .vida-cb__pill:not(.vida-cb__code-toggle),
.home .vida-cb__search { min-height: 68px; }
.home .vida-cb__search {
	font-size: 1.06rem;
	padding-inline: 40px;
	letter-spacing: 0.005em;
}
.home .vida-cb__lbl { font-size: 0.74rem; }
.home .vida-cb__date input { font-size: 1.02rem; }

/* ── Suites: de foto leidt, niet het kader (brief §6) ───────────────────── */
.vida-suites-grid { gap: clamp(22px, 2.6vw, 38px); }
.vida-suite-card {
	/* ⚠ Rand weg, schaduw zachter. Een 1px lijn plus slagschaduw plus
	   accentbalk maakte er een standaard WordPress-kaart van; de brief vraagt
	   juist om minder kaderwerk. De kaart blijft wit, dus hij staat nog steeds
	   los van de cream ondergrond. */
	border: 0;
	box-shadow: 0 1px 2px rgba(16, 26, 18, .05), 0 14px 34px -18px rgba(16, 26, 18, .30);
}
.vida-suite-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(16, 26, 18, .06), 0 26px 54px -22px rgba(16, 26, 18, .38);
	border-color: transparent;
}
/* Meer foto in beeld: 4:3 → 5:4 geeft de kamer ~12% extra hoogte. */
.vida-suite-card__media { aspect-ratio: 5 / 4; }
/* Iets ruimere zoom bij hover — nog steeds subtiel (brief §17). */
.vida-suite-card:hover .vida-suite-card__img { transform: scale(1.06); }
.vida-suite-card__body { padding-top: 22px; }
.vida-suite-card__title { font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.16; }
.vida-suite-card__lede { font-size: 1rem; line-height: 1.6; color: var(--vida-ink-2); }

/* ── Bestemming: de cijfers zijn een reden om te boeken, geen decoratie ── */
.vida-dest__stat dt { font-size: clamp(2rem, 3vw, 2.9rem); }
.vida-dest__stat dd { font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); }
.vida-dest__body { font-size: var(--fs-lead); line-height: 1.6; }

/* ── Heuvelland: asymmetrisch in plaats van drie gelijke kolommen (§9) ───
   Eén grote ingang plus twee kleinere ernaast. Dezelfde inhoud, dezelfde
   volgorde, alleen een andere verdeling — puur grid, geen markup-wijziging. */
@media (min-width: 861px) {
	.vida-explore__grid {
		grid-template-columns: 1.25fr 1fr;
		grid-template-rows: auto auto;
		/* ⚠ `stretch`, niet `start`. De linkerkolom beslaat twee rijen; met
		   `start` kreeg hij alleen zijn eigen inhoudshoogte en bleef de rest van
		   de kolom leeg — een gat van honderden pixels tussen "Wandelen" en zijn
		   "Ontdek meer". */
		align-items: stretch;
	}
	.vida-explore__item:first-child { grid-row: span 2; }

	/* De grote foto vult de overgebleven hoogte in plaats van die aan witruimte
	   te verliezen, zodat beide kolommen onderaan gelijk eindigen. Daarom géén
	   vaste aspect-ratio hier: de rechterkolom (twee foto's + twee tekstblokken)
	   bepaalt de hoogte en de linkerfoto rekt mee. */
	.vida-explore__item:first-child .vida-explore__media {
		aspect-ratio: auto;
		flex: 1 1 auto;
		min-height: 0;
	}
	.vida-explore__item:first-child .vida-explore__media img { height: 100%; }
	/* Anders duwt het tekstblok zichzelf uit elkaar en staat de link alsnog los. */
	.vida-explore__item:first-child .vida-explore__body { flex: 0 0 auto; }
	.vida-explore__item:first-child .vida-explore__title { font-size: clamp(1.5rem, 2.2vw, 2rem); }
	.vida-explore__item:not(:first-child) .vida-explore__media { aspect-ratio: 16 / 9; }
}
.vida-explore__text { font-size: 1rem; line-height: 1.55; }

/* ── Duurzaamheid: een eigen hoofdstuk, geen donkere scheidingsstrook (§10) */
.home .vida-sust__body { font-size: var(--fs-lead); line-height: 1.6; }
.home .vida-sust__stat dt { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }

/* ── Reviews: BEWUST ONGEMOEID ────────────────────────────────────────────
   Brief §12 vraagt om groter citaat, zichtbare rating en bronvermelding. Bij
   nameten bleek dat er al te staan: `.vida-revq__text` is een blockquote van
   38px in de display-letter, met `.vida-revs2__rating`, `.vida-revs2__sources`
   en carrouselknoppen eromheen. Hier iets overheen zetten zou het alleen
   slechter maken. Niet aanraken. */

/* ── Slot-CTA: de natuurlijke afsluiting (brief §14) ───────────────────── */
.home .vida-cta h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.04; }

/* ── Mobiel (brief §18) ──────────────────────────────────────────────────
   ⚠ Op een telefoon staat er meer tekst over minder foto, dus daar mag het
   verloop dichter — net als de oude mobiele uitzondering op de vlakke overlay. */
@media (max-width: 900px) {
	.home .vida-hero__scrim {
		background: linear-gradient(
			180deg,
			rgba(16, 26, 18, 0.50) 0%,
			rgba(16, 26, 18, 0.62) 34%,
			rgba(16, 26, 18, 0.74) 68%,
			rgba(16, 26, 18, 0.82) 100%
		);
	}
}
@media (max-width: 860px) {
	.home .vida-section { padding-block: clamp(64px, 12vw, 88px); }
	/* ⚠ Niet alleen de hoogte terugzetten. De desktopregels hierboven geven de
	   zoekknop 1.06rem tekst en 40px zijpadding; op 375px brak het label daardoor
	   over twee regels ("Bekijk / beschikbaarheid"). Op de telefoon dus terug naar
	   de oorspronkelijke maatvoering. */
	.home .vida-cb__pill:not(.vida-cb__code-toggle),
	.home .vida-cb__search { min-height: 58px; }
	.home .vida-cb__search { font-size: 1rem; padding-inline: 22px; }
	.home .vida-cb__date input { font-size: 1rem; }
	.vida-suite-card__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   SUITEPAGINA — PREMIUM REFINEMENT PASS (thema 0.62.0, 2026-09-26)
   ==========================================================================
   ⚠ TERUG TE DRAAIEN DOOR DIT HELE BLOK TE VERWIJDEREN + de twee toevoegingen
   in single-suite.php (de `rm-close`-sectie en de `arooms-track--static`-klasse).
   Geen enkele bestaande regel hierboven is gewijzigd of geschrapt.

   ⚠ Alles is gescoopt op `.single-suite`. De `.rm-*`-klassen zijn NIET van de
   suitepagina alleen: `.rm-hero` draait ook de pagina-hero's en de extra's,
   `.arooms` ook de Extra's-carrousel op de homepage. Zonder die scope zou deze
   pass de homepage-pass en elke andere pagina overschrijven.

   ⚠ Los van de homepage-pass (0.61.0). Beide blokken zijn onafhankelijk te
   verwijderen. */

/* ── Hero: minder dichtgeslagen onderin (brief §3) ───────────────────────
   De onderrand stond op 0.86 — de foto liep daar vrijwel volledig dood terwijl
   juist dáár het bed en het interieur zitten. Nu 0.72, met iets meer body in het
   midden zodat de titel zijn contrast houdt. */
.single-suite .rm-hero-scrim {
	background:
		linear-gradient(180deg,
			rgba(20, 30, 22, 0.40) 0%,
			rgba(20, 30, 22, 0.30) 38%,
			rgba(16, 26, 18, 0.72) 100%),
		rgba(16, 26, 18, 0.16);
}
.single-suite .rm-hero-title {
	font-size: clamp(2.8rem, 6vw, 5rem);
	line-height: 1.0;
	letter-spacing: -0.015em;
}
.single-suite .rm-hero-sub { font-size: clamp(1rem, 1.2vw, 1.15rem); opacity: 0.95; }

/* Boekingsbalk gelijk aan de verfijnde homepage (brief §4). */
.single-suite .rm-hero-book { max-width: 1180px; margin-inline: auto; }
/* ⚠ `:not(.vida-cb__code-toggle)` — die knop draagt dezelfde pilklasse en zou
   anders 68px hoog worden en tegen de tekst erboven botsen (zie 0.60.1). */
.single-suite .vida-cb__pill:not(.vida-cb__code-toggle),
.single-suite .vida-cb__search { min-height: 68px; }
.single-suite .vida-cb__search { font-size: 1.06rem; padding-inline: 40px; }

/* ── Introductie: de kamerfoto mag zwaarder wegen (brief §5) ───────────── */
.single-suite .rm-split-grid { grid-template-columns: 1fr 1.28fr; }
.single-suite .rm-copy-sub { font-size: var(--fs-lead); line-height: 1.55; }
.single-suite .rm-features li { font-size: 1rem; }

/* ── Feitenband: leesbaar, geen decoratieve minitekst (brief §6) ───────── */
.single-suite .rm-marquee__label { font-size: 0.78rem; }
.single-suite .rm-marquee__value { font-size: 1.05rem; }
.single-suite .rm-marquee__item { gap: 11px; }

/* ── Voorzieningen: redactioneel in plaats van dashboard (brief §7) ──────
   De twee groepen stonden in witte kaarten mét rand én schaduw, op een cream
   ondergrond: drie lagen kaderwerk om een simpele lijst. Kaart weg, alleen een
   fijne scheidingslijn ertussen. Dat scheelt ~26px padding per groep en maakt
   de sectie merkbaar compacter zonder dat er iets uit gaat. */
.single-suite .rm-amen-group {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
.single-suite .rm-amen-groups {
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: 38px;
}
/* Haarlijn tussen de groepen in plaats van twee kaartranden. */
@media (min-width: 761px) {
	.single-suite .rm-amen-group + .rm-amen-group {
		padding-left: clamp(28px, 4vw, 56px);
		border-left: 1px solid var(--vida-line);
	}
}
.single-suite .rm-amen-group-title {
	font-size: 1.06rem;
	margin-bottom: 14px;
	letter-spacing: var(--ls-tight);
}
.single-suite .rm-amen-item { font-size: 1rem; padding-bottom: 16px; }
.single-suite .rm-amen-grid { gap: 16px 40px; }
.single-suite .rm-amen-head { margin-bottom: 28px; }
.single-suite .rm-amen { padding-block: clamp(72px, 7.5vw, 104px); }

/* ── Galerij: één beeld voorop, de rest eromheen (brief §8) ───────────────
   Gelijke duimnagels lezen als een bestandsmap. De eerste foto krijgt twee
   kolommen en twee rijen, zodat er meteen één beeld is dat de kamer als geheel
   laat zien. Puur grid — dezelfde foto's, dezelfde volgorde, niets verborgen. */
@media (min-width: 761px) {
	.single-suite .rm-photos-grid { grid-auto-rows: 1fr; }
	.single-suite .rm-photo:first-child {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: auto;
	}
}

/* ── Boekingsafsluiting na de galerij (brief §10) ─────────────────────────
   Rustig cream blok, geen reclamebanner. */
.rm-close {
	/* ⚠ ~28% korter dan de eerste versie (was clamp(64px, 7vw, 96px)). Dit is het
	   omslagpunt van de pagina; een half leeg cream vlak maakte er juist een
	   pauze van. */
	padding-block: clamp(46px, 5vw, 68px);
	background: linear-gradient(140deg, var(--vida-cream), var(--vida-cream-2));
	border-top: 1px solid var(--vida-line);
}
/* Breder dan 720px: de boekingsbalk staat er nu in en moet op één regel passen. */
.rm-close__inner { text-align: center; max-width: 1080px; }
.rm-close__title {
	margin-top: 10px;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.1;
}
.rm-close__body {
	margin-top: 12px;
	margin-bottom: 0;
	font-size: var(--fs-lead);
	color: var(--vida-ink-2);
}
.rm-close .vida-eyebrow { justify-content: center; }

/* ── De boekingsbalk in de afsluiting ─────────────────────────────────────
   Zelfde component als in de hero, maar daar ligt hij op een donkere foto en
   hier op cream. Vandaar een eigen omkadering: witte velden met een fijne rand,
   zodat de balk niet in de achtergrond wegvalt. */
.rm-close .vida-cb {
	margin-top: clamp(20px, 2.4vw, 28px);
	background: none;
	backdrop-filter: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	text-align: left;
}
.rm-close .vida-cb__pill:not(.vida-cb__code-toggle) {
	background: #fff;
	border: 1px solid var(--vida-line);
	box-shadow: 0 1px 2px rgba(16, 26, 18, .04);
}
/* ⚠ De kortingscodeknop hangt absoluut bóven de balk. In de hero staat hij op
   een foto en is hij wit; hier staat hij op cream en moet hij juist donker zijn,
   anders is hij onleesbaar. */
.rm-close .vida-cb__code-toggle {
	color: var(--vida-caramel-text);
	text-shadow: none;
}
.rm-close .vida-cb__code-toggle:hover,
.rm-close .vida-cb__code-toggle:focus-visible { color: var(--vida-brown); }

/* De primaire actie van de pagina: fors, hoog contrast, duidelijke focus. */
.rm-close .vida-cb__search {
	min-height: 74px;
	padding-inline: 46px;
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 26px -10px rgba(60, 41, 28, .55);
}
.rm-close .vida-cb__search:hover {
	background: var(--vida-brown-deep);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(60, 41, 28, .62);
}
.rm-close .vida-cb__search:focus-visible {
	outline: 3px solid var(--vida-caramel);
	outline-offset: 3px;
}

/* ── Minder lucht vóór "Ontdek de andere suites" ──────────────────────────
   De afsluiting is de primaire actie; de alternatieven zijn secundair en mogen
   er dichter op volgen. Zonder dit stond er een gat van ~100px tussen. */
.single-suite .rm-close + .arooms {
	padding-top: clamp(40px, 4.4vw, 60px);
	/* Wit ná het cream blok van de afsluiting: de afwisselingsregel van dit
	   project (geen twee aangrenzende vlakken op dezelfde ondergrond) én het
	   hiërarchieverschil — de afsluiting is de primaire actie, de alternatieven
	   zijn de rustige secundaire stap erna. */
	background: var(--vida-white);
}

@media (max-width: 860px) {
	.rm-close { padding-block: clamp(38px, 8vw, 52px); }
	.rm-close .vida-cb__search {
		min-height: 62px;
		padding-inline: 24px;
		font-size: 1.02rem;
	}
	.single-suite .rm-close + .arooms { padding-top: clamp(32px, 7vw, 44px); }
}

/* ── Andere suites: drie hele kaarten, geen halve derde (brief §12) ─────── */
@media (min-width: 981px) {
	.single-suite .arooms-track--static {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		padding-bottom: 8px;
	}
	.single-suite .arooms-track--static .aroom-card { flex: initial; }
	/* Zonder scrollruimte hebben de pijlen geen functie meer. */
	.single-suite .arooms-nav[data-vida-optional-nav] { display: none; }
}

/* ── Mobiel (brief §17) ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
	/* ⚠ Zelfde val als op de homepage: de grotere knoptekst brak op 375px over
	   twee regels. Op de telefoon terug naar de standaardmaat. */
	.single-suite .vida-cb__pill:not(.vida-cb__code-toggle),
	.single-suite .vida-cb__search { min-height: 58px; }
	.single-suite .vida-cb__search { font-size: 1rem; padding-inline: 22px; }
	.single-suite .rm-amen { padding-block: clamp(56px, 10vw, 76px); }
}
@media (max-width: 760px) {
	/* Groepen onder elkaar: lijn bovenlangs in plaats van links. */
	.single-suite .rm-amen-group + .rm-amen-group {
		padding-top: 24px;
		border-top: 1px solid var(--vida-line);
	}
}


/* ── Evenementen: de ankerstrip is navigatie, geen sectie ─────────────────
   Zie de noot in archive-vida_event.php. Gemeten vóór: 240px tussen de chips en
   de eerste groepskop, waarvan 128,8px onderpadding van deze strip. De ruimte
   hoort van de sectie eróna te komen. */
.vida-ev-anchorbar {
	padding-top: clamp(30px, 3.2vw, 44px);
	padding-bottom: 0;
}
/* ⚠ De chiprij heeft zelf ook nog `margin-bottom: 54px`. Die stapelde bovenop de
   57,6px van de groepssectie eronder — samen de 112px die er na de eerste fix
   nog overbleef. Binnen deze strip is die marge overbodig: de ruimte komt van de
   sectie erná. */
.vida-ev-anchorbar .vida-ev-anchors { margin-bottom: 0; }


/* ── /meningen/ — echte bronnen in plaats van een lege widgetmelding ──────
   Geen zelfgeschreven reviews: links naar de profielen waar gasten ze zelf
   hebben achtergelaten, plus de (klant-aangeleverde) score. */
.vida-reviews__sources { text-align: center; max-width: 760px; margin-inline: auto; }
.vida-reviews__sources .vida-reviews__badge { display: flex; justify-content: center; margin-bottom: clamp(20px, 2.6vw, 30px); }
.vida-reviews__lead { margin-top: 12px; font-size: var(--fs-lead); color: var(--vida-ink-2); }
.vida-revsrc {
	list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.vida-revsrc__link {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px; border-radius: var(--vida-radius-pill);
	border: 1px solid var(--vida-line); background: #fff;
	font-weight: 600; font-size: 0.95rem; color: var(--vida-ink);
	transition: border-color .2s, transform .2s var(--vida-ease), box-shadow .25s var(--vida-ease);
}
.vida-revsrc__link:hover {
	border-color: var(--vida-brown); transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(60, 41, 28, .5);
}
.vida-reviews__hint {
	margin-top: clamp(26px, 3vw, 36px); padding: 14px 18px;
	border: 1px dashed var(--vida-line); border-radius: var(--vida-radius-md);
	font-size: .88rem; color: var(--vida-muted);
}


/* ── /meningen/ — raster met de echte gastenreviews ──────────────────────── */
.vida-revgrid-wrap { margin-bottom: clamp(48px, 5vw, 72px); }
.vida-revgrid-wrap .vida-reviews__badge {
	display: flex; justify-content: center; margin-bottom: clamp(26px, 3vw, 38px);
}
.vida-revgrid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 26px);
	/* ⚠ Geen `align-items: start`. Daarmee kreeg elke kaart zijn eigen
	   inhoudshoogte en stonden de kaarten binnen één rij ongelijk — een korte
	   quote naast een lange gaf rafelige onderranden. `stretch` (de standaard)
	   trekt ze per rij gelijk; de naam onderaan blijft op één lijn dankzij de
	   `margin-top: auto` op .vida-revcard__by. */
	align-items: stretch;
	/* Alle kaarten even hoog, niet alleen binnen hun eigen rij: elke rij krijgt
	   de hoogte van de hoogste kaart in het hele raster. */
	grid-auto-rows: 1fr;
}
@media (max-width: 980px) { .vida-revgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vida-revgrid { grid-template-columns: 1fr; } }

.vida-revcard {
	background: #fff; border: 1px solid var(--vida-line);
	border-radius: var(--vida-radius-lg);
	padding: clamp(20px, 2.2vw, 26px);
	display: flex; flex-direction: column; gap: 12px;
}
/* ⚠ `vida_icon('star')` levert een LIJN-icoon (stroke, geen fill). In de
   scorebadge wordt dat opgevuld met `.vida-rating__stars svg { fill:currentColor }`;
   zonder diezelfde regel stonden hier vijf holle sterretjes. */
.vida-revcard__stars { display: inline-flex; gap: 3px; color: var(--vida-caramel); }
.vida-revcard__stars svg { fill: currentColor; stroke: none; }
.vida-revcard__text {
	margin: 0; border: 0; padding: 0;
	font-size: 1rem; line-height: 1.6; color: var(--vida-ink);
}
.vida-revcard__by { margin: auto 0 0; display: flex; flex-direction: column; gap: 2px; }
.vida-revcard__name { font-weight: 700; font-size: .95rem; }
.vida-revcard__src { font-size: .84rem; color: var(--vida-muted); }


/* ── /meningen/ — introzin gecentreerd boven het reviewraster ───────────── */
.page-template-template-reviews .vida-section__intro {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: clamp(30px, 3.4vw, 44px);
}