/* ============================================================
   over.html — editorial "Over mij"-pagina
   Bouwt op DESIGNSYSTEEM v2 (tokens in style.css). Alleen tokens,
   geen losse font-size-waarden.
   ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Mijn verhaal: portret links (4:5), tekst rechts ── */
.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.about-story__grid > * { min-width: 0; }

.about-story__portrait {
  margin: 0;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-l));
}
.about-story__portrait .photo-slot { box-shadow: var(--shadow); }
.about-story__portrait figcaption,
.about-agreements__photo figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--2);
  color: var(--text-muted);
}

.about-story__body { max-width: var(--measure); }
.about-story__body h2 { margin: var(--space-2xs) 0 var(--space-m); }
.about-story__body > p { color: var(--text-muted); margin-bottom: var(--space-s); }
.about-story__body > p.about-story__intro { color: var(--ink); font-size: var(--step-1); line-height: 1.55; }

/* Pull-quote in Geist */
.pull-quote {
  margin: var(--space-l) 0;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m);
  border-left: 3px solid var(--action);
}
.pull-quote p {
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

/* Kerngegevens als rustige definitielijst */
.about-facts__title {
  font-size: var(--step-1);
  margin: var(--space-xl) 0 var(--space-xs);
}
.about-facts {
  margin: 0 0 var(--space-l);
  border-top: 1px solid var(--border);
}
.about-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step--1);
}
.about-facts dt { color: var(--text-muted); font-weight: 600; }
.about-facts dd { margin: 0; color: var(--ink); }
.about-facts dd a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.about-facts__sub {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* Blauwe infobadge: certificeringsstatus is een feit, geen actie */
.info-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: #0A5E86;            /* donkerder blauw: ≥ 4,5:1 op --info-bg */
  font-weight: 600;
  font-size: var(--step--2);
}
.info-badge svg { color: var(--info); flex-shrink: 0; }

.about-story__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-s) var(--space-m);
}
.about-story__actions .btn--link { min-height: 44px; }

/* ── Zo werk ik: kop links, rustige lijst rechts ── */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.about-split > * { min-width: 0; }
.about-split__aside h2 { margin: var(--space-2xs) 0 var(--space-s); }
.about-split__aside p { color: var(--text-muted); margin-bottom: var(--space-m); }
.about-split__aside .btn--link { min-height: 44px; }

.principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(22,24,29,.1); }
.principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-bottom: 1px solid rgba(22,24,29,.1);
}
.principle__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--action);
}
.principle__title { font-size: var(--step-1); margin: 0 0 var(--space-3xs); }
.principle p { color: var(--text-muted); font-size: var(--step--1); margin: 0; max-width: 60ch; }
.principle p a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }

/* ── Eerlijke afspraken + brede foto ── */
.about-agreements {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}
.about-agreements > * { min-width: 0; }
.about-agreements__photo { margin: 0; }
.photo-slot__icon { opacity: .55; }
.about-agreements__body h2 { margin: var(--space-2xs) 0 var(--space-m); }

.agreements { list-style: none; margin: 0 0 var(--space-m); padding: 0; }
.agreements li {
  position: relative;
  padding: 0 0 var(--space-xs) 1.6rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}
.agreements li::before {        /* check-teken */
  content: '';
  position: absolute; left: .15rem; top: .45em;
  width: .7rem; height: .38rem;
  border-left: 2px solid var(--action);
  border-bottom: 2px solid var(--action);
  transform: rotate(-45deg);
}
.agreements strong { color: var(--ink); }
.about-agreements .status-note { margin: 0 0 var(--space-s); }
.about-agreements__legal { font-size: var(--step--2); color: var(--text-muted); margin: 0; }
.about-agreements__legal a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }

/* ── Certificering en normen ── */
.about-norms { max-width: calc(var(--measure) + 4rem); }
.about-norms h2 { margin: var(--space-2xs) 0 var(--space-s); }
.about-norms > p { color: var(--text-muted); margin-bottom: var(--space-m); }
.about-norms__check { display: flex; gap: var(--space-xs); align-items: flex-start; }
.about-norms__check svg { color: var(--info); flex-shrink: 0; margin-top: .15em; }
.about-norms__check p { margin: 0; }

/* ── Verder lezen ── */
.about-reading {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-s) var(--space-xl);
}
.about-reading__title { font-size: var(--step-1); margin: 0; }
.about-reading__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l);
}
.about-reading__list .btn--link { min-height: 44px; }

/* ── Responsief ── */
@media (max-width: 960px) {
  .about-story__grid,
  .about-split,
  .about-agreements { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .about-story__portrait { position: static; max-width: 420px; }
  .about-agreements__photo { order: 2; }
}
@media (max-width: 600px) {
  .about-story__portrait { max-width: none; }
  .about-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .about-story__actions .btn { width: 100%; justify-content: center; }
  .about-reading { flex-direction: column; gap: var(--space-xs); }
  .about-reading__list { flex-direction: column; gap: 0; }
}