/* vacatures: CSS van de secties op /vacatures/ (docs/prototype/vacatures.html, inline <style>).
   Het sollicitatieformulier staat (nog) niet op de site; de stijlen ervan blijven voor als het komt. */
/* Vacatures: paginaspecifieke stijlen. Thema-kleuren komen uit src/site.css. */
/* ---------- hero: titel en inleiding, daaronder het team en een open plek ---------- */
.vh-head{display:grid;gap:20px 64px;align-items:start}
@media (min-width:1024px){
.vh-head{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.vh-h1{max-width:16ch;font-size:clamp(36px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em}
.vh-lede{max-width:46ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--color-ink-2);text-wrap:pretty}
@media (min-width:1024px){
.vh-aside{padding-top:clamp(8px,1vw,14px)}
}
.vh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:768px){
.vh-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px}
}
@media (min-width:1024px){
.vh-grid{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:28px}
}
.vh-c{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:24px}
/* 1 · het team als mozaïek */
.vh-team{background:var(--color-paper-2);padding:clamp(14px,1.6vw,20px)}
.mo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px);list-style:none;margin:0;padding:0}
.mo li{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--color-paper)}
.mo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mo li:hover img{transform:scale(1.05)}
.mo .nm{position:absolute;left:8px;bottom:8px;border-radius:999px;background:rgb(25 23 20 / .55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:3px 10px;font-size:12px;font-weight:500;color:#fff}
@media (max-width:479px){
.mo .nm{display:none}
}
.mo .mo-you{display:flex;align-items:center;justify-content:center;border:2px dashed var(--color-ink-3);background:transparent;font-family:var(--font-hand);font-size:clamp(20px,2.4vw,30px);color:var(--color-ink-2)}
/* 2 · tekstkaart met stippellijn: wat je hier vindt */
.vh-text{padding:clamp(26px,2.6vw,36px);background:var(--color-card);border:1.5px dashed var(--color-ink-3)}
.vh-pill{align-self:flex-start;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;background:var(--color-paper-2);color:var(--color-ink-2)}
.vh-t{margin-top:14px;font-family:var(--font-serif);font-size:clamp(25px,2.1vw,32px);font-weight:600;line-height:1.08;letter-spacing:-.015em;color:var(--color-ink);text-wrap:balance}
.vh-l{margin-top:12px;font-size:16px;line-height:1.5;color:var(--color-ink-2);text-wrap:pretty}
.vh-more{margin-top:auto;padding-top:22px;display:inline-flex;gap:8px;font-size:15px;font-weight:600;color:var(--color-ink);text-decoration:none}
.vh-more span{color:var(--color-accent);transition:translate .2s}
.vh-more:hover span{translate:0 3px}
/* ---------- wie we zoeken: kaart met stippellijn ---------- */
.open-card{border-radius:24px;border:1.5px dashed var(--color-ink-3);background:var(--color-card);padding:clamp(26px,4vw,48px)}
/* ---------- formulier ---------- */
.apply{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 64px;align-items:start}
@media (min-width:1024px){
.apply{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.apply-form{border-radius:24px;background:var(--color-card);border:1px solid var(--color-rule);padding:clamp(20px,3vw,40px)}
.f-row{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.f-row>*{min-width:0}
@media (min-width:640px){
.f-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.f-opt{font-weight:400;color:var(--color-ink-3)}
.drop{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;border-radius:14px;border:1.5px dashed var(--color-rule);background:#fff;padding:16px;cursor:pointer;transition:border-color .2s}
.drop:hover,.drop:focus-within{border-color:var(--color-ink)}
.drop input{position:absolute;inset:0;width:100%;min-width:0;max-width:100%;opacity:0;cursor:pointer}
.drop-name{font-size:15px;font-weight:600;color:var(--color-ink);overflow-wrap:anywhere}
.drop-help{font-size:14px;color:var(--color-ink-3)}
.field.is-bad{border-color:var(--color-accent)}
.f-err{display:none;margin-top:6px;font-size:14px;font-weight:500;color:var(--color-accent-dark)}
.is-bad + .f-err{display:block}
.apply-done{display:none}
.apply-form.is-done form{display:none}
.apply-form.is-done .apply-done{display:block}
.privacy-list{margin-top:20px;display:grid;gap:10px;font-size:15.5px;color:var(--color-ink-2)}
.privacy-list li{position:relative;padding-left:26px}
.privacy-list li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--color-ok)}
@media (prefers-reduced-motion:reduce){
.mo img,.vh-more span{transition:none}
}
/* rich text in de kaarten: de opsomming en de alinea's komen uit Wagtail */
.privacy-list > ul{display:grid;gap:10px}
.open-card-text > p:first-child{max-width:60ch;font-size:1.125rem;line-height:1.75rem;color:var(--color-ink-2)}
.open-card-text > p + p{margin-top:1rem;max-width:60ch;color:var(--color-ink-2)}
.open-card-text a{font-weight:600;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-rule);text-decoration-thickness:2px;text-underline-offset:4px}
.open-card-text a:hover{text-decoration-color:var(--color-accent)}
.privacy-list a{text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:4px}
.privacy-list a:hover{text-decoration-color:var(--color-accent)}

.apply>*{min-width:0}