/*
 * page-about.css — styling voor patterns/page-about.php
 * Sessie 26 (2026-05-27). Pure-pattern refactor van /over-ons/ (NL) +
 * /en/about/ (EN). Vervangt de inline <style> uit _preview/preview-about.html
 * die voorheen via page.php-parsing werd geëxtraheerd.
 *
 * Bevat ALLEEN de about-specifieke secties die NIET al sitewide bestaan:
 *   - STORY      (.story*)         — 2-koloms editorial + sticky sidebar
 *   - PRINCIPLES (.principles* / .principle*) — 4 niet-onderhandelbare regels
 *   - TEAM       (.team* / .partner*)         — 5 partner-cards
 *
 * Hero, Method en CTA hergebruiken gedeelde componenten uit preview-shared.css:
 *   - Hero   → .page-hero*        (petrol, 4 facts)
 *   - Method → .ap* + .phase*     (petrol "Aanpak"-fases)
 *   - CTA    → .cta* + .contact-card*
 *
 * Brandbook v3.3 Continuum. Tokens via assets/css/tokens.css.
 * Wordt alleen geladen op de about-page (zie functions.php conditional enqueue).
 */

/* ============================================================
   SVC pillar-card overrides voor /over-ons/ (Missie + Visie diptych)
   .svc__desc--prose: multi-paragraph wysiwyg-body in plaats van
   de standaard single-paragraph lead. Inherit kleur/font van
   .svc__desc; alleen alinea-spacing toevoegen.
   ============================================================ */
.svc__desc--prose p {
  margin: 0 0 var(--space-md);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.svc__desc--prose p:last-child { margin-bottom: 0; }
.svc__desc--prose em { font-style: italic; color: var(--color-accent); }

/* ============================================================
   SVC --stacked: horizontale spreads gestapeld onder elkaar
   (i.p.v. 2 verticale kaarten naast elkaar). Beter geschikt voor
   de Missie/Visie-content waar de tekstlengte sterk verschilt:
   elke spread is een editorial split — foto links (4:3), body rechts
   verticaal gecentreerd. Op mobiel stacken naar foto-boven-tekst.
   ============================================================ */
.svc--stacked .svc__grid--2 {
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  background: transparent;
  border: 0;
}
.svc--stacked .svc__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}
.svc--stacked .svc__illustration {
  max-height: none;
  aspect-ratio: 4 / 3;
  border-bottom: 0;
  border-right: 1px solid var(--color-border-default);
}
.svc--stacked .svc__inner-card {
  padding: var(--space-2xl);
  justify-content: center;
}

@media (max-width: 960px) {
  .svc--stacked .svc__card {
    grid-template-columns: 1fr;
  }
  .svc--stacked .svc__illustration {
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-default);
  }
  .svc--stacked .svc__inner-card {
    padding: var(--space-xl);
  }
}

/* ============================================================
   STORY — wat ons motiveert (white layer)
   ============================================================ */
.story {
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-base);
}
.story__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4xl); align-items: start;
}
.story__head { margin-bottom: var(--space-2xl); grid-column: 1 / -1; }
.story__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-md) 0 0; max-width: 22ch;
}
.story__title em { font-style: italic; color: var(--color-accent); }

.story__body p {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md); max-width: 60ch;
}
.story__body p.lede {
  font-size: var(--text-lg); color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}
.story__body p.lede em { font-style: italic; color: var(--color-accent); }

.story__sidebar {
  background: var(--color-bg-subtle);
  padding: var(--space-xl);
  border-top: 2px solid var(--color-accent);
  position: sticky; top: 100px;
}
.story__sidebar-kicker {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
  display: block; margin-bottom: var(--space-md);
}
.story__sidebar dl { margin: 0; display: grid; gap: var(--space-sm); }
.story__sidebar dl > div {
  display: grid; grid-template-columns: 110px 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}
