/* Sennasearch V2 - Over ons O2: Het probleem (navy, on-dark)
   Naadloos vervolg op de O1-hero: compacte bovenpadding zodat O1+O2 een
   doorlopend donker blok vormen; deze sectie draagt de --space-section
   onderpadding van het donkere blok. Hairline bovenaan in de container
   als redactionele overgang. */

/* De hairline (padding-top) staat 1.5rem/1.5vh HOGER dan voorheen; de
   rule-ondermarge is met exact dezelfde delta verhoogd, dus de tekst/graphic
   eronder blijft precies staan en de ruimte tussen de lijn en de content groeit.
   (was padding-top clamp(2.75rem,6vh,4.5rem) + rule-mb clamp(2.25rem,5vh,3.5rem)) */
/* Timo 2026-07-21: was padding-top 0 (merge met de navy hero); nu een lichte
   sectie met eigen bovenritme (start van het lichte middenrif). */
/* Timo 2026-08-24: de bovenpadding draagt er nu clamp(3rem, 7vh, 5rem) extra bij. Dat is exact
   de ondermarge die de verwijderde .oa-problem-rule-hairline hierboven meebracht, zodat de kop en
   de rekensom-kaart geen pixel verspringen nu de lijn weg is.
   Oude waarde verbatim: padding-block: var(--space-section-s) var(--space-section); */
.section.oa-problem {
  padding-block: calc(var(--space-section-s) + clamp(3rem, 7vh, 5rem)) var(--space-section);
}

/* HAIRLINE-REGEL VERWIJDERD (Timo 2026-08-24), samen met de <hr> in o2.html. De lijn lag vlak
   onder de navy-naar-cream-rand van de hero en was daarmee een tweede, zwakkere scheiding op
   dezelfde plek. De klasse kwam nergens anders voor, dus deze regel had verder geen werk.
   Oude waarde verbatim:
   .oa-problem-rule {
     border: 0;
     border-top: 1px solid var(--line-paper);
     margin: 0 0 clamp(3rem, 7vh, 5rem);
   } */

/* ---------- Grid 6/5: copy links, rekensom-kaart rechts ---------- */

.oa-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: var(--gap-lg);
  row-gap: var(--gap-md);
  align-items: center;
}

.oa-problem-copy h2 {
  /* Lange kop in een 6/11-kolom: iets onder --text-h2 zodat hij op
     3 a 4 regels blijft (zelfde recept als s2-intro op de homepage). */
  font-size: clamp(2.2rem, 3.5vw, 3.3rem);
  margin-bottom: clamp(22px, 2.6vw, 32px);
  max-width: 21ch;
}

.oa-problem-copy .lead {
  margin-bottom: 18px;
}

.oa-problem-copy p:not(.lead) {
  color: var(--text-body); /* Timo 2026-07-21: sectie licht, was text-body-inv */
  margin-bottom: 16px;
}

.oa-problem-copy p:last-child { margin-bottom: 0; }

.oa-problem-copy .lead,
.oa-problem-copy p:not(.lead) {
  max-width: 58ch;
}

/* ---------- Rekensom-kaart ---------- */

.oa-problem-card {
  margin: 0; /* figure-reset */
  background: var(--surface-card-dark);
  border: var(--border-inv);
  border-radius: var(--r-md);
  padding: var(--gap-md);
}

/* 10x5 dot-grid: 40 dots navy-700, 10 accent-dots blue-200 in de bovenste rij
   (blauw-uitzondering op donker, naar het S5-quote-precedent). Eerder 10x10
   vierkant; gehalveerd naar 10x5 zodat de figuur minder hoog is en in balans
   blijft met de kortere bodytekst ernaast, met grote goed leesbare dots.
   1 van de 5 rijen = accent = exact 20%. */
.oa-problem-dots {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(6px, .9vw, 12px);
}

.oa-problem-dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--navy-700);
}

.oa-problem-dot--accent {
  background: var(--blue-200);
}

/* Accent-dots liften mee op het centrale reveal-mechanisme: zodra JS
   .is-in op de kaart zet, faden ze in met oplopende delay per dot.
   Fail-open: zonder html.motion staat alles gewoon aan. Het data-reveal
   mechanisme zelf wordt hier NIET gestyled, alleen de dot-transities. */
html.motion .oa-problem-card .oa-problem-dot--accent {
  opacity: 0;
  transform: scale(.35);
  transition:
    opacity .45s cubic-bezier(.22, .61, .36, 1),
    transform .45s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(.45s + var(--i, 0) * .04s);
}
html.motion .oa-problem-card.is-in .oa-problem-dot--accent {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.motion .oa-problem-card .oa-problem-dot--accent {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Legenda ---------- */

.oa-problem-legend {
  margin-top: var(--gap-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oa-problem-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.oa-problem-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-700);
  /* Rand zodat de legenda-sleutel op de navy-800 kaart als vorm leesbaar blijft;
     de vulling houdt bewust dezelfde gedempte toon als de 80-procent-dots. */
  border: 1px solid var(--line-inv);
  margin-top: 5px; /* optisch gelijk met de Anton-cijferregel */
}

.oa-problem-swatch--accent { background: var(--blue-200); }

.oa-problem-legend-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.oa-problem-figure {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1;
  font-size: clamp(1.25rem, 1.5vw, 1.45rem);
  color: var(--text-strong-inv);
}

.oa-problem-note {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted-inv);
}

/* ---------- Tablet / mobiel ---------- */

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

  /* Tekst eerst (bronvolgorde), kaart eronder op leesbreedte */
  .oa-problem-card {
    max-width: 480px;
  }

  .oa-problem-copy h2 { max-width: none; }
}

@media (max-width: 560px) {
  /* Timo 2026-07-21: sectie is nu licht i.p.v. navy-vervolg; behoudt het eigen
     bovenritme (geen padding-top:0 meer). */
  .oa-problem-card { padding: 24px 20px; }

  .oa-problem-dots { gap: 6px; }
}