/* Sennasearch V2 — O7 Wel en niet (cream, strak ritme --space-section-s)
   Blok 1: vier verbintenissen als 2x2 ruled list, open typografie
   (bewust kaartloos als contrast met de kaartvormen elders op de pagina).
   Blok 2: contrastduo, paper-kaart tegenover navy-kaart, identieke opbouw. */

.oa-standpunt {
  padding-block: var(--space-section-s);
}

/* ---------- Kopgroep ---------- */

.oa-standpunt-head {
  margin-bottom: clamp(40px, 5.5vw, 60px);
}

.oa-standpunt-head .kicker-line {
  margin-bottom: 20px;
}

.oa-standpunt-head h2 {
  max-width: 20ch;
  margin-bottom: 20px;
}

.oa-standpunt-lead {
  max-width: 62ch;
}

/* ---------- Contrastduo: paper-kader (2x2 standpunten) naast navy statement.
   Wel/niet-copy is geschrapt (Timo 2026-07-17); het paper-tegenover-navy
   duo blijft als visueel anker en echoot het o4-paneel erboven. ---------- */

.oa-standpunt-duo {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--gap-sm);
  align-items: stretch; /* even hoge kaarten */
}

.oa-standpunt-kaart {
  border-radius: var(--r-md);
  padding: clamp(28px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oa-standpunt-kaart--principes {
  background: var(--surface-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.oa-standpunt-kaart--statement {
  background: var(--surface-deep);
  border: 1px solid var(--line-inv);
}

/* Ruled list 2x2 binnen het paper-kader */
.oa-standpunt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.2vw, 48px);
  row-gap: clamp(24px, 2.6vw, 36px);
  width: 100%;
}

.oa-standpunt-item {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.oa-standpunt-item-kop {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.oa-standpunt-item-body {
  font-size: .9375rem;
  line-height: 1.65;
  max-width: 48ch;
}

/* Chip: blauw accent op de navy kaart (zelfde chipvocabulaire als o5,
   radius var(--r-sm)); het blauw laat de o4/blue-familie terugkomen. */
.oa-standpunt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  flex: none;
  background: var(--blue-100);
  color: var(--navy-950);
  margin-bottom: 22px;
}
.oa-standpunt-chip svg { width: 22px; height: 22px; }

/* Het statement: de kern van de sectie, groot en stellig, verticaal
   gecentreerd in de resterende kaarthoogte. */
.oa-standpunt-statement {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-strong-inv);
  max-width: 24ch;
  margin-block: auto;
}

/* ---------- Tablet: duo naar 1 kolom ---------- */

@media (max-width: 880px) {
  .oa-standpunt-duo {
    grid-template-columns: 1fr;
  }

  .oa-standpunt-list {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .oa-standpunt-item { padding-top: 16px; }

  .oa-standpunt-statement { margin-block: 0; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  .oa-standpunt-head { margin-bottom: 36px; }

  .oa-standpunt-kaart { padding: 26px 22px; }

  .oa-standpunt-chip { margin-bottom: 18px; }
}