.story__sidebar dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.story__sidebar dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.story__sidebar dd {
  margin: 0;
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* ============================================================
   PRINCIPLES — 4 niet-onderhandelbare regels (white-subtle)
   ============================================================ */
.principles {
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-subtle);
}
.principles__inner { max-width: 1440px; margin: 0 auto; }
.principles__head { margin-bottom: var(--space-3xl); max-width: 720px; }
.principles__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-md) 0 0;
}
.principles__title em { font-style: italic; color: var(--color-accent); }
.principles__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.principle {
  background: var(--color-bg-base);
  padding: var(--space-xl);
  border: 1px solid var(--color-rule);
  position: relative;
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.principle::before {
  content:""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--color-accent);
  transform: scaleX(0.22); transform-origin: 0 0;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.principle:hover { transform: translateY(-2px); border-color: var(--color-text-primary); }
.principle:hover::before { transform: scaleX(1); }
.principle__num {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; color: var(--color-accent);
  margin-bottom: var(--space-md); display: block;
}
.principle__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(22px, 2vw, 28px);
  line-height: var(--leading-tight); letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-primary);
}
.principle__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0; max-width: 56ch;
}
/* Bullet-lijst binnen een principe-blok (bv. "Wat ons onderscheidt"). */
.principle__desc ul { list-style: none; margin: 0; padding: 0; }
.principle__desc li { position: relative; padding-left: 1.2em; }
.principle__desc li + li { margin-top: 0.55em; }
.principle__desc li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-accent); border-radius: 1px; }

/* ============================================================
   TEAM — partner-cards met portretten (white layer)
   ============================================================ */
.team {
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-base);
}
.team__inner { max-width: 1440px; margin: 0 auto; }
.team__head {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4xl); align-items: end;
  margin-bottom: var(--space-3xl);
}
.team__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-md) 0 0;
}
.team__title em { font-style: italic; color: var(--color-accent); }
.team__intro {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0; max-width: 48ch; padding-bottom: var(--space-md);
}
.team__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.partner {
  background: var(--color-bg-base);
  border: 1px solid var(--color-rule);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.partner:hover { border-color: var(--color-text-primary); transform: translateY(-2px); }
.partner__media {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--color-petrol-900);
  overflow: hidden;
}
.partner__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(0.20) contrast(1.02);
  transition: filter var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
.partner:hover .partner__media img { filter: grayscale(0) contrast(1); transform: scale(1.025); }
.partner__num {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(10, 42, 51, 0.85);
  color: var(--color-accent);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.partner__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--space-lg);
  gap: var(--space-md);
}
.partner__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: var(--leading-tight); letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}
.partner__role {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
  display: block;
}
.partner__bio {
  font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0; flex: 1;
}
.partner__links {
  display: flex; gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-rule);
  flex-wrap: wrap;
}
.partner__link {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--duration-base) var(--ease-standard);
}
.partner__link:hover { color: var(--color-accent); }
.team__all {
  margin-top: var(--space-3xl);
  text-align: center;
}
.team__all a {
  font-family: var(--font-display);
  font-size: var(--text-md); font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-primary);
  padding-bottom: 2px;
  transition: color var(--duration-base) var(--ease-standard);
}
.team__all a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .story__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .story__sidebar { position: static; }
  .principles__grid { grid-template-columns: 1fr; }
  .team__head { grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
  .team__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Hero /over-ons/ — 2-regel-titel (sessie 34)
   Regel 1 wit ("Onafhankelijke expertise in"), regel 2 "Risk Management en"
   goud-italic + "Internal Audit" wit (geforceerde <br> uit ACF h1_pre).
   Breder leesblok dan de standaard 22ch zodat regel 2 op één regel past, en
   een iets ruimere font-clamp + bredere lead voor visuele balans.
   ============================================================ */
.page-about .page-hero__title { max-width: 36ch; font-size: clamp(34px, 4.6vw, 62px); }
.page-about .page-hero__lead { max-width: 66ch; }
@media (max-width: 600px) {
  /* Op smal scherm laten we de regels natuurlijk vloeien (br blijft, maar
     regel 2 mag dan wrappen). */
  .page-about .page-hero__title { font-size: clamp(30px, 8vw, 40px); }
}

/* ============================================================
   Story-sectie "Ons uitgangspunt" — zelfde 1-koloms opmaak als het
   Missie-blok op /over-ons/missie-visie/ (sessie 34). Vervangt de oude
   2-koloms editorial + sidebar (sidebar verwijderd via lege ACF-facts):
   wit, leesblok 75% breed gecentreerd, eyebrow + grote display-titel boven
   de body, eerste alinea (.lede) iets groter.
   ============================================================ */
.page-about .story { padding: clamp(44px, 5vw, 76px) var(--space-2xl); }
.page-about .story__inner { display: block; width: 75%; max-width: 75%; margin: 0 auto; }
.page-about .story__head { margin-bottom: var(--space-lg); }
.page-about .story__title { max-width: none; font-size: clamp(40px, 5vw, 68px); margin: var(--space-md) 0 0; }
.page-about .story__body p { max-width: none; }
@media (max-width: 768px) {
  .page-about .story { padding: clamp(40px, 9vw, 64px) var(--space-lg); }
  .page-about .story__inner { width: 100%; max-width: 100%; }
}