/* ============================================================
   RIET QUADEN MAKELAARS — over: citaat + tellers

   Klassiek twee-koloms blok: links het volledige citaat van Riet met haar
   naam eronder, rechts drie tellers (45 jaar, 35 jaar, 200%) die oplopen
   zodra ze in beeld komen (over.js, G6). De kop erboven komt woord voor
   woord binnen (over.js, G7). Onder 860px staat alles onder elkaar.

   Uitgangspunten:
   - Deze CSS is de EINDSTAND: de tellers tonen hun eindwaarde al in de
     HTML (min-height gereserveerd + tabular-nums), over.js zet alleen de
     beginstand (0 / woorden omlaag) en animeert terug naar hier. Zonder
     JS/GSAP/ScrollTrigger of bij prefers-reduced-motion staat dus meteen
     de juiste tekst er, geen CLS.
   - Kleurregel: --rood alleen voor het decoratieve aanhalingsteken
     (aria-hidden) en de hairline-scheidingen; lopende tekst in --zwart
     (16:1) en --steungrijs (6,6:1 op wit).
   ============================================================ */

#over {
  background: var(--wit);
}

.over__intro {
  max-width: 640px;
  margin-bottom: var(--ruimte-xl);
}

.over__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steungrijs);
}

.over__kop {
  font-family: var(--font-kop);
}

/* G7: de woorden (zelfde opbouw als .hero__kop in hero.css) */
.over__kop .woord {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0.08em 0.1em 0.02em;
  margin: -0.06em -0.08em -0.1em -0.02em;
}
.over__kop .woord-inner {
  display: inline-block;
  will-change: transform;
}

/* ---------- raster: sinds 06-08 alleen nog het citaat ----------
   De tellers verhuisden naar de trots-strook (trots.css); het citaat staat
   hier nu op zichzelf, gecentreerd. */
.over__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* ---------- citaat ---------- */
.over__citaat {
  max-width: 62ch; /* op het geërfde body-lettertype gemeten, niet op de
                       grotere quote-tekst hieronder, zodat de regellengte
                       voorspelbaar blijft */
}
.over__citaatteken {
  display: block;
  font-family: var(--font-kop);
  font-size: 4.25rem;
  line-height: 1;
  color: var(--rood);
  margin-bottom: -0.55rem;
}
.over__citaat p {
  font-family: var(--font-kop);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.48;
  letter-spacing: -0.005em;
  color: var(--zwart);
}
.over__auteur {
  margin-top: var(--ruimte-md);
  padding-top: var(--ruimte-md);
  border-top: 1px solid rgba(24, 22, 23, 0.12);
}
.over__auteur-naam {
  display: block;
  font-family: var(--font-kop);
  font-size: 1.1875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--zwart);
}
.over__auteur-functie {
  display: block;
  margin-top: 3px;
}

/* ============================================================
   DESKTOP: de intro gecentreerd boven het citaat
   ============================================================ */
@media (min-width: 860px) {
  .over__intro {
    margin-inline: auto;
    text-align: center;
  }
}

/* ============================================================
   MOBIEL
   ============================================================ */
@media (max-width: 640px) {
  .over__intro { margin-bottom: var(--ruimte-lg); }
  .over__citaatteken { font-size: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .over__kop .woord-inner { will-change: auto; }
}