/* Vergelijkingen: de tabel HummingHub naast een ander platform, het
   overzicht van alle platforms, en de twee keuzekaarten. De tabel
   scrolt binnen zijn eigen kader op een smal scherm, zodat de pagina
   zelf nooit horizontaal scrolt. */

@layer components {
  .vg-kader {
    overflow-x: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-card);
  }

  .vg-tabel {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: var(--step--1);
  }

  .vg-tabel th,
  .vg-tabel td {
    padding: var(--space-s) var(--space-m);
    border-block-end: 1px solid var(--color-line);
    text-align: start;
    vertical-align: top;
    line-height: 1.5;
  }

  .vg-tabel tr:last-child th,
  .vg-tabel tr:last-child td {
    border-block-end: 0;
  }

  .vg-tabel thead th {
    background: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
  }

  .vg-tabel tbody th {
    width: 22%;
    color: var(--color-muted);
    font-weight: 600;
  }

  /* De HummingHub-kolom licht zacht op, zonder te schreeuwen. */
  .vg-tabel .vg-ons {
    background: color-mix(in oklch, var(--color-surface) 55%, var(--color-bg));
  }

  .vg-tabel thead .vg-ons {
    background: var(--color-surface-2);
    color: var(--color-accent-strong);
  }

  .vg-tabel a {
    color: inherit;
    font-weight: 700;
  }

  .vg-tabel a:hover,
  .vg-tabel a:focus-visible {
    color: var(--color-accent);
  }

  .vg-noot {
    margin-block-start: var(--space-s);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  /* Twee keuzekaarten naast elkaar. */
  .vg-keuze {
    display: grid;
    gap: var(--space-s);
  }

  @media (min-width: 48rem) {
    .vg-keuze {
      grid-template-columns: 1fr 1fr;
    }
  }

  .vg-keuze__kaart {
    padding: var(--space-m) var(--space-l);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
  }

  .vg-keuze__kaart--ons {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card);
  }

  .vg-keuze__kaart h2 {
    font-size: var(--step-1);
  }

  .vg-keuze__kaart ul {
    display: grid;
    gap: var(--space-2xs);
    margin: var(--space-s) 0 0;
    padding-inline-start: 1.1rem;
  }

  .vg-keuze__kaart li::marker {
    color: var(--color-accent);
  }

  .vg-keuze__kaart .button {
    margin-block-start: var(--space-m);
  }

  /* Het korte antwoord staat in de donkere paginakop: een glazen vlak
     met een accentlijn, lichte tekst, en een rustige tekstmaat. */
  .page-header .vg-kort,
  .vg-kort {
    max-width: 44rem;
    margin-block-start: var(--space-m);
    padding: var(--space-m) var(--space-l);
    border: 1px solid color-mix(in oklch, var(--color-on-accent) 14%, transparent);
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-s);
    background: color-mix(in oklch, var(--color-on-accent) 7%, transparent);
    color: color-mix(in oklch, var(--color-on-accent) 86%, transparent);
    font-size: var(--step-0);
    line-height: 1.6;
  }

  .vg-kort strong {
    display: block;
    margin-block-end: var(--space-2xs);
    color: color-mix(in oklch, var(--color-accent) 45%, var(--color-on-accent));
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .vg-bronnen {
    margin: var(--space-s) 0 0;
    padding-inline-start: 1.1rem;
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .vg-bronnen a {
    color: inherit;
    word-break: break-word;
  }

  .vg-groep + .vg-groep {
    margin-block-start: var(--space-l);
  }

  .vg-groep > h2 {
    margin-block-end: var(--space-s);
    font-size: var(--step-1);
  }
}