/* =============================================================
   Gîtes La Couronne & La Perle — Lison, Calvados, Normandië
   Design system: luxe landelijk Frans
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Kleuren */
  --creme: #f4eee1;
  --warm-white: #fbf8f1;
  --paper: #fbf8f1;
  --sage: #8c9a7d;
  --sage-soft: #aeb89f;
  --sand: #d8c4a2;
  --sand-soft: #e7dcc6;
  --olive: #5a6349;
  --olive-deep: #454e39;
  --bronze: #a9854f;
  --bronze-light: #c4a878;
  --ink: #2c2a24;
  --muted: #6f6a5d;
  --line: #e2d9c7;
  /* De vlakken die eerder donkergroen waren: beige met een roze ondertoon. */
  --blush: #f2e6e0;
  --blush-diep: #e3d0c8;

  /* Typografie */
  --serif: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --serif-italic: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Ritme */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 10vw, 9rem);

  /* Afronding: één schaal voor de hele site. De scherpe hoeken van 2px maakten
     het geheel hard; alles staat nu op dezelfde zachte familie. */
  --radius-xs: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Schaduwen in twee lagen: een haarscherpe rand vlak onder het element en een
     brede, zachte val eronder. De oude enkele schaduw was donker en zwaar. */
  --shadow: 0 1px 2px rgba(44, 49, 36, 0.05), 0 14px 34px -18px rgba(44, 49, 36, 0.22);
  --shadow-lg: 0 2px 4px rgba(44, 49, 36, 0.06), 0 30px 60px -26px rgba(44, 49, 36, 0.3);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--warm-white);
  font-weight: 300;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  color: var(--olive-deep);
  margin: 0 0 0.5em;
  letter-spacing: 0.018em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
p { margin: 0 0 1.25rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--bronze-light);
}
.eyebrow.is-centered { justify-content: center; }
/* De lead is de eerste alinea van een blok en hoort dus zwaarder te wegen dan
   de tekst eronder. Hij was lichter gekleurd dan de body, wat die volgorde
   omdraaide; nu draagt alleen de grootte het verschil. */
.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tint { background: var(--creme); }
.section--paper { background: var(--paper); }
/* Deze sectie was donkergroen en is nu zacht roze; de tekst eromheen staat
   daarom op de donkere kleuren in plaats van de lichte. */
.section--olive { background: var(--blush); color: var(--ink); }
.section--olive h2, .section--olive h3 { color: var(--ink); }
.section--olive .lead { color: var(--ink); }
.center { text-align: center; }
.measure { max-width: 60ch; }
.measure-narrow { max-width: 46ch; }
.mx-auto { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.15rem 2.4rem;
  border-radius: var(--radius);
  transition: all 0.4s var(--ease);
  position: relative;
}
.btn--solid { background: var(--olive); color: var(--warm-white); }
.btn--solid:hover { background: var(--olive-deep); transform: translateY(-2px); }
.btn--gold {
  background: linear-gradient(180deg, #be9963 0%, #a9854f 100%);
  color: #fffaf2;
  border: 1px solid #9a7740;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  letter-spacing: 0.24em;
}
.btn--gold:hover {
  background: linear-gradient(180deg, #ab8650 0%, #8e6e3a 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 16px 30px -16px rgba(140, 108, 58, 0.75);
}
.btn--ghost { border: 1px solid currentColor; color: var(--olive); }
.btn--ghost:hover { background: var(--olive); color: var(--warm-white); }
.btn--light { border: 1px solid rgba(251,248,241,0.5); color: var(--warm-white); }
.btn--light:hover { background: var(--warm-white); color: var(--olive-deep); }

/* ---------- Header / navigatie ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.site-header.is-solid {
  background: rgba(251, 248, 241, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  padding: 0.85rem 0;
  box-shadow: 0 1px 0 rgba(226, 217, 199, 0.7), 0 18px 44px -34px rgba(44, 49, 36, 0.5);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 1.8vw, 2rem);
}
/* Het logo stond strak tegen de linkerrand; deze inspring geeft het lucht
   zonder de navigatie ernaast te verdringen. */
.brand { display: inline-flex; align-items: center; line-height: 1; }
/* Alleen op ruime schermen krijgt het logo lucht aan de linkerkant; daaronder
   heeft de navigatie die ruimte zelf nodig. */
@media (min-width: 1200px) { .brand { margin-left: clamp(1rem, 3vw, 3rem); } }
.brand__logo { display: block; width: auto; max-width: none; height: 72px; flex: 0 0 auto; transition: height 0.45s var(--ease); }
.is-solid .brand__logo { height: 56px; }
.brand__name, .brand__tag { display: none; }
.brand__logo--dark { display: none; }
.brand__logo--light { display: block; }
.is-solid .brand__logo--light { display: none; }
.is-solid .brand__logo--dark { display: block; }
@media (max-width: 760px) { .brand__logo { height: 52px; } .is-solid .brand__logo { height: 46px; } }
.brand__name {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--warm-white);
  letter-spacing: 0.04em;
  transition: color 0.45s var(--ease);
}
.brand__tag {
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 0.45rem;
  transition: color 0.45s var(--ease);
}
.is-solid .brand__name { color: var(--olive-deep); }
.is-solid .brand__tag { color: var(--bronze); }

.nav__menu { display: flex; align-items: center; gap: clamp(1.05rem, 1.7vw, 2.2rem); }
.nav__link {
  font-size: 0.78rem;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251,248,241,0.84);
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.35s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--warm-white); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronze-light);
  transform: translateX(-50%);
  transition: width 0.4s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { width: 24px; }
.is-solid .nav__link { color: var(--ink); }
.is-solid .nav__link:hover, .is-solid .nav__link.is-active { color: var(--bronze); }

/* Nav-dropdown (Gîtes) */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 178px; background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.5rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); z-index: 60;
}
.nav__group:hover .nav__sub, .nav__group:focus-within .nav__sub, .nav__group.is-open .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
}

/* Pijltje achter Gîtes: laat zien dat er een submenu onder zit en opent het ook
   met een klik, voor wie niet met een muis over het menu zweeft. De knop wordt
   door js/main.js toegevoegd. */
.nav__caret {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 0.35rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: rgba(251,248,241,0.84);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.nav__caret svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav__caret:hover, .nav__group:hover .nav__caret { color: var(--warm-white); }
.is-solid .nav__caret { color: var(--ink); }
.is-solid .nav__caret:hover, .is-solid .nav__group:hover .nav__caret { color: var(--bronze); }
.nav__group:hover .nav__caret, .nav__group.is-open .nav__caret { transform: rotate(180deg); }
@media (max-width: 1200px) {
  /* In het uitschuifmenu staat het submenu al open, dus is het pijltje overbodig. */
  .nav__caret { display: none; }
}
.nav__sub a {
  display: block; padding: 0.6rem 1.5rem; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav__sub a:hover { color: var(--bronze); background: var(--creme); }

.nav__actions { display: flex; align-items: center; gap: 1.4rem; }
.nav__actions .btn { padding: 0.85rem 1.7rem; font-size: 0.72rem; letter-spacing: 0.2em; }

/* Taal-switch */
.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}
.lang__btn {
  color: rgba(251,248,241,0.65);
  text-transform: uppercase;
  padding: 0.25rem 0.4rem;
  letter-spacing: 0.12em;
  transition: color 0.3s var(--ease);
}
.lang__btn:hover { color: var(--warm-white); }
.lang__btn.is-active { color: var(--warm-white); font-weight: 500; }
.lang__sep { color: rgba(251,248,241,0.35); }
.is-solid .lang__btn { color: var(--muted); }
.is-solid .lang__btn:hover { color: var(--bronze); }
.is-solid .lang__btn.is-active { color: var(--olive-deep); }
.is-solid .lang__sep { color: var(--line); }

/* Hamburger */
.nav__toggle { display: none; width: 30px; height: 22px; position: relative; }
.nav__toggle span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: var(--warm-white); transition: all 0.35s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 20px; }
.is-solid .nav__toggle span { background: var(--olive-deep); }
body.menu-open .nav__toggle span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--warm-white);
  overflow: hidden;
}
.hero__media, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* Ken Burns — trage, rustige inzoom op de hero */
.hero__media img {
  transform: scale(1.04);
  animation: kenburns 26s ease-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}
