/* WS4 — Waarom Sennasearch (cream, strak middenrif-ritme): kopgroep + 2x2 grid
   paper icoonkaarten (T5, 2026-07-20: 6 naar 4 kaarten) + btn--link-CTA onder
   het grid. Kaart-DNA = .card uit base.css (paper, --r-md, 1px --line-paper,
   --shadow-card). Geen chip-tegels achter de iconen (o5/s6-device),
   geen hover-lift (kaarten zijn niet interactief). Reveals centraal via base.css.
   Sectie op cream: geen .on-dark, kale klassen volstaan. */

.ws-waarom {
  padding-block: var(--space-section-s);
}

/* — Kopgroep — */

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

.ws-waarom-head h2 {
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
}

/* — Grid: 2x2 op desktop (T5) — */

.ws-waarom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

/* — Kaart — */

.ws-waarom-kaart {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

/* Kale oranje 28px lijn-iconen direct op de paper-kaart */
.ws-waarom-ico {
  color: var(--orange-500);
  margin-bottom: 22px;
}

.ws-waarom-ico svg { display: block; }

.ws-waarom-kop {
  margin-bottom: 12px;
}

.ws-waarom-body {
  font-size: .9375rem;
  line-height: 1.6;
}

/* — CTA onder het grid (T5) — */

.ws-waarom-link { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* — Responsive — */
/* (De oude 1100px-tussenstap verviel met T5: desktop is nu al 2 kolommen,
   dus 881-1100 = zelfde layout; ook de reveal-diagonaal van de 3x2-stagger
   bestaat niet meer.) */

@media (max-width: 880px) {
  .ws-waarom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ws-waarom-kaart { padding: 26px 22px; }

  .ws-waarom-head h2 {
    font-size: clamp(1.9rem, 8.4vw, 2.4rem);
    text-wrap: balance;
  }

  /* Spec-amendement (review 260719, r2): de vaste <br> gaf op ≤560 twee
     stub-regels ('KRIJGT.' en 'NIET.' elk alleen op een regel). Op smal de
     <br> onderdrukken zodat de kop natuurlijk en gebalanceerd wikkelt;
     >560 behoudt de vaste regelval uit de spec. */
  .ws-waarom-head h2 br { display: none; }
}