/* ==========================================================================
   H6 · gw — Goed om te weten
   v1.0 · 2026-08-31 · Natuurlijk Gezonder
   --------------------------------------------------------------------------
   Prefix: gw-. Gebruikt uitsluitend tokens uit 00-tokens.css.
   Laadt na 50-ws-wellness.css.

   AFWIJKING VAN HET CONTAINERPLAN — de grootste tot nu toe, dus met de
   redenering erbij.

   Het plan zei hier: "drie voorzieningenblokken, beeld met tekstoverlay,
   met gratis parkeren erbij". Dat is precies wat de oude site had (twee
   blokken: wifi/parkeren en wellnesstuin) plus één.

   Waarom dat nu niet meer klopt:

   1. De feitenbalk van de hero draagt al `6 accommodaties · privé
      wellnesstuin · gratis parkeren`. Twee van de drie geplande blokken
      zouden dus letterlijk herhalen wat het eerste scherm al zei.
   2. De sectie ervoor (H5) gaat volledig over de wellnesstuin. Daar nog
      een blok over maken is de derde vermelding op één pagina.
   3. Er ontbrak intussen iets veel belangrijkers: de pagina zei nergens
      dat er GEEN ONTBIJT is, terwijl het merk "B&B" heet. Dat is de
      grootste verwachtingsbreuk in de hele migratie en hij hoorde nergens.

   Deze sectie is daarom een praktische specificatie geworden in plaats van
   drie beeldblokken: zes dingen die een gast nakijkt vóór hij boekt, met
   het ontbijt op de eerste plaats en zichtbaar gemarkeerd.

   RITME: donker (H5) → licht en dicht (hier). Geen beeld, want dit is de
   plek waar iemand iets opzoekt, niet iets voelt.
   ========================================================================== */

.gw {
  padding: var(--ng-sectie-y) 0;
  background: var(--ng-munt-050);
}

.gw__kop-blok { max-width: 46rem; margin-bottom: var(--ng-s-6); }

.gw__eyebrow {
  margin: 0 0 var(--ng-s-2);
  font-size: var(--ng-t-micro);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-tekst-zacht);
}
.gw__kop { margin: 0 0 var(--ng-s-3); }
.gw__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--ng-t-lead);
  line-height: var(--ng-lh-lead);
  color: var(--ng-tekst);
}

/* --------------------------------------------------------------------------
   Het raster

   De scheidingslijnen zijn de `gap` van het raster, niet de randen van de
   cellen. Zo is er nooit een dubbele lijn tussen twee cellen en hoeft er
   geen `:nth-child`-rekenwerk aan te pas te komen als het aantal kolommen
   met de breedte meeverandert. Dezelfde techniek als de naden in de
   kamerstrook.
   -------------------------------------------------------------------------- */

.gw__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  /* De lijnkleur is de gap. De ACHTERGROND is bewust wit en niet de
     lijnkleur: bij `auto-fit` kwamen er lege rastervakken bij vier kolommen
     en die kleurden dan grijs — een blok van niets, midden in de sectie.
     Met een witte grond valt een leeg vak niet op, en de vaste kolomaantallen
     hieronder zorgen dat er er sowieso geen ontstaan: zes items delen door
     één, twee en drie. */
  background: var(--ng-grond);
  border: 1px solid var(--ng-lijn);
  border-radius: var(--ng-radius);
  overflow: hidden;
}

/* Vaste kolomaantallen in plaats van `auto-fit`: zes items moeten elke rij
   volmaken, en dat lukt alleen als het aantal kolommen een deler van zes is. */
@media (min-width: 48rem) {
  .gw__raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .gw__raster { grid-template-columns: repeat(3, 1fr); }
}

.gw__item {
  padding: var(--ng-s-5);
  background: var(--ng-grond);
  /* de gap tekent de lijn; deze schaduw vult hem in de kleur die hij hoort
     te hebben, ook als een rij niet vol is */
  box-shadow: 0 0 0 1px var(--ng-lijn);
}

.gw__label {
  display: block;
  margin: 0 0 var(--ng-s-2);
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-medium);
  font-size: var(--ng-t-h3);
  line-height: var(--ng-lh-kop);
  color: var(--ng-kop);
}

.gw__item p {
  margin: 0;
  max-width: 42ch;
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  color: var(--ng-tekst);
}
.gw__item p + p { margin-top: var(--ng-s-2); }

.gw__item a {
  color: var(--ng-actie);
  text-underline-offset: .18em;
}
.gw__item a:hover { color: var(--ng-actie-hover); }

/* --------------------------------------------------------------------------
   Het ontbijtblok

   Dit is het enige item dat iets wegneemt in plaats van iets te geven, en
   het spreekt de merknaam tegen. Het krijgt daarom een accentlijn en staat
   vooraan — verstoppen tussen de rest zou precies de fout herhalen die de
   oude site maakte, waar de tegenspraak twee zinnen uit elkaar stond.
   -------------------------------------------------------------------------- */

/* Let op: de seamschaduw van `.gw__item` moet mee. `box-shadow` overschrijft
   in zijn geheel — alleen de accentlijn opgeven haalde de rasterlijn van dit
   ene vakje weg, en dat viel pas op als het vakje aan een rand stond. */
.gw__item--let-op {
  box-shadow:
    inset 3px 0 0 0 var(--ng-actie),
    0 0 0 1px var(--ng-lijn);
}
.gw__item--let-op .gw__label { color: var(--ng-groen-900); }

/* --------------------------------------------------------------------------
   Kleine schermen
   -------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
  .gw__item { padding: var(--ng-s-4); }
}


/* ==========================================================================
   R3 · 2026-10-01 · wijziging uit het goedgekeurde R2-prototype
   (prototype/r2/r2.css, blok 5), ongewijzigd overgenomen. Staat achteraan,
   zodat het net als in het prototype ná de regels hierboven telt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   5 · gw — goed om te weten · WIJZIGING op 60-gw-goed-om-te-weten.css
   Vijf vakken in plaats van zes; het ontbijtvak is twee kolommen breed.
   -------------------------------------------------------------------------- */

.gw__kop-blok { margin-bottom: var(--ng-s-5); }

@media (min-width: 48rem) {
  .gw__item--breed { grid-column: span 2; }
  .gw__item--breed p { max-width: 58ch; }
}

/* R3 · 2026-10-01 · gemeten op staging: Elementor haalt de onderstreping van elke link weg
   (`.elementor a { text-decoration: none }`). Een link midden in een zin moet meer dragen dan kleur. */
.gw__lead a { text-decoration: underline; }