/* Twee lagen sluier: een verloop van boven naar beneden voor de koptekst en de
   onderrand, plus een zachte ovaal achter de tekstkolom. Zonder die ovaal viel
   de bovenkant van de titel weg tegen lichte luchten en witte gevels. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 92% 72% at 50% 50%, rgba(28,31,22,0.58) 0%, rgba(28,31,22,0.34) 46%, rgba(28,31,22,0) 78%),
    linear-gradient(180deg, rgba(28,31,22,0.58) 0%, rgba(28,31,22,0.26) 34%, rgba(28,31,22,0.34) 62%, rgba(28,31,22,0.78) 100%);
}
/* Dunne ingelegde lijst — boutique-hotel kader */
.hero::after {
  content: "";
  position: absolute; inset: clamp(14px, 2vw, 26px);
  border: 1px solid rgba(251,248,241,0.32);
  z-index: 1; pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; padding-block: 9rem 5rem; max-width: 60ch; margin-inline: auto; text-align: center; }
.hero:not(.hero--page) .hero__inner { max-width: 900px; }
.hero h1 { color: var(--warm-white); margin-bottom: 1.5rem; text-wrap: balance; }
.hero .eyebrow { color: var(--sand-soft); justify-content: center; }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.4rem); color: rgba(251,248,241,0.9); font-weight: 300; margin-bottom: 2.5rem; margin-inline: auto; max-width: 46ch; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* Zachte, getrapte entree van de hero-tekst */
.hero__inner > * { animation: heroIn 1.1s var(--ease) both; }
.hero__inner > .eyebrow { animation-delay: 0.15s; }
.hero__inner > h1 { animation-delay: 0.3s; }
.hero__inner > .hero__sub { animation-delay: 0.5s; }
.hero__inner > .hero__cta { animation-delay: 0.7s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero--short { min-height: 72vh; }
.hero--page { min-height: 64vh; }
/* De scroll-aanwijzing is eruit; de hero heeft die onderruimte niet meer nodig. */
.hero:not(.hero--page) { padding-bottom: 2rem; }
.scroll-hint {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(251,248,241,0.7); display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.scroll-hint::after { content: ""; width: 1px; height: 46px; background: rgba(251,248,241,0.5); animation: scrolldot 2.2s var(--ease) infinite; }
@keyframes scrolldot { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Intro split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.split__media--tall img { aspect-ratio: 3/4; }
.split__badge {
  position: absolute; bottom: -2rem; right: -1.5rem;
  background: var(--warm-white); padding: 1.6rem 1.9rem; border-radius: var(--radius);
  box-shadow: var(--shadow); text-align: center; max-width: 200px;
}
.split__badge .score { font-family: var(--serif); font-size: 2.6rem; color: var(--bronze); line-height: 1; }
.split__badge .label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }

/* ---------- Feature / amenity cards ---------- */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.amenity {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem 2rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.amenity:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--sand); }
.amenity__icon { width: 40px; height: 40px; margin-bottom: 1.3rem; stroke: var(--sage); fill: none; stroke-width: 1.3; }
.amenity h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.amenity p { font-size: 0.96rem; color: var(--muted); margin: 0; }
.section--olive .amenity { background: rgba(255,255,255,0.6); border-color: rgba(44,42,36,0.08); }
.section--olive .amenity p { color: var(--muted); }
.section--olive .amenity__icon { stroke: var(--bronze); }

/* ---------- Gîte showcase (home) ---------- */
.gite-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  color: var(--warm-white);
  box-shadow: var(--shadow);
}
.gite-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gite-card:hover img { transform: scale(1.06); }
.gite-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,31,22,0) 30%, rgba(28,31,22,0.85) 100%); }
.gite-card__body { position: relative; z-index: 2; padding: 2.6rem; }
.gite-card__body h3 { color: var(--warm-white); font-size: 2.2rem; margin-bottom: 0.4rem; }
.gite-card__meta { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); margin-bottom: 1rem; }
.gite-card__link { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--bronze-light); padding-bottom: 0.3rem; }
.gite-card__link:hover { color: var(--bronze-light); }

/* ---------- Specs list ---------- */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.specs li { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0.2rem; border-bottom: 1px solid var(--line); font-size: 0.96rem; }
.specs .k { color: var(--muted); letter-spacing: 0.04em; }
.specs .v { color: var(--olive-deep); font-weight: 400; text-align: right; }

/* ---------- Listing (gîte-detail: twee kolommen + boekingskaart) ---------- */
.listing { display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.listing__main > * + * { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.listing__lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.7; color: var(--muted); font-weight: 300; }
.listing__main h3 { font-size: 1.7rem; margin-bottom: 1.5rem; }

.amen-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.6rem; }
.amen-group h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin: 0 0 1rem; }
.amen-group ul { display: grid; gap: 0.6rem; }
.amen-group li { font-size: 0.97rem; color: var(--ink); display: flex; gap: 0.7rem; align-items: baseline; }
.amen-group li::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--sage); border-radius: 50%; flex: 0 0 auto; position: relative; top: -1px; }

.listing__aside { position: sticky; top: 104px; }
.book-card { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); }
.book-card__eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.book-card__rating { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; }
.book-card__rating .score { font-family: var(--serif); font-size: 2.6rem; color: var(--olive-deep); line-height: 1; }
.book-card__rating .out { color: var(--muted); font-size: 0.9rem; }
.book-card__specs { list-style: none; margin: 1.4rem 0; padding: 1.4rem 0; border-block: 1px solid var(--line); display: grid; gap: 0.7rem; }
.book-card__specs li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.96rem; }
.book-card__specs .k { color: var(--muted); }
.book-card__specs .v { color: var(--olive-deep); text-align: right; }
.book-card .btn { width: 100%; justify-content: center; }
.book-card__note { font-size: 0.84rem; color: var(--muted); margin: 1rem 0 0; text-align: center; }

