/* Carrièrebucketlist — één beeldrichting: groot beeld, grote typografie, weinig tekst bij de eerste keuze.
   Alleen tokens uit jobjob-ux.css; geen losse kleuren. Beweging alleen als versterking (150–250 ms), uit bij reduced motion. */
.cb{--cb-t:.22s}
.cb .photo{margin:0}
.cb section[id],.cb .band[id]{scroll-margin-top:calc(var(--header-h) + 56px)}
.cb.has-samenvatting{padding-bottom:0}
.cb-hero{position:relative;isolation:isolate;min-height:min(72vh,720px);display:grid;align-items:end;color:var(--ink)}
.cb-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--surface-2)}
.cb-hero-media .photo{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;height:100%}
.cb-hero-media .photo img{transform:scale(1.02);transition:opacity var(--cb-t) ease,transform 1.4s cubic-bezier(.22,1,.36,1)}
.cb-hero-media .photo .cap{top:14px;bottom:auto;left:auto;right:14px}
.cb-hero-media.is-wissel .photo img{opacity:.35;transform:scale(1.04)}
.cb-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 10%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,var(--bg) 100%)}
.cb-hero-tekst{position:relative;z-index:1;padding-block:var(--s-12) var(--s-8);max-width:var(--content-max)}
.cb-hero-tekst .breadcrumb{margin-bottom:var(--s-3)}
.cb-hero-tekst .display{max-width:16em;text-wrap:balance}
.cb-hero-tekst .lead-lg{max-width:38em}
.cb-hero-tekst .hero-note{flex-wrap:wrap}
.cb-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(120% 90% at 20% 10%,var(--lime-soft) 0%,var(--surface-2) 45%,var(--surface-3) 100%)}
.cb-fallback-hero{background:radial-gradient(90% 70% at 75% 25%,var(--lime-soft) 0%,var(--surface-2) 40%,var(--bg) 100%)}
.cb-fallback span{display:grid;gap:4px}.cb-fallback b{font-size:var(--fs-xl)}.cb-fallback small{color:var(--ink-soft);font-weight:500}

/* Keuzegalerij: swipe op mobiel, raster op desktop */
.cb-keuzes{padding-block:var(--s-8)}
.cb-sectiekop{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);align-items:end;justify-content:space-between;margin-bottom:var(--s-4)}
.cb-sectiekop h2{margin:0}
.cb-filters{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cb-filters .pill{cursor:pointer}
.cb-filters .pill.is-on{border-color:var(--green);color:var(--green);background:var(--lime-soft)}
.cb-galerij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.cb-kaart{position:relative;display:grid;gap:var(--s-3);padding:var(--s-3);border:1.5px solid var(--border-soft);border-radius:var(--r-xl);background:var(--surface);transition:border-color var(--cb-t) ease,transform var(--cb-t) ease,box-shadow var(--cb-t) ease}
.cb-kaart:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cb-kaart.is-gekozen{border-color:var(--green);box-shadow:0 0 0 3px var(--lime-soft)}
.cb-kaart.is-weg{display:none}
.cb-kaart .photo{--ratio:4/3}
.cb-kaart-tekst{display:grid;gap:6px}.cb-kaart-tekst b{font-size:var(--fs-lg);line-height:1.2}
.cb-kaart .cb-kies{justify-self:start;min-height:44px}
.cb-kaart.is-gekozen .cb-kies{background:var(--surface-3);border-color:var(--green);color:var(--ink)}
.cb-galerij-hint{display:none;margin:var(--s-2) 0 0}
@media (max-width:860px){
  .cb-galerij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);padding:4px 16px var(--s-3);margin-inline:-16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cb-galerij::-webkit-scrollbar{display:none}
  .cb-galerij .cb-kaart{flex:0 0 72vw;scroll-snap-align:start}
  .cb-galerij .cb-kaart.is-weg{display:none}
  .cb-galerij-hint{display:block}
  .cb-hero{min-height:auto}
  .cb-hero-media{position:relative;aspect-ratio:4/3}
  .cb-hero-media .photo{position:absolute}
  .cb-hero-media::after{background:linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
  .cb-hero-tekst{padding-block:var(--s-4) var(--s-6)}
}
@media (max-width:560px){.cb-galerij .cb-kaart{flex-basis:82vw}}

/* Vaste samenvatting van de keuze */
.cb-samenvatting{position:sticky;top:var(--header-h);z-index:5;background:var(--surface);border-block:1px solid var(--border-soft);box-shadow:var(--shadow-1)}
.cb-samenvatting .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-2)}
.cb-samenvatting-keuze{display:grid;line-height:1.2;min-width:0}
.cb-samenvatting-keuze b{font-size:var(--fs-md)}.cb-samenvatting-keuze span{font-size:var(--fs-xs);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){.cb-samenvatting{position:fixed;top:auto;bottom:0;left:0;right:0;border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.cb.has-samenvatting{padding-bottom:72px}}

/* Invoer */
.cb-invoer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);gap:var(--s-10);align-items:start;padding-block:var(--s-8)}
.cb-form{display:grid;gap:var(--s-3)}
.cb-form-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s-3)}
.cb-form .pillset .pill{min-height:44px}
.cb-checkbox{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);cursor:pointer}
.cb-checkbox input{width:20px;height:20px;margin-top:2px;accent-color:var(--green)}
.cb-checkbox small{display:block;color:var(--ink-faint)}
.cb-form .error[hidden]{display:none}
@media (max-width:860px){.cb-invoer-grid{grid-template-columns:1fr;gap:var(--s-6)}.cb-form-rij{grid-template-columns:1fr}}

