/* Kennisbank — leesbare artikelen binnen de bestaande designtaal.
   Bouwt voort op premium.css, v3-foundation.css en portfolio-packages.css;
   hier staan alleen de dingen die specifiek zijn voor lange leesteksten. */

.kb-measure { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.kb-index .kb-measure { width: min(900px, calc(100% - 40px)); }

/* --- artikel ------------------------------------------------------------- */
.kb-article .case-breadcrumb { padding-top: 104px; }
.kb-body { padding: 34px 0 96px; }
.kb-body h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.02;
  margin: 14px 0 22px;
}
.kb-lead { font-size: 20px; line-height: 1.6; color: var(--pp-cream, #f5e9d0); margin: 0 0 40px; }
.kb-body h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  margin: 52px 0 14px;
}
.kb-body p { color: var(--pp-muted, #aeb8c4); font-size: 17px; line-height: 1.78; margin: 0 0 18px; }
.kb-body a { color: var(--pp-cream, #f5e9d0); border-bottom: 1px solid rgba(216, 174, 87, .45); }
.kb-body a:hover { color: var(--pp-gold, #e8c878); }

.kb-list { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 12px; }
.kb-list li { position: relative; padding-left: 24px; color: var(--pp-muted, #aeb8c4); line-height: 1.7; }
.kb-list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 11px; height: 1px; background: var(--pp-gold, #e8c878);
}

/* Kader voor een nuancering of waarschuwing — visueel rustig, niet alarmerend. */
.kb-note {
  margin: 30px 0; padding: 20px 22px;
  border-left: 2px solid var(--pp-gold, #e8c878);
  background: rgba(216, 174, 87, .06);
  border-radius: 0 8px 8px 0;
}
.kb-note p { margin: 0; color: var(--pp-cream, #f5e9d0); font-size: 16px; }

.kb-related { margin: 56px 0 0; padding: 26px 0 0; border-top: 1px solid var(--pp-line, rgba(255,255,255,.13)); }
.kb-related h2 { font-size: 26px; margin: 0 0 14px; }
.kb-related ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; }

.kb-cta { margin-top: 52px; }
.kb-backlink { margin: 0 0 80px; font-size: 14px; }
.kb-backlink a { color: var(--pp-muted, #aeb8c4); }
.kb-backlink a:hover { color: var(--pp-gold, #e8c878); }

/* --- overzicht ----------------------------------------------------------- */
.kb-index .pp-hero { padding: 128px 0 20px; min-height: 0; }
.kb-index h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 6vw, 76px);
  line-height: .98;
  margin: 14px 0 20px;
}
.kb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kb-card {
  padding: 30px; border: 1px solid var(--pp-line, rgba(255,255,255,.13));
  border-radius: 10px; background: rgba(255, 255, 255, .035);
  display: flex; flex-direction: column;
}
.kb-card small { color: var(--pp-mint, #8ed4cf); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.kb-card h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; line-height: 1.08; margin: 12px 0 12px; }
.kb-card h2 a { color: inherit; }
.kb-card h2 a:hover { color: var(--pp-gold, #e8c878); }
.kb-card p { color: var(--pp-muted, #aeb8c4); font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.kb-card__link { margin-top: auto; color: var(--pp-gold, #e8c878); font-weight: 800; font-size: 14px; }

@media (max-width: 860px) {
  .kb-grid { grid-template-columns: 1fr; }
  .kb-article .case-breadcrumb { padding-top: 88px; }
  .kb-index .pp-hero { padding-top: 106px; }
  .kb-lead { font-size: 18px; }
  .kb-body h2 { margin-top: 42px; }
}