/* ---------- Boekingssectie (channel-manager widget + terugval) ---------- */
.booking { max-width: 860px; margin-inline: auto; }
.booking-embed { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(2rem, 4vw, 3.2rem); box-shadow: var(--shadow); text-align: center; }
.booking-embed__icon { width: 46px; height: 46px; margin: 0 auto 1.3rem; stroke: var(--sage); fill: none; stroke-width: 1.3; }
.booking-embed__title { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--olive-deep); margin-bottom: 0.6rem; }
.booking-embed__text { color: var(--muted); max-width: 54ch; margin: 0 auto 1.8rem; }
.booking-embed__btns { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.booking-embed__note { font-size: 0.84rem; color: var(--muted); margin-top: 1.5rem; }

@media (max-width: 900px) {
  .listing { grid-template-columns: 1fr; }
  .listing__aside { position: static; }
}
@media (max-width: 560px) { .amen-cols { grid-template-columns: 1fr; } }

/* ---------- Reviews ---------- */
.review { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.4rem 2rem; }
.review__stars { color: var(--bronze); letter-spacing: 0.2em; margin-bottom: 1rem; font-size: 0.95rem; }
.review__text { font-family: var(--serif-italic); font-size: 1.42rem; line-height: 1.5; color: var(--olive-deep); font-style: italic; margin-bottom: 1.3rem; }
.review__by { font-size: 0.82rem; letter-spacing: 0.08em; color: var(--muted); }
.section--olive .review { background: rgba(255,255,255,0.65); border-color: rgba(44,42,36,0.08); }
.section--olive .review__text { color: var(--ink); }
.section--olive .review__by { color: var(--muted); }

/* Reviews-slider met pijltjes */
.reviews-slider { position: relative; max-width: 1120px; margin-inline: auto; }
.reviews-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.4rem 0.2rem 1.2rem; scrollbar-width: none; -ms-overflow-style: none; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .review { flex: 0 0 clamp(280px, 33%, 360px); scroll-snap-align: center; margin: 0; }
.reviews-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; background: var(--warm-white); border: 1px solid var(--line); color: var(--olive-deep); font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.reviews-arrow:hover { background: var(--olive); color: var(--warm-white); border-color: var(--olive); }
.reviews-arrow--prev { left: -12px; }
.reviews-arrow--next { right: -12px; }
@media (max-width: 760px) {
  .reviews-track .review { flex-basis: 84%; }
  .reviews-arrow--prev { left: 2px; }
  .reviews-arrow--next { right: 2px; }
}

/* Klikbare sfeerbeeld-foto's op de gîte-pagina's */
#galerij .grid img { cursor: zoom-in; transition: box-shadow 0.4s var(--ease); }
#galerij .grid img:hover { box-shadow: var(--shadow); }

/* ---------- Comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 1.15rem 1.5rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.96rem; }
.compare thead th { background: var(--olive-deep); color: var(--warm-white); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.compare thead th:first-child { background: var(--olive); }
.compare tbody td:first-child { color: var(--muted); letter-spacing: 0.03em; }
.compare tbody td { color: var(--olive-deep); }
.compare tbody tr:hover td { background: var(--creme); }
.compare .num { font-family: var(--serif); font-size: 1.2rem; color: var(--bronze); }

/* ---------- Gallery ---------- */
/* Een raster met één vaste beeldverhouding in plaats van een masonry met
   wisselende hoogtes: 56 foto's van verschillende formaten maakten de pagina
   onrustig. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
/* Voorbij de eerste twaalf pas tonen na een klik. */
.gallery.is-ingekort figure:nth-of-type(n+13) { display: none; }
.gallery-meer { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.2rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(28,31,22,0.8));
  color: var(--warm-white); font-size: 0.82rem; letter-spacing: 0.06em;
  opacity: 0; transform: translateY(10px); transition: all 0.45s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-bottom: 3rem; }
.gallery__filter {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6rem 1.3rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
  transition: all 0.3s var(--ease);
}
.gallery__filter:hover, .gallery__filter.is-active { background: var(--olive); color: var(--warm-white); border-color: var(--olive); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,22,16,0.94); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow); }
.lightbox__close { position: absolute; top: 2rem; right: 2.4rem; color: var(--warm-white); font-size: 2rem; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--warm-white); font-size: 2.6rem; padding: 1rem; opacity: 0.7; transition: opacity 0.3s; }
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.7rem 0; font-family: var(--serif); font-size: 1.35rem; color: var(--olive-deep);
}
.faq__q span.sign { font-family: var(--sans); font-size: 1.6rem; color: var(--bronze); transition: transform 0.4s var(--ease); flex-shrink: 0; }
.faq__item.is-open .faq__q span.sign { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.faq__a-inner { padding: 0 0 1.7rem; color: var(--muted); max-width: 64ch; }

/* ---------- Map / omgeving cards ---------- */
.place { display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem; align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.place__dist { font-family: var(--serif); font-size: 2rem; color: var(--bronze); line-height: 1; }
.place__dist small { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }
.place h3 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.place p { font-size: 0.96rem; color: var(--muted); margin: 0; }

/* ---------- Bezienswaardigheden — rijke, afwisselende blokken ---------- */
.places-rich { display: grid; gap: clamp(2.4rem, 5vw, 4rem); max-width: 1060px; margin-inline: auto; }
.place-card { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(1.6rem, 3.5vw, 3.2rem); align-items: center; }
.place-card:nth-child(even) .place-card__media { order: 2; }
.place-card__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.place-card__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1s var(--ease); }
.place-card:hover .place-card__media img { transform: scale(1.05); }
.place-card__dist { position: absolute; left: 0; bottom: 0; background: var(--warm-white); padding: 0.75rem 1.15rem; font-family: var(--serif); color: var(--bronze); font-size: 1.5rem; line-height: 1; }
.place-card__dist small { display: block; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }
.place-card__body h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-bottom: 0.6rem; }
.place-card__body p { color: var(--muted); margin: 0; }
.place-card__body p + p { margin-top: 0.9rem; }
@media (max-width: 760px) {
  .place-card { grid-template-columns: 1fr; gap: 1.1rem; }
  .place-card:nth-child(even) .place-card__media { order: 0; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--warm-white); transition: border-color 0.3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sage); }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { font-size: 0.84rem; color: var(--muted); }
.form__status { font-size: 0.95rem; padding: 1rem 1.2rem; border-radius: var(--radius); display: none; }
.form__status.is-ok { display: block; background: #eef2e6; color: var(--olive-deep); border: 1px solid var(--sage-soft); }
.form__status.is-error { display: block; background: #f6e9e4; color: #8a3b1f; border: 1px solid #d8a98f; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; color: var(--warm-white); text-align: center; overflow: hidden; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(28,31,22,0.66); }
.cta-band__inner { position: relative; z-index: 2; padding-block: clamp(5rem, 11vw, 9rem); }
.cta-band h2 { color: var(--warm-white); }
.cta-band .lead { color: rgba(251,248,241,0.85); }

/* ---------- Breadcrumb ---------- */
/* Breadcrumbs verborgen op alle pagina's. Op pagina's zonder hero blijft de
   bovenmarge behouden (de crumbs deden daar dienst als ruimte onder de header). */
.crumbs { display: none; }
.crumbs[style*="8rem"] { display: block; visibility: hidden; height: 8rem; padding: 0; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--blush); color: var(--ink); padding-block: clamp(4rem, 8vw, 6rem) 2.5rem; }
.site-footer > * { position: relative; z-index: 1; }
.site-footer::before {
  content: "";
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42vw, 520px);
  aspect-ratio: 1212 / 955;
  background: url(../images/normandie-map-light.png) no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 760px) { .site-footer::before { width: 80vw; right: -10%; opacity: 0.32; } }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; margin-bottom: 4rem; }
.footer__brand-name { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); margin-bottom: 1rem; }
.site-footer h4 { color: var(--ink); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.4rem; }
.footer__links li { margin-bottom: 0.7rem; }
.footer__links a { color: var(--muted); font-size: 0.96rem; }
.footer__links a:hover { color: var(--olive-deep); }
.footer__contact p { font-size: 0.96rem; margin-bottom: 0.6rem; color: var(--muted); }
.footer__seo { font-size: 0.92rem; line-height: 1.7; color: var(--muted); }
.footer__social { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem; color: var(--bronze-light); font-size: 0.85rem; letter-spacing: 0.1em; }
.footer__social:hover { color: var(--warm-white); }
.footer__bottom { border-top: 1px solid rgba(44,42,36,0.12); padding-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--muted); }

/* ---------- Reveal animaties ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.25rem; }
[hidden] { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
/* Het menu klapt bij 1200px in: met zeven items ("De omgeving", "Over
   Fabienne") plus de taalkeuze en de boekknop lopen merk, menu en knoppen
   daaronder over elkaar heen. De boekknop blijft tot 760px staan, zodat
   tablets hun CTA houden. */
@media (max-width: 1200px) {
  .nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
    background: var(--olive-deep); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 1.8rem; padding: 3rem; transform: translateX(100%);
    transition: transform 0.5s var(--ease);
  }
  body.menu-open .nav__menu { transform: translateX(0); }
  .nav__menu .nav__link { color: var(--warm-white); font-size: 1rem; }
  .is-solid .nav__menu .nav__link { color: var(--warm-white); }
  .nav__toggle { display: block; z-index: 110; }
  .nav__group { flex-direction: column; align-items: flex-start; }
  .nav__sub { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; border: none; box-shadow: none; padding: 0.3rem 0 0.5rem 1rem; min-width: 0; }
  .nav__sub a { color: var(--sand-soft); padding: 0.5rem 0; font-size: 0.85rem; }
}

