/*
 * Voorbeeldcheck, v8.31.0.
 *
 * De pagina moet eruitzien als een informatiepagina, niet als een
 * landingspagina. Daarom een smalle leeskolom, tabellen in plaats van kaarten,
 * en geen enkele visuele nadruk op de knop onderaan.
 *
 * Geen eigen :root. Tokens uit landing.css met letterlijke fallbacks.
 * Geen JavaScript; de vragen gebruiken details en summary.
 */

.lpl-vbc-body {
  background: var(--bg, #ffffff);
}

/* ── Voorbeeldstrip ──────────────────────────────────────────────────────── */

.lpl-vbc-strip {
  background: var(--blue-deep, #0247A4);
  color: #ffffff;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.55;
}

.lpl-vbc-strip strong {
  font-weight: 600;
}

.lpl-vbc-strip a {
  color: #ffffff;
  text-decoration: underline;
  white-space: nowrap;
}

/* ── Leeskolom ───────────────────────────────────────────────────────────── */

.lpl-vbc-main {
  padding: 40px 0 64px;
}

.lpl-vbc-kolom {
  max-width: 760px;
}

.lpl-vbc-kruimel {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted, #7d8798);
}

.lpl-vbc-kruimel span + span::before {
  content: "\203A";
  margin: 0 8px;
  color: var(--line, #e4e9f0);
}

.lpl-vbc-kop h1 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  color: var(--ink, #0f1729);
}

.lpl-vbc-intro {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft, #2a3447);
}

.lpl-vbc-meta {
  margin: 0 0 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line, #e4e9f0);
  font-size: 14px;
  color: var(--muted, #7d8798);
}

/* ── Secties ─────────────────────────────────────────────────────────────── */

.lpl-vbc-sectie {
  margin: 0 0 40px;
}

.lpl-vbc-sectie h2 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink, #0f1729);
}

.lpl-vbc-sectie p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft, #2a3447);
}

/* ── Feitentabel ─────────────────────────────────────────────────────────── */

.lpl-vbc-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.lpl-vbc-caption {
  text-align: left;
  padding-bottom: 10px;
  font-size: 14px;
  color: var(--muted, #7d8798);
}

.lpl-vbc-tabel thead th {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 2px solid var(--line, #e4e9f0);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #7d8798);
}

.lpl-vbc-tabel th[scope="row"] {
  text-align: left;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line-soft, #eef1f6);
  font-weight: 500;
  color: var(--ink-soft, #2a3447);
  vertical-align: top;
}

.lpl-vbc-tabel td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line-soft, #eef1f6);
  vertical-align: top;
}

.lpl-vbc-waarde {
  color: var(--ink, #0f1729);
  font-weight: 600;
}

.lpl-vbc-bron span {
  display: block;
  font-size: 13px;
  color: var(--ink-muted, #525c6e);
}

.lpl-vbc-bron small {
  display: block;
  font-size: 12px;
  color: var(--muted, #7d8798);
}

/* ── Waardeblok ──────────────────────────────────────────────────────────── */

.lpl-vbc-waardeblok {
  margin: 0 0 18px;
  padding: 22px;
  background: var(--blue-pale, #f3f8fc);
  border: 1px solid var(--blue-bright-soft, #dcecfb);
  border-radius: var(--radius-lg, 16px);
}

.lpl-vbc-band {
  margin: 0 0 4px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--blue-deep, #0247A4);
}

.lpl-vbc-bandnoot {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted, #525c6e);
}

.lpl-vbc-grens {
  margin: 14px 0 0;
  padding: 14px 18px;
  background: var(--bg-alt, #f5f8fb);
  border-left: 3px solid var(--blue-bright, #2796EB);
  border-radius: var(--radius-sm, 8px);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Aandachtspunten ─────────────────────────────────────────────────────── */

.lpl-vbc-punten {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpl-vbc-punten li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft, #eef1f6);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft, #2a3447);
}

.lpl-vbc-punten strong {
  color: var(--ink, #0f1729);
}

/* ── Beoordelaar ─────────────────────────────────────────────────────────── */

.lpl-vbc-kaart {
  padding: 24px;
  background: var(--bg-alt, #f5f8fb);
  border: 1px solid var(--line, #e4e9f0);
  border-radius: var(--radius-lg, 16px);
}

.lpl-vbc-naam {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #0f1729);
}

.lpl-vbc-functie {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-muted, #525c6e);
}

.lpl-vbc-registratie {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-muted, #525c6e);
}

.lpl-vbc-registratie li {
  padding: 4px 0;
}

.lpl-vbc-verantwoording {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e4e9f0);
  font-size: 15px;
  line-height: 1.7;
}

/* ── Vragen ──────────────────────────────────────────────────────────────── */

.lpl-vbc-vraag {
  border-bottom: 1px solid var(--line-soft, #eef1f6);
}

.lpl-vbc-vraag summary {
  padding: 14px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink, #0f1729);
}

.lpl-vbc-vraag summary:focus-visible {
  outline: 3px solid var(--blue-bright, #2796EB);
  outline-offset: 2px;
}

.lpl-vbc-vraag p {
  margin: 0;
  padding: 0 0 16px;
  font-size: 15px;
}

/* ── Contact en voettekst ────────────────────────────────────────────────── */

.lpl-vbc-contact {
  padding: 24px;
  background: var(--bg-alt, #f5f8fb);
  border-radius: var(--radius-lg, 16px);
}

.lpl-vbc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0;
}

.lpl-vbc-footer {
  padding: 24px 0 40px;
  border-top: 1px solid var(--line, #e4e9f0);
  font-size: 14px;
  color: var(--muted, #7d8798);
}

.lpl-vbc-footer .lpl-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* v8.71.0: op mobiel stapelt de tabel tot losse regels. De caption ontbrak in
   die opsomming, en dat is niet onschuldig: zodra de tabel zelf display:block
   krijgt, verliest de caption haar tabelcontext en valt zij terug op de
   smalst mogelijke breedte. Het gevolg was een kop van zes woorden onder
   elkaar, een woord per regel. Zij hoort dus mee te stapelen. */
@media (max-width: 640px) {
  .lpl-vbc-tabel,
  .lpl-vbc-tabel tbody,
  .lpl-vbc-tabel tr,
  .lpl-vbc-tabel th,
  .lpl-vbc-tabel td,
  .lpl-vbc-caption {
    display: block;
    width: 100%;
  }

  .lpl-vbc-tabel thead {
    display: none;
  }

  .lpl-vbc-tabel tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft, #eef1f6);
  }

  .lpl-vbc-tabel th[scope="row"],
  .lpl-vbc-tabel td {
    padding: 2px 0;
    border-bottom: 0;
  }
}