/* De kennisbank: overzicht per categorie en de leesopmaak van een
   artikel. Lopende tekst krijgt hier een smallere maat en meer lucht
   dan de rest van de site, omdat je hier echt zit te lezen. */

@layer components {
  /* Kruimelpad boven de titel. Klein en rustig: het is oriëntatie,
     geen navigatie waar aandacht naartoe moet. */
  .kruimelpad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-end: var(--space-s);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kruimelpad a {
    color: inherit;
    text-decoration: none;
  }

  .kruimelpad a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .kb-datum {
    margin-block-start: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kb-kaart__titel {
    margin: 0;
    font-size: var(--step-1);
    line-height: 1.3;
  }

  .kb-kaart__titel a {
    color: inherit;
    text-decoration: none;
  }

  .kb-kaart__titel a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  /* Categoriekaarten op het overzicht: beeld boven, titel, aantal en
     een tekstlink onderaan. De kaart staat op wit tegen de zachte
     achtergrond van de sectie, zodat het raster rust houdt. */
  .kb-cats {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  }

  .kb-cat {
    display: flex;
    flex-direction: column;
    padding: var(--space-s);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-card);
    transition: transform var(--motion), box-shadow var(--motion);
  }

  .kb-cat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
  }

  .kb-cat__beeld {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-s);
  }

  .kb-cat__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .kb-cat__body {
    flex: 1;
    margin-block-start: var(--space-s);
  }

  .kb-cat__titel {
    margin: 0;
    font-size: var(--step-1);
    line-height: 1.25;
  }

  .kb-cat__titel a {
    color: inherit;
    text-decoration: none;
  }

  .kb-cat__titel a:hover {
    color: var(--color-accent);
  }

  .kb-cat__aantal {
    margin-block-start: var(--space-3xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kb-cat__omschrijving {
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .kb-cat__actie {
    margin-block-start: var(--space-m);
  }

  .kb-cat__actie a {
    color: var(--color-accent);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .kb-cat__actie a:hover {
    color: var(--color-accent-strong);
  }

  .kb-groep + .kb-groep {
    margin-block-start: var(--space-2xl);
  }

  .kb-groep h2 {
    margin-block-end: var(--space-m);
    font-size: var(--step-2);
  }

  .kb-groep .feature-card h3 a {
    color: inherit;
    text-decoration: none;
  }

  .kb-groep .feature-card h3 a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .kb-meta {
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  /* Leesopmaak. De markdown uit de backend komt hier binnen, dus de
     stijl hangt aan de elementen zelf en niet aan klassen. */
  .prose {
    font-size: var(--step-0);
    line-height: 1.7;
  }

  .prose > * + * {
    margin-block-start: var(--space-m);
  }

  .prose h2 {
    margin-block-start: var(--space-xl);
    font-size: var(--step-2);
  }

  .prose h3 {
    margin-block-start: var(--space-l);
    font-size: var(--step-1);
  }

  .prose ul,
  .prose ol {
    display: grid;
    gap: var(--space-2xs);
    padding-inline-start: var(--space-m);
  }

  .prose li {
    max-width: var(--measure);
  }

  .prose a {
    color: var(--color-accent);
    font-weight: 500;
  }

  .prose blockquote {
    margin: 0;
    padding-inline-start: var(--space-m);
    border-inline-start: 3px solid var(--color-accent);
    color: var(--color-muted);
  }

  .prose code {
    padding: 0.15em 0.4em;
    border-radius: 0.35rem;
    background: var(--color-surface-2);
    font-size: 0.9em;
  }

  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
  }

  .prose th,
  .prose td {
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: 1px solid var(--color-line);
    text-align: start;
  }

  .prose th {
    font-weight: 700;
  }
}