/* ============================================================
   URBAN GRND — vacature.css
   Gedeelde layout voor de vacature-detailpagina's in /werkenbij/.
   Link vanaf elke detailpagina: <link rel="stylesheet" href="../assets/css/vacature.css">
   Gebruikt de tokens uit tokens.css.
   ============================================================ */

/* hero */
.vac-hero{background:var(--ug-violet-800);color:var(--on-dark);padding:var(--space-8) 24px;position:relative;overflow:hidden}
.vac-hero::after{content:"";position:absolute;right:-140px;top:-90px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(227,150,56,.26),transparent 62%);pointer-events:none}
.vac-hero .inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.vac-back{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-muted);font-weight:600;font-size:.9rem;margin-bottom:20px;transition:color .13s}
.vac-back:hover{color:var(--ug-amber-300)}
.vac-back .arw{width:8px;height:8px;border-bottom:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(45deg)}
.vac-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:.98;margin:.5rem 0 16px;max-width:16ch}
.vac-hero .lead{font-size:1.2rem;color:var(--on-dark-muted);max-width:620px;margin:0 0 24px;line-height:1.5}
.vac-tags{display:flex;flex-wrap:wrap;gap:8px}
.vac-tags .tag{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:700;font-size:.66rem;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:.4rem .8rem;border-radius:var(--radius-pill);line-height:1}
.vac-tags .tag--amber{background:var(--ug-amber-500);color:var(--ug-violet-800)}
.vac-tags .tag--soft{background:rgba(255,255,255,.12);color:#fff}

/* body layout */
.vac-layout{max-width:var(--maxw);margin:0 auto;padding:var(--space-8) 24px;display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.vac-main>*+*{margin-top:var(--space-7)}
.vac-intro{font-size:1.1rem;line-height:1.6;color:var(--on-light)}
.vac-section h2{font-size:1.35rem;margin:0 0 16px;color:var(--on-light)}
.vac-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vac-list li{display:flex;gap:12px;font-size:1rem;line-height:1.5;color:var(--on-light)}
.vac-list li::before{content:"";flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(227,150,56,.16);position:relative}
.vac-list li::after{content:"";position:absolute;width:.42rem;height:.72rem;border-right:2.5px solid var(--ug-amber-700);border-bottom:2.5px solid var(--ug-amber-700);transform:translate(-1.06rem,.28rem) rotate(45deg)}
.vac-list li{position:relative}

/* aside — In het kort */
.vac-aside{position:sticky;top:calc(var(--header-h) + 20px);background:var(--ug-violet-700);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}
.vac-aside h2{font-size:.75rem;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ug-amber-300);margin:0 0 18px}
.vac-aside dl{margin:0 0 22px;display:flex;flex-direction:column;gap:14px}
.vac-aside .row{display:flex;flex-direction:column;gap:2px}
.vac-aside dt{font-size:.66rem;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:800;color:var(--ug-lavender)}
.vac-aside dd{margin:0;font-weight:700;font-size:1.02rem}
.vac-aside .ug-btn{width:100%}

/* apply-band onderaan */
.vac-cta{background:var(--ug-violet-500);color:#fff;border-radius:var(--radius-xl);max-width:var(--maxw);margin:0 auto var(--space-8);padding:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.vac-cta h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 6px}
.vac-cta p{margin:0;color:var(--on-dark-muted);max-width:520px}
.vac-cta .btns{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:860px){
  .vac-layout{grid-template-columns:1fr;gap:32px}
  .vac-aside{position:static}
}