/* ═══════════════════════════════════════════════════════════════════
   togo-page-about.css — about.html visual polish
   ───────────────────────────────────────────────────────────────────
   Doel: alle resterende centering / spacing / contrast / mobile-fit
   issues op /about.html oplossen. Loadt NA togo-final-polish.css zodat
   onze specifieke selectors winnen zonder !important-spam.

   Scope: ALLES via body[data-page="about"] zodat geen enkele andere
   pagina meeluistert.

   Aanpak:
   - Geen overflow:hidden bandaids
   - WCAG AA contrast (≥4.5:1) op zowel dark als light
   - prefers-reduced-motion respecteren
   - Royal Restraint: subtiel, geen wow-overdaad
   - 18 issues geadresseerd (zie comment-headers)
   ═══════════════════════════════════════════════════════════════════ */

body[data-page="about"] .section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}


/* ─── 01 · Hero — lead-paragraph leesbaarheid centreren ─────────────
   Issue: .hero__lead had geen page-specifieke max-width; op desktop kon
   de regel ~880px lang worden waardoor de regel-lengte boven ~75ch komt.
   Lead leest beter op ~60ch en moet visueel verbonden zijn met H1. */
body[data-page="about"] .hero--aurora .hero__lead {
  max-width: 62ch;
  margin-inline: auto;
}

/* Hero trust-strip — kleine pillen centreren wanneer ze wrappen */
body[data-page="about"] .hero--aurora .hero__trust {
  justify-content: center;
}


/* ─── 02 · Section heads — centreren op centered-content sections ───
   Issue: .section__head is van zichzelf links-uitgelijnd met
   max-width:60ch, maar de child-content (about-story, timeline,
   mission-quote, values-grid, about-cta) is allemaal margin-inline:auto
   en visueel midden. Resultaat: head links, body midden → wankel.
   Fix: heads centreren op deze pagina, lead onder de title centreren. */
body[data-page="about"] .section__head {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  max-width: 60ch;
}
body[data-page="about"] .section__head .section__lead {
  margin-inline: auto;
  max-width: 56ch;
}


/* ─── 03 · About-story drop-cap — alleen op eerste paragraaf ────────
   Issue: ::first-letter regel in inline-CSS raakte ALLE p in
   .about-story — drie oversized drop-caps per sectie = visueel druk en
   breekt de leesrichting. Drop-cap hoort alleen op de openingsalinea. */
body[data-page="about"] .about-story p:not(:first-of-type)::first-letter {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin-right: 0;
}

/* Story paragrafen — uniforme verticale rhythm */
body[data-page="about"] .about-story {
  gap: var(--space-5);
}
body[data-page="about"] .about-story p {
  text-align: left;
}


/* ─── 04 · Founder-card — bio max-width + bredere gap op tablet ─────
   Issue: founder-card__bio had geen max-width binnen de body-grid
   waardoor de regel naast de 96px avatar lang werd op desktop. */
body[data-page="about"] .founder-card__bio {
  max-width: 56ch;
}

/* Tablet (641-960): geef body wat meer adem */
@media (min-width: 641px) and (max-width: 960px) {
  body[data-page="about"] .founder-card {
    gap: var(--space-6);
  }
}


/* ─── 05 · Process-grid — equal-height + 2-col mobile + 4-col desk ──
   Issue: auto-fit kan op tablet 3+1 of 2+2 mengen → asymmetrisch.
   Enes verwacht 2x2 op mobile, 4-col op desktop. Daarnaast cards niet
   gelijk hoog omdat content lengte verschilt → flex-column dwingt de
   body naar onderkant te groeien zodat alle kaarten even hoog zijn. */
