/* GOL-826: the comparison table on /vergelijken and the short version on /prijzen (VERGELIJKEN_AAN). Tokens only, so
   the light and the dark site both follow. A wide column shows a real table with the Goldmary column on a gold field;
   a narrow one (a phone, or the old /prijzen column) turns every row into a card with the four answers stacked,
   Goldmary first. The switch is on the container, not on the viewport, so the short version behaves in both layouts.
   Contrast: ink on gold 9.5:1, ink-2 on the gold field 8:1, ink-zacht on white 7.7:1. No icons: the answers are words. */

/* The page is wider than the text column of the other doc pages. */
html .doc:has(.vgl-blok:not(.vgl-blok--kort)) { width: min(100%, 72rem); }
html.is-v3 .v3-docwrap .doc:has(.vgl-blok:not(.vgl-blok--kort)) { width: min(100%, 72rem); }

.vgl { container-type: inline-size; }
.vgl__tabel { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.vgl__tabel caption { caption-side: bottom; padding-top: 0.875rem; text-align: left; font-size: 0.875rem; color: var(--inkt-zacht); }
.vgl__tabel th, .vgl__tabel td { padding: 1.125rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--lijn); }
.vgl__tabel td { color: var(--inkt-2); }
.vgl__tabel tbody th { width: 11rem; font: 700 1rem / 1.3 var(--font-kop, inherit); color: var(--inkt); }
.vgl__tabel thead th { padding-block: 0.875rem; border-top: 0; font: 700 1rem / 1.3 var(--font-kop, inherit); color: var(--inkt); vertical-align: bottom; }
.vgl__tabel thead th:first-child { font-size: 0.875rem; font-weight: 600; color: var(--inkt-zacht); }
.vgl__tabel thead .vgl__g { background: var(--goud); color: var(--op-goud, #1f1a12); border-radius: 0.25rem 0.25rem 0 0; }
.vgl__tabel td.vgl__g { background: var(--goud-vlak); color: var(--inkt); font-weight: 500; }
.vgl__tabel tbody tr:first-child :is(th, td) { border-top: 0; }
.vgl__tabel tbody tr:last-child td.vgl__g { border-radius: 0 0 0.25rem 0.25rem; }
.vgl__noot { max-width: 62ch; margin-top: 1.25rem; font-size: 0.9375rem; color: var(--inkt-2); }
.vgl__noot a { color: var(--inkt); text-underline-offset: 0.25rem; text-decoration-color: var(--goud); text-decoration-thickness: 0.125rem; }
.vgl__lede { max-width: 62ch; color: var(--inkt-2); }
.vgl-blok--kort { margin-top: clamp(2rem, 4vw, 3rem); }
.vgl-blok--kort .vgl { margin-top: 0.75rem; }
.v3-blok.vgl-blok--kort { padding-block: 4rem; }

/* Narrow: one card per row. The head row stays for screen readers and is hidden from the eye. */
@container (max-width: 48rem) {
  .vgl__tabel, .vgl__tabel tbody { display: block; }
  .vgl__tabel caption { display: block; }
  .vgl__tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vgl__tabel tr { display: block; margin-bottom: 1rem; border: 1px solid var(--lijn); border-radius: 0.25rem; overflow: hidden; }
  .vgl__tabel tbody th { display: block; width: auto; padding: 0.875rem 1rem; border: 0; background: var(--licht); font-size: 1.125rem; }
  .vgl__tabel tbody tr:first-child :is(th, td) { border-top: 0; }
  .vgl__tabel td { display: block; padding: 0.75rem 1rem; border-top: 1px solid var(--lijn); }
  .vgl__tabel td::before { content: attr(data-kop); display: block; margin-bottom: 0.125rem; font-size: 0.8125rem; font-weight: 700; color: var(--inkt-zacht); }
  .vgl__tabel td.vgl__g::before { color: var(--goud-inkt, var(--inkt)); }
  .vgl__tabel tbody tr:last-child td.vgl__g { border-radius: 0; }
}