/* ═══════════════════════════════════════
   v3 huisstijl — kennisbankartikelen

   Dekt de 48 gepubliceerde kennisbankpagina's. Die hadden samen negen bijna
   identieke stijlblokken in de templates zelf; dit is de samenvoeging daarvan.

   De selectors zijn letterlijk overgenomen uit die oude blokken en niet
   opnieuw bedacht. Ze zijn vooraf gecontroleerd: alle 79 raken een echt
   element op de pagina. Alleen de waarden zijn vervangen. Wie hier een
   selector aanpast, controleert eerst in de browser of hij nog iets raakt.

   Het kruimelpad staat niet in dit bestand maar in v3-global.css, want de
   casepagina's gebruiken het ook.

   Twee templates staan hier bewust buiten: geo-woordenlijst en
   vergelijking-geo-bureaus-nederland hebben geen gepubliceerde pagina en
   houden voorlopig hun eigen stijlblok.
═══════════════════════════════════════ */

/* Horizontaal geen padding: .kb-artikel omsluit een .container-sm die zelf al
   28px marge heeft, dus dat stond dubbel. De 84px boven is dezelfde waarde
   als .page-hero op de case- en dienstenpagina's. */
.kb-artikel { padding: 84px 0 80px; position: relative; z-index: 1; }

/* ── Artikelkop ── */
.kb-artikel-header {
  margin-bottom: 48px; padding-bottom: 40px;
  border-bottom: 1px solid var(--v3-border);
}
/* Categoriechip. Blijft een chip met rand, anders leest hij als een los
   labeltje boven de kop en dat hebben we elders juist weggehaald. */
.kb-art-cat-tag {
  display: inline-block; margin-bottom: 16px;
  padding: 5px 11px; border-radius: 999px;
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-light);
  background: rgba(159, 211, 255, .07);
  border: 1px solid rgba(159, 211, 255, .16);
}
.kb-artikel-titel {
  font: 700 var(--v3-fs-sectie) / 1.08 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1);
  margin: 0 0 14px; text-wrap: balance;
}
/* Ondertitel onder de kop van een onderzoek. De titel zegt wat er aan de hand
   is, de ondertitel waar het over gaat en hoe groot de meting was. Kleiner dan
   de intro eronder, zodat de volgorde titel, ondertitel, intro af te lezen is
   aan de grootte. */
.kb-artikel-ondertitel {
  font: 500 var(--v3-fs-kop) / 1.45 var(--v3-font);
  color: var(--v3-text-2); margin: -4px 0 16px; max-width: 62ch;
  text-wrap: pretty;
}

.kb-artikel-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font);
  color: var(--v3-text-3); margin-bottom: 20px;
}
.kb-artikel-intro {
  font: 400 var(--v3-fs-lead) / 1.7 var(--v3-font);
  color: var(--v3-text-2); text-wrap: pretty;
}

/* ── Artikeltekst ── */
.kb-artikel-body { font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2); }
.kb-artikel-body h2 {
  font: 700 var(--v3-fs-kop-xl) / 1.25 var(--v3-font);
  letter-spacing: -.015em; color: var(--v3-text-1);
  margin: 44px 0 16px; text-wrap: balance;
}
.kb-artikel-body h3 {
  font: 700 var(--v3-fs-kop) / 1.35 var(--v3-font);
  color: var(--v3-text-1); margin: 30px 0 12px; text-wrap: balance;
}
.kb-artikel-body p { margin: 0 0 18px; text-wrap: pretty; }