@media (max-width: 760px) {
  .site-header .nav__actions .btn--gold { display: none; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__badge { right: 1rem; bottom: -1.5rem; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  /* Vier kleine voorzieningskaarten passen als 2×2; één kolom werd een lange lijst. */
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .specs { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .compare th, .compare td { padding: 0.85rem 0.9rem; font-size: 0.86rem; }
  .place { grid-template-columns: 70px 1fr; gap: 1rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__inner { padding-block: 7rem 4rem; }
  .hero:not(.hero--page) { padding-bottom: 0; }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Zwevende contactknop (WhatsApp, telefoon, Instagram) ----------
   Staat vast aan de rechterrand, halverwege het scherm. De knop vouwt de drie
   kanalen uit; ze blijven onder de koptekst (z-index 100) en onder de
   lightbox (200) zodat die niets afdekt. De opbouw komt uit js/main.js. */
.contact-fab {
  position: fixed; right: clamp(0.75rem, 1.8vw, 1.5rem); bottom: clamp(1rem, 2.6vw, 2rem);
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem;
}
.contact-fab__actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(0.9rem) scale(0.9); transform-origin: bottom right;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.contact-fab.is-open .contact-fab__actions {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
/* De knoppen komen één voor één binnen, van onder naar boven. */
.contact-fab.is-open .contact-fab__item:nth-child(3) { transition-delay: 0.02s; }
.contact-fab.is-open .contact-fab__item:nth-child(2) { transition-delay: 0.07s; }
.contact-fab.is-open .contact-fab__item:nth-child(1) { transition-delay: 0.12s; }

.contact-fab__item, .contact-fab__toggle {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--warm-white); color: var(--olive-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); cursor: pointer; flex: 0 0 auto;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.4s var(--ease);
}
.contact-fab__item { position: relative; text-decoration: none; opacity: 0; }
.contact-fab.is-open .contact-fab__item { opacity: 1; }
.contact-fab__item svg, .contact-fab__toggle svg {
  width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.contact-fab__item:hover, .contact-fab__item:focus-visible {
  transform: translateY(-3px); border-color: var(--sand);
  background: var(--olive-deep); color: var(--creme);
}

/* Het label schuift bij hover naar links open. Op aanraakschermen blijft het weg. */
.contact-fab__label {
  position: absolute; right: calc(100% + 0.6rem); top: 50%; transform: translateY(-50%) translateX(0.4rem);
  background: var(--olive-deep); color: var(--creme);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; border-radius: var(--radius); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.contact-fab__item:hover .contact-fab__label,
.contact-fab__item:focus-visible .contact-fab__label { opacity: 1; transform: translateY(-50%); }

.contact-fab__toggle { background: var(--bronze); color: var(--creme); border-color: var(--bronze); width: 58px; height: 58px; }
.contact-fab__toggle:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.contact-fab__toggle svg { width: 25px; height: 25px; transition: transform 0.4s var(--ease), opacity 0.25s var(--ease); }
.contact-fab__toggle .contact-fab__x { position: absolute; opacity: 0; transform: rotate(-90deg); }
.contact-fab.is-open .contact-fab__toggle .contact-fab__chat { opacity: 0; transform: rotate(90deg); }
.contact-fab.is-open .contact-fab__toggle .contact-fab__x { opacity: 1; transform: none; }

/* Op smalle schermen wat kleiner, en uit de weg van de onderrand. */
@media (max-width: 760px) {
  .contact-fab { right: 0.7rem; bottom: 0.9rem; gap: 0.55rem; }
  .contact-fab__item, .contact-fab__toggle { width: 46px; height: 46px; }
  .contact-fab__toggle { width: 52px; height: 52px; }
  .contact-fab__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-fab__actions, .contact-fab__item, .contact-fab__toggle, .contact-fab__label { transition-duration: 0.01ms; }
}

/* ---------- Collage met kaderlijn (homepage: Inbegrepen) ------------------
   Twee foto's onder elkaar, met een dunne lijn die er rechtsonder achter
   vandaan steekt. Dezelfde opzet als op de detailpagina's, maar dan met twee
   beelden zodat beide huizen in één blik te zien zijn. */
.collage { position: relative; }
/* Twee losse foto's met lucht ertussen, elk met een eigen kader en schaduw.
   Eerst zaten ze als één blok aan elkaar geplakt; dat las als één vreemde foto. */
.collage__stack { position: relative; z-index: 1; display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.collage__stack img { width: 100%; aspect-ratio: 16/11; object-fit: cover; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.collage::after {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(1rem, 2vw, 1.7rem) calc(-1 * clamp(1rem, 2vw, 1.7rem)) calc(-1 * clamp(1rem, 2vw, 1.7rem)) clamp(1rem, 2vw, 1.7rem);
  border: 1px solid var(--sand); border-radius: var(--radius); pointer-events: none;
}

/* Kenmerken als rij met scheidingsstipjes, zoals onder de tekst in het voorbeeld. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.1rem; margin: 0 0 2rem; }
.chips li {
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze);
}
.chips li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sand); }
.section--olive .chips li { color: var(--bronze); }
.section--olive .chips li:not(:last-child)::after { background: var(--blush-diep); }

/* Onderstreepte tekstlink met pijl. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze);
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--sand);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover { color: var(--olive-deep); border-color: var(--bronze); gap: 1.1rem; }
.section--olive .link-arrow { color: var(--bronze); border-color: var(--blush-diep); }
.section--olive .link-arrow:hover { color: var(--olive-deep); border-color: var(--bronze); }

/* Omgeving-voorproefje: brede eerste kaart, daarna een raster. */
.spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.6rem); }
.spot {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  min-height: 260px; box-shadow: var(--shadow);
}
.spot--wide { grid-column: span 2; }
.spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.spot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,31,22,0) 38%, rgba(28,31,22,0.82) 100%);
}
.spot:hover img { transform: scale(1.05); }
.spot__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem 1.7rem; }
.spot__dist {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sand); margin-bottom: 0.5rem;
}
.spot__body h3 { font-size: 1.35rem; color: var(--warm-white); margin: 0; }
@media (max-width: 980px) {
  .spots { grid-template-columns: repeat(2, 1fr); }
  .spot--wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .spots { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .spot--wide { grid-column: span 2; }
  .spot { min-height: 170px; }
}

/* ---------- Kaartje op de contactpagina ----------------------------------
   Vaste beeldverhouding zodat de kaart niet springt tijdens het laden. Het
   iframe komt van Google Maps; de CSP van de demo laat daarvoor
   frame-src https://www.google.com toe. */
.map-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 7;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: var(--creme);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.6rem;
  margin-top: 1.6rem; color: var(--muted); font-size: 0.98rem;
}
.map-note strong { color: var(--olive-deep); font-weight: 500; }
@media (max-width: 760px) { .map-embed { aspect-ratio: 4 / 3; } }

/* =============================================================
   UX-pass — toegankelijkheid en detailafwerking
   ============================================================= */

/* Zichtbare focus voor wie met het toetsenbord navigeert. De site had alleen
   de standaardring van de browser, die op de donkere secties wegviel. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}
/* De olive-secties zijn licht; een lichtzandkleurige focusring viel daar weg. */
.section--olive :focus-visible { outline-color: var(--bronze); }
.cta-band :focus-visible { outline-color: var(--sand-soft); }
.hero :focus-visible { outline-color: var(--sand-soft); }
.site-footer :focus-visible { outline-color: var(--olive-deep); }

/* Sprong naar de inhoud, voor schermlezers en toetsenbord. Alleen zichtbaar
   zodra hij focus krijgt. */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--olive-deep); color: var(--warm-white);
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.9rem 1.6rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* De koptekst staat vast bovenaan, dus ankers landden onder de balk. */
:target, [id] { scroll-margin-top: 110px; }

/* Bijschriften in de galerij: op aanwijsapparaten pas bij hover, op
   aanraakschermen altijd zichtbaar, want daar bestaat geen hover. */
.gallery figcaption { opacity: 0; transition: opacity 0.35s var(--ease); }
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption { opacity: 1; }
@media (hover: none) {
  .gallery figcaption { opacity: 1; }
}

/* Filterknoppen leesbaarder maken: de actieve stond alleen in kleurverschil. */
.gallery__filter { border-bottom: 1px solid transparent; }
.gallery__filter.is-active { border-bottom-color: var(--bronze); }

/* Zolang een foto nog laadt een rustige tint in plaats van wit doorschijnen. */
.gallery figure, .spot, .gite-card, .collage__stack, .split__media { background: var(--creme); }

/* Lange lijsten met kenmerken lopen op smalle schermen mooier in één kolom,
   maar de sleutel en de waarde mogen niet op elkaar plakken. */
@media (max-width: 760px) {
  .specs li { padding-block: 0.85rem; }
  .chips { gap: 0.45rem 0.9rem; }
}

/* Het kaartje en de kaartafbeeldingen krijgen dezelfde zachte rand als de rest. */
.map-embed { border-color: var(--line); }

/* Bijschrift en teller in de lightbox: je zag daar eerder niet welke foto je
   bekeek of hoeveel er nog volgden. */
.lightbox { flex-direction: column; gap: 1rem; }
.lightbox img { max-height: 78vh; width: auto; object-fit: contain; }
.lightbox__caption {
  margin: 0; color: var(--sand-soft); font-family: var(--sans);
  font-size: 0.9rem; letter-spacing: 0.1em; text-align: center; max-width: 60ch;
}
.lightbox__count {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  color: rgba(251,248,241,0.55); font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.2em;
}

/* Hero op de binnenpagina's: de kolom stond op 60ch, wat bij een kop van 5rem
   neerkomt op zo'n 480px. Titels als "La Couronne & La Perle in beeld" vielen
   daardoor in vijf regels uiteen. Bredere kolom, iets kleinere kop. */
.hero--page .hero__inner { max-width: 840px; padding-block: 8.5rem 4.5rem; }
.hero--page h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.hero--page .hero__sub { max-width: 54ch; }

/* =============================================================
   Egalisatie — één vormtaal over de hele site
   Alles wat een rand, een vlak of een schaduw heeft, volgt dezelfde
   afrondingsschaal en dezelfde randkleur. Voorheen liep dat door elkaar:
   knoppen van 2px, ronde pillen bij de filters, cirkels bij de pijlen.
   ============================================================= */

/* ---- Knoppen en pillen ---- */
.btn { border-radius: var(--radius-pill); }
.gallery__filter { border-radius: var(--radius-pill); border: 1px solid var(--line); }
.gallery__filter.is-active { border-color: var(--bronze); background: var(--bronze); color: var(--warm-white); }
.gallery__filter:hover { border-color: var(--bronze-light); }

/* ---- Kaarten en vlakken: gelijke afronding, gelijke rand, gelijke schaduw ---- */
.amenity,
.gite-card,
.place-card__media,
.spot,
.book-card,
.booking-embed,
.review,
.split__media img,
.split__badge,
.collage__stack,
.map-embed,
.gallery figure,
.nav__sub,
.form,
.faq {
  border-radius: var(--radius-lg);
}
.amenity, .book-card, .booking-embed, .review, .form {
  box-shadow: var(--shadow);
}
.gite-card, .spot, .place-card__media, .collage__stack, .map-embed, .gallery figure, .split__media img {
  box-shadow: var(--shadow);
}
.amenity:hover, .gite-card:hover, .spot:hover { box-shadow: var(--shadow-lg); }

/* Het rasterbeeld op de gîte-pagina's en losse foto's in de tekst. */
.grid img, .listing img, .gallery img { border-radius: var(--radius-lg); }
.collage__stack img { border-radius: 0; }
.gallery figure { overflow: hidden; }

/* ---- Formuliervelden ---- */
.field input, .field select, .field textarea {
  border-radius: var(--radius);
}

/* ---- De ingelegde lijst over de hero volgt de zachte lijn ---- */
.hero::after { border-radius: var(--radius-lg); }

/* ---- De kaderlijn achter de collage idem ---- */
.collage::after { border-radius: var(--radius-lg); }

/* ---- Lightbox ---- */
.lightbox img { border-radius: var(--radius-lg); }
.lightbox__close, .lightbox__nav { border-radius: var(--radius-pill); }

/* ---- Zwevende contactknop: al rond, alleen het label nog ---- */
.contact-fab__label { border-radius: var(--radius-pill); }

/* ---- Kruimelpad en losse randen ---- */
.crumbs { border-radius: var(--radius-pill); }

/* ---- Tabellen ---- */
.compare { border-radius: var(--radius-lg); overflow: hidden; }

/* ---- Onderstreepte pijllink: minder hard, met een zachte lijn ---- */
.link-arrow { border-bottom-color: color-mix(in srgb, var(--sand) 70%, transparent); }

/* ---- Eén randkleur voor alles wat een hairline heeft ---- */
.amenity, .gite-card, .book-card, .review, .nav__sub, .map-embed,
.field input, .field select, .field textarea {
  border-color: var(--line);
}

/* ---- Keuzelijst in het formulier -----------------------------------------
   De <select> viel uit de toon: die kreeg de opmaak van het besturingssysteem,
   met een eigen hoogte, eigen hoeken en een grijs pijltje. Nu dezelfde vorm als
   de invoervelden, met een eigen pijltje als achtergrondbeeld. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236f6a5d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px 12px;
}
.field select:hover { border-color: var(--sand); }
.field select::-ms-expand { display: none; }

/* Alle velden even hoog, zodat een rij van twee netjes uitlijnt. */
.field input, .field select { min-height: 3.35rem; }

/* De melding boven het formulier hoort bij dezelfde familie. */
.form__status { border-radius: var(--radius); }

/* ---- Hero op mobiel -------------------------------------------------------
   De hero vulde het hele scherm plus wat, waardoor je op een telefoon eerst
   moest scrollen voor er iets anders in beeld kwam. Nu blijft er onderaan een
   strook van de volgende sectie zichtbaar, wat uitnodigt om door te lezen.

   svh in plaats van vh: op mobiel rekent vh met de grootste viewport, dus
   zonder adresbalk. Daardoor werd de hero in de praktijk hoger dan het scherm. */
@media (max-width: 760px) {
  .hero:not(.hero--page) { min-height: 82svh; padding-bottom: 1rem; }
  .hero--page { min-height: 58svh; }
  .hero--short { min-height: 62svh; }

  .hero__inner { padding-block: 6.5rem 2rem; }
  .hero h1 { font-size: clamp(2.15rem, 8.5vw, 2.8rem); margin-bottom: 1.1rem; }
  .hero .eyebrow { margin-bottom: 1rem; letter-spacing: 0.24em; }
  .hero__sub { font-size: 1rem; margin-bottom: 1.8rem; }

  /* De twee knoppen onder elkaar, even breed en elk op één regel. Bij 300px
     brak "Beschikbaarheid bekijken" af; met minder zijpadding en iets krappere
     letterafstand past het label wel. */
  .hero__cta { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
  .hero__cta .btn {
    width: min(100%, 340px); justify-content: center; margin: 0;
    padding: 1rem 1.4rem; letter-spacing: 0.16em; white-space: nowrap;
  }
}

/* =============================================================
   Gîte-detailpagina — indeling naar het voorbeeld
   Linkerkolom: titel met kenmerkenrij, inbegrepen met icoonregels,
   huisregels, beschikbaarheid. Rechterkolom: meelopende kaarten.
   ============================================================= */

/* Kenmerkenrij onder de titel: aantal personen, kamers, ligging. */
.listing__meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.9rem;
  margin: 0 0 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.listing__meta li {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.9rem; color: var(--muted);
}
.listing__meta svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--bronze); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Inbegrepen: elke regel met een eigen icoon, zoals in het voorbeeld. */
.amen-list { display: grid; gap: 0.75rem; }
.amen-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.97rem; color: var(--ink); }
.amen-list li::before { content: none; }
.amen-list svg { width: 18px; height: 18px; margin-top: 0.2rem; flex: 0 0 auto; fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Huisregels: rustige opsomming met een streepje, geen kaders. */
.rules { display: grid; gap: 0.85rem; }
.rules li {
  display: flex; gap: 0.9rem; font-size: 0.97rem; color: var(--muted);
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--line);
}
.rules li:last-child { border-bottom: 0; padding-bottom: 0; }
.rules li::before { content: ""; width: 14px; height: 1px; background: var(--sand); flex: 0 0 auto; margin-top: 0.85rem; }