/* Uitkomst */
.cb-uitkomst{padding-block:var(--s-8)}
.cb-uitkomst[aria-busy="true"] .cb-uitkomst-inhoud{opacity:.5;transition:opacity .16s ease}
.cb-uitkomst[hidden]{display:none}
.cb-uitkomst .pillset .pill{cursor:pointer;min-height:40px}
.cb-telling{list-style:none;margin:var(--s-4) 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
.cb-telling li{display:grid;gap:2px;padding:var(--s-4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-soft)}
.cb-telling b{font-size:var(--fs-2xl);line-height:1;color:var(--ink)}
.cb-telling span{font-size:var(--fs-sm);color:var(--ink-soft)}
.cb-telling li.is-hoofd{border-color:var(--green);background:var(--lime-soft)}
.cb-telling li.is-hoofd b{color:var(--lime-ink)}
.cb-meter{height:10px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;margin:var(--s-2) 0}
.cb-meter span{display:block;height:100%;background:var(--green);width:0;transition:width .25s ease}
.cb-werkgevers{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.cb-werkgever{display:grid;gap:var(--s-2);padding:var(--s-4)}
.cb-status{display:grid;gap:2px;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);border-left:4px solid var(--border-strong);background:var(--surface-2)}
.cb-status span{font-size:var(--fs-xs);color:var(--ink-soft)}
.cb-status-ok{border-left-color:var(--ok);background:var(--ok-bg)}
.cb-status-info{border-left-color:var(--info);background:var(--info-bg)}
.cb-status-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.cb-status-risk{border-left-color:var(--risk);background:var(--risk-bg)}
.cb-status-muted{border-left-color:var(--border-strong)}
.cb-vergelijk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.cb-vergelijk button{all:unset;cursor:pointer;display:grid;gap:4px;padding:var(--s-4);border-radius:var(--r-lg);border:1.5px solid var(--border-soft);background:var(--surface);transition:border-color var(--cb-t) ease}
.cb-vergelijk button:focus-visible{outline:none;box-shadow:var(--focus)}
.cb-vergelijk button.is-on{border-color:var(--green)}
.cb-vergelijk b{font-size:var(--fs-2xl);line-height:1}
.cb-vergelijk span{font-size:var(--fs-sm);color:var(--ink-soft)}
.cb-skeleton{display:grid;gap:var(--s-3)}.cb-skeleton div{height:64px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:cb-shimmer 1.2s linear infinite}
@keyframes cb-shimmer{to{background-position:-200% 0}}
@media (max-width:860px){.cb-telling{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-werkgevers{grid-template-columns:1fr}.cb-vergelijk{gap:var(--s-2)}.cb-vergelijk button{padding:var(--s-3)}.cb-vergelijk .tiny{display:none}.cb-vergelijk b{font-size:var(--fs-xl)}}

/* Mijn voorwaarden */
.cb-wensen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin:var(--s-4) 0}
.cb-wens{display:grid;gap:var(--s-3);padding:var(--s-4);border:1.5px solid var(--border-soft);transition:border-color var(--cb-t) ease}
.cb-wens.is-aan{border-color:var(--green)}
.cb-wens-kop{display:grid;gap:2px}.cb-wens-kop b{font-size:var(--fs-lg);line-height:1.2}
.cb-wens .select{min-height:44px}
.cb-login{margin-top:var(--s-4)}
.cb-login .btn{margin-top:var(--s-2);margin-right:var(--s-2)}
@media (max-width:860px){.cb-wensen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cb-wensen{grid-template-columns:1fr}}

/* Uitleg, FAQ, bronnen */
.cb-uitleg{padding-block:var(--s-8)}
.cb-uitleg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.cb-faq{display:grid;gap:var(--s-2)}
.cb-faq details{padding:var(--s-3) var(--s-4)}
.cb-faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.cb-faq p{margin:var(--s-2) 0 0;color:var(--ink-soft)}
.cb-bronnen ul{padding-left:1.2em}
.cb-bronnen li{margin:.4em 0;overflow-wrap:anywhere}
@media (max-width:860px){.cb-uitleg-grid{grid-template-columns:1fr}}

/* Overzichtspagina */
.cb-overzicht-hero{padding-block:var(--s-8) var(--s-6)}
.cb-wensgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.cb-wenskaart{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform var(--cb-t) ease,box-shadow var(--cb-t) ease}
.cb-wenskaart:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cb-wenskaart .photo{border-radius:0}
.cb-wenskaart-tekst{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:var(--s-5);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--navy) 85%,transparent));color:var(--white)}
.cb-wenskaart-tekst b{font-size:var(--fs-xl);line-height:1.2}
.cb-wenskaart-tekst span{font-size:var(--fs-sm);opacity:.9}
@media (max-width:640px){.cb-wensgrid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .cb-hero-media .photo img,.cb-kaart,.cb-wenskaart,.cb-meter span,.cb-vergelijk button{transition:none}
  .cb-hero-media.is-wissel .photo img{transform:none}
  .cb-skeleton div{animation:none}
}