/* ===================================================================
   little nature. — redesign.css (6 jul 2026, live via Fable-redesign)
   Laadt NA site.css. Alleen layout/rust-aanpassingen op home + cottages,
   kleuren en typografie-tokens blijven ongewijzigd uit site.css.
   =================================================================== */

/* ===== HOME HERO — rustiger behandeling =====
   - lager (84svh i.p.v. 100svh): de pagina "begint" meteen onder de foto
   - kleinere kop: de foto is nu het verhaal, de kop hoeft niet te schreeuwen
   - scrim: zachte, hoge gradient onderin + subtiele top-fade voor de nav
   - tekstkolom smaller en links, boven de rustige grindzone van de foto */
.hero{
  position:relative;
  min-height:76vh;min-height:84svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--army);overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background:url('../images/hero-forest.jpg') center 62%/cover no-repeat;
  animation:none;transform:none;
}
.hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(28,23,20,0.38) 0%,rgba(28,23,20,0.05) 26%,rgba(28,23,20,0) 45%),
    linear-gradient(180deg,rgba(28,23,20,0) 46%,rgba(28,23,20,0.32) 72%,rgba(28,23,20,0.66) 100%);
}
.hero__content{
  position:relative;z-index:2;
  padding:0 28px 72px;
  max-width:1200px;margin:0 auto;width:100%;
  color:var(--white);
}
.hero__inner{max-width:560px;}
.hero__tagline{
  font-size:0.82rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);font-family:'Mulish',sans-serif;font-weight:500;
  margin-bottom:20px;display:flex;align-items:center;gap:14px;
}
.hero__tagline span{display:inline-block;width:30px;height:1px;background:rgba(255,255,255,0.55);}
.hero__title{
  font-size:clamp(2.9rem,7.5vw,5.4rem);
  font-weight:300;color:var(--white);
  letter-spacing:-0.025em;line-height:0.95;margin-bottom:16px;
  text-shadow:0 2px 24px rgba(28,23,20,0.35);
}
.hero__sub{
  font-family:'Mulish',sans-serif;
  font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:300;
  color:rgba(255,255,255,0.95);margin-bottom:34px;
  text-shadow:0 1px 16px rgba(28,23,20,0.35);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;}
.hero__scroll{
  position:absolute;bottom:22px;right:28px;left:auto;transform:none;z-index:3;
  color:rgba(255,255,255,0.65);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;font-family:'Mulish',sans-serif;
  animation:none;
}
@media(max-width:640px){
  .hero{min-height:88svh;}
  .hero__content{padding-bottom:56px;}
}

/* ===== PAGE HERO (cottages) — zelfde principe =====
   Kop iets kleiner, scrim onderin sterker en lokaler,
   subtiele top-fade zodat de nav leesbaar blijft. */
.pagehero{min-height:56vh;}
.pagehero__overlay{
  background:
    linear-gradient(180deg,rgba(28,23,20,0.36) 0%,rgba(28,23,20,0.04) 30%,rgba(28,23,20,0) 46%),
    linear-gradient(180deg,rgba(28,23,20,0) 44%,rgba(28,23,20,0.34) 72%,rgba(28,23,20,0.68) 100%);
}
.pagehero__title{
  font-size:clamp(2.3rem,5.6vw,4.1rem);
  text-shadow:0 2px 22px rgba(28,23,20,0.35);
}
.pagehero__sub{max-width:46ch;text-shadow:0 1px 14px rgba(28,23,20,0.35);}

/* ===== DETAIL SQUARES =====
   Kleine vierkante detail-foto's als rustpunt, i.p.v. nóg een
   grote sfeerfoto. Drie naast elkaar, veel witruimte eromheen. */
.detailstrip{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.5vw,28px);
  max-width:880px;margin:0 auto;
}
.detailsq{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card);
}
.detailsq img{width:100%;height:100%;object-fit:cover;display:block;}
.detailcap{
  text-align:center;margin-top:22px;
  font-family:'Source Sans 3',sans-serif;font-size:0.92rem;
  color:var(--betong);font-style:italic;
}
.section--dark .detailcap{color:rgba(255,255,255,0.65);}

/* Klein vierkant detail naast een split-tekst (wellness) */
.split__detail{
  width:min(46%,220px);aspect-ratio:1/1;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card);margin-top:26px;
}
.split__detail img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== INTRO MET KLEIN DETAIL i.p.v. grote tall-foto ===== */
.introgrid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
@media(min-width:900px){.introgrid{grid-template-columns:1.25fr 0.75fr;gap:90px;}}
.introgrid__media{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);
  aspect-ratio:1/1;max-width:420px;justify-self:center;width:100%;
}
@media(min-width:900px){.introgrid__media{justify-self:end;}}
.introgrid__media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== EXTRA ADEM ===== */
.section--breathe{padding-top:clamp(84px,13vw,170px);padding-bottom:clamp(84px,13vw,170px);}