/* Beschikbaarheid: het kader waarin de boekingskalender komt te staan. */
.booking-frame {
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1rem, 2vw, 1.6rem);
  box-shadow: var(--shadow); overflow: hidden;
}
.booking-frame iframe { width: 100%; border: 0; display: block; border-radius: var(--radius); }
.booking-note { font-size: 0.88rem; color: var(--muted); margin: 1rem 0 0; }
.booking-note a { color: var(--bronze); border-bottom: 1px solid var(--sand); }

/* Extra kaarten in de rechterkolom, zelfde familie als de boekingskaart. */
.side-card {
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow);
  margin-top: 1.2rem;
}
.side-card h4 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bronze); margin: 0 0 1.1rem;
}
.side-card .specs { border-top: 0; }
.side-card .specs li:last-child { border-bottom: 0; }
.side-card p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* De hele rechterkolom loopt mee tot hij niet meer past. */
@media (max-width: 980px) {
  .listing { grid-template-columns: 1fr; }
  .listing__aside { position: static; }
}

/* ---- Mobiel menu: dichtgeklapt echt weg --------------------------------
   Het uitschuifmenu stond alleen buiten beeld geschoven met een transform.
   Zo'n element blijft schilderen en houdt zijn links bereikbaar met de tab-
   toets, en op sommige telefoons kon je er zijwaarts naartoe pannen — dan
   zag je het menu half over de inhoud liggen. Met visibility is het echt weg
   tot je het opent. */
