/* ═══════════════════════════════════════
   v3 huisstijl — kennisbank overzichtspagina (/kennisbank/)

   Losse stylesheet naast v3-kennisbank.css, en met opzet niet samengevoegd:
   .kb-art-cat betekent op deze pagina iets anders dan in een artikel (hier
   een rij met een gekleurde stip, daar een label boven een kaarttitel). In
   één bestand zouden die elkaar overschrijven.

   De paginakop staat niet hier maar in v3-global.css. Dit bestand had die
   eerder overschreven met de oude opmaak, inclusief het verloopaccent dat
   elders juist uit de koppen is gehaald.

   De tabs draaien op .is-active, gezet door het scriptje onderin de
   template. Die classnamen zijn ongewijzigd gebleven, dus dat script hoefde
   niet aangepast te worden.

   Per cluster staat er inline een --cc met de clusterkleur. Die wordt hier
   gebruikt voor de rand, de stip en de badge.
═══════════════════════════════════════ */

/* ── Clusterkeuze ── */
/* Geen rand bovenaan. Die liep over de volle breedte, precies op de grens met
   de paginakop, en las als een streep dwars over de pagina. De secties hier
   scheiden zich met witruimte, niet met lijnen. */
.kb-clusters-sectie {
  padding: 56px 0 0; position: relative; z-index: 1;
}
.kb-clusters-intro {
  font: 400 var(--v3-fs-klein) / 1.7 var(--v3-font); color: var(--v3-text-3);
  text-align: center; max-width: 600px; margin: 0 auto 32px; text-wrap: pretty;
}
.kb-cluster-tabs { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.kb-cluster-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 17px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  color: var(--v3-text-2); font: 500 var(--v3-fs-klein) / 1 var(--v3-font);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.kb-cluster-tab:hover { color: var(--v3-text-1); border-color: var(--v3-border-md); }
.kb-cluster-tab.is-active {
  color: var(--v3-text-1);
  border-color: var(--cc, var(--v3-cyan));
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--cc, var(--v3-cyan));
}
.kb-ct-nr { font: 500 var(--v3-fs-label) / 1 var(--v3-font); color: var(--v3-text-3); min-width: 14px; }
.kb-ct-naam { font-weight: 700; letter-spacing: -.005em; }
.kb-ct-count {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: var(--v3-text-3);
  font: 600 var(--v3-fs-label) / 1 var(--v3-font);
}
.kb-cluster-tab.is-active .kb-ct-count { color: var(--cc, var(--v3-cyan)); background: rgba(255, 255, 255, .05); }

/* ── Artikelen per cluster ── */
/* Bewust zonder eigen achtergrond en zonder onderrand. Hier stond een vlak in
   #050f20 met daaronder een lijn van 1px, en dat gaf twee zichtbare
   scheidingen over de volle breedte. De kaarten hebben hun eigen achtergrond,
   dus het vlak voegde niets toe. Zo schijnt de sfeerlaag uit .bg-canvas er
   gewoon doorheen. */
.kb-artikelen {
  padding: 0 0 80px; position: relative; z-index: 1;
}
.kb-cluster-panel { display: none; padding-top: 40px; }
.kb-cluster-panel.is-active { display: block; }
.kb-cluster-panel-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--v3-border);
}
.kb-cluster-panel-cat {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 6px;
}
.kb-cluster-panel-teller { font: 500 var(--v3-fs-label) / 1 var(--v3-font); color: var(--v3-text-3); }
.kb-cluster-panel-link {
  font: 500 var(--v3-fs-klein) / 1.4 var(--v3-font); color: var(--v3-text-3);
  text-decoration: none; white-space: nowrap; transition: color .2s ease;
}
.kb-cluster-panel-link:hover { color: var(--v3-cyan); }

.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kb-artikel-card {
  display: flex; flex-direction: column; text-decoration: none;
  padding: 21px 23px;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-top: 2px solid var(--cc, var(--v3-cyan));
  border-radius: 0 0 16px 16px;
  transition: transform .3s cubic-bezier(.16, .8, .3, 1), border-color .3s ease;
}
.kb-artikel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .12);
  border-top-color: var(--cc, var(--v3-cyan));
}
.kb-pillar-card { background: rgba(255, 255, 255, .035); border-top-width: 3px; }
/* De kaart is een flexkolom, dus align-self is hier nodig: zonder dat rekt
   de badge over de hele kaartbreedte, ook als display inline-block is. */
.kb-pillar-badge {
  display: inline-block; align-self: flex-start; margin-bottom: 11px;
  padding: 4px 9px; border-radius: 5px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cc, var(--v3-cyan));
  color: var(--cc, var(--v3-cyan));
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
}
.kb-art-cat {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
}
.kb-art-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--v3-cyan)); flex-shrink: 0; }
.kb-art-titel {
  font: 700 var(--v3-fs-klein) / 1.4 var(--v3-font);
  color: var(--v3-text-1); margin-bottom: 9px; text-wrap: pretty;
}
.kb-art-excerpt {
  flex: 1; margin: 0;
  font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-2); text-wrap: pretty;
}
.kb-art-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: 14px; }
.kb-pijl { color: var(--v3-text-3); transition: transform .3s cubic-bezier(.16, .8, .3, 1), color .3s ease; }
.kb-artikel-card:hover .kb-pijl { transform: translateX(4px); color: var(--cc, var(--v3-cyan)); }

/* ── Afsluitende oproep ── */
.kb-cta-sectie { padding: 96px 0; position: relative; z-index: 1; }
.kb-cta-card {
  position: relative; overflow: hidden; text-align: center;
  max-width: 700px; margin: 0 auto; padding: 56px 44px; border-radius: 24px;
  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);
}
.kb-cta-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--v3-grad);
}
.kb-cta-inner { position: relative; z-index: 1; }
.kb-cta-inner .v3-sec-sub { margin-left: auto; margin-right: auto; max-width: 500px; }


@media (max-width: 1024px) {
  .kb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .kb-clusters-sectie { padding-top: 40px; }
  .kb-artikelen { padding-bottom: 56px; }
  .kb-cta-sectie { padding: 56px 0; }
  .kb-cluster-tabs { gap: 7px; }
  .kb-cluster-tab { padding: 9px 13px; }
  .kb-grid { grid-template-columns: 1fr; }
  .kb-cluster-panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kb-cta-card { padding: 40px 24px; border-radius: 20px; }
}