.kb-artikel-body ul,
.kb-artikel-body ol {
  margin: 0 0 20px; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.kb-artikel-body ul li,
.kb-artikel-body ol li {
  display: flex; align-items: flex-start; gap: 12px;
  font: 400 var(--v3-fs-body) / 1.65 var(--v3-font);
  color: var(--v3-text-2); text-wrap: pretty;
}
/* Het vinkje is getekend met twee randen en niet met een teken, zodat het
   overal even zwaar oogt en niet afhangt van het lettertype. */
.kb-artikel-body ul li::before {
  content: ''; flex-shrink: 0;
  width: 11px; height: 6px; margin-top: 8px;
  border-left: 2px solid var(--v3-cyan); border-bottom: 2px solid var(--v3-cyan);
  transform: rotate(-45deg);
}
.kb-artikel-body ol { counter-reset: ol-counter; }
.kb-artikel-body ol li::before {
  content: counter(ol-counter); counter-increment: ol-counter;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--v3-grad); color: var(--v3-grad-text);
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
}
.kb-artikel-body a {
  color: var(--v3-cyan); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(34, 211, 238, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.kb-artikel-body a:hover { color: #7ce7f7; text-decoration-color: #7ce7f7; }
.kb-artikel-body strong { color: var(--v3-text-1); font-weight: 700; }
.kb-artikel-body em { font-style: italic; color: var(--v3-text-1); }
.kb-artikel-body code {
  font-family: var(--v3-mono); font-size: .88em;
  background: rgba(159, 211, 255, .08); border: 1px solid rgba(159, 211, 255, .16);
  padding: 2px 6px; border-radius: 5px; color: var(--v3-light);
}

/* ── Infokader ── */
.kb-infobox {
  background: rgba(159, 211, 255, .05);
  border: 1px solid rgba(159, 211, 255, .15);
  border-left: 3px solid var(--v3-cyan);
  border-radius: 14px; padding: 22px 24px; margin: 30px 0;
}
.kb-infobox-titel {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-text-3); margin-bottom: 14px;
}
.kb-infobox ul { margin: 0; }
.kb-infobox p { font: 400 var(--v3-fs-klein) / 1.65 var(--v3-font); color: var(--v3-text-2); margin: 0; }

/* ── Vergelijkingstabel ── */
.kb-vergelijk-tabel {
  border: 1px solid var(--v3-border-md); border-radius: 16px;
  overflow: hidden; margin: 30px 0;
}
.kb-vt-header,
.kb-vt-rij { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.kb-vt-header { background: rgba(0, 0, 0, .18); border-bottom: 1px solid var(--v3-border-md); }
.kb-vt-kenmerk,
.kb-vt-col { padding: 13px 16px; font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-2); }
.kb-vt-kenmerk { color: var(--v3-text-3); }
.kb-vt-col { border-left: 1px solid var(--v3-border); }
.kb-vt-featured { background: rgba(34, 211, 238, .05); border-left-color: rgba(34, 211, 238, .20); }
.kb-vt-header .kb-vt-featured strong { color: var(--v3-cyan); }
.kb-vt-rij { border-top: 1px solid var(--v3-border); }
.kb-vt-rij:nth-child(even) { background: rgba(255, 255, 255, .012); }

/* ── Genummerde stappen ── */
.kb-genummerd-item {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 28px 0; border-bottom: 1px solid var(--v3-border);
}
.kb-genummerd-item:last-of-type { border-bottom: none; }
.kb-num {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--v3-grad); color: var(--v3-grad-text);
  font: 700 var(--v3-fs-kop) / 1 var(--v3-font);
}
.kb-num-body { flex: 1; min-width: 0; }
.kb-num-body h2 { margin-top: 0; }
.kb-num-body h3 { margin-top: 0; }

/* ── Oproepblok in het artikel ── */
.kb-artikel-cta {
  position: relative; overflow: hidden;
  background:
    linear-gradient(150deg, rgba(159, 211, 255, .10), rgba(255, 255, 255, 0) 55%),
    var(--v3-card-alt);
  border: 1px solid rgba(159, 211, 255, .16);
  border-radius: 22px; padding: 32px; margin: 44px 0;
}
.kb-artikel-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--v3-grad);
}
.kb-cta-tekst { margin-bottom: 22px; }
.kb-cta-tekst strong {
  display: block; margin-bottom: 6px;
  font: 700 var(--v3-fs-kop-l) / 1.3 var(--v3-font);
  letter-spacing: -.01em; color: var(--v3-text-1);
}
.kb-cta-tekst p { font: 400 var(--v3-fs-klein) / 1.65 var(--v3-font); color: var(--v3-text-2); margin: 0; }
.kb-cta-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Terug naar de pillar ── */
.kb-pillar-back { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--v3-border); }
.kb-pillar-back a {
  font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font);
  color: var(--v3-cyan); text-decoration: none;
}
.kb-pillar-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Clusterkaarten op de pillarpagina's ── */
.kb-pillar-cluster { margin: 0 0 48px; }
.kb-pillar-cluster-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-text-3); margin-bottom: 16px;
}
.kb-pillar-cluster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kb-pillar-kaart {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 16px; padding: 17px 19px; text-decoration: none;
  transition: transform .3s cubic-bezier(.16, .8, .3, 1), border-color .3s ease;
}
.kb-pillar-kaart:hover { border-color: rgba(34, 211, 238, .35); transform: translateY(-3px); }
.kb-pillar-kaart-nr {
  flex-shrink: 0; min-width: 20px; padding-top: 2px;
  font: 500 var(--v3-fs-klein) / 1.4 var(--v3-font); color: var(--v3-cyan); opacity: .65;
}
.kb-pillar-kaart-titel {
  font: 700 var(--v3-fs-klein) / 1.35 var(--v3-font);
  color: var(--v3-text-1); margin-bottom: 5px;
}
.kb-pillar-kaart-desc { font: 400 var(--v3-fs-label) / 1.55 var(--v3-font); color: var(--v3-text-3); }

