/* OS3 — Waarom Sennasearch: vergelijkingstabel (cream, start licht middenrif).
   Eén paper kaart; de Sennasearch-kolom loopt als navy inzet over de volle
   kaarthoogte door (het paper-tegenover-navy contrastduo van o7, als tabel).
   Grid met display:contents-rijen: links/rechts delen dezelfde grid-rij en
   lijnen dus altijd uit, hoe lang de tekst ook wordt.
   Strak ritme onder (--space-section-s) richting het autoriteitsblok (os4),
   dat zelf met --space-section afsluit richting het donkere slotblok. */

.os-vgl {
  padding-block: var(--space-section) var(--space-section-s);
}

/* — Kopgroep (o7/o8-recept: kicker + kop + lead) — */

.os-vgl-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.os-vgl-lead { max-width: 62ch; }

/* — De kaart: grid van 2 kolommen; rijen via display:contents — */

.os-vgl-kaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden; /* radius knipt de navy kolom netjes af */
}

.os-vgl-koprij,
.os-vgl-rij { display: contents; }

/* Cellen */
.os-vgl-kop,
.os-vgl-trad,
.os-vgl-senna {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 2.2vw, 22px) clamp(20px, 2.6vw, 32px);
}

/* Kolomkoppen */
.os-vgl-kop {
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: clamp(20px, 2.6vw, 26px);
  padding-bottom: clamp(14px, 2vw, 18px);
}
.os-vgl-kop--trad { color: var(--text-muted); }
.os-vgl-kop--senna { color: #fff; gap: 10px; }
.os-vgl-kop--senna img {
  height: 20px;
  width: auto;
}

/* Traditioneel-kolom (paper) */
.os-vgl-trad {
  color: var(--text-body);
  border-top: 1px solid var(--line-paper);
}

/* Sennasearch-kolom (navy inzet, volle hoogte doordat elke cel navy is) */
.os-vgl-senna {
  background: var(--surface-deep);
  color: var(--text-strong-inv);
  font-weight: 600;
  border-top: 1px solid var(--line-inv);
}
.os-vgl-kop--senna { background: var(--surface-deep); }

/* Iconen: ✕ gedempt links, oranje vinkje rechts; uitgelijnd op de eerste regel */
.os-vgl-x {
  flex: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  transform: translateY(1px);
}

/* Vinkje: stroke-width 2 in de svg is bewuste schaalcompensatie — het pad
   (viewBox 16) rendert hier op 12px, dus 2 × 0.75 = 1.5px gerenderd, vlak bij
   de 1.8-canon. Attribuut naar 1.8 "gelijktrekken" zou 1.35px renderen. */
.os-vgl-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orange-500) 18%, transparent);
  color: var(--orange-500);
  margin-top: 1px;
}
.os-vgl-check svg { width: 12px; height: 12px; }

/* ---------- Desktop: Sennasearch links, traditioneel bureau rechts ----------

   Puur in CSS omgedraaid, niet in de DOM. De rijen staan op display:contents en
   de CMS-sleutels worden op DOM-volgorde genummerd, dus cellen of rijen
   omwisselen in de HTML laat elke sleutel erna opschuiven.

   Geen `order`: bij display:contents sorteert de grid alle cellen los van hun
   rij, waardoor de paren uit elkaar vallen. Daarom expliciete grid-column, en
   ook op de koprij, anders staan de koppen boven de verkeerde kolom.

   `grid-auto-flow: row dense` is hier geen optimalisatie maar voorwaarde. Bij de
   standaard (sparse) plaatsing loopt de cursor per item vooruit: traditioneel
   (kolom 2) staat eerst in de DOM, Sennasearch (kolom 1) daarna, en een sprong
   terug naar een lagere kolom schuift de cursor volgens de spec een rij omlaag.
   De paren zouden dan trapsgewijs uit elkaar lopen. Dense zet de cursor per item
   terug naar de eerste rij, dus beide kolommen vullen in lockstep en elk paar
   deelt weer één grid-rij, precies zoals hierboven bedoeld. */

@media (min-width: 761px) {
  .os-vgl-kaart { grid-auto-flow: row dense; }

  .os-vgl-kop--senna,
  .os-vgl-senna { grid-column: 1; }

  .os-vgl-kop--trad,
  .os-vgl-trad { grid-column: 2; }
}

/* ---------- Mobiel: paren stapelen, Sennasearch eerst ---------- */

@media (max-width: 760px) {
  .os-vgl-kaart { grid-template-columns: 1fr; }

  /* Kolomkoppen vervallen; ✓/✕ + sterk/gedempt dragen het onderscheid */
  .os-vgl-koprij { display: none; }

  /* Sennasearch bovenaan (wat we wél doen), traditioneel eronder als contrast.
     LET OP: geen :first-of-type voor de rand-reset — het eerste div-kind van
     de kaart is de (verborgen) koprij, dus die selector matcht hier nooit.
     Alleen tússen paren een hairline via de +-combinator. */
  .os-vgl-rij {
    display: flex;
    flex-direction: column;
    border-top: 0;
  }
  .os-vgl-senna { order: -1; }

  .os-vgl-senna {
    border-top: 0;
    padding: 18px 20px 12px;
  }
  .os-vgl-trad {
    background: var(--surface-deep);
    color: var(--text-muted-inv);
    border-top: 0;
    padding: 0 20px 18px;
    font-size: .9rem;
  }
  .os-vgl-x { color: var(--text-muted-inv); }

  /* De hele kaart wordt op mobiel één navy paneel met hairlines tussen paren */
  .os-vgl-kaart { background: var(--surface-deep); border-color: var(--line-inv); }
  .os-vgl-rij + .os-vgl-rij { border-top: 1px solid var(--line-inv); }
}