/* Alpaca Retreat Lodge — huisstijl
   Kleuren uit de huisstijlkaart; typografie: Gelasio (Georgia-metriek) + Jost (geometrisch, à la Century Gothic) */
:root{
  --groen:#586E4E;       /* Bosgraaf-groen — primair */
  --bos:#2F3C2F;         /* Diep bosgroen — tekst, donkere vlakken */
  --salie:#ACB7A0;       /* Zacht salie */
  --zand:#D8C8AC;        /* Duinzand */
  --linnen:#F6F2EA;      /* Linnen — basis */
  --hout:#9B765A;        /* Warm hout — spaarzaam */
  --zand-licht:#EEE6D6;
  --tekst-zacht:#55604F;
  --serif:"Gelasio",Georgia,"Times New Roman",serif;
  --sans:"Jost","Century Gothic","Avenir Next",Futura,system-ui,sans-serif;
  --maat:min(1200px, 100% - 2*var(--rand));
  --rand:clamp(16px,4vw,48px);
  --ruimte:clamp(72px,10vw,144px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
html{color-scheme:light}
body{margin:0;background:var(--linnen);color:var(--bos);font-family:var(--sans);font-size:clamp(17px,1.05vw + 12px,19px);line-height:1.62;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--groen)}
:focus-visible{outline:2px solid var(--hout);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.012em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.6rem);letter-spacing:-.022em}
h2{font-size:clamp(2rem,3.7vw,3.3rem)}
h3{font-size:clamp(1.35rem,1.6vw,1.6rem);line-height:1.2}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.55;color:var(--bos)}
.zacht{color:var(--tekst-zacht)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--linnen);padding:8px 12px}
.wrap{width:var(--maat);margin-inline:auto}
.sectie{padding-block:var(--ruimte)}
.sectie--zand{background:var(--zand-licht)}
.sectie--bos{background:var(--bos);color:var(--linnen)}
.sectie--bos a:hover{color:var(--zand)}
.sectie--bos .zacht{color:var(--salie)}

/* Knoppen */
.knop{display:inline-flex;align-items:center;gap:.6em;font:500 1rem/1 var(--sans);letter-spacing:.01em;padding:1.05em 1.5em;border-radius:3px;text-decoration:none;border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s;cursor:pointer}
.knop--boek{background:var(--groen);color:var(--linnen)}
.knop--boek:hover{background:var(--bos);color:var(--linnen)}
.sectie--bos .knop--boek,.hero .knop--boek{background:var(--linnen);color:var(--bos)}
.sectie--bos .knop--boek:hover,.hero .knop--boek:hover{background:var(--zand);color:var(--bos)}
.knop--lijn{border-color:currentColor;color:inherit;background:transparent}
.knop--lijn:hover{background:rgba(88,110,78,.08)}
.tekstlink{font-weight:500;text-decoration:underline;text-decoration-color:var(--hout)}
.prijs{font-family:var(--serif);font-size:1.05rem}
.prijs b{font-weight:400;font-size:1.5em}

/* Kop */
.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--linnen);border-bottom:1px solid rgba(47,60,47,.12)}
.kop__in{width:var(--maat);margin-inline:auto;display:flex;align-items:center;gap:24px;height:76px}
.kop__logo img{height:clamp(40px,4vw,50px);width:auto}
.kop__nav{margin-left:auto}
.kop__nav ul{display:flex;gap:clamp(14px,1.8vw,28px);list-style:none;margin:0;padding:0}
.kop__nav a{text-decoration:none;font-size:.98rem;padding-block:6px;border-bottom:1px solid transparent}
.kop__nav a:hover,.kop__nav a[aria-current="page"]{border-bottom-color:var(--hout);color:var(--bos)}
.kop .knop{padding:.85em 1.2em;font-size:.95rem}
.kop__menu{display:none;margin-left:auto;background:none;border:0;font:500 1rem var(--sans);color:var(--bos);padding:10px 4px;cursor:pointer}
.taal{font-size:.85rem;color:var(--tekst-zacht);display:flex;gap:8px}
.taal a{text-decoration:none}.taal [aria-current]{color:var(--bos);font-weight:500}
@media (max-width:1060px){
  .kop__nav,.kop .knop,.kop .taal{display:none}
  .kop__menu{display:block}
  .kop.open .kop__nav{display:block;position:absolute;left:0;right:0;top:76px;background:var(--linnen);border-bottom:1px solid rgba(47,60,47,.12);padding:12px var(--rand) 28px}
  .kop.open .kop__nav ul{flex-direction:column;gap:2px}
  .kop.open .kop__nav a{display:block;font-family:var(--serif);font-size:1.6rem;padding:10px 0}
  .kop.open .taal{display:flex;position:absolute;top:76px;right:var(--rand);padding-top:24px}
}