@media (max-width: 1200px) {
  /* De schakeling van visibility gebeurt op 0s, met vertraging bij het sluiten,
     zodat het menu tijdens het uitschuiven zichtbaar blijft maar daarna echt weg is. */
  .nav__menu { visibility: hidden; transition: transform 0.5s var(--ease), visibility 0s linear 0.5s; }
  body.menu-open .nav__menu { visibility: visible; transition: transform 0.5s var(--ease), visibility 0s; }

  /* Zolang het menu open staat staat de pagina eronder vast. De body wordt
     door main.js op zijn scrollpositie gefixeerd (top = -scrollY); dat houdt
     ook op iOS stand, waar overflow:hidden alleen niet genoeg is. */
  html.menu-open { overflow: hidden; }
  body.menu-open { position: fixed; left: 0; right: 0; overflow: hidden; }

  /* Een donkere sluier onder het menu. Zonder blur: een backdrop-filter over
     het hele scherm laat het menu op telefoons haperen tijdens het schuiven. */
  body.menu-open::after {
    content: ""; position: fixed; inset: 0; z-index: 99;
    background: rgba(28, 31, 22, 0.58);
  }
  .nav__menu { will-change: transform; }
  .nav__toggle { -webkit-tap-highlight-color: transparent; }

}

/* ---- Weerbericht in de zijkolom ----------------------------------------- */
.weer__nu { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.weer__icoon svg { width: 44px; height: 44px; fill: none; stroke: var(--bronze); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.weer__temp { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--olive-deep); }
.weer__oms { display: block; font-size: 0.86rem; color: var(--muted); margin-top: 0.35rem; }
.weer__dagen { display: grid; gap: 0.15rem; margin-top: 0.9rem; }
.weer__dagen li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.8rem; padding: 0.45rem 0; font-size: 0.88rem; color: var(--muted); }
.weer__dagen svg { width: 20px; height: 20px; fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.weer__dagen .graden { color: var(--olive-deep); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.weer__laden { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* De kenmerkenlijst staat elders in twee kolommen; in de smalle zijkolom moet
   sleutel en waarde onder elkaar op één regel passen. */
.side-card .specs { grid-template-columns: 1fr; }
.side-card .specs li { padding: 0.75rem 0; font-size: 0.9rem; }

/* Twee boekingskalenders naast elkaar op de beschikbaarheidspagina. */
.booking-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.booking-panel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 1.2rem; }
.booking-panel h3 small {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze);
}
@media (max-width: 980px) { .booking-panels { grid-template-columns: 1fr; } }

/* =============================================================
   Eigen boekingskalender
   Vervangt het ingesloten scherm van Smoobu. De beschikbaarheid en de
   dagprijzen komen via api/smoobu.php binnen; de opmaak is van onszelf.
   Lukt het ophalen niet, dan blijft de ingesloten agenda staan als terugval.
   ============================================================= */
/* Agenda boven, reserveringsbalk eronder: zo heeft de kalender de volle
   breedte en staan de drie velden en de knop op één regel. */
.boeker { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; container-type: inline-size; }

.kalender {
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.1rem, 2vw, 1.8rem); box-shadow: var(--shadow);
}
.kalender__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.kalender__titel { font-family: var(--sans); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-deep); }
.kalender__nav {
  width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--paper); color: var(--olive-deep); font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.kalender__nav:hover:not(:disabled) { background: var(--creme); border-color: var(--sand); }
.kalender__nav:disabled { opacity: 0.35; cursor: default; }

.kalender__maanden { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 620px) { .kalender__maanden { grid-template-columns: 1fr; } }

.maand__naam { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); text-align: center; margin-bottom: 0.9rem; }
.maand__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.maand__weekdag { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 0.5rem; }

