/* =========================================================================
   Villa Lasata — variant "Claude Design" · Albero en Vijg
   Andalusische siësta: albero-oker en zandsteen als warm canvas, gebroken
   wit voor rust, en het diepe bordeaux van een rijpe vijg als accent.
   Typografie: EB Garamond (rustige, klassieke boekserif; display en citaten)
   + Karla (warme humanistische sans voor lopende tekst en bediening).
   Vormtaal: de Andalusische boog. Foto's zijn pro en post-renovatie
   (6240 px): fullbleed mag, en staande foto's krijgen een boogkader zoals
   de gepleisterde bogen van de villa zelf. Ornament: de siëstazon (halve
   zonneschijf) in kickers en een dunne reja-lijn als sectiescheiding.
   Motion: subtiel onthullen, volledig achter prefers-reduced-motion.
   Deze tokens zijn 1-op-1 de bron voor de site (variant-cd/site/css/
   tokens.css is exact dit bestand).
   ========================================================================= */

:root {
  /* ---------- Zandsteen (het canvas, gebroken wit tot warm zand) ---------- */
  --zand-50:  #fbf7ec;   /* gebroken wit, kaarten en lichtste vlak      */
  --zand-100: #f5edda;   /* basis canvas                                */
  --zand-200: #ece0c4;   /* verdiepte vlakken                           */
  --zand-300: #decfa9;   /* randzones, tabelstrepen                     */
  --wit:      #fdfbf4;   /* helderste vlak, passe-partout               */

  /* ---------- Albero (Andalusisch oker, de kleur van de arena's) ---------- */
  --albero-800: #7c561a; /* tekstveilig diep oker                       */
  --albero-700: #96691e; /* kickers, tabelaccenten                      */
  --albero-500: #bd8a2f; /* zonmotief, randen, hover                    */
  --albero-200: #ead9ac; /* tintvlak                                    */
  --albero-100: #f3e9cd; /* zacht okervlak                              */

  /* ---------- Vijg (diep bordeaux, het rijpe accent) ---------- */
  --vijg-900: #401b27;   /* diepste: avondband, footer                  */
  --vijg-800: #532330;   /* koppen op licht, fotorand                   */
  --vijg-700: #6c2f3e;   /* primair: knoppen, links                     */
  --vijg-500: #8d4b59;   /* hover en zachte accenten                    */
  --vijg-100: #f1e0e2;   /* tintvlak                                    */

  /* ---------- Inkt (warm, nooit hard zwart) ---------- */
  --inkt:       #37302a; /* tekst op licht                              */
  --inkt-zacht: #6f6355; /* secundaire tekst op licht                   */
  --zand-tekst: #f6f0e1; /* tekst op vijg en avondfoto's                */
  --zand-tekst-zacht: rgba(246, 240, 225, 0.74);

  /* ---------- Lijnen ---------- */
  --lijn:        rgba(55, 48, 42, 0.20);
  --lijn-zacht:  rgba(55, 48, 42, 0.10);
  --lijn-albero: rgba(150, 105, 30, 0.35);
  --lijn-donker: rgba(246, 240, 225, 0.22);

  /* ---------- Typografie ---------- */
  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-tekst:   "Karla", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --maat-display: clamp(2.6rem, 5.8vw, 4.6rem);
  --maat-kop:     clamp(1.8rem, 3.5vw, 2.7rem);
  --maat-subkop:  clamp(1.24rem, 1.9vw, 1.55rem);
  --maat-tekst:   1.04rem;
  --maat-klein:   0.875rem;

  /* ---------- Vormtaal: de Andalusische boog ---------- */
  --boog: 999px 999px 8px 8px; /* boogkader voor staande foto's          */
  --radius-kaart: 8px;         /* zacht gepleisterd, geen pil            */
  --radius-knop:  4px;
  --radius-veld:  4px;

  /* ---------- Diepte: lange siëstaschaduw, warm en zacht ---------- */
  --schaduw-mat:   0 1px 0 rgba(124, 86, 26, 0.06), 0 18px 34px -20px rgba(64, 27, 39, 0.35);
  --schaduw-zweef: 0 2px 0 rgba(124, 86, 26, 0.06), 0 30px 55px -24px rgba(64, 27, 39, 0.45);

  /* ---------- Korrel (warm pleisterwerk, heel licht) ---------- */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.48 0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23k)'/%3E%3C/svg%3E");

  /* ---------- Siëstazon (halve zonneschijf met stralen) ---------- */
  --zon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11'%3E%3Cpath d='M4.5 10 A4.5 4.5 0 0 1 13.5 10 Z' fill='%23bd8a2f'/%3E%3Cg stroke='%23bd8a2f' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='9' y1='0.6' x2='9' y2='2.6'/%3E%3Cline x1='2.4' y1='3.4' x2='3.9' y2='4.9'/%3E%3Cline x1='15.6' y1='3.4' x2='14.1' y2='4.9'/%3E%3C/g%3E%3C/svg%3E");
  --zon-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11'%3E%3Cpath d='M4.5 10 A4.5 4.5 0 0 1 13.5 10 Z' fill='%23f6f0e1'/%3E%3Cg stroke='%23f6f0e1' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='9' y1='0.6' x2='9' y2='2.6'/%3E%3Cline x1='2.4' y1='3.4' x2='3.9' y2='4.9'/%3E%3Cline x1='15.6' y1='3.4' x2='14.1' y2='4.9'/%3E%3C/g%3E%3C/svg%3E");

  /* ---------- Ritme ---------- */
  --sectie-y: clamp(4.5rem, 9vw, 8rem);
  --kolom:    72rem;
}

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/eb-garamond-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/eb-garamond-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/eb-garamond-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/karla-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Karla"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/karla-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Karla"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/karla-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Karla"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/karla-400-italic.woff2") format("woff2");
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--zand-100);
  background-image: var(--korrel);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--vijg-700); color: var(--zand-tekst); }
