/* ==========================================================================
   H8 · om — Omgeving (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 7 uit het goedgekeurde
   R2-prototype (prototype/r2/r2.css), ongewijzigd overgenomen.
   Gebruikt uitsluitend tokens uit 00-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7 · om — omgeving · VERVANGT 80-om-omgeving.css
   Baseline: vier thema's in twee kolommen, elk met een sierlijk volgnummer
   in munt. Die nummers coderen niets. R2: een register van vier regels op
   hetzelfde 5:7-raster — naam links, tekst rechts.
   -------------------------------------------------------------------------- */

.om {
  padding: var(--ng-sectie-y) 0;
  background: var(--ng-grond);
}

.om__kop-blok { max-width: 40rem; margin-bottom: var(--ng-s-6); }
.om__kop { margin: 0 0 var(--ng-s-3); }
.om__lead {
  margin: 0;
  font-size: var(--ng-t-lead);
  line-height: var(--ng-lh-lead);
  color: var(--ng-tekst);
}

.om__lijst { margin: 0; border-top: 1px solid var(--ng-lijn-sterk); }
.om__thema {
  display: grid;
  gap: var(--ng-s-2);
  padding: var(--ng-s-4) 0;
  border-bottom: 1px solid var(--ng-lijn);
}
.om__thema dt {
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-medium);
  font-size: var(--ng-t-h3);
  line-height: var(--ng-lh-kop);
  letter-spacing: var(--ng-ls-kop);
  color: var(--ng-kop);
}
.om__thema dd {
  margin: 0;
  max-width: 62ch;
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  color: var(--ng-tekst);
}

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

@media (min-width: 62rem) {
  .om__thema {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--ng-s-8);
    align-items: baseline;
    padding: var(--ng-s-5) 0;
  }
}