/* WS6 — Zekerheid en autoriteit (cream-sectie, slot van het lichte middenrif).
   Navy belofte-paneel met 3 ruled kolommen (o1-trust-recept) + autoriteitsband
   op het .oa-cijfers-indexcontract (styling uit o8.css, dat de shell laadt;
   o8.css rijdt op DRIE pagina's en wordt hier NIET gewijzigd) + primaire CTA.
   Gotcha-pantser: .on-dark h3 uit base.css (0,1,1) wint van een kale klasse;
   de Public Sans-override op de pledge-koppen rijdt daarom op
   .ws-zeker-pledge .ws-zeker-kop (0,2,0) — ook geldig binnen media queries
   (die voegen geen specificiteit toe, de selector zelf moet zwaar genoeg zijn). */

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

/* — Laag 1: kopgroep — */

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

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

.ws-zeker-sub {
  max-width: 52ch;
}

/* — Laag 2: navy belofte-paneel, enige donkere massa van het middenrif — */

.ws-zeker-paneel {
  background: var(--surface-deep);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(36px, 4.5vw, 56px);
}

/* Twee kolommen en niet drie (Timo 2026-08-20). De garantiekaart is in deze ronde
   uit ws6.html gehaald, waardoor er nog twee pledges over zijn. Op repeat(3) bleef
   de derde kolom leeg en stonden de twee kaarten op tweederde van het paneel, met
   een gat rechts. Zet dit terug op repeat(3) zodra er een derde kaart bij komt. */
.ws-zeker-pledges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ws-zeker-pledge { min-width: 0; }

/* Kolomscheiding: het o1-trust-recept (1px lijn + symmetrische lucht) */
.ws-zeker-pledge + .ws-zeker-pledge {
  border-left: 1px solid var(--line-inv);
  padding-left: clamp(24px, 2.8vw, 44px);
  margin-left: clamp(24px, 2.8vw, 44px);
}

.ws-zeker-ico {
  color: var(--orange-500);
  margin-bottom: 18px;
}

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

/* Public Sans-pledgekop MET specificiteitspantser (zie kopcomment) */
.ws-zeker-pledge .ws-zeker-kop {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong-inv);
  margin-bottom: 10px;
}

.ws-zeker-body {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-body-inv);
}

/* — Laag 3: autoriteitsband (indexrijen uit o8.css) + CTA op cream — */

.ws-zeker-bewijs {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ws-zeker-bandkop {
  margin: 14px 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.ws-zeker-cta {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

.ws-zeker-micro {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* — Responsive — */

@media (max-width: 880px) {
  .ws-zeker-paneel { padding: 32px 28px; }

  /* Pledges stapelen; scheiding kantelt van verticaal naar horizontaal */
  .ws-zeker-pledges { grid-template-columns: 1fr; }

  .ws-zeker-pledge + .ws-zeker-pledge {
    border-left: 0;
    border-top: 1px solid var(--line-inv);
    padding: 20px 0 0;
    margin: 20px 0 0;
  }
}

@media (max-width: 560px) {
  .ws-zeker-paneel { padding: 28px 20px; }

  .ws-zeker-cta .btn {
    width: 100%;
    justify-content: center;
    /* Zelfde recept als ws1: <a> erft text-align: left; bij 2-regelig label
       centreren zodat hij matcht met de ws7-submit (UA-center). */
    text-align: center;
  }

  .ws-zeker-micro { text-align: center; }
}