/* ==========================================================================
   Hoofdpagina - de tegels waarmee je een keuzehulp kiest.
   ========================================================================== */

.hulpen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-bottom:14px}

.hulp{display:flex;flex-direction:column;background:#fff;border:1.5px solid transparent;border-radius:var(--radius);box-shadow:0 1px 3px rgba(22,31,115,.08);text-decoration:none;color:inherit;overflow:hidden;transition:border-color .12s,transform .12s,box-shadow .12s}
.hulp:hover{border-color:var(--zp-blauw);transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,31,115,.12)}
.hulp:focus-visible{outline:3px solid var(--zp-oranje);outline-offset:2px}

.hulp .prent{background:#f4f5fb;padding:18px 20px 10px;border-bottom:1.5px solid #eceef6}
.hulp .prent svg,.hulp .prent img{max-height:118px;margin:0 auto}
.hulp .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.hulp h3{font-size:1.12rem;margin:0 0 6px;line-height:1.2;letter-spacing:-.01em}
.hulp .onder{font-size:.86rem;color:#5a6087;margin:0 0 12px;flex:1}
.hulp .voet{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.79rem;color:#7c81a6;font-weight:600;border-top:1px solid #eceef6;padding-top:11px}
.hulp .start{color:var(--zp-oranje)}
.hulp:hover .start{text-decoration:underline}

/* nog niet beschikbaar */
.hulp.binnenkort{cursor:default;opacity:.72}
.hulp.binnenkort:hover{border-color:transparent;transform:none;box-shadow:0 1px 3px rgba(22,31,115,.08)}
.hulp.binnenkort .prent{filter:grayscale(1)}
.hulp.binnenkort .start{color:#7c81a6}

.intro{background:var(--zp-blauw);color:#fff;border-radius:var(--radius);padding:24px;margin-bottom:14px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.intro h2{color:#fff;font-size:1.45rem;margin:0 0 8px}
.intro p{margin:0;opacity:.85;font-size:.92rem;max-width:58ch}

.leeg{background:#fff;border-radius:var(--radius);padding:26px 24px;color:#5a6087;font-size:.9rem}

.sectiekop{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7c81a6;margin:26px 0 10px}