/* ── Gerelateerde artikelen ── */
.kb-gerelateerd { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--v3-border); }
.kb-gerelateerd-titel {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-text-3); margin-bottom: 20px;
}
.kb-gerelateerd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kb-gerelateerd-item {
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 16px; padding: 19px 21px; text-decoration: none;
  transition: transform .3s cubic-bezier(.16, .8, .3, 1), border-color .3s ease;
}
.kb-gerelateerd-item:hover { border-color: rgba(34, 211, 238, .35); transform: translateY(-3px); }
.kb-art-cat {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-light); margin-bottom: 9px;
}
.kb-gr-titel { font: 700 var(--v3-fs-klein) / 1.4 var(--v3-font); color: var(--v3-text-1); }


@media (max-width: 900px) {
  .kb-gerelateerd-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .kb-artikel { padding: 60px 0 60px; }
  .kb-artikel-header { margin-bottom: 34px; padding-bottom: 28px; }
  .kb-gerelateerd-grid,
  .kb-pillar-cluster-grid { grid-template-columns: 1fr; }
  .kb-genummerd-item { flex-direction: column; gap: 14px; }
  .kb-cta-knoppen { flex-direction: column; }
  .kb-cta-knoppen .v3-btn { width: 100%; justify-content: center; }
  .kb-artikel-cta { padding: 26px 22px; border-radius: 18px; }

  /* De tabel schuift horizontaal in plaats van te krimpen. In de oude opzet
     werd de kenmerkkolom op mobiel verborgen, en dan staan er twee kolommen
     met waarden zonder dat je nog ziet waar ze bij horen. Bovendien had het
     grootste blok (33 pagina's) hier helemaal geen regel, dus daar bleef de
     tabel driekoloms op een telefoon. */
  .kb-vergelijk-tabel { overflow-x: auto; }
  .kb-vt-header,
  .kb-vt-rij { min-width: 520px; }
}

/* ── Datatabel ──────────────────────────────────────────────────────────
   De bestaande .kb-vergelijk-tabel staat vast op drie kolommen
   (grid-template-columns: 1.2fr 1fr 1fr). Voor de platformpagina's is dat
   te krap: een crawler-overzicht heeft vier kolommen en een meetrapport
   vijf. Vandaar een echte <table>, die zich naar zijn inhoud voegt.

   De wrapper scrolt horizontaal in plaats van de pagina. Zonder die wrapper
   duwt een brede tabel op mobiel het hele document opzij. */
.kb-tabel {
  margin: 30px 0; overflow-x: auto;
  border: 1px solid var(--v3-border-md); border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}
