/* ─── Module 5: kennisbank ─────────────────── */
.kb { padding: clamp(80px, 12vh, 140px) 0 clamp(80px, 12vh, 140px); background: var(--ivory-2); overflow: hidden; }
.kb__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto clamp(32px, 5vh, 56px); }
.kb__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -.025em; color: var(--navy); }
.kb__tools { display: flex; align-items: center; gap: 18px; }
.kb__arrow { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--navy-45); color: var(--navy); transition: background .3s, color .3s, border-color .3s; }
.kb__arrow svg { width: 16px; height: 16px; }
.kb__arrow:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.kb__arrow:disabled { opacity: .3; pointer-events: none; }
.kb { --kb-pad: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.kb__scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--kb-pad); scroll-padding-left: var(--kb-pad); cursor: grab; }
.kb__scroller::-webkit-scrollbar { display: none; }
.kb__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.kb__track { display: flex; gap: clamp(20px, 2vw, 32px); width: max-content; padding-right: var(--kb-pad); }
.kb__card { width: clamp(300px, 26vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid rgba(16,26,48,.08); transition: transform .5s var(--ease-out), box-shadow .5s; }
.kb__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(16,26,48,.35); }
.kb__cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; text-decoration: none; }
.kb__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.kb__card:hover .kb__cover img { transform: scale(1.04); }
/* tijdelijke omslagen tot de beelden er zijn: een boekje op een vlak */
.kb__cover--navy { background: radial-gradient(120% 100% at 20% 0%, #1E2B4A, var(--navy) 60%); }
.kb__cover--ivory { background: radial-gradient(120% 100% at 80% 0%, #FBF8F2, #E9E1D3 70%); }
.kb__cover--gold { background: radial-gradient(120% 100% at 30% 10%, #E6D3AA, #C9A96A 75%); }
.kb__cover-mark { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; opacity: .35; right: 10%; top: 8%; color: var(--gold); }
.kb__cover--ivory .kb__cover-mark, .kb__cover--gold .kb__cover-mark { color: var(--navy); opacity: .22; }
.kb__cover-title { position: relative; width: 52%; padding: 22px 18px 30px; background: rgba(255,255,255,.96); color: var(--navy); font-family: "Newsreader", Georgia, serif; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; border-radius: 3px; box-shadow: 0 30px 40px -24px rgba(16,26,48,.5), 0 1px 0 rgba(255,255,255,.7) inset; transform: rotate(-4deg) translateY(6px); transition: transform .6s var(--ease-out); }
.kb__card:hover .kb__cover-title { transform: rotate(-2deg) translateY(0); }
.kb__cover-title::before { content: "The Sixth Seat"; display: block; font-family: var(--font-sans); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.kb__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
.kb__meta { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.kb__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -.015em; color: var(--navy); }
.kb__body h3 a { color: inherit; }
.kb__body p:not(.kb__meta) { font-size: 15px; line-height: 1.55; color: var(--grey); flex: 1; }
.kb__body .link { margin-top: 10px; align-self: flex-start; }
@media (max-width: 760px) { .kb__head { flex-direction: column; align-items: flex-start; } .kb__card { width: 82vw; } }