/* Vacaturedetail — uit files/vacature.html. Gedeelde regels staan in site.css. */
.eyebrow.green{color:var(--green)}
.btn-ghost{background:transparent;color:var(--paper);border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.logo .tree{width:30px;height:30px}.logo .plus{color:var(--magenta)}
/* breadcrumb */
.crumb{padding:26px 0 0;font-size:.9rem;color:var(--muted)}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--ink)}
.crumb .sep{margin:0 .5rem;opacity:.5}
/* LAYOUT — mimics the source cards */
.vac-layout{padding:24px 0 40px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.hero-card{
position:relative;border-radius:32px;overflow:hidden;color:#fff;padding:48px 48px 44px;
background:radial-gradient(120% 130% at 88% 18%,rgba(214,40,110,.55) 0%,rgba(214,40,110,0) 48%),
radial-gradient(90% 120% at 100% 100%,rgba(214,40,110,.7) 0%,rgba(45,27,61,0) 55%),
linear-gradient(135deg,#2a1738 0%,#3d2152 55%,#5a2a5e 100%);
}
.hero-card .orb{position:absolute;top:-50px;right:90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.vac-tag{display:inline-flex;align-items:center;gap:.7rem;position:relative}
.vac-tag .plus{width:44px;height:44px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:1.4rem;font-weight:600;color:#fff}
.vac-tag .lbl{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero-card h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:1.6rem 0 1.1rem;position:relative;font-weight:600}
.hero-card .intro{font-size:1.12rem;color:rgba(255,255,255,.86);max-width:52ch;margin-bottom:2rem;position:relative}
.hero-badges{display:flex;flex-wrap:wrap;gap:.7rem;position:relative}
.hero-badges span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:.6rem 1.2rem;border-radius:999px;font-size:.9rem;font-weight:500}
/* side rail */
.rail{display:grid;gap:14px}
.rail .org{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;text-align:center;box-shadow:var(--shadow)}
.rail .org .logo{justify-content:center;margin-bottom:1.1rem}
.rail .org h3{font-size:1.4rem;margin-bottom:.6rem}
.rail .org p{font-size:.95rem;color:var(--muted)}
.meta-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px;box-shadow:var(--shadow)}
.meta-card .k{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-bottom:.2rem}
.meta-card .v{font-family:'Fraunces';font-weight:600;font-size:1.25rem}
/* detail columns */
.detail-cols{display:grid;grid-template-columns:1fr 1fr 300px;gap:24px;padding-bottom:20px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px 34px;box-shadow:var(--shadow)}
.panel .eyebrow{margin-bottom:.7rem}
.panel h2{font-size:1.7rem;margin-bottom:1.4rem}
.panel ul{list-style:none}
.panel li{display:flex;gap:.85rem;align-items:flex-start;padding:.55rem 0;font-size:.97rem;color:#403640}
.panel li .dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--magenta);margin-top:.45rem}
.panel.work{background:var(--green);color:#fff;border-color:var(--green)}
.panel.work .eyebrow{color:rgba(255,255,255,.85)}
.panel.work .eyebrow::before{background:rgba(255,255,255,.85)}
.panel.work h2{color:#fff}
.panel.work p{color:rgba(255,255,255,.86);font-size:.97rem;margin-bottom:1.4rem}
.panel.work .note{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:18px 20px;font-size:.92rem;font-weight:500}
.panel.work .btn{margin-top:1.4rem;width:100%;justify-content:center;background:#fff;color:var(--green)}
.panel.work .btn:hover{transform:translateY(-2px)}
/* apply form */
.apply{
border-radius:32px;padding:56px 48px;color:#fff;position:relative;overflow:hidden;margin:20px 0 90px;
background:radial-gradient(110% 130% at 90% 10%,rgba(214,40,110,.5),transparent 50%),linear-gradient(135deg,#2a1738,#4a2358);
scroll-margin-top:90px;
}
.apply-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;position:relative}
.apply h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:1rem 0 1rem}
.apply .lead{color:rgba(255,255,255,.82);font-size:1.08rem;margin-bottom:1.8rem}
.apply .reassure{display:grid;gap:1rem}
.apply .reassure div{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.85)}
.apply .reassure svg{flex:0 0 auto;width:20px;height:20px;stroke:#f6b8d3;fill:none;stroke-width:2;margin-top:.15rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem;color:rgba(255,255,255,.85)}
.field input,.field textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:.96rem;transition:.2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.field input:focus,.field textarea:focus{outline:none;border-color:#f6b8d3;background:rgba(255,255,255,.12)}
.file-label{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border:1px dashed rgba(255,255,255,.3);border-radius:12px;cursor:pointer;font-size:.92rem;color:rgba(255,255,255,.7);transition:.2s}
.file-label:hover{border-color:#f6b8d3;color:#fff}
.file-label svg{width:18px;height:18px;stroke:#f6b8d3;fill:none;stroke-width:1.8}
.form-note{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.8rem}
/* not found */
.notfound{text-align:center;padding:90px 20px}
.notfound h1{font-size:2.2rem;margin-bottom:.8rem}
.notfound p{color:var(--muted);margin-bottom:1.6rem}
@media(max-width:980px){
.vac-layout{grid-template-columns:1fr}
.detail-cols{grid-template-columns:1fr}
}
@media(max-width:900px){
.hero-card,.apply{padding:36px 26px}
.apply-grid{grid-template-columns:1fr}
.frow{grid-template-columns:1fr}
}