.kb-tabel table {
  width: 100%; min-width: 560px;
  border-collapse: collapse; border-spacing: 0;
}
.kb-tabel th,
.kb-tabel td {
  padding: 13px 16px; text-align: left; vertical-align: top;
  font: 400 var(--v3-fs-klein) / 1.55 var(--v3-font);
  color: var(--v3-text-2);
  border-left: 1px solid var(--v3-border);
}
.kb-tabel th:first-child,
.kb-tabel td:first-child { border-left: 0; }
.kb-tabel thead th {
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid var(--v3-border-md);
  font-weight: 700; color: var(--v3-text-1);
  letter-spacing: -.005em;
}
.kb-tabel tbody tr { border-top: 1px solid var(--v3-border); }
.kb-tabel tbody tr:first-child { border-top: 0; }
.kb-tabel tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
/* Eerste kolom is de sleutel van de rij, niet zomaar een cel. */
.kb-tabel tbody td:first-child { color: var(--v3-text-1); font-weight: 600; }
.kb-tabel code {
  font: 600 13px / 1.4 "JetBrains Mono", ui-monospace, monospace;
  color: var(--v3-cyan); background: rgba(34, 211, 238, .07);
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
/* Kolom die je moet lezen als "dit is de deur die open moet". */
.kb-tabel .kb-td-let { color: var(--v3-light); }
/* Bijschrift onder de tabel: bron, peildatum of een waarschuwing. */
.kb-tabel-bron {
  margin: -18px 0 30px; padding: 0 2px;
  font: 400 var(--v3-fs-label) / 1.6 var(--v3-font);
  color: var(--v3-text-3);
}
.kb-tabel-bron a { color: var(--v3-text-3); text-decoration: underline; text-underline-offset: 2px; }
.kb-tabel-bron a:hover { color: var(--v3-cyan); }

@media (max-width: 700px) {
  .kb-tabel th,
  .kb-tabel td { padding: 11px 13px; }
}

/* ── Kerncijfer ─────────────────────────────────────────────────────────
   Eén getal dat de rest van de alinea draagt. Gebruikt op het meetrapport.
   Bewust geen kaart: het hoort in de leesregel te staan, niet ernaast. */
.kb-kerncijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 30px 0;
}
.kb-kerncijfer {
  padding: 22px 22px 20px;
  background: var(--v3-card); border: 1px solid var(--v3-border-md);
  border-radius: 16px;
}
.kb-kc-getal {
  display: block; margin-bottom: 7px;
  font: 700 clamp(30px, 3.4vw, 40px) / 1 var(--v3-font);
  letter-spacing: -.03em;
  background: var(--v3-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.kb-kc-label {
  display: block;
  font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-2);
}

/* ── Platformrij ────────────────────────────────────────────────────────
   De vier platformpagina's horen bij elkaar en verwijzen naar elkaar. Deze
   rij staat op alle vier, met de pagina waar je bent als niet-klikbaar
   element. Zo is de samenhang zichtbaar in plaats van alleen bedoeld. */
.kb-platformrij { margin: 40px 0 4px; }
.kb-pr-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-text-3); margin-bottom: 14px;
}
.kb-pr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
}
.kb-pr-item {
  display: block; padding: 15px 16px;
  border: 1px solid var(--v3-border-md); border-radius: 13px;
  background: rgba(255, 255, 255, .015);
  font: 600 var(--v3-fs-klein) / 1.4 var(--v3-font);
  color: var(--v3-text-1); text-decoration: none;
  transition: border-color var(--v3-ease), background var(--v3-ease);
}
.kb-pr-item span {
  display: block; margin-top: 4px;
  font: 400 var(--v3-fs-label) / 1.5 var(--v3-font); color: var(--v3-text-3);
}
a.kb-pr-item:hover {
  border-color: rgba(34, 211, 238, .35);
  background: rgba(34, 211, 238, .05);
}
/* De pagina waar de lezer al is. Geen link, wel zichtbaar als onderdeel
   van de reeks. */
.kb-pr-item.is-hier {
  border-color: rgba(34, 211, 238, .30);
  background: rgba(34, 211, 238, .06);
  color: var(--v3-cyan); cursor: default;
}

/* ── Auteursblok onder een artikel ──
   Bovenaan stond alleen "Door Tijm de Jong". Wie dat is en waarom hij hier
   iets over te zeggen heeft, stond nergens. Bewust klein en aan het eind:
   het is een ondertekening, geen biografie. */
.kb-auteur {
  display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: start;
  margin: 56px 0 0; padding: 26px 28px;
  border-radius: 18px;
  background: var(--v3-card-alt);
  border: 1px solid rgba(159, 211, 255, .10);
}
.kb-auteur-portret {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
  border: 1px solid rgba(159, 211, 255, .22);
  display: block;
}
.kb-auteur-naam {
  margin: 0; font: 600 var(--v3-fs-kop) / 1.35 var(--v3-font); color: var(--v3-text-1);
}
.kb-auteur-rol {
  margin: 3px 0 0; font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-cyan);
}
.kb-auteur-bio {
  margin: 12px 0 0; max-width: 66ch;
  font: 400 var(--v3-fs-body) / 1.7 var(--v3-font); color: var(--v3-text-2);
}
.kb-auteur-links {
  margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px;
  font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-3);
}
.kb-auteur-links a { color: var(--v3-text-2); text-decoration: none; border-bottom: 1px solid rgba(159, 211, 255, .28); }
.kb-auteur-links a:hover { color: var(--v3-cyan); border-bottom-color: var(--v3-cyan); }

@media (max-width: 620px) {
  /* Op een telefoon staat het portret boven de tekst; naast elkaar houdt
     de tekstkolom te weinig over om nog te lezen. */
  .kb-auteur { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .kb-auteur-portret { width: 64px; height: 64px; }
}