.maand__raster { gap: 3px 0; }
.dag {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border: 0; background: none; border-radius: 0;
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
/* De ronde markering zit op een binnenlaag, zodat een gekozen reeks als één
   doorlopende band kan tekenen terwijl begin en eind rond blijven. */
.dag > span:first-child {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dag__prijs { position: relative; z-index: 1; font-size: 0.56rem; color: var(--muted); letter-spacing: 0.02em; margin-top: -2px; }
.dag:hover:not(:disabled) > span:first-child { box-shadow: inset 0 0 0 1.5px var(--olive-deep); }
.dag:disabled { color: color-mix(in srgb, var(--muted) 40%, transparent); cursor: default; }
.dag:disabled .dag__prijs { opacity: 0; }
/* Bezette dagen: een dunne streep door het getal, geen kleurvlak. */
.dag--bezet > span:first-child::after {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%;
  height: 1px; background: color-mix(in srgb, var(--muted) 45%, transparent);
}
.dag--gekozen > span:first-child { background: var(--olive-deep); color: var(--warm-white); }
.dag--gekozen .dag__prijs { color: var(--sand-soft); }
.dag--tussen { background: var(--creme); }
.dag--tussen:hover:not(:disabled) > span:first-child { box-shadow: none; background: var(--sand-soft); }
/* De band loopt vanaf het midden van de begindag tot het midden van de einddag. */
.dag--start { background: linear-gradient(90deg, transparent 50%, var(--creme) 50%); }
.dag--eind { background: linear-gradient(90deg, var(--creme) 50%, transparent 50%); }
.dag--start.dag--eind { background: none; }

.kalender__legenda { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }
.kalender__legenda span { display: flex; align-items: center; gap: 0.5rem; }
.kalender__legenda i { width: 14px; height: 14px; border-radius: 4px; display: block; }

/* Het reserveringspaneel ernaast. Opgezet zoals gasten het van grote
   boekingssites kennen: prijs bovenaan, aankomst en vertrek als één gedeeld
   kader, gasten eronder, dan de knop. De specificatie komt pas als er iets
   gekozen is, zodat het paneel leeg begint en niet met streepjes. */
.reservering {
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem 1.6rem 1.5rem; box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "prijs  prijs"
    "kop    kop"
    "velden knop"
    "hint   hint"
    "regels regels"
    "totaal totaal";
  column-gap: 1.2rem; align-items: center;
}
.reservering__prijs { grid-area: prijs; display: flex; align-items: baseline; gap: 0.45rem; margin: 0 0 0.5rem; }
.reservering__prijs .v { font-family: var(--serif); font-size: 1.7rem; color: var(--olive-deep); line-height: 1; }
.reservering__prijs .k { font-size: 0.82rem; color: var(--muted); }
.reservering h4 { grid-area: kop; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin: 0 0 0.9rem; }

/* De drie invoervelden delen één rand en staan op één regel; de
   scheidingslijnen ertussen zitten op de velden zelf. */
.reservering__velden { grid-area: velden; border: 1px solid var(--olive-deep); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr 1fr; min-width: 0; }
.reservering__rij { display: contents; }
.reservering__veld {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.75rem 1rem; min-height: 60px; justify-content: center;
  background: none; border: 0; text-align: left; width: 100%; font-family: inherit;
  transition: background 0.25s var(--ease);
}
button.reservering__veld { cursor: pointer; }
button.reservering__veld:hover { background: var(--creme); }
.reservering__velden > .reservering__veld,
.reservering__rij > .reservering__veld + .reservering__veld { border-left: 1px solid var(--olive-deep); }
.reservering__rij > .reservering__veld:first-child { border-left: 0; }
.reservering__veld .k { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-deep); }
.reservering__veld .v { font-size: 0.95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reservering__veld .v.is-leeg { color: var(--muted); }
.reservering__veld--actief { background: var(--creme); }
.reservering__veld--actief .k { color: var(--bronze); }
/* Gastenteller: min en plus in het veld zelf, geen uitklaplijst. */
.reservering__teller { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.reservering__teller span { font-size: 0.95rem; color: var(--ink); white-space: nowrap; }
.reservering__teller button {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--olive-deep); background: none; color: var(--olive-deep);
  font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.reservering__teller button:hover:not(:disabled) { background: var(--olive-deep); color: var(--warm-white); }
.reservering__teller button:disabled { opacity: 0.3; cursor: default; }

.reservering .btn { grid-area: knop; align-self: stretch; justify-content: center; margin: 0; padding: 1.2rem 1.7rem; white-space: nowrap; }
.reservering .btn.is-uit { opacity: 0.72; }
.reservering__hint { grid-area: hint; font-size: 0.8rem; color: var(--muted); margin: 0.85rem 0 0; }

.reservering__regels { grid-area: regels; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.reservering__regels:empty { display: none; }
.reservering__regels li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.92rem; color: var(--muted); }
.reservering__totaal { grid-area: totaal; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0.7rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }

/* Het paneel kijkt naar zijn eigen breedte, niet naar het scherm: in de
   smalle kolom naast de zijkaart komt de knop onder de velden, op de brede
   beschikbaarheidspagina blijft alles op één regel. */
@container (max-width: 760px) {
  .reservering { grid-template-columns: 1fr; grid-template-areas: "prijs" "kop" "velden" "knop" "hint" "regels" "totaal"; }
  .reservering .btn { margin-top: 0.9rem; width: 100%; }
  .reservering__hint { text-align: center; }
}
@container (max-width: 480px) {
  .reservering__velden { grid-template-columns: 1fr 1fr; }
  .reservering__velden > .reservering__veld--gasten { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--olive-deep); }
}
.reservering__totaal[hidden] { display: none; }
.reservering__totaal .k { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive-deep); }
.reservering__totaal .v { font-family: var(--serif); font-size: 1.6rem; color: var(--olive-deep); line-height: 1; }

/* ---- Dropdown onder Gîtes, opgeruimd --------------------------------------
   De hoverbalk liep tot de randen van het afgeronde paneel en botste met de
   hoeken. De links krijgen nu hun eigen afgeronde vlak met wat lucht eromheen,
   en het paneel een rustiger schaduw en kleinere afronding. */
.nav__sub {
  border-radius: var(--radius);
  padding: 0.45rem;
  min-width: 196px;
  box-shadow: 0 1px 2px rgba(44,49,36,0.06), 0 20px 44px -22px rgba(44,49,36,0.3);
}
.nav__sub a {
  border-radius: var(--radius-xs);
  padding: 0.7rem 1.1rem;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
}
.nav__sub a + a { margin-top: 2px; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--creme); color: var(--bronze); }


/* Het volledige embleem in de voettekst: daar is ruimte om de gravure met de
   huizen en de ezels echt te laten zien; in de header was hij een postzegel. */
.footer__embleem { width: min(200px, 48vw); height: auto; margin-bottom: 1.6rem; opacity: 0.92; }

/* Social-iconen in de footer, onder het contactblok. */
.footer__socials { display: flex; gap: 0.9rem; margin-top: 1.4rem; }
.footer__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(44,42,36,0.18); color: var(--olive-deep);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.footer__socials a:hover { color: var(--warm-white); background: var(--olive-deep); border-color: var(--olive-deep); }
.footer__socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.footer__socials svg path { fill: currentColor; stroke: none; }
.footer__socials svg circle:last-of-type { fill: currentColor; stroke: none; }

/* ---- Beschikbaarheidspagina: elke gîte krijgt een eigen kop met foto ----
   Twee kale kalenders onder elkaar waren niet uit elkaar te houden; nu staat
   boven elke agenda het huis waar hij bij hoort. */
.booking-panels { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
.booking-panel { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--shadow); }
.booking-panel__kop { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.booking-panel__kop img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius); flex: 0 0 auto; box-shadow: var(--shadow); }
.booking-panel__kop h3 { margin: 0 0 0.25rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); display: block; }
.booking-panel__kop small { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.booking-panel__kop a { margin-left: auto; white-space: nowrap; }
@media (max-width: 620px) {
  .booking-panel__kop { flex-wrap: wrap; }
  .booking-panel__kop a { margin-left: 0; }
}

/* Op de beschikbaarheidspagina heeft het paneel de volle breedte; de kalender
   erin wordt dan zo breed dat de dagen los van elkaar zweven. */
.booking-panel .boeker { max-width: 880px; margin-inline: auto; }


/* ---- Mobiel: foto's liggend in plaats van staand ------------------------
   Op een telefoon vult een staande foto (3/4) bijna het hele scherm, en een
   pagina met vier van die foto's wordt twaalf schermen lang. Liggend (4/3)
   scheelt per foto zo'n 200 pixels en leest natuurlijker onder een kop. */
@media (max-width: 760px) {
  .split__media img, .split__media--tall img { aspect-ratio: 4/3; }
  .place-card__media img { aspect-ratio: 16/10; }
  .section { padding-block: clamp(3.2rem, 9vw, 5rem); }
}


/* ---- Mobiel menu: submenu zonder dropdown-opmaak --------------------------
   De opgeruimde dropdown hierboven geeft .nav__sub een schaduw en afronding.
   In het uitgeschoven menu staat het submenu inline onder "Gîtes" en hoort
   dat vlak weg. Dit blok staat als laatste, zodat het wint. */
@media (max-width: 1200px) {
  .nav__sub { box-shadow: none; border-radius: 0; background: transparent; padding: 0.3rem 0 0.5rem 1rem; }
  .nav__sub a { border-radius: 0; padding: 0.5rem 0; }
  .nav__sub a:hover, .nav__sub a:focus-visible { background: transparent; color: var(--warm-white); }
}

/* ---- Mobiel: fotoblokken als carrousel ------------------------------------
   Op een telefoon veeg je door foto's; een raster van 56 kleine plaatjes is
   daar onhandig. Native scroll-snap, dus geen script nodig voor het vegen.
   Elke foto is 84% breed, zodat de rand van de volgende zichtbaar is en
   duidelijk is dat er meer komt. */
@media (max-width: 760px) {
  .gallery,
  #galerij .grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.5rem;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar, #galerij .grid::-webkit-scrollbar { display: none; }
  .gallery figure:not([hidden]),
  #galerij .grid img {
    flex: 0 0 84%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .gallery figure:not([hidden]) { display: block; }
  .gallery img { aspect-ratio: 4/3; }
  #galerij .grid img { aspect-ratio: 4/5 !important; }
  /* In een carrousel horen alle foto's erin; de "meer"-knop is voor het raster. */
  .gallery.is-ingekort figure:nth-of-type(n+13):not([hidden]) { display: block; }
  .gallery-meer { display: none; }
  /* Teller onder de carrousel, gevuld door main.js. */
  .carrousel-teller {
    display: flex; justify-content: center; gap: 0.5rem; align-items: center;
    margin-top: 0.4rem; font-family: var(--sans); font-size: 0.78rem;
    letter-spacing: 0.12em; color: var(--muted);
  }
  .carrousel-teller span { font-variant-numeric: tabular-nums; }
}
@media (min-width: 761px) { .carrousel-teller { display: none; } }

/* ---- Mobiel: CTA-band met lucht -------------------------------------------
   De tekst liep tegen de schermranden en de twee knoppen zaten op elkaar; de
   tweede knop droeg een inline zijmarge die alleen naast elkaar zin heeft. */
@media (max-width: 760px) {
  .cta-band__inner { padding-inline: 1.75rem; }
  .cta-band .lead { text-wrap: balance; font-size: 1.05rem; }
  .cta-band .mt-2 { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 2rem; }
  .cta-band .mt-2 .btn { margin-left: 0 !important; width: min(100%, 320px); justify-content: center; }
}

/* ---- Voorzieningen naast Praktisch (opzet van de andere demo) ---------- */
/* De voorzieningenkolom krijgt meer ruimte dan de praktische notities: de
   items zijn kort, maar braken eerder over twee of drie regels omdat de
   kolommen te smal waren. */
.voorz-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .voorz-grid { grid-template-columns: 1fr; } }

