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

/* --------------------------------------------------------------------------
   6 · ov — over ons · VERVANGT 70-ov-over-ons.css
   Baseline: bovenregel, kop, lead, twee tekstkolommen, uitspraak op h2-maat.
   R2: tekst naast het beeld van de woonkamer; het politiebureau als terzijde
   op h3-maat. De duinband blijft de overgang naar de omgeving.
   -------------------------------------------------------------------------- */

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

.ov__raster { display: grid; gap: var(--ng-s-5); }

.ov__figuur { order: -1; }                    /* mobiel: eerst het beeld */
img.ov__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ng-radius);
}
.ov__figuur figcaption {
  margin-top: var(--ng-s-2);
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: var(--ng-tekst);
}

.ov__kop { margin: 0 0 var(--ng-s-4); }

.ov__tekst p {
  margin: 0 0 var(--ng-s-3);
  max-width: 46ch;
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  color: var(--ng-tekst);
}
.ov__tekst p.ov__lead {
  margin-bottom: var(--ng-s-4);
  max-width: 34ch;
  font-size: var(--ng-t-lead);
  line-height: var(--ng-lh-lead);
}

.ov__terzijde {
  margin: var(--ng-s-5) 0 var(--ng-s-4);
  padding-left: var(--ng-s-4);
  border-left: 2px solid var(--ng-munt-200);
}
.ov__tekst .ov__terzijde p {
  margin: 0;
  max-width: 30ch;
  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);
}
.ov__terzijde span {
  display: block;
  margin-top: var(--ng-s-2);
  max-width: 46ch;
  font-family: var(--ng-font-tekst);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-normaal);
  line-height: var(--ng-lh-klein);
  letter-spacing: normal;
  color: var(--ng-tekst);
}

a.ov__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: .02em;
  color: var(--ng-actie);
  text-decoration: underline;
  text-underline-offset: .28em;
}
a.ov__link:hover { color: var(--ng-actie-hover); }

/* De duinband: ongewijzigd uit de baseline. */
img.ov__beeld {
  display: block;
  width: 100%;
  height: clamp(14rem, 32vw, 26rem);
  margin-top: var(--ng-sectie-y);
  object-fit: cover;
  object-position: 50% 62%;
}

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

/* ==========================================================================
   R3 · 2026-10-01 · de paginaversie /over-ons/ (v2.0)
   --------------------------------------------------------------------------
   Het tijdelijke blok met de opbouw van v1.0 (kopblok, twee kolommen,
   uitspraak, acties) is hier weggehaald: `ov__kop-blok` staat nergens meer
   in de markup.

   De pagina gebruikt de paginakop (`.he.he--pagina`) en het slotcomponent
   (`.db`). Wat hier staat is het middendeel: blokken op wit, met de kop
   links en de inhoud rechts op het 5:7-raster, en een register voor de
   jaartallen — dezelfde vorm als de thema's van de omgeving op de homepage.
   Binnen de blokken gelden de tekstregels van hierboven (`.ov__tekst`,
   `.ov__terzijde`, `a.ov__link`).
   ========================================================================== */

.ovp__blok { padding: var(--ng-sectie-y) 0 0; background: var(--ng-grond); }
/* De ruimte vóór de afsluiting staat op het slotcomponent: `:last-of-type` telt elke <section> mee, ook de
   afsluiting zelf, en raakte het laatste blok dus niet (gezien in de voorvertoning). */
.ovp .db { margin-top: var(--ng-sectie-y); }

.ovp__kop { margin: 0 0 var(--ng-s-4); }

.ovp__register { margin: 0; border-top: 1px solid var(--ng-lijn-sterk); }
.ovp__regel {
  display: grid;
  gap: var(--ng-s-2);
  padding: var(--ng-s-4) 0;
  border-bottom: 1px solid var(--ng-lijn);
}
.ovp__regel 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);
  font-variant-numeric: lining-nums;
  color: var(--ng-kop);
}
.ovp__regel dd {
  margin: 0;
  max-width: 62ch;
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  color: var(--ng-tekst);
}

.ovp__raster { display: grid; gap: var(--ng-s-2); padding-top: var(--ng-s-5); border-top: 1px solid var(--ng-lijn-sterk); }

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