/* O3 · De keuze van 2006 — navy ankerpaneel met ghost-jaartal. Prefix: .oa-keuze

   BESLISSING Timo 2026-07-31 (feedbackcall Lise 23 juli): dit blok stond op
   cream en was bewust het rustigste, meest typografische blok van de pagina,
   zodat het navy ankerpaneel in O4 maximaal contrast kreeg. O4 is geschrapt
   (methode staat al op de homepage en op werving-en-selectie), dus het
   ankerpaneel verhuist hierheen. De paneel- en watermerkrecepten hieronder
   zijn 1-op-1 overgenomen uit css/over-ons/o4.css, zodat het blok exact
   hetzelfde oogt als het paneel dat het vervangt. O4.css is hierdoor dood;
   de <link> ernaar is uit _qa/shell-over-ons.html gehaald. */

/* Ritme: boven --space-section (rand van het middenrif), onder strak richting O5.
   Horizontaal knippen zodat het ghost-jaartal nooit een scrollbalk veroorzaakt. */
.oa-keuze.section {
  position: relative;
  padding-block: var(--space-section-s);
  overflow-x: clip;
}

/* ---------- Paneel (recept uit o4.css) ---------- */

.oa-keuze .oa-keuze-panel {
  position: relative;
  overflow: hidden; /* cropt watermerk + ghost-jaartal */
  background:
    radial-gradient(80% 140% at 85% -30%, var(--navy-800) 0%, transparent 60%),
    var(--navy-950);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: clamp(2.5rem, 4.5vw, 4rem);
  color: var(--text-body-inv);
}

/* Merk-watermerk: rechtsboven gecropt, achter de kopgroep langs. */
.oa-keuze .oa-keuze-watermerk {
  position: absolute;
  top: -55px;
  right: -78px;
  width: clamp(235px, 26vw, 340px);
  height: auto;
  opacity: var(--watermark-dark);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.oa-keuze .oa-keuze-inner {
  position: relative;
  z-index: 1;
}

/* ---------- Ghost-jaartal achter de kopgroep ---------- */

/* Op cream was dit navy op 6,5%. In het paneel moet het juist oplichten,
   dus wit op lage dekking. Iets hoger dan 6,5% omdat wit-op-navy optisch
   zwakker leest dan navy-op-cream. */
/* CORRECTIE Timo 2026-07-31: het jaartal stond te ver naar rechts. Vóór het paneel
   begon het 58px LINKS van de titel; door de paneelpadding was dat nog maar 10px.
   De negatieve left haalt de paneelpadding er weer af, zodat de oorspronkelijke
   verhouding terugkomt en het jaartal weer achter de titel uit steekt. */
.oa-keuze .oa-keuze-ghost {
  position: absolute;
  top: -.12em;
  left: calc(-.03em - clamp(2.5rem, 4.5vw, 4rem) + 16px);
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(9rem, 24vw, 20rem);
  line-height: 1;
  letter-spacing: .005em;
  color: color-mix(in srgb, #fff 9%, transparent);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Grid 5/7: kopgroep links, leeskolom rechts ---------- */

/* CORRECTIE Timo 2026-07-31: was 5fr 7fr. Door de paneelpadding (2x ~64px) werd de
   kopkolom 455px en brak de H2 over VIJF regels in plaats van vier, waardoor hij niet
   meer netjes over het 2006-ghostjaartal viel. Op 5.6fr komt de kop terug op ~509px,
   gelijk aan de 508px van vóór het paneel, en dus weer op vier regels. De leeskolom
   wordt daardoor smaller en schuift naar rechts, wat ook het gevraagde effect is. */
.oa-keuze .oa-keuze-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5.6fr 6.4fr;
  column-gap: var(--gap-lg);
  align-items: start;
}

.oa-keuze .oa-keuze-head .kicker-line { margin-bottom: 22px; }

/* Leeskolom: rustig editorial ritme. margin-left:auto duwt de tekst tegen de
   rechterrand van zijn kolom, dus een kleinere max-width = verder naar rechts.
   CORRECTIE Timo 2026-07-31: van 65ch naar 58ch. Op 65ch vulde de tekst de hele
   kolom en begon hij exact op de lijn waar de grote 6 van het ghostjaartal
   eindigt; die twee randen vielen samen en dat maakte het blok druk. Nu blijft
   er ruimte tussen het jaartal en de eerste letter. */
.oa-keuze .oa-keuze-copy { max-width: 58ch; margin-left: auto; }
.oa-keuze .oa-keuze-copy p {
  font-size: 1.125rem;
  line-height: 1.75;
}
.oa-keuze .oa-keuze-copy p + p { margin-top: 20px; }

/* ---------- Slotstatement over de volle contentbreedte ---------- */

.oa-keuze .oa-keuze-slot {
  position: relative;
  z-index: 1;
  margin-top: var(--gap-lg);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--line-inv);
}
.oa-keuze .oa-keuze-slot p {
  max-width: 70ch;
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-strong-inv);
}

/* ---------- Tablet (~880px): 1 kolom, kopgroep boven de tekst ---------- */

@media (max-width: 880px) {
  .oa-keuze .oa-keuze-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /* Ghost schaalt mee omlaag en blijft achter de kop */
  .oa-keuze .oa-keuze-ghost {
    font-size: clamp(7rem, 22vw, 13rem);
    top: -.1em;
  }

  .oa-keuze .oa-keuze-slot { margin-top: var(--gap-md); }
}

/* ---------- Mobiel (~560px) ---------- */

@media (max-width: 560px) {
  /* Paneelpadding omlaag zodat de leeskolom niet in een koker verandert */
  .oa-keuze .oa-keuze-panel { padding: clamp(1.75rem, 6vw, 2.5rem); }
  .oa-keuze .oa-keuze-copy p { font-size: 1.0625rem; }
  .oa-keuze .oa-keuze-head .kicker-line { margin-bottom: 18px; }

  /* Watermerk kleiner en verder de hoek in, anders loopt hij over de kop */
  .oa-keuze .oa-keuze-watermerk {
    top: -34px;
    right: -48px;
    width: clamp(150px, 42vw, 210px);
  }
}