/* RPO2 — RPO: het probleem + kostentabel (navy, naadloos vervolg op rpo1).
   Redactionele hairline bovenaan (de "één donker blok"-overgang), daarna
   6/6-grid: kop + alinea's + kanteling links, de KOSTENTABEL als paper
   factuur-kaart rechts — hét bewijsstuk van deze pagina en de enige
   bedragentabel op de site (géén vinkjes-vergelijking zoals os3, géén
   datakaart zoals o2). Ruled rijen, zware totaalregel in Anton.
   De tekstlink is een apart grid-item dat ≤880 als laatste stapelt
   (eerst het bewijs, dan de uitweg). */

.rpo-probleem { padding-block: 0 var(--space-section); }

.rpo-probleem-rule {
  border: 0;
  border-top: 1px solid var(--line-inv);
  margin: 0 0 clamp(4rem, 9vh, 6rem);
}

.rpo-probleem-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  column-gap: clamp(3rem, 5vw, 5rem);
  row-gap: var(--gap-lg);
  align-items: start;
}

.rpo-probleem-head .eyebrow { margin-bottom: 20px; }

.rpo-probleem-head h2 {
  font-size: clamp(2.1rem, 3.3vw, 3.1rem);
  max-width: 18ch;
  text-wrap: balance;
}

.rpo-probleem-alinea {
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body-inv);
  margin-top: 1.1em;
}

/* Slotalinea = de kanteling: oranje kicker + sterk wit (ws2-keer-recept) */
.rpo-probleem-keer { margin-top: 26px; }
.rpo-probleem-keer .kicker-line { margin-bottom: 18px; }
.rpo-probleem-keer p {
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-strong-inv);
  font-weight: 600;
}

.rpo-probleem-link-wrap { margin-top: 22px; }

/* ---------- Kostentabel: paper factuur-kaart op navy ---------- */

.rpo-kostentabel {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: clamp(26px, 3vw, 36px);
  margin: 0;
}

/* Kopregel: kaartkop links, herkomstregel rechts (T2, 2026-07-20: de cap is
   geen één-woord-kolomlabel meer maar een zichtbare bronregel; de kopregel
   mag daarom wrappen — mobiel valt de regel onder de kop).
   Specificiteitspantser: .on-dark h3 (0,1,1) wint van een kale klasse,
   daarom rijdt de Public Sans-override op .rpo-kostentabel .rpo-kostentabel-kop. */
.rpo-kostentabel-kopregel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  margin-bottom: 18px;
}

.rpo-kostentabel .rpo-kostentabel-kop {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
  margin: 0;
}

.rpo-kostentabel-cap {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0;
}

/* Calculator-CTA onder de totaalregel (Timo 2026-07-31, DEPLOY-GATE opgeheven).
   Zit BINNEN de lichte kaart, dus gewone tokens en niet de -inv varianten.
   Scheidingslijn zodat hij niet als zesde kostenrij leest. */
.rpo-kostentabel-calc {
  margin-top: clamp(18px, 2vw, 24px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--line-paper);
}

.rpo-kostentabel-calc p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 42ch;
}

/* base.css zet `.on-dark .btn--link { color: #fff }` en de sectie eromheen IS on-dark,
   maar deze kaart is licht. Zonder deze override staat er witte tekst op een licht
   vlak en is de CTA in de praktijk onzichtbaar (gevonden op screenshot, 2026-07-31). */
.rpo-kostentabel .rpo-kostentabel-calc .btn--link { color: var(--text-strong); }
.rpo-kostentabel .rpo-kostentabel-calc .btn--link:hover { color: var(--orange-600); }

/* Ruled rijen: sibling-recept, NOOIT :first-of-type */
.rpo-kostentabel-rijen { margin: 0; }

.rpo-kostenrij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding-block: 13px;
}

.rpo-kostenrij + .rpo-kostenrij { border-top: 1px solid var(--line-paper); }

.rpo-kostenrij dt {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--text-body);
}

.rpo-kostenrij dd {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  margin: 0;
}

/* Totaalregel: zware bovenlijn + Anton-bedrag. Dubbele klasse-selector (0,2,0)
   + bronvolgorde ná het sibling-recept, zodat de 2px lijn de 1px ruled lijn
   wint zonder !important. */
.rpo-kostenrij.rpo-kostenrij--totaal {
  border-top: 2px solid var(--text-strong);
  margin-top: 6px;
  padding-top: 16px;
}

.rpo-kostenrij--totaal dt {
  font-weight: 700;
  color: var(--text-strong);
}

.rpo-kostenrij--totaal dd.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  letter-spacing: .01em;
  line-height: 1.1;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .rpo-probleem-grid { column-gap: 2.5rem; }
  .rpo-kostenrij dt, .rpo-kostenrij dd { font-size: .875rem; }
}

/* ≤880: één kolom. DOM-volgorde head → tabel → link; de link stapelt als
   laatste (eerst het bewijs, dan de uitweg). */
@media (max-width: 880px) {
  /* BESLISSING Timo 2026-08-11: minmax(0, ...) teruggezet in de mobiele stand.
     De desktopregel hierboven gebruikt bewust minmax(0, 6fr); de eenkoloms-
     override liet dat vallen en gaf de track weer een automatische
     min-content-ondergrens. Op 320px werd die track daardoor 328px breed
     (min-content van de kostentabelrijen) in een container van 272px, goed voor
     het grootste deel van de +32px overloop van rpo.html. Boven 320px was er
     niets te zien; 360, 375, 390 en 414 stonden al op +0 en blijven dat.
     Oude waarde verbatim: "grid-template-columns: 1fr;" */
  .rpo-probleem-grid { grid-template-columns: minmax(0, 1fr); }
  .rpo-probleem-rule { margin-bottom: clamp(3rem, 7vh, 4rem); }
  .rpo-probleem-alinea, .rpo-probleem-keer p { max-width: none; }
  .rpo-kostentabel { max-width: 560px; }
}

@media (max-width: 560px) {
  .rpo-probleem-head h2 { max-width: none; }
  .rpo-kostentabel { padding: 22px 18px; }
  /* Bedragen blijven op de regel (nowrap op dd); het label mag wrappen */
  .rpo-kostenrij { gap: 12px; }
  /* T2: herkomstregel onder de kop op mobiel */
  .rpo-kostentabel-kopregel { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rpo-kostentabel-cap { max-width: none; }
}