/* SR-V4 — de eigen secties van de salespagina na de copyronde van 18-09-2026 (copy v4).
   Twee blokken: de tijdlijn maand 1 tot 6 van "waar het misgaat" (sr3) en het kandidaatverslag als
   voorbeeldkaart in "wat je krijgt" (sr12). Gedeelde opbouw van het mis-paneel: css/sections/mis-paneel.css. */

/* ── SR3 de tijdlijn: vult zodra hij in beeld komt; blauw = ziet er goed uit, gedempt = de verklaringen, oranje = lucht ── */
.sr-tijdlijn {
  margin: 0;
  background: var(--surface-card-dark);
  border: var(--border-inv);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 30px);
}
.sr-tijdlijn-balk { position: relative; height: 22px; border-radius: 999px; background: var(--navy-700); overflow: hidden; }
.sr-tijdlijn-vul {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-200) 0 50%, var(--navy-500) 50% 83.33%, var(--orange-500) 83.33% 100%);
}
html.motion .sr-tijdlijn .sr-tijdlijn-vul { clip-path: inset(0 100% 0 0); transition: clip-path 2s cubic-bezier(.22, .61, .36, 1) .35s; }
html.motion .sr-tijdlijn.is-in .sr-tijdlijn-vul { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  html.motion .sr-tijdlijn .sr-tijdlijn-vul { clip-path: none; transition: none; }
}
.sr-tijdlijn-maanden {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--text-muted-inv);
}
.sr-tijdlijn-maanden li { text-align: center; }
.sr-tijdlijn-fasen {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-inv);
  display: grid;
  grid-template-columns: 3fr 2fr 1.6fr;
  gap: 14px;
}
.sr-fase-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.sr-fase--1 .sr-fase-label { color: var(--blue-200); }
.sr-fase--2 .sr-fase-label { color: var(--text-muted-inv); }
.sr-fase--3 .sr-fase-label { color: var(--orange-500); }
.sr-fase p { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--text-body-inv); }
.sr-mis-kopje {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-inv);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted-inv);
}
.sr-mis .sr-mis-punten { margin-top: 16px; padding-top: 0; border-top: 0; }
@media (max-width: 880px) {
  .sr-tijdlijn-fasen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ── SR12 wat je krijgt: drie regels met icoon links, het kandidaatverslag als voorbeeldkaart rechts ── */
.sr-verslag-paneel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.sr-verslag-lijst { list-style: none; margin: 0; padding: 0; }
.sr-verslag-lijst li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--line-inv);
}
.sr-verslag-lijst li:first-child { padding-top: 0; }
.sr-verslag-lijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-verslag-ico { display: block; width: 56px; height: 56px; }
.sr-verslag-ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sr-verslag-lijst .sr-verslag-kop {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-strong-inv);
  margin: 0 0 6px;
}
.sr-verslag-lijst .sr-verslag-body { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-body-inv); }
.sr-verslag-kaart {
  margin: 0;
  background: var(--surface-card);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-lift);
}
.sr-verslag-kaart .sr-verslag-kaart-label {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sr-verslag-kaart .sr-verslag-kaart-kop {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-strong);
  margin: 0 0 8px;
}
.sr-verslag-kaart .sr-verslag-kaart-body { margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; color: var(--text-body); }
.sr-verslag-velden { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sr-verslag-kaart .sr-verslag-velden li {
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-strong);
}
.sr-veld-lijn { display: block; height: 10px; border-radius: 999px; background: var(--line); }
.sr-veld-lijn--kort { width: 45%; }
@media (max-width: 880px) {
  .sr-verslag-paneel { grid-template-columns: minmax(0, 1fr); }
}