/* ============================================
   Kennisbank (/kennisbank/): hub en artikelen.
   Los van css/style.css, zodat de stempel style.css?v=28 en de CRM-sjablonen
   FL-004 niet mee hoeven te veranderen. Alleen tokens uit :root.
   ============================================ */

/* ---------- Artikeltekst (zelfde opmaak als de CRM-artikelen) ---------- */
.kb-artikel { max-width: 780px; padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.kb-artikel p, .kb-artikel li { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-dark); }
.kb-artikel p { margin-bottom: var(--space-md); }
.kb-artikel h2 { font-size: var(--fs-28); margin-top: var(--space-lg); margin-bottom: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-line); }
.kb-artikel h3 { font-size: 1.25rem; margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.kb-artikel ul, .kb-artikel ol { padding-left: 1.4em; margin-bottom: var(--space-md); }
.kb-artikel ul, .kb-artikel ul li { list-style: disc; }
.kb-artikel ol, .kb-artikel ol li { list-style: decimal; }
.kb-artikel li { margin-bottom: 8px; padding-left: 4px; }
.kb-artikel li::marker { color: var(--color-gold-text-on-cream); font-weight: 600; }
.kb-artikel p a, .kb-artikel li a, .kb-artikel td a, .kb-artikel figcaption a {
  color: var(--color-gold-text-on-cream); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.kb-artikel p a:hover, .kb-artikel li a:hover, .kb-artikel td a:hover { color: var(--color-text-dark); }
.kb-artikel strong { font-weight: 600; }

/* Meta onder de hero: datum, leestijd */
.kb-meta {
  display: inline-block; font-size: var(--fs-14); font-weight: 500; line-height: 1.4;
  color: var(--color-gold-text-on-cream); border: 1px solid rgba(135, 100, 36, 0.35);
  padding: 6px 14px; border-radius: 999px; margin-bottom: var(--space-md);
}

/* ---------- Kader "In het kort" ---------- */
.kb-kort {
  background: var(--color-white); border: 1px solid var(--color-line); border-left: 4px solid var(--color-gold);
  border-radius: var(--radius); padding: var(--space-md); margin-bottom: var(--space-lg);
}
.kb-kort h2 { font-size: var(--fs-22); margin: 0 0 var(--space-xs); padding: 0; border: 0; }
.kb-kort ul { margin-bottom: 0; }
.kb-kort li:last-child { margin-bottom: 0; }

/* ---------- Tabellen ---------- */
.kb-tabel { overflow-x: auto; margin-bottom: var(--space-md); }
.kb-artikel table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); background: var(--color-white); }
.kb-artikel caption {
  caption-side: top; text-align: left; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-16); color: var(--color-text-dark); padding-bottom: var(--space-xs);
}
/* Op smalle schermen scrollt de tabel opzij; het bijschrift blijft staan en breekt af */
.kb-tabel { container-type: inline-size; }
.kb-tabel caption { position: sticky; left: 0; max-width: 100cqw; }
/* Ankerlinks (inhoud, bronnen) niet onder de vaste header laten vallen */
.kb-artikel [id] { scroll-margin-top: 120px; }
.kb-artikel th, .kb-artikel td { text-align: left; padding: 10px 14px; border: 1px solid var(--color-line); vertical-align: top; }
.kb-artikel thead th { font-family: var(--font-display); font-weight: 600; background: var(--color-cream-deep); }
.kb-artikel tbody th { font-weight: 600; background: var(--color-white); min-width: 9.5em; }
.kb-artikel td.getal, .kb-artikel th.getal { white-space: nowrap; }
.kb-bron { font-size: var(--fs-14); color: var(--color-grey-on-cream); margin-top: calc(var(--space-sm) * -1); }
.kb-artikel p.kb-bron { font-size: var(--fs-14); line-height: 1.6; color: var(--color-grey-on-cream); }

/* ---------- Rekenvoorbeeld ---------- */
.kb-reken {
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: var(--space-md); margin-bottom: var(--space-md);
}
.kb-reken h3 { margin-top: 0; }
.kb-reken table { margin-bottom: var(--space-sm); }
.kb-reken p:last-child { margin-bottom: 0; }

/* ---------- Figuur ---------- */
.kb-artikel figure { margin: 0 0 var(--space-md); }
.kb-artikel figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.kb-artikel figcaption { font-size: var(--fs-14); color: var(--color-grey-on-cream); margin-top: var(--space-xs); line-height: 1.5; }