/* Kolommen groeien mee met de tekst in plaats van op twee vaste te staan. */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.15rem 2.2rem; }
.checklist li {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-size: 0.96rem; line-height: 1.5; color: var(--ink);
  padding: 0.62rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.checklist svg { width: 15px; height: 15px; flex: 0 0 auto; align-self: center; fill: none; stroke: var(--sage); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .checklist { grid-template-columns: 1fr; } }

/* ---- Omgevingskaarten op de homepage: foto boven, tekst eronder --------- */
.plekken { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.1rem, 2vw, 1.8rem); }
.plek { display: flex; flex-direction: column; }
.plek img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 1.1rem; transition: transform 0.5s var(--ease); }
.plek:hover img { transform: translateY(-4px); }
.plek h3 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.plek__dist { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 0.55rem; }
.plek p { font-size: 0.93rem; color: var(--muted); margin: 0; }
@media (max-width: 980px) { .plekken { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plekken { grid-template-columns: 1fr; } }

/* ---- Volg ons in de voettekst: kopje in dikker lettertype, ronde iconen ---- */
.footer__volg { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; margin-top: 1.4rem; }
.footer__icons { display: flex; gap: 0.7rem; margin-top: 0.6rem; }
.footer__icons a {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  border: 1px solid var(--blush-diep, var(--line)); color: var(--olive-deep);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer__icons a:hover { background: var(--olive-deep); color: var(--warm-white); border-color: var(--olive-deep); }
.footer__icons svg { width: 19px; height: 19px; fill: currentColor; }
.footer__icons a[aria-label="Instagram"] svg { fill: none; }


/* De onderregel van de voettekst draagt drie delen; het middelste is de
   makersvermelding. */
.footer__made a { color: var(--bronze); border-bottom: 1px solid var(--blush-diep, var(--line)); transition: color 0.3s var(--ease); }
.footer__made a:hover { color: var(--olive-deep); }

/* ---- Kalender: niet breder dan zijn kolom ------------------------------
   Rasteritems staan standaard op min-width:auto, dus een brede inhoud duwt de
   kolom op in plaats van te krimpen. Daardoor stak de kalender op een telefoon
   buiten het scherm. */
.boeker > * { min-width: 0; }
.kalender, .kalender__maanden, .maand__raster { min-width: 0; max-width: 100%; }
.kalender { overflow: hidden; }
.maand__raster { gap: 1px; }
.dag { min-width: 0; font-size: 0.8rem; }
.dag__prijs { font-size: 0.54rem; }
@media (max-width: 420px) {
  .kalender { padding: 0.9rem; }
  .kalender__kop { margin-bottom: 0.9rem; }
  .dag { font-size: 0.76rem; }
  .dag__prijs { display: none; }   /* op deze breedte onleesbaar klein */
}

/* ---- Reserveringspaneel op smalle schermen -----------------------------
   De velden staan als flexrij met sleutel links en waarde rechts. Met de
   langere Franse labels ("Départ" / "Choisir") paste dat niet meer binnen
   390px en duwde het paneel de pagina open. */
.reservering { min-width: 0; max-width: 100%; }
.reservering__veld { min-width: 0; flex-wrap: wrap; }
.reservering__veld > * { min-width: 0; }
.reservering__veld .v { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .reservering { padding: 1.3rem; }
  .reservering__veld { padding: 0.75rem 0.9rem; gap: 0.5rem; font-size: 0.88rem; }
  .reservering__veld .k { font-size: 0.62rem; letter-spacing: 0.12em; }
}

/* ---- Velden van het reserveringspaneel mogen krimpen -------------------
   De kolommen stonden op 1fr, wat neerkomt op minmax(auto, 1fr): de inhoud
   bepaalt dan de minimumbreedte. Met de langere Franse labels ("Arrivée",
   "Choisir") duwde dat het hele paneel buiten het scherm. Met minmax(0, 1fr)
   krimpen de kolommen wel mee. Het ontwerp met de aaneengesloten velden
   blijft ongemoeid. */
.reservering__velden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) {
  .reservering__velden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Onder de 560px passen de velden en de boekknop niet meer naast elkaar:
   de knop houdt een eigen intrinsieke breedte en duwde het paneel open. Hij
   gaat dan onder de velden staan, over de volle breedte. */
@media (max-width: 560px) {
  .reservering {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "prijs"
      "kop"
      "velden"
      "knop"
      "hint"
      "regels"
      "totaal";
    row-gap: 0.9rem;
    padding: 1.3rem;
  }
  .reservering [style*="grid-area"], .reservering .btn { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .reservering__veld { padding: 0.7rem 0.6rem; }
  .reservering__veld .k { font-size: 0.6rem; letter-spacing: 0.1em; }
  .reservering__veld .v { font-size: 0.85rem; }
}

/* ---- Rondleiding: mozaïek met één groot openingsbeeld -------------------
   Vier kolommen; de eerste foto beslaat twee kolommen en twee rijen, zodat de
   strook begint met een beeld dat de sfeer draagt. Alles boven de eerste twee
   rijen is verborgen tot de bezoeker op "toon meer" klikt. */
.rondleiding { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1vw, 0.9rem); }
.rondleiding img {
  width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); display: block; cursor: zoom-in;
  transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
}
.rondleiding img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.rondleiding img:hover { filter: brightness(1.04); }

/* Alles vanaf de zesde tegel valt buiten de eerste twee rijen. */
.rondleiding:not(.is-open) img:nth-child(n + 6) { display: none; }

.rondleiding-meer { display: flex; justify-content: center; margin-top: 1.6rem; }
.rondleiding.is-open + .rondleiding-meer .rondleiding-meer__aantal { display: none; }

@media (max-width: 760px) {
  .rondleiding { grid-template-columns: repeat(2, 1fr); }
  .rondleiding img:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
  .rondleiding:not(.is-open) img:nth-child(n + 6) { display: none; }
}