/* ==========================================================================
   H1 · he — Hero
   v2.0 · 2026-10-01 · Natuurlijk Gezonder / B&B Gezond aan Zee
   --------------------------------------------------------------------------
   R3 · 2026-10-01 · vervangt v1.0. De inhoud is blok 1 uit het goedgekeurde
   R2-prototype (prototype/r2/r2.css), ongewijzigd overgenomen.
   Gebruikt uitsluitend tokens uit 00-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · he — hero · VERVANGT 20-he-hero.css
   --------------------------------------------------------------------------
   Baseline: schermbreed beeld, tekst op een translucent groen paneel, een
   feitenkaart die half over de onderrand hangt. Op 390 px dekt het paneel de
   foto vrijwel helemaal af en heeft `object-position` nooit gewerkt.

   R2: tekst en beeld náást elkaar op zand. Er staat geen tekst meer op de
   foto, dus er is geen onderlaag, geen verloop en geen `object-position`
   nodig. Het beeldvak is 4:3 — de verhouding van de bron — op beide
   breedtes: de foto wordt nergens uitgesneden. Mobiel staat het beeld eerst.
   -------------------------------------------------------------------------- */

.he {
  background: var(--ng-zand);
  color: var(--ng-groen-900);
}

.he__raster { display: grid; }

.he__beeldvak {
  order: -1;                                  /* mobiel: eerst het beeld (T-06) */
  position: relative;
  background: var(--ng-groen-900);            /* zolang het beeld niet binnen is */
  overflow: hidden;
}
/* De 4:3 komt uit een maatgever, niet uit `aspect-ratio` op het vak zelf.
   Een rasteritem mét een aspect-ratio rekt in de breedte niet meer mee
   (`justify-self: normal` gedraagt zich dan als `start`): het vak nam zijn
   breedte uit de rijhoogte en stak 95 px buiten het scherm. Met de maatgever
   is 4:3 de ONDERGRENS — is de tekstkolom hoger, dan groeit het beeld mee. */
.he__beeldvak::before { content: ""; display: block; padding-top: 75%; }
/* `img.` en niet alleen de klasse — zie de vuistregel in 05-reset.css. */
img.he__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.he__tekst { padding: var(--ng-s-5) var(--ng-gutter) var(--ng-s-6); }

.he__eyebrow {
  margin: 0 0 var(--ng-s-3);
  font-size: var(--ng-t-micro);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-groen-900);
}

/* Het ene typografische hoogtepunt van de pagina (T-11). */
.he__kop {
  margin: 0 0 var(--ng-s-4);
  font-size: var(--ng-t-display);
  line-height: var(--ng-lh-display);
  letter-spacing: var(--ng-ls-display);
  font-weight: var(--ng-w-licht);
  color: var(--ng-groen-900);
}
.he__kop span { display: block; text-wrap: balance; }

.he__lead {
  margin: 0 0 var(--ng-s-5);
  max-width: 36ch;
  font-size: var(--ng-t-lead);
  line-height: var(--ng-lh-lead);
  color: var(--ng-groen-900);
}

.he__knoppen { display: flex; flex-wrap: wrap; gap: var(--ng-s-3); }

/* Feitenregel — plat, in de stroom. De zwevende kaart met schaduw is weg:
   er is geen beeldrand meer om overheen te hangen. */
.he__feiten {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ng-lijn-sterk);
}
.he__feit {
  padding: var(--ng-s-4) 0;
  border-bottom: 1px solid var(--ng-lijn);
}
.he__feit:last-child { border-bottom: 0; }

.he__cijfer {
  display: block;
  margin-bottom: var(--ng-s-1);
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-medium);
  font-size: var(--ng-t-h3);
  line-height: 1.1;
  color: var(--ng-groen-900);
}
.he__cijfer small {
  font-family: var(--ng-font-tekst);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-normaal);
  color: var(--ng-groen-900);
}
.he__label {
  display: block;
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: var(--ng-groen-900);
}

@media (max-width: 47.99rem) {
  .he__knoppen .ng-knop { flex: 1 1 100%; }
}

@media (min-width: 48rem) {
  .he__feiten { grid-template-columns: repeat(3, 1fr); }
  .he__feit {
    padding: var(--ng-s-4) var(--ng-s-5);
    border-bottom: 0;
    border-left: 1px solid var(--ng-lijn);
  }
  .he__feit:first-child { padding-left: 0; border-left: 0; }
}

/* Vanaf 62rem staan tekst en beeld naast elkaar. De twee middenkolommen
   tellen samen op tot de inhoudsbreedte van .ng-wrap (75rem min twee keer de
   goot), zodat de tekst op de sitekolom lijnt; het beeld loopt door tot de
   schermrand. */
@media (min-width: 62rem) {
  .he__raster {
    grid-template-columns:
      minmax(var(--ng-gutter), 1fr)
      minmax(0, 36rem)
      minmax(0, 33rem)
      minmax(var(--ng-gutter), 1fr);
    align-items: center;
  }
  .he__tekst {
    grid-column: 2;
    padding: var(--ng-s-6) var(--ng-s-6) var(--ng-s-6) 0;
  }
  .he__beeldvak {
    grid-column: 3 / -1;
    order: 0;
    align-self: stretch;
  }
  /* Tussen 62 en 75rem is de tekstkolom te smal voor de display-maat: de
     langste regel ("De wellnesstuin is") breekt dan. Daar staat de kop één
     stap lager op de schaal; vanaf 75rem krijgt hij de display-maat terug. */
  .he__kop { font-size: var(--ng-t-h1); }
}
@media (min-width: 75rem) {
  .he__kop { font-size: var(--ng-t-display); }
}

/* ==========================================================================
   R3 · 2026-10-01 · de paginakop: dezelfde hero op de vervolgpagina's
   --------------------------------------------------------------------------
   Tekst naast het beeld op zand, net als op de homepage — geen tekst op een
   foto. Twee verschillen, allebei afgeleid uit R2:
     1. de titel staat één stap lager op de schaal. De display-maat is het
        ene typografische hoogtepunt van de site en hoort bij de homepage
        (T-11);
     2. het kruimelpad staat in het zandvlak, boven het raster. Op zand staat
        alle tekst in --ng-groen-900: zeegroen haalt daar 3,57 : 1.
   Gebruikt op: wellnesstuin (stap 2). Volgt op de andere pagina's bij hun
   eigen rolloutstap.
   ========================================================================== */

.he--pagina .he__kop { font-size: var(--ng-t-h1); }

.he .ng-kruimels { padding: var(--ng-s-4) 0 0; color: var(--ng-groen-900); }
.he .ng-kruimels a:hover { color: var(--ng-groen-900); text-decoration: underline; }
.he .ng-kruimels [aria-current="page"] { color: var(--ng-groen-900); }

/* Naast elkaar (vanaf 62rem) ligt het kruimelpad óver de bovenrand van het zandvlak in plaats van erboven:
   zo begint het beeld aan de bovenrand, net als op de homepage. Het pad staat links, boven de tekstkolom; het
   beeld rechts wordt er niet door geraakt. */
@media (min-width: 62rem) {
  .he--pagina { position: relative; }
  .he--pagina .ng-kruimels { position: absolute; top: 0; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .he--pagina .ng-kruimels ol { pointer-events: auto; width: fit-content; }
  /* Ruimte onder het pad, ook als de tekstkolom hoger is dan het beeld (gezien op 1024 px: de bovenregel
     stond 19 px onder het kruimelpad). */
  .he--pagina .he__tekst { padding-top: var(--ng-s-7); }
}