body[data-page="about"] .process-grid {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* ≥480px: 2 kolommen (mobile-grote-modes + small tablets) */
@media (min-width: 480px) {
  body[data-page="about"] .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥1024px: 4 kolommen (desktop) */
@media (min-width: 1024px) {
  body[data-page="about"] .process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

/* Equal-height: dwing flex-column zodat body naar bottom kan stretchen */
body[data-page="about"] .process-step {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* extra top-padding zodat de num-badge (-14px) niet aanvoelt als
     een hap uit de bovenkant van de kaart */
  padding-top: var(--space-6);
}
body[data-page="about"] .process-step__body {
  margin-top: auto;
}


/* ─── 06 · Process-step number badge — light theme contrast ─────────
   Issue: rode badge op rode subtle shadow op witte achtergrond is
   visueel ok, maar de focus-ring/box-shadow op light is te zwak.
   Strakker contrast op zowel licht als donker. */
body[data-page="about"] .process-step__num {
  box-shadow:
    0 0 0 3px var(--color-bg-elevated, #0b0b0d),
    0 6px 16px rgba(224, 27, 27, 0.32);
}
html[data-theme="light"] body[data-page="about"] .process-step__num {
  box-shadow:
    0 0 0 3px #ffffff,
    0 6px 14px rgba(224, 27, 27, 0.22);
}


/* ─── 07 · Timeline — title-naar-body extra rhythm, dot light-fix ───
   Issue 1: in final-polish (line 5902) staat titel→body op 10px. Dat
   plakt iets te dicht in donker mode. 4px erbij = ademruimte.
   Issue 2: final-polish geeft dots een `border: 2px solid var(--color-bg)`
   = wit in light mode → dot heeft witte rand tegen witte achtergrond
   waardoor de visuele "kraal" verdwijnt. Fix: in light geen border. */
body[data-page="about"] .timeline__title {
  margin: 0 0 14px;
}
body[data-page="about"] .timeline__body {
  line-height: 1.7;
}

/* Light-theme dot fix — sterkere zichtbaarheid */
html[data-theme="light"] body[data-page="about"] .timeline__dot {
  background: var(--color-accent);
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 3px var(--color-accent),
    0 0 0 7px rgba(224, 27, 27, 0.22),
    0 0 0 12px rgba(224, 27, 27, 0.08);
}
html[data-theme="light"] body[data-page="about"] .timeline__item--future .timeline__dot {
  background: #ffffff;
  border: 2px solid var(--color-accent);
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px rgba(224, 27, 27, 0.40),
    0 0 0 11px rgba(224, 27, 27, 0.10);
}

/* Light-theme timeline spine — minder fade naar onder */
html[data-theme="light"] body[data-page="about"] .timeline::before {
  background: linear-gradient(
    180deg,
    var(--color-accent) 0%,
    rgba(224, 27, 27, 0.45) 70%,
    rgba(224, 27, 27, 0.20) 100%
  );
}

/* Year-label leesbaarheid op light — accent-text token voor 4.5:1 */
html[data-theme="light"] body[data-page="about"] .timeline__year {
  color: var(--color-accent-text, #99161D);
}


/* ─── 08 · Values-grid — altijd 1 of 3 kolommen, nooit 2+1 wees ─────
   Issue: auto-fit kan op ~700-1000px breedte een "2 + 1 wees" geven.
   Met exact 3 value-cards is dat hinderlijk. Explicit breakpoints. */
body[data-page="about"] .values-grid {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  body[data-page="about"] .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Equal-height value-cards */
body[data-page="about"] .value-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="about"] .value-card__body {
  margin-bottom: 0;
}


/* ─── 09 · Mission-quote — mobile padding + glyph-scale + light contr.
   Issue 1: 120px ❝-glyph op smal scherm voelt log; downscalen.
   Issue 2: light-theme opacity 0.18 op wit = bijna onzichtbaar.
   Issue 3: padding-top op mobile was te krap voor de overlappende glyph. */
body[data-page="about"] .mission-quote {
  padding-block: var(--space-7) var(--space-6);
}
body[data-page="about"] .mission-quote__attribution {
  margin-top: var(--space-4);
}

/* Mobile glyph kleiner zodat het niet de quote-tekst overlapt */
@media (max-width: 600px) {
  body[data-page="about"] .mission-quote {
    padding-top: var(--space-8);
  }
  body[data-page="about"] .mission-quote::before {
    font-size: 80px;
    transform: translate(-50%, -5%);
  }
}

/* Light-theme glyph zichtbaar maken */
html[data-theme="light"] body[data-page="about"] .mission-quote::before {
  opacity: 0.32;
}


/* ─── 10 · Trust-strip — light theme contrast + flex-centering ──────
   Issue: pillen wrappen flex-wrap maar op smal scherm worden ze
   gestapeld zonder horizontale centrering wanneer container groter
   wordt. Justify-content stond al op center, maar gap was wisselend. */
body[data-page="about"] .trust-strip {
  padding-block: var(--space-5);
  gap: var(--space-3) var(--space-5);
}
body[data-page="about"] .trust-strip__item {
  letter-spacing: 0.01em;
}

/* Light-theme — sterkere border en token-driven kleur (4.5:1 op #fff) */
html[data-theme="light"] body[data-page="about"] .trust-strip__item {
  background: #ffffff;
  border-color: rgba(10, 10, 12, 0.14);
  color: #2a2a30;
}


/* ─── 11 · About-cta — gap groter op mobile + body line-height ─────
   Issue: gap:var(--space-4) = 16px tussen 2 cards die volledige breedte
   pakken op mobile = te plakkerig. */
body[data-page="about"] .about-cta {
  gap: var(--space-5);
}
body[data-page="about"] .about-cta__body {
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

/* Equal-height ook hier */
body[data-page="about"] .about-cta__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="about"] .about-cta__arrow {
  margin-top: auto;
}


/* ─── 12 · Founder-card light-theme — radial accent dempen ──────────
   Issue: .founder-card::before radial-gradient is rgba(224,27,27,0.12)
   in light → roze poel op witte kaart. Soft-dempen voor Royal Restraint. */
html[data-theme="light"] body[data-page="about"] .founder-card::before {
  background: radial-gradient(
    circle at 0% 0%,
    rgba(224, 27, 27, 0.06) 0%,
    transparent 55%
  );
}

/* Avatar shadow ook iets sterker op light */
html[data-theme="light"] body[data-page="about"] .founder-card__avatar {
  box-shadow:
    0 0 0 3px rgba(224, 27, 27, 0.16),
    0 10px 24px rgba(224, 27, 27, 0.22);
}

/* Bio + role kleur ophalen voor 4.5:1 op wit */
html[data-theme="light"] body[data-page="about"] .founder-card__bio {
  color: #3a3a40;
}
html[data-theme="light"] body[data-page="about"] .founder-card__role {
  color: #5a5a60;
}
html[data-theme="light"] body[data-page="about"] .founder-card__link {
  background: #f4f4f6;
  border-color: rgba(10, 10, 12, 0.10);
  color: #2a2a30;
}
html[data-theme="light"] body[data-page="about"] .founder-card__link:hover {
  background: rgba(224, 27, 27, 0.06);
  color: #0a0a0c;
  border-color: var(--color-accent);
}


/* ─── 13 · Section-rhythm tussen aangrenzende sections gelijktrekken
   Issue: De sectie-stapeling is story → founder (surf) → process →
   timeline (surf) → values → trust (surf) → why-NL → research (surf)
   → mission → cta (surf). Ritme is bedoeld alternerend, maar
   ``.section`` heeft alleen padding-blokken. Op desktop voelden de
   surface-blokken iets te dicht op de niet-surface omdat geen extra
   margin. Geef section--surface 1px border-color iets zachter zodat
   transitie subtieler is. Geen extra margin (zou ritme verstoren). */
body[data-page="about"] .section--surface {
  border-block-color: var(--color-border);
}


/* ─── 14 · Headings rhythm — H2/H3 sitewide tokens respecteren ──────
   Issue: H2 (section__title) is text-3xl met leading-tight; H3 in
   cards is text-lg/xl met geen leading-token. Geef alle H3 binnen
   about-cards expliciete leading om visuele highlights gelijk te
   maken. Belangrijk voor cards die op één rij staan en gescand worden. */
body[data-page="about"] .process-step__title,
body[data-page="about"] .value-card__title,
body[data-page="about"] .about-cta__title,
body[data-page="about"] .timeline__title {
  line-height: var(--leading-snug, 1.28);
  letter-spacing: -0.01em;
}


/* ─── 15 · Hero title — extra leading op smal scherm (br tag) ───────
   Issue: H1 heeft <br> tussen twee delen. Op 360-414px breekt de regel
   alsnog door clamp = drie regels mogelijk. Sluier leading. */
@media (max-width: 480px) {
  body[data-page="about"] .hero--aurora .hero__title {
    line-height: 1.18;
  }
}


/* ─── 16 · Container alignment safety — geen horizontal scroll ──────
   Issue: alle child-blokken hebben margin-inline:auto maar de inline
   max-widths (780px, 880px, 680px) moeten binnen container-padding
   passen op mobile. Geen overflow:hidden — alleen min-width:0 + box-sizing
   safety zodat lange woorden niet doorbreken. */
body[data-page="about"] .about-story,
body[data-page="about"] .founder-card,
body[data-page="about"] .timeline,
body[data-page="about"] .mission-quote,
body[data-page="about"] .about-cta {
  min-width: 0;
  box-sizing: border-box;
}

/* Lange URL-loze woorden in body-tekst veilig wrappen */
body[data-page="about"] .about-story p,
body[data-page="about"] .timeline__body,
body[data-page="about"] .process-step__body,
body[data-page="about"] .value-card__body,
body[data-page="about"] .about-cta__body {
  overflow-wrap: anywhere;
}


/* ─── 17 · Reduced-motion — hover-translates uitschakelen ───────────
   Issue: process-step:hover en about-cta__card:hover doen translateY.
   prefers-reduced-motion gebruikers willen geen positie-veranderingen. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .process-step,
  body[data-page="about"] .value-card,
  body[data-page="about"] .about-cta__card,
  body[data-page="about"] .founder-card__link {
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  body[data-page="about"] .process-step:hover,
  body[data-page="about"] .about-cta__card:hover {
    transform: none;
  }
}


/* ─── 18 · Focus-visible — keyboard-navigatie zichtbaar ─────────────
   Issue: about-cta__card en founder-card__link hebben transitions
   voor hover maar geen expliciete focus-visible outline. WCAG 2.4.7. */
body[data-page="about"] .about-cta__card:focus-visible,
body[data-page="about"] .founder-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-color: var(--color-accent);
}


/* ─── 19 · Mission-quote text size cap op mobile ────────────────────
   Issue: clamp(22px, 3.2vw, 32px) is OK, maar bij 320-360px schermen
   wordt 22px gelezen met letter-spacing -0.015em = drukker. */
@media (max-width: 380px) {
  body[data-page="about"] .mission-quote__text {
    font-size: 20px;
    letter-spacing: -0.01em;
  }
}


/* ─── 20 · About-story strong + accent links contrast ───────────────
   Issue: inline-style `style="color:var(--color-accent);text-decoration:
   underline"` op /coa.html en /quality.html links binnen values en
   research-grade-defined paragrafen — die zijn fine in dark, maar in
   light kan de rode kleur op wit 4.5:1 missen. accent-text token = #99161D. */
html[data-theme="light"] body[data-page="about"] .about-story a[style],
html[data-theme="light"] body[data-page="about"] .value-card__body a[style] {
  color: var(--color-accent-text, #99161D) !important;
}


/* ─── 21 · Print fallback — niet noodzakelijk maar netjes ───────────
   togo-print.css regelt sitewide print. Hier alleen ervoor zorgen dat
   ::before glyph en hover-transforms uit zijn — die voegen niks toe. */
@media print {
  body[data-page="about"] .mission-quote::before,
  body[data-page="about"] .founder-card::before {
    display: none;
  }
  body[data-page="about"] .process-step:hover,
  body[data-page="about"] .about-cta__card:hover {
    transform: none;
  }
}