/* ES6 - Het bewijs (navy, tweede donkere blok).
   Device: de plaatsingsmix als rijen met een groot getal en de uitleg ernaast.
   Geen icoonkaarten, geen paneel, geen tellers.
   v2 (feedback Timo 10-09-2026): kop en lead links, de mix rechts. In v1 stond alles
   links onder elkaar en bleef de rechterhelft leeg. */

.es-bewijs { padding-block: var(--space-section) var(--space-section-s); }

.es-bewijs-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

/* Eyebrow-afstand = het sitebrede recept (ws2/rpo2/svc-hero: 20px). */
.es-bewijs-kop .eyebrow { margin-bottom: 20px; }
.es-bewijs-kop h2 { margin-bottom: 16px; }
.es-bewijs-kop .lead { max-width: 40ch; }

/* Slotregel + CTA onder de mix. Ronde 5 (Timo): KNOP LINKS, tekst rechts ervan.
   De markupvolgorde blijft tekst-dan-knop (lees- en tabvolgorde: je leest de belofte
   voor je bij de knop komt); alleen de visuele volgorde draait via order. */
.es-bewijs-onder {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(22px, 2.8vh, 30px);
}

.es-bewijs-onder .es-bewijs-cta { order: 1; }
.es-bewijs-onder .es-bewijs-slot { order: 2; }

.es-bewijs-slot {
  margin: 0;
  color: var(--text-muted-inv);
  font-size: var(--text-small);
  line-height: 1.5;
  max-width: 34ch;
}

.es-bewijs-cta { flex: none; }

/* Rechterkolom: mix + slotregel horen bij elkaar. Als losse grid-kinderen bepaalde de
   hoge kop links de rijhoogte en zakte de slotregel ~150px weg (gemeten 10-09-2026). */
.es-bewijs-kolom { min-width: 0; }

.es-mix {
  margin: 0;
  border-top: 1px solid var(--line-inv);
  /* Op de hoogte van de eyebrow links beginnen: eyebrow is 12px hoog, plus 20px marge,
     dus de eerste rij zit optisch op de kopregel. */
  padding-top: 4px;
}

.es-mix-rij {
  display: grid;
  /* Vaste cijferkolom: met auto begon de tekst per rij op een andere x, want "14" is
     smaller dan "30" (gemeten 10-09-2026). */
  grid-template-columns: clamp(84px, 7vw, 112px) 1fr;
  gap: clamp(18px, 3vw, 40px);
  /* Ronde 4: tekst aan de BOVENKANT van het cijfer, niet op de basislijn (daar hing
     hij onder het cijfer). De kleine padding zet de x-hoogte op de cap-hoogte van
     het Anton-cijfer. */
  align-items: start;
  padding-block: clamp(22px, 2.8vh, 30px);
  border-bottom: 1px solid var(--line-inv);
}

/* Ronde 3 (Timo 10-09-2026): cijfers en tekst ernaast groter; de rechterkolom oogde
   te licht tegenover de kop links. Was clamp(2.4rem, 4.4vw, 3.6rem) en 1rem. */
.es-mix-rij dt {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.4vw, 4.6rem);
  line-height: .88;
  color: var(--accent);
}

.es-mix-rij dd {
  margin: 0;
  color: var(--text-body-inv);
  font-size: var(--text-lead);
  line-height: 1.45;
  max-width: 34ch;
  padding-top: .12em;
}

@media (max-width: 900px) {
  .es-bewijs-grid { grid-template-columns: 1fr; gap: 32px; }
  .es-mix { padding-top: 0; }
}

@media (max-width: 620px) {
  .es-mix-rij { grid-template-columns: 1fr; gap: 6px; }
  .es-bewijs-onder { flex-direction: column; align-items: flex-start; }
  /* Gestapeld terug op leesvolgorde: eerst de belofte, dan de knop. */
  .es-bewijs-onder .es-bewijs-slot { order: 1; }
  .es-bewijs-onder .es-bewijs-cta { order: 2; }
}