/* Eén rustige, gedeelde opmaak voor alle vacaturedetailpagina's. */
:root{--vac-green:#0f3f1c;--vac-blue:#061f3b;--vac-muted:#64748b;--vac-soft:#f5f8f7;--vac-line:#e6ecea;--vac-shadow:0 16px 42px rgba(6,31,59,.07)}

main>.hero,
main>.job-hero{padding:64px 0 68px!important;background:linear-gradient(135deg,#fff 0%,#f6faf8 58%,#eef5f2 100%)!important}
main>.hero .hero-grid,
main>.job-hero .job-hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:42px!important;align-items:start!important}
main>.hero h1,
main>.job-hero h1{margin:12px 0 18px!important;color:var(--vac-blue)!important;font-size:clamp(38px,4.6vw,60px)!important;line-height:1.02!important;letter-spacing:-.055em!important}
main>.hero .lead,
main>.job-hero .lead{margin:0!important;color:#475569!important;font-size:19px!important;line-height:1.65!important}
main>.hero .hero-card,
main>.job-hero .job-summary{padding:30px!important;border:1px solid var(--vac-line)!important;border-radius:28px!important;background:#fff!important;box-shadow:var(--vac-shadow)!important}
main>.hero .hero-card,
main>.job-hero .job-summary{margin-top:0!important}
@media(min-width:981px){
  main>.hero.job-hero .job-summary{margin-top:-3px!important}
  main>.job-hero:not(.hero) .job-summary{margin-top:7px!important}
}
/* De ultrabrede stylesheet centreert deze grid anders opnieuw verticaal.
   Houd titel en samenvatting ook op brede schermen aan dezelfde bovenlijn. */
@media(min-width:1700px){
  html body main>.job-hero>.job-hero-grid{align-items:start!important}
  html body main>.hero.job-hero .job-summary{margin-top:-9px!important}
}
main>.hero .hero-card h2,
main>.job-hero .job-summary h2{margin:0 0 14px!important;color:var(--vac-blue)!important;font-size:25px!important}
main>.hero .hero-card p,
main>.job-hero .job-summary p{color:var(--vac-muted)!important}
main>.job-hero .trust-row{display:none!important}
main>.hero .hero-card .check-list,
main>.job-hero .job-summary .check-list{list-style:none!important;margin:18px 0 0!important;padding:0!important;display:grid!important;gap:10px!important}
main>.hero .hero-card .check-list li,
main>.job-hero .job-summary .check-list li{display:block!important;padding:11px 13px!important;border-radius:12px!important;background:#f5f8f7!important;color:#334155!important}
main>.hero .hero-card .check-list li:before,
main>.job-hero .job-summary .check-list li:before{display:none!important;content:none!important}

main>.hero+section,
main>.job-hero+section{padding:64px 0!important;background:#fff!important}
main .detail-grid,
main .job-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:30px!important;align-items:start!important}
main .content-card,
main .side-card,
main .sidebar-card{border:1px solid var(--vac-line)!important;border-radius:28px!important;background:#fff!important;box-shadow:var(--vac-shadow)!important}
main .content-card{padding:34px!important}
main .side-card,
main .sidebar-card{position:sticky!important;top:104px!important;padding:28px!important}
main .content-card h2{color:var(--vac-blue)!important}
main .hero-card h2,
main .job-summary h2,
main .side-card h2,
main .side-card h3,
main .sidebar-card h2,
main .sidebar-card h3{margin:0 0 14px!important;color:var(--vac-blue)!important;font-size:25px!important;line-height:1.12!important;letter-spacing:-.035em!important}
main .content-card p,
main .content-card li,
main .side-card p,
main .sidebar-card p{color:var(--vac-muted)!important}
main .side-card .btn,
main .sidebar-card .btn{width:100%!important;margin-top:14px!important}
main .side-card .btn + .btn,
main .sidebar-card .btn + .btn{margin-top:12px!important}
main>.job-hero .job-summary .job-facts{margin-left:0!important;padding-left:0!important}
main>.job-hero .job-summary .job-facts{display:grid!important;gap:10px!important;margin-top:18px!important}
main>.job-hero .job-summary .job-fact{margin-left:0!important;padding:11px 13px!important;border-radius:12px!important;background:#f5f8f7!important;color:#334155!important;text-align:left!important}
main .hero-actions.top-page-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin-top:24px!important}
main .hero-actions.top-page-actions .btn{width:auto!important}

@media(max-width:980px){
  main>.hero .hero-grid,
  main>.job-hero .job-hero-grid,
  main .detail-grid,
  main .job-layout{grid-template-columns:1fr!important}
  main .side-card,
  main .sidebar-card{position:static!important}
  main>.hero .hero-card,
  main>.job-hero .job-summary{margin-top:28px!important}
}
@media(max-width:640px){
  main>.hero,
  main>.job-hero{padding:48px 0 54px!important}
  main>.hero .hero-grid>*,
  main>.job-hero .job-hero-grid>*{min-width:0!important}
  main>.hero h1,
  main>.job-hero h1{font-size:clamp(34px,10vw,46px)!important;overflow-wrap:anywhere!important}
  main>.hero+section,
  main>.job-hero+section{padding:48px 0!important}
  main .content-card,
  main .side-card,
  main .sidebar-card{padding:24px!important;border-radius:24px!important}
  main .hero-actions.top-page-actions{display:grid!important;grid-template-columns:1fr!important}
  main .hero-actions.top-page-actions .btn{width:100%!important}
}

/* Lange vacaturekoppen blijven inhoudelijk volledig voor SEO, maar krijgen
   op tussen- en desktopformaten een rustigere visuele schaal. Deze regels
   staan bewust in het laatst geladen vacaturebestand. */
@media(min-width:981px){
  html body main>.hero h1.title-extra-long,
  html body main>.job-hero h1.title-extra-long{
    font-size:clamp(40px,3.25vw,48px)!important;
    line-height:1.05!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
  }
}

@media(max-width:640px){
  html body main>.hero h1.title-extra-long,
  html body main>.job-hero h1.title-extra-long{
    font-size:clamp(27px,8vw,32px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
    text-wrap:balance!important;
  }
}