a { color: var(--vijg-700); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--vijg-500); }

/* ---------- Display en koppen ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--maat-display);
  line-height: 1.05;
  letter-spacing: 0.002em;
  text-wrap: balance;
  color: var(--vijg-800);
  margin: 0;
}
.kop {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--maat-kop);
  line-height: 1.12;
  text-wrap: balance;
  color: var(--vijg-800);
  margin: 0;
}
.subkop {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--maat-subkop);
  line-height: 1.28;
  color: var(--inkt);
  margin: 0;
}
.op-donker .display, .op-donker .kop, .op-donker .subkop { color: var(--zand-tekst); }

/* Cursieve draai in een kop: het siësta-woord */
.display em, .kop em {
  font-style: italic;
  font-weight: 400;
  color: var(--albero-700);
}
.op-donker .display em, .op-donker .kop em { color: var(--albero-500); }

/* Kicker: klein kapitaal met de siëstazon ervoor */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--albero-700);
}
.kicker::before {
  content: "";
  width: 18px; height: 11px;
  background: var(--zon) no-repeat center / contain;
}
.op-donker .kicker { color: var(--zand-tekst-zacht); }
.op-donker .kicker::before { background-image: var(--zon-licht); }
.kicker-vijg { color: var(--vijg-700); }

/* ---------- Reja-lijn (dubbele hairline met ruitje, sectiescheiding) ---------- */
.reja {
  position: relative;
  height: 5px;
  border: 0;
  border-top: 1px solid var(--lijn-albero);
  border-bottom: 1px solid var(--lijn-albero);
  background: transparent;
  margin: 0;
}
.reja::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--albero-500);
  border: 2px solid var(--zand-100);
}
.reja-links::after { left: 4.5px; }
.reja-kort { width: 148px; }
.op-donker .reja { border-color: var(--lijn-donker); }
.op-donker .reja::after { border-color: var(--vijg-900); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-knop);
  border: 1px solid var(--vijg-900);
  background: var(--vijg-700);
  color: var(--zand-tekst);
  box-shadow: 0 2px 0 rgba(64, 27, 39, 0.28);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.knop:hover { background: var(--vijg-800); color: var(--zand-tekst); transform: translateY(-1px); }
.knop:active { transform: translateY(0); box-shadow: none; }
.knop-omtrek {
  background: transparent;
  color: var(--vijg-700);
  border: 1px solid var(--vijg-700);
  box-shadow: none;
}
.knop-omtrek:hover { background: var(--vijg-100); color: var(--vijg-800); }
.knop-albero {
  background: var(--albero-700);
  border-color: var(--albero-800);
  box-shadow: 0 2px 0 rgba(124, 86, 26, 0.3);
}
.knop-albero:hover { background: var(--albero-800); }
.op-donker .knop-omtrek { color: var(--zand-tekst); border-color: var(--lijn-donker); }
.op-donker .knop-omtrek:hover { background: rgba(246, 240, 225, 0.1); color: var(--zand-tekst); }

/* Etiket: klein label, zoals een handgeschilderd naambordje */
.etiket {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-knop);
  background: var(--albero-100);
  color: var(--albero-800);
  border: 1px solid var(--lijn-albero);
}
.etiket-vijg { background: var(--vijg-100); color: var(--vijg-800); border-color: rgba(108, 47, 62, 0.3); }
.etiket-zand { background: var(--zand-50); color: var(--inkt); border-color: var(--lijn); }

/* ---------- Kaarten ---------- */
.kaart {
  background: var(--zand-50);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-mat);
  overflow: hidden;
}
.kaart-albero { background: var(--albero-100); border-color: var(--albero-200); }
.kaart-vijg {
  background: var(--vijg-900);
  background-image: var(--korrel);
  color: var(--zand-tekst);
  border-color: rgba(64, 27, 39, 0.55);
}

