/* ==========================================================================
   H5 · ws — Wellnesstuin (sectie op de homepage)
   v2.0 · 2026-10-01 · Natuurlijk Gezonder / B&B Gezond aan Zee
   --------------------------------------------------------------------------
   R3 · 2026-10-01 · vervangt v1.0. De inhoud is blok 4 uit het goedgekeurde
   R2-prototype (prototype/r2/r2.css), ongewijzigd overgenomen.
   Gebruikt uitsluitend tokens uit 00-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4 · ws — wellnesstuin · VERVANGT 50-ws-wellness.css
   --------------------------------------------------------------------------
   Het ene donkere moment van de pagina. Baseline: tweeluik, de tekst als
   slogan plus vijf woorden in een raster, het middagoverzicht met afdekhoes
   als tweede beeld. R2: het mechanisme als kop, twee beelden in de volgorde
   van gebruik, en drie getallen van het huis als bewijs.
   -------------------------------------------------------------------------- */

.ws {
  padding: var(--ng-sectie-y) 0;
  background: var(--ng-groen-900);
  color: var(--ng-tekst-op-diep);
}

.ws__kop-blok { display: grid; gap: var(--ng-s-4); margin-bottom: var(--ng-s-6); }

/* Eén stap onder de display-maat: het tweede niveau van de pagina. */
.ws__kop {
  margin: 0;
  font-size: var(--ng-t-h1);
  line-height: var(--ng-lh-display);
  letter-spacing: var(--ng-ls-display);
  color: var(--ng-tekst-op-diep);
}

.ws__intro p {
  margin: 0 0 var(--ng-s-3);
  max-width: 52ch;
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  color: rgba(255, 254, 252, .88);
}
.ws__intro p:first-child {
  font-size: var(--ng-t-lead);
  line-height: var(--ng-lh-lead);
  color: var(--ng-tekst-op-diep);
}
.ws__intro p:last-child { margin-bottom: 0; }

.ws__beelden { display: grid; gap: var(--ng-s-4); }

.ws__figuur { display: flex; flex-direction: column; min-width: 0; }
img.ws__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ng-radius);
}
/* Het tweede beeld is vierkant en kijkt naar rechts: de ton en de ligstoel.
   Links in de bron staat de jacuzzi met zijn hoes erop — die blijft buiten
   de uitsnede. */
.ws__figuur--smal img.ws__foto { aspect-ratio: 1 / 1; object-position: 86% 50%; }

.ws__figuur figcaption {
  margin-top: var(--ng-s-2);
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .78);
}

.ws__cijfers {
  display: grid;
  margin: var(--ng-s-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 254, 252, .22);
}
.ws__cijfer {
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: var(--ng-s-3);
  align-items: baseline;
  padding: var(--ng-s-3) 0;
  border-bottom: 1px solid rgba(255, 254, 252, .22);
}
.ws__getal {
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-licht);
  font-size: var(--ng-t-h1);
  line-height: 1;
  letter-spacing: var(--ng-ls-display);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  color: var(--ng-tekst-op-diep);
}
.ws__label {
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .88);
}

.ws__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ng-s-3) var(--ng-s-5);
  margin-top: var(--ng-s-5);
}
.ws__voet p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: rgba(255, 254, 252, .78);
}

@media (min-width: 48rem) {
  .ws__cijfers { grid-template-columns: repeat(3, 1fr); border-bottom: 0; }
  .ws__cijfer {
    display: block;
    padding: var(--ng-s-5) var(--ng-s-5) 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 254, 252, .22);
  }
  .ws__cijfer:first-child { padding-left: 0; border-left: 0; }
  .ws__getal { display: block; margin-bottom: var(--ng-s-2); }
  .ws__label { display: block; max-width: 30ch; }
}

@media (min-width: 62rem) {
  .ws__kop-blok {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--ng-s-8);
    align-items: start;
  }
  /* Twee beelden op één hoogte: het brede bepaalt de rijhoogte, het smalle
     vult hem. */
  .ws__beelden { grid-template-columns: 7fr 5fr; }
  .ws__figuur--smal img.ws__foto { aspect-ratio: auto; flex: 1 1 0; min-height: 0; height: 0; }
}