/* ==========================================================================
   Home — Kennis & visie
   Links de uitgelichte whitepaper (navy kaart), rechts drie artikelen.
   ========================================================================== */
.s-kennis__grid {
  display: grid;
  gap: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
}
@media (min-width: 1024px) {
  .s-kennis__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, .5rem + 4vw, 5rem);
  }
}
@media (min-width: 1100px) {
  .s-kennis__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* --- Uitgelichte whitepaper ------------------------------------------- */
.s-kennis__uitgelicht { display: flex; flex-direction: column; }

.s-kennis__wp {
  --tekst-zacht: var(--tekst-op-donker-zacht);
  flex: 1;
  isolation: isolate;
  border-radius: var(--r-xl);
  /* Navy pas onder de bovenste hoekradius: anders kleurt de kaartachtergrond
     als donker randje mee langs de afgeronde hoek van een licht beeld. */
  background: linear-gradient(transparent var(--r-xl), var(--navy) 0);
  color: var(--tekst-op-donker);
}
.s-kennis__wp--zonder-beeld { background: var(--navy); }

/* Beeld met donkere gradient die naadloos overloopt in de kaart. De achtergrond blijft
   de lichte .kaart__media-placeholder: een donkere laag onder het beeld zou langs de
   afgeronde hoeken als randje meekleuren. */
.s-kennis__wp-beeld {
  z-index: -1;
  aspect-ratio: 16 / 10;
}
.s-kennis__wp-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 64, .08) 0%, rgba(0, 0, 64, 0) 30%, rgba(0, 0, 64, .72) 74%, var(--navy) 100%);
}
@media (min-width: 720px) {
  .s-kennis__wp-beeld { aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
  /* Het beeld vult de ruimte die de artikelenlijst ernaast vraagt */
  .s-kennis__wp-beeld { flex: 1 1 auto; aspect-ratio: auto; min-height: clamp(15rem, 4rem + 15vw, 21rem); }
  .s-kennis__wp-beeld picture,
  .s-kennis__wp-beeld img { position: absolute; inset: 0; }
}

.s-kennis__wp-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(-5rem, -2rem - 3vw, -3rem);
  padding: 0 clamp(1.5rem, .75rem + 2.6vw, 3rem) clamp(1.75rem, 1rem + 2.4vw, 3rem);
}
.s-kennis__wp--zonder-beeld .s-kennis__wp-body { flex: 1; margin-top: 0; padding-top: clamp(1.75rem, 1rem + 2.4vw, 3rem); }

.s-kennis__wp-label { margin-bottom: 1.25rem; }

.s-kennis__wp-titel {
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem);
  font-weight: var(--fw-medium);
  line-height: 1.16;
  letter-spacing: var(--ls-display);
}
/* Tweekoloms: de kaart is dan smaller dan op tablet, dus de kop schaalt mee (max. ca. 4 regels) */
@media (min-width: 1024px) {
  .s-kennis__wp-titel { font-size: clamp(1.6rem, .2rem + 2.2vw, 2.1rem); }
}

/* Begrensd aantal regels, zodat een lang (automatisch) excerpt de kaart niet oprekt */
.s-kennis__wp-tekst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  margin-top: 1rem;
  max-width: 50ch;
  color: var(--tekst-zacht);
}
@media (min-width: 640px) {
  .s-kennis__wp-tekst { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* Knop en datum op één regel; past dat niet, dan staat de datum boven de knop */
.s-kennis__wp-voet {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: auto;
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.s-kennis__download { width: 1.15em; height: 1.15em; transition: transform var(--dur) var(--ease); }
.s-kennis__wp-datum {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  color: var(--tekst-zacht);
}

/* De titel-link maakt de hele kaart klikbaar; de knop is een eigen link en
   ligt daarboven (z-index boven de ::after van de titel-link). */
.s-kennis__wp-knop { position: relative; z-index: 2; }
@media (max-width: 479.98px) {
  .s-kennis__wp-knop { width: 100%; }
}
.s-kennis__wp:hover .s-kennis__wp-knop,
.s-kennis__wp:has(a:focus-visible) .s-kennis__wp-knop { --btn-bg: var(--wit); --btn-fg: var(--navy); --btn-bd: var(--wit); }
.s-kennis__wp:hover .s-kennis__download { transform: translateY(2px); }

/* --- Artikelen -------------------------------------------------------- */
.s-kennis__lijst {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-block: 1px solid var(--lijn);
}

.s-kennis__item {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  padding-block: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}
.s-kennis__item + .s-kennis__item { border-top: 1px solid var(--lijn); }
/* Pijl-cirkel rechts (zelfde signaal als de impactkaarten), vanaf 640px */
@media (min-width: 640px) {
  .s-kennis__item { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.s-kennis__thumb {
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 3.6rem + 6vw, 8.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--grijs-licht);
  color: var(--blauw);
}
.s-kennis__thumb picture { width: 100%; height: 100%; }
.s-kennis__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.s-kennis__thumb > .icoon { width: 2rem; height: 2rem; }
/* Desktop: 120–136px (spec 120–140) */
@media (min-width: 1024px) {
  .s-kennis__thumb { width: clamp(7.5rem, 9.5vw, 8.5rem); }
}

.s-kennis__item-tekst { display: flex; flex-direction: column; gap: .4rem; }

/* Meta staat in de broncode na de titel (screenreaders), visueel erboven */
.s-kennis__meta {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .45rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--tekst-zacht);
}
/* Scheidingsteken achter elk deel, zodat een afgebroken regel nooit met een punt begint */
.s-kennis__meta > * { white-space: nowrap; }
.s-kennis__meta > :not(:last-child)::after {
  content: "·";
  content: "·" / "";
  margin-left: .45rem;
}
.s-kennis__meta-label { font-weight: var(--fw-bold); }
@media (max-width: 639px) {
  .s-kennis__meta-leestijd { display: none; }
  .s-kennis__meta > :has(+ .s-kennis__meta-leestijd)::after { content: none; }
}

.s-kennis__item-titel {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}
.s-kennis__item-titel a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .2em;
}
/* Hele item klikbaar via de titel-link */
.s-kennis__item-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Focusring op het hele item; zonder :has()-ondersteuning blijft de ring op de link staan */
@supports selector(:has(a)) {
  .s-kennis__item-titel a:focus-visible { box-shadow: none; }
  .s-kennis__item:has(a:focus-visible) { box-shadow: var(--focus); border-radius: var(--r-md); }
}

.s-kennis__item-pijl { display: none; }
@media (min-width: 640px) {
  .s-kennis__item-pijl {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--lijn);
    border-radius: 50%;
    color: var(--navy);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
}
.s-kennis__pijl { width: 1.1rem; height: 1.1rem; transition: transform var(--dur) var(--ease); }

.s-kennis__item:hover .s-kennis__item-titel a { text-decoration: underline; text-decoration-thickness: 1px; }
.s-kennis__item:hover .s-kennis__thumb img { transform: scale(1.06); }
.s-kennis__item:hover .s-kennis__item-pijl { border-color: var(--navy); background: var(--navy); color: var(--wit); }
.s-kennis__item:hover .s-kennis__pijl { transform: translateX(2px); }

/* Tab-label "Whitepaper" bovenop de kaart (brandbook) */
.s-kennis__wp-tab { align-self: flex-end; margin: 0 clamp(1.5rem, 1rem + 2vw, 2.75rem) -1px 0; }