/* ---------- Blok "Zo pakt Projectbouw dit aan" ---------- */
.kb-aanpak {
  background: var(--color-anthracite); color: var(--color-white); border-radius: var(--radius);
  padding: var(--space-md); margin: var(--space-lg) 0;
}
.kb-artikel .kb-aanpak h2 { color: var(--color-white); border: 0; padding-top: 0; margin-top: 0; }
.kb-artikel .kb-aanpak p, .kb-artikel .kb-aanpak li { color: var(--color-white); }
.kb-artikel .kb-aanpak a:not(.btn) { color: var(--color-gold-light); }
.kb-aanpak .btn { margin-top: var(--space-xs); }
.kb-artikel .kb-aanpak h3 { color: var(--color-white); }
.kb-aanpak table, .kb-artikel .kb-aanpak td, .kb-artikel .kb-aanpak th { color: var(--color-text-dark); }
.kb-artikel .kb-aanpak caption { color: var(--color-white); }

/* ---------- FAQ (uitklaplijst van de site) ---------- */
.kb-artikel .faq-accordion { max-width: none; margin: var(--space-sm) 0 0; border-top: 1px solid var(--color-line); }

/* ---------- Auteur en bronnen ---------- */
.kb-auteur {
  display: flex; gap: var(--space-md); align-items: flex-start;
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: var(--space-md); margin: var(--space-lg) 0 var(--space-md);
}
.kb-auteur-foto {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-cream-deep); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; color: var(--color-gold-text-on-cream);
}
.kb-artikel .kb-auteur p { margin-bottom: 6px; font-size: var(--fs-16); }
.kb-auteur-naam { font-family: var(--font-display); font-weight: 600; }
.kb-bijgewerkt { font-size: var(--fs-14); color: var(--color-grey-on-cream); }

.kb-artikel .kb-bronnen h2 { font-size: var(--fs-22); }
.kb-artikel .kb-bronnen li { font-size: var(--fs-14); line-height: 1.6; word-break: break-word; }

/* Nog in te vullen door de klant: valt bewust op, zodat het niet ongemerkt live gaat */
.kb-placeholder {
  background: #fff4cc; outline: 2px dashed #b38600; outline-offset: 2px; padding: 2px 6px; border-radius: 3px;
  font-weight: 600; color: #5c4400;
}
.kb-artikel .kb-placeholder { color: #5c4400; }

/* ---------- Verder lezen ---------- */
.kb-verder { margin-top: var(--space-lg); }
.kb-artikel .kb-verder ul { list-style: none; padding-left: 0; }
.kb-artikel .kb-verder li { list-style: none; padding-left: 0; border-bottom: 1px solid var(--color-line); padding-bottom: 8px; }

/* ---------- Hub ---------- */
.kb-hub-intro { max-width: 780px; }
.kb-hub-intro p { font-size: var(--fs-18); line-height: 1.7; margin-bottom: var(--space-md); }
.kb-cluster { margin-top: var(--space-lg); }
.kb-cluster > h2 { font-size: var(--fs-28); margin-bottom: var(--space-xs); }
.kb-cluster > p { color: var(--color-grey-on-cream); max-width: 700px; margin-bottom: var(--space-md); }
.kb-kaarten { display: grid; gap: var(--space-md); grid-template-columns: 1fr; list-style: none; padding: 0; }
@media (min-width: 768px) { .kb-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kb-kaarten { grid-template-columns: repeat(3, 1fr); } }
.kb-kaart {
  position: relative; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: var(--space-md); display: flex; flex-direction: column; transition: box-shadow var(--transition), transform var(--transition);
}
.kb-kaart:hover, .kb-kaart:focus-within { box-shadow: 0 12px 28px rgba(0,0,0,0.10); transform: translateY(-3px); }
.kb-kaart h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.kb-kaart h3 a { color: var(--color-text-dark); }
.kb-kaart h3 a::after { content: ""; position: absolute; inset: 0; }
.kb-kaart p { color: var(--color-grey-on-cream); font-size: var(--fs-16); line-height: 1.6; margin: 0; flex: 1; }
.kb-kaart .kb-kaart-label {
  font-size: var(--fs-14); font-weight: 500; color: var(--color-gold-text-on-cream); margin-bottom: var(--space-xs); flex: 0;
}
.kb-dienstlink { margin-top: var(--space-sm); font-size: var(--fs-16); }
.kb-dienstlink a { color: var(--color-gold-text-on-cream); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Blok "Meer weten" op dienstpagina's ---------- */
.kb-meer-weten { max-width: 780px; }
.kb-meer-weten ul { list-style: none; padding: 0; margin: 0; }
.kb-meer-weten li { border-bottom: 1px solid var(--color-line); }
.kb-meer-weten li a { display: block; padding: 14px 0; font-family: var(--font-display); font-weight: 500; color: var(--color-text-dark); }
.kb-meer-weten li a:hover { color: var(--color-gold-text-on-cream); }
.kb-meer-weten li span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-14); color: var(--color-grey-on-cream); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kb-kaart, .kb-kaart:hover { transition: none; transform: none; }
}