/* Feitenlijst met zonnestip */
.feiten { list-style: none; margin: 0; padding: 0; }
.feiten li {
  position: relative;
  padding: 0.34rem 0 0.34rem 1.75rem;
}
.feiten li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.6em; height: 0.6em;
  background: var(--albero-500);
  border-radius: 50% 50% 2px 2px; /* mini-boog */
}
.op-donker .feiten li::before { background: var(--albero-500); }

/* Citaat: EB Garamond cursief met vijg-aanhalingsteken */
.citaat {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.52;
  color: var(--inkt);
  margin: 0;
  padding: 0 0 0 2.3rem;
}
.citaat::before {
  content: "\201C";
  position: absolute;
  left: 0; top: -0.26em;
  font-size: 3.2rem;
  font-style: normal;
  line-height: 1;
  color: var(--vijg-500);
}
.citaat-bron {
  display: block;
  margin-top: 0.8rem;
  padding-left: 2.3rem;
  font-family: var(--font-tekst);
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--albero-700);
}
.op-donker .citaat { color: var(--zand-tekst); }
.op-donker .citaat::before { color: var(--albero-500); }

/* Licentieblok: het Casa Rural-vertrouwenselement */
.licentie {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  background: var(--zand-50);
  border: 1px solid var(--lijn-albero);
  border-radius: var(--radius-kaart);
}
.licentie .zegel {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50% 50% 4px 4px;
  background: var(--albero-100);
  border: 1px solid var(--lijn-albero);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--albero-800);
}
.licentie strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.licentie span {
  display: block;
  font-size: var(--maat-klein);
  color: var(--inkt-zacht);
}

/* =========================================================================
   FOTO'S — pro en post-renovatie: fullbleed mag.
   ========================================================================= */

/* Boogfoto: staande foto in een Andalusisch boogkader */
.boogfoto {
  display: inline-block;
  max-width: 100%;
  background: var(--wit);
  padding: 0.6rem 0.6rem 0.9rem;
  border: 1px solid var(--lijn-zacht);
  border-radius: calc(999px + 0.6rem) calc(999px + 0.6rem) var(--radius-kaart) var(--radius-kaart);
  box-shadow: var(--schaduw-mat);
}
.boogfoto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--boog);
}
.boogfoto figcaption {
  margin-top: 0.55rem;
  text-align: center;
  font-size: var(--maat-klein);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* Vlakfoto: liggende foto met passe-partout */
.vlakfoto {
  display: block;
  background: var(--wit);
  padding: 0.6rem;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-mat);
  margin: 0;
}
.vlakfoto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.vlakfoto figcaption {
  padding: 0.55rem 0.2rem 0;
  font-size: var(--maat-klein);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* Avondband: fullbleed foto met vijg-sluier voor tekst erop */
.avondband {
  position: relative;
  color: var(--zand-tekst);
  background: var(--vijg-900);
  overflow: hidden;
}
.avondband > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.avondband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(64, 27, 39, 0.35) 0%, rgba(64, 27, 39, 0.78) 100%);
}
.avondband > *:not(img) { position: relative; z-index: 1; }

/* ---------- Tarieventabel: echte HTML-tabel ---------- */
.tarieven-tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--zand-50);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-kaart);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.tarieven-tabel caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.7rem;
  font-size: var(--maat-klein);
  color: var(--inkt-zacht);
}
.tarieven-tabel th, .tarieven-tabel td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--lijn-zacht);
}
.tarieven-tabel thead th {
  background: var(--vijg-800);
  color: var(--zand-tekst);
  font-family: var(--font-tekst);
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--vijg-900);
}
.tarieven-tabel tbody th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--vijg-800);
}
.tarieven-tabel tbody tr:nth-child(even) { background: var(--zand-100); }
.tarieven-tabel tbody tr:last-child th, .tarieven-tabel tbody tr:last-child td { border-bottom: 0; }
.tarieven-tabel td { color: var(--inkt); }
.tarieven-tabel .bedrag { font-weight: 700; white-space: nowrap; }
.tarieven-tabel .seizoen-hoog th { color: var(--albero-800); }

/* ---------- Formuliervelden ---------- */
.veld { display: block; margin-bottom: 1.05rem; }
.veld span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--inkt);
}
.veld input, .veld textarea {
  width: 100%;
  padding: 0.68rem 0.85rem;
  font: inherit;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-veld);
}
.veld input:focus, .veld textarea:focus {
  outline: 2px solid var(--albero-500);
  outline-offset: 1px;
  border-color: var(--albero-500);
}

/* ---------- Motion: rustig onthullen, met reduced-motion-gate ---------- */
.onthul { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .onthul {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .onthul.zichtbaar { opacity: 1; transform: none; }
  .vlakfoto, .boogfoto { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .vlakfoto:hover, .boogfoto:hover { transform: translateY(-3px); box-shadow: var(--schaduw-zweef); }
}