/* WS13 — "Onze aanpak" (herbouw 17-09-2026, implementatiebrief Timo).
   Was: het es-vertrouwen-contract (argument links, 01/02/03-lijst rechts, es3.css).
   Nu: kopgroep links + FOTO rechts (Simona en collega in overleg, assets/images/
   siem-en-jo.webp: Timo wilde meer foto's op de pagina en dit is de positieve sectie
   waar "wij" concreet wordt), daaronder VIER paper kaarten in het ws4-recept
   (icoon + kop + body). ws4 zelf is 17-09 van de pagina af, dus het recept staat hier
   onder eigen klassen. Iconen: assets/icons/ws-a*.png. */
/* 17-09 (avond, Timo): de foto van Simona en collega is voor nu uit de sectie ("past daar niet
   echt", komt misschien elders terug). De kopgroep staat weer op één kolom; de foto-regels
   hieronder blijven staan voor als hij terugkomt (figure.ws-aanpak2-foto als tweede kind van
   .ws-aanpak2-head, en dan display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   gap: clamp(32px, 5vw, 72px); align-items: center; op de head). */
.ws-aanpak2-head {
  display: block;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.ws-aanpak2-copy .eyebrow { margin-bottom: 18px; }
.ws-aanpak2-copy h2 {
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  margin-bottom: 18px;
  max-width: 18ch;
}
.ws-aanpak2-copy .lead { max-width: 50ch; }

.ws-aanpak2-foto {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  justify-self: end;
}
.ws-aanpak2-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.ws-aanpak2-kaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ws-aanpak2-kaart {
  display: flex;
  flex-direction: column;
  padding: 28px;
}
.ws-aanpak2-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ws-aanpak2-ico {
  display: block;
  width: 68px;
  height: 68px;
}
.ws-aanpak2-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ws-aanpak2-nr {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .06em;
  padding-top: 4px;
}
.ws-aanpak2-kaart h3 { margin-bottom: 12px; }
.ws-aanpak2-body {
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0;
}
/* Vakgebieden volgt direct hieronder als compact blok met eigen scheidslijn (ws11.css);
   zelfde 20px-koppeling als ritme-licht.css eerder aan ws-waarom gaf. */
/* De ruimte naar de vakgebiedenlijn staat sinds 17-09 in css/sections/ritme-licht.css: de regel die hier
   stond (0,3,3) verloor van de basisregel daar (0,4,2) en deed dus niets (gemeten: 54px, niet 20px). */

@media (max-width: 880px) {
  .ws-aanpak2-head { grid-template-columns: minmax(0, 1fr); }
  .ws-aanpak2-foto { max-width: 440px; max-height: 400px; justify-self: start; }
  .ws-aanpak2-kaarten { grid-template-columns: minmax(0, 1fr); }
  .ws-aanpak2-copy h2 { max-width: none; }
}
@media (max-width: 560px) {
  .ws-aanpak2-kaart { padding: 26px 22px; }
  .ws-aanpak2-copy h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); text-wrap: balance; }
}