/* Drie losse onderdelen van SOMA Academy (12-11-2026, na het gesprek met Niki): certificeren, Bootcamp Bouw en BBL
   naast elkaar, zonder lijn, nummering of oplopende animatie. Gekozen variant C (Dave, 12-11-2026): titel voorop in een
   oranje kopvlak, de duur als stempel in de hoek, de kaart eronder wit. Opbouw per kaart: .ok-kop en .ok-lijf. */
.ond{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ok{position:relative;display:flex;flex-direction:column;background:#fff}
.ok-lijf{display:flex;flex-direction:column;flex:1;padding:28px 30px 32px}
.ok h3{font-size:clamp(1.7rem,2.3vw,2.3rem);letter-spacing:-.025em;line-height:1.12;text-wrap:balance;max-width:13ch}
.ok h3 span{display:block;font-weight:300}
.ok-zin{font-weight:300;font-size:1.0625rem;line-height:1.55;text-wrap:pretty;color:var(--zacht)}
.ok-regels{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ok-regels li{position:relative;padding-left:22px;font-weight:300;line-height:1.5;text-wrap:pretty;color:var(--zacht)}
.ok-regels li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--inkt)}
.ok-link{align-self:flex-start;margin-top:auto;padding-top:28px;font-weight:700;color:var(--navy)}
.ok-link span:first-child{border-bottom:1.5px solid currentColor;padding-bottom:2px}
.ok-link .pijl{display:inline-block;margin-left:.4em;transition:transform .35s var(--e)}
.ok:hover .ok-link .pijl{transform:translateX(5px)}
/* de hele kaart is aanklikbaar via de link (stretched link); de focusrand komt om de kaart */
.ok-link::after{content:"";position:absolute;inset:0;z-index:1}
.ok-link:focus-visible{outline:none}
.ok:has(.ok-link:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.ok-kop{position:relative;background:var(--academy);color:var(--inkt);padding:30px 30px 32px;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end}
.ok-duur{position:absolute;top:22px;right:24px;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:7px 10px;box-shadow:inset 0 0 0 1.5px var(--inkt)}
.ok-duur b{margin-right:.3em}
.ok-kop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--inkt);transition:height .4s var(--e)}
.ok:hover .ok-kop::after{height:6px}
.ond + .ook{margin-top:40px;line-height:1.6}
@media (max-width:900px){
  .ond{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .ok-kop{min-height:150px;padding:24px 22px 26px}
  .ok-duur{top:18px;right:18px}
  .ok-lijf{padding:22px 22px 26px}
  .ok-link{min-height:44px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){.ok-kop::after,.ok-link .pijl{transition:none}}