/* Hero: het venster — de foto in een houten kader zoals de gevel van de lodge */
.hero{background:var(--bos);color:var(--linnen);padding:clamp(16px,2.4vw,32px) var(--rand) clamp(56px,7vw,96px)}
.hero__venster{position:relative;max-width:1440px;margin-inline:auto;border:clamp(8px,1.3vw,18px) solid var(--hout);border-bottom-width:0;background:#1f281f}
.hero__venster::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(8px,1.3vw,18px);background:#1f281f}
.hero__venster img{width:100%;height:min(72vh,760px);min-height:360px;object-fit:cover;object-position:50% 62%}
.hero__tekst{max-width:1440px;margin:clamp(28px,4vw,56px) auto 0;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.hero h1{margin:0;color:var(--linnen)}
.hero__intro p{color:#E3DED2}
.hero__acties{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:28px}
.hero__acties .prijs{color:var(--zand)}
.hero--pagina .hero__venster img{height:min(56vh,600px)}
@media (max-width:820px){.hero__tekst{grid-template-columns:1fr}.hero__venster img{height:58vh}}

/* Feitenregel onder de hero */
.feiten{display:flex;flex-wrap:wrap;gap:10px 40px;list-style:none;padding:0;margin:0}
.feiten li{display:flex;align-items:baseline;gap:10px;font-size:.98rem}
.feiten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--salie);transform:translateY(-2px)}
.feitenbalk{background:var(--zand-licht);padding:22px var(--rand)}
.feitenbalk .feiten{width:var(--maat);margin-inline:auto}

/* Spreads: foto + tekst */
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.spread + .spread{margin-top:var(--ruimte)}
.spread__foto{grid-column:1 / span 7}
.spread__tekst{grid-column:9 / span 4}
.spread--om .spread__foto{grid-column:6 / span 7;order:2}
.spread--om .spread__tekst{grid-column:1 / span 4;order:1}
.spread__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.spread__foto--staand img{aspect-ratio:4/5}
@media (max-width:820px){.spread{grid-template-columns:1fr}.spread__foto,.spread__tekst,.spread--om .spread__foto,.spread--om .spread__tekst{grid-column:1;order:0}}

/* Sectiekop */
.kopblok{display:grid;grid-template-columns:5fr 6fr;gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.kopblok h2{margin:0}.kopblok p{margin:0}
@media (max-width:820px){.kopblok{grid-template-columns:1fr}}

/* Vier redenen — redactioneel raster */
.redenen{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.reden img{width:100%;object-fit:cover;margin-bottom:20px}
.reden:nth-child(1){grid-column:1 / span 7}.reden:nth-child(1) img{aspect-ratio:16/10}
.reden:nth-child(2){grid-column:9 / span 4;align-self:end}.reden:nth-child(2) img{aspect-ratio:4/5}
.reden:nth-child(3){grid-column:1 / span 4}.reden:nth-child(3) img{aspect-ratio:4/5}
.reden:nth-child(4){grid-column:6 / span 7}.reden:nth-child(4) img{aspect-ratio:16/10}
.reden p{color:var(--tekst-zacht)}
@media (max-width:820px){.redenen{grid-template-columns:1fr}.reden:nth-child(n){grid-column:1}.reden:nth-child(n) img{aspect-ratio:4/3}}

/* Verblijf in stappen (klantreis) */
.reis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);position:relative}
.reis::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:rgba(246,242,234,.3)}
.reis li{position:relative;padding-top:52px}
.reis li::before{content:"";position:absolute;top:8px;left:0;width:15px;height:15px;border-radius:50%;background:var(--bos);border:1px solid var(--zand)}
.reis li:first-child::before{background:var(--zand)}
.reis h3{color:var(--linnen);font-size:1.4rem}
.reis p{color:#D9D5CA;font-size:.98rem}
@media (max-width:900px){.reis{grid-template-columns:1fr 1fr}.reis::before{display:none}}
@media (max-width:560px){.reis{grid-template-columns:1fr}}

/* Voorzieningen */
.voorzieningen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.voorzieningen h3{font-size:1.25rem;padding-bottom:12px;border-bottom:1px solid rgba(47,60,47,.18);margin-bottom:16px}
.voorzieningen ul{list-style:none;margin:0;padding:0}
.voorzieningen li{padding:6px 0}
@media (max-width:820px){.voorzieningen{grid-template-columns:1fr}}

/* Reistijden */
.reistijden{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,5vw,80px)}
.reistijden li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(47,60,47,.16);break-inside:avoid}
.reistijden .min{font-family:var(--serif);font-size:1.35rem;white-space:nowrap;color:var(--groen)}
.sectie--bos .reistijden li{border-color:rgba(246,242,234,.18)}.sectie--bos .reistijden .min{color:var(--zand)}
@media (max-width:700px){.reistijden{columns:1}}

/* Doelgroep-tegels */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(12px,1.6vw,24px)}
.tegel{text-decoration:none;display:block}
.tegel img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:14px;transition:filter .3s}
.tegel:hover img{filter:brightness(1.06) saturate(1.05)}
.tegel h3{font-size:1.25rem;margin-bottom:4px}
.tegel span{font-size:.95rem;color:var(--tekst-zacht)}
@media (max-width:560px){.tegels{grid-template-columns:repeat(2,1fr)}}

/* Galerij */
.galerij{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px)}
.galerij figure{margin:0}
.galerij img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galerij .g-groot{grid-column:span 4;grid-row:span 2}.galerij .g-groot img{aspect-ratio:auto;height:100%}
.galerij .g-2{grid-column:span 2}.galerij .g-3{grid-column:span 3}
figcaption{font-size:.88rem;color:var(--tekst-zacht);margin-top:8px}
@media (max-width:700px){.galerij{grid-template-columns:1fr 1fr}.galerij .g-groot{grid-column:span 2;grid-row:auto}.galerij .g-2,.galerij .g-3{grid-column:span 1}}

/* Citaat / persoonlijk */
.persoonlijk{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:center}
.persoonlijk blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.3}
.persoonlijk cite{display:block;font:400 1rem var(--sans);color:var(--tekst-zacht);margin-top:20px;font-style:normal}
@media (max-width:820px){.persoonlijk{grid-template-columns:1fr}}

/* Slot-CTA */
.slot{text-align:left;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end}
.slot h2{margin:0}
@media (max-width:820px){.slot{grid-template-columns:1fr}}

/* Platte tekstpagina's */
.tekstpagina{max-width:760px}
.tekstpagina h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:1.6em}
.paginakop{padding-block:clamp(56px,8vw,112px) clamp(32px,4vw,56px)}
.paginakop h1{max-width:16ch}
.kruimel{font-size:.9rem;color:var(--tekst-zacht);margin-bottom:20px}
.kruimel a{text-decoration:none}.kruimel a:hover{text-decoration:underline}

/* FAQ */
.faq details{border-bottom:1px solid rgba(47,60,47,.18)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-family:var(--serif);font-size:1.3rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:300 1.8rem var(--sans);color:var(--groen);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding-bottom:22px}

/* Formulier */
.formulier{display:grid;gap:18px;max-width:640px}
.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formulier label{display:block;font-size:.95rem;font-weight:500;margin-bottom:6px}
.formulier input,.formulier textarea{width:100%;font:inherit;color:var(--bos);background:#fff;border:1px solid rgba(47,60,47,.28);border-radius:3px;padding:13px 14px}
.formulier input:focus,.formulier textarea:focus{outline:2px solid var(--groen);outline-offset:0;border-color:var(--groen)}
.formulier .hp{position:absolute;left:-9999px}
@media (max-width:560px){.formulier .rij{grid-template-columns:1fr}}

/* Placeholder-blok voor ontbrekend beeld */
.nog-foto{background:repeating-linear-gradient(135deg,var(--zand-licht) 0 14px,#E7DCC6 14px 28px);display:grid;place-items:center;aspect-ratio:4/3;color:var(--tekst-zacht);font-size:.95rem;text-align:center;padding:24px}

/* Plattegrond */
.plattegrond{background:#fff;padding:clamp(16px,3vw,40px);border:1px solid rgba(47,60,47,.12)}
.plattegrond svg{width:100%;height:auto}

/* Voet */
.voet{background:var(--bos);color:#D9D5CA;padding:clamp(56px,7vw,96px) var(--rand) 120px;font-size:.96rem}
.voet__in{width:var(--maat);margin-inline:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.voet img{height:64px;width:auto;margin-bottom:20px}
.voet h2{font:500 1rem var(--sans);color:var(--linnen);margin-bottom:12px;letter-spacing:.01em}
.voet ul{list-style:none;margin:0;padding:0}.voet li{padding:4px 0}
.voet a{text-decoration:none}.voet a:hover{color:var(--linnen);text-decoration:underline}
.voet__onder{width:var(--maat);margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(246,242,234,.15);display:flex;flex-wrap:wrap;gap:12px 32px;font-size:.88rem;color:var(--salie)}
@media (max-width:900px){.voet__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.voet__in{grid-template-columns:1fr}}

/* Mobiele boekbalk */
.boekbalk{display:none}
@media (max-width:1060px){
  .boekbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:var(--linnen);border-top:1px solid rgba(47,60,47,.16)}
  .boekbalk .prijs{font-size:.9rem;white-space:nowrap}.boekbalk .prijs b{font-size:1.35em}
  .boekbalk .knop{padding:.9em 1.1em;white-space:nowrap;font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:no-preference){
  .hero__venster img{animation:open 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes open{from{transform:scale(1.04);filter:brightness(.8)}to{transform:none;filter:none}}
  .hero__venster{overflow:hidden}
}