/* ============================================================
   Lavora con noi: la finestra della candidatura (candidature.html) e gli stili dei pass (.rk-*), usati anche da candidature-b.html e dalla bacheca.
   Le regole della rastrelliera (.rack, .rk-hang…) servivano a lavora.js, tolto il 20 ott 2026 (copia in Vibra/backup-candidature-2026-10-20/): non fanno più niente.
   Solo transform e opacity animati per fotogramma.
   ============================================================ */
.jobs { position: relative; min-height: 100svh; padding: clamp(92px, 11vh, 124px) 0 clamp(20px, 3vh, 40px); display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vh, 36px); overflow: hidden; }
.jobs__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px 48px; align-items: end; }
.jobs__head h1 { font-size: clamp(1.8rem, min(3.1vw, 5.2vh), 3.4rem); max-width: 22ch; }
/* titolo e sottotitolo a sinistra, uno sotto l'altro; "Candidati" a destra, in basso */
.jobs__head h1 { grid-column: 1; }
.jobs__head .lead { grid-column: 1; justify-self: start; max-width: 60ch; margin-top: -4px; text-wrap: balance; }   /* righe pari: niente parola sola a capo */
.jobs__head .jobs__acts { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.bars { background: currentColor; -webkit-mask: url("../img/barre.svg") 50% 100% / 120% auto no-repeat; mask: url("../img/barre.svg") 50% 100% / 120% auto no-repeat; }
@media (max-width: 860px) {
  .jobs { min-height: 0; padding-bottom: 24px; }
  .jobs__head { grid-template-columns: 1fr; }
  .jobs__head .jobs__acts { grid-column: 1; grid-row: auto; }
  /* scala dei testi su telefono (--m-* in style.css): titolo 28px, sottotitolo 16px, più vicini */
  .jobs__head { gap: 12px; }
  .jobs__head h1 { font-size: var(--m-h2); line-height: 1.05; letter-spacing: var(--m-track); }
  .jobs__head .lead { margin-top: 0; font-size: var(--m-body); line-height: 1.5; }
}

/* proporzione dei pass (e della scheda che si apre, che deve combaciare): su telefono più bassi, meno vuoto */
[data-variant="rastrelliera"] { --ratio: 1.45; }
@media (max-width: 860px) { [data-variant="rastrelliera"] { --ratio: 1.24; } }
/* niente salti: finché lavora.js non ha creato i pass, il contenitore vuoto è già alto quanto la fila finale
   (desktop: fila = --pw × --ratio + 90 px, più 50 px tra margine e padding della rastrelliera, come .rack__row qui sotto;
   telefono: 4 righe di pass in due colonne, proporzione 1,5 → 4/3 della larghezza utile + 45 px, misurato a 360–768 px) */
[data-variant="rastrelliera"]:empty { min-height: calc(clamp(140px, calc((min(100vw, 1840px) - 2 * var(--gutter)) / 7 - 18px), 230px) * var(--ratio) + 140px); }
@media (max-width: 860px) { [data-variant="rastrelliera"]:empty { min-height: calc((100vw - 2 * var(--gutter)) * 4 / 3 + 45px); } }
.rack { position: relative; padding: 18px 0 20px; perspective: 1600px; perspective-origin: 50% 20%; user-select: none; -webkit-user-select: none; }
.jobs:has([data-variant="rastrelliera"]) { overflow: visible; grid-template-rows: auto auto; align-content: start; min-height: 0; padding-bottom: 0; }   /* alto quanto il contenuto: subito sotto i pass parte la sezione dell'app */   /* inclinando la fila i pass ai lati non vengono tagliati */
/* la barra sta dentro la fila: si inclinano insieme, così i ganci non scivolano mai sulla barra */
.rack__bar { position: absolute; top: -12px; left: -8px; right: -8px; height: 12px; border-radius: 99px;
  background: linear-gradient(180deg, #4a3a66, #241536 60%, #160b24); box-shadow: 0 6px 14px -6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.rack__row { --pw: clamp(140px, calc((min(100vw, 1840px) - 2 * var(--gutter)) / 7 - 18px), 230px);
  position: relative; z-index: 3; margin-top: 12px;
  display: flex; justify-content: space-between; transform-style: preserve-3d; transform-origin: 50% 0; min-height: calc(var(--pw) * var(--ratio) + 90px); }
/* la fila e i ganci non prendono i clic: i pass più in profondità stanno dietro al loro piano (in 3D) e li perderebbero */
.rack__row, .rk-hang, .rk-swing { pointer-events: none; }
.rk-pass { pointer-events: auto; }
.rk-hang { position: relative; width: var(--pw); transform-style: preserve-3d; }
/* cordino + pass: ruotano attorno al punto in cui il cordino entra nel gancio (il gancio resta fermo) */
.rk-swing { position: absolute; inset: 0; transform-origin: 50% 4px; transform-style: preserve-3d; }
.rk-hang.is-off { z-index: 30; }
.rk-hook { position: absolute; left: 50%; top: -10px; width: 14px; height: 18px; margin-left: -7px; border: 3px solid #6b5a8c; border-top: 0; border-radius: 0 0 10px 10px; }
.rk-cord { position: absolute; left: 50%; top: 4px; width: 3px; height: var(--len); margin-left: -1.5px; border-radius: 2px; background: #551a8e; transform-origin: 50% 0; transition: opacity .3s; }
.rk-hang.is-off .rk-cord { opacity: 0; }
/* entrata (lavora.js): finché non parte, cordini e pass non si vedono; si vedono solo barra e ganci */
.rack.is-entering .rk-cord { transform: scaleY(0); }
.rack.is-entering .rk-pass { opacity: 0; }
.rk-pass { position: absolute; left: 0; top: calc(var(--len) + 2px); width: var(--pw); height: calc(var(--pw) * var(--ratio)); transform-style: preserve-3d; cursor: grab; touch-action: pan-y; }
.rk-pass.is-pulled { cursor: grabbing; }
.rk-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .rk-hang:not(.is-off) .rk-pass:hover .rk-in { transform: translateZ(12px); } }
.rk-pass.is-pulled .rk-in { transform: translateZ(12px); transition: none; }
.rk-pass.is-pulled .rk-shine { transition: none; }
.rk-face { position: absolute; inset: 0; isolation: isolate; overflow: hidden; border-radius: 14px; padding: 30px 16px 14px; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--paper); color: var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 26px 40px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.25); }
.rk-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.18), transparent 40%, transparent 72%, rgba(255,255,255,.06)); }
.rk-back { transform: rotateY(180deg); padding: 30px 16px 16px; }
.rk-plus { display: none; }
.rk-hole { position: absolute; left: 50%; top: 10px; width: 34px; height: 8px; margin-left: -17px; border-radius: 99px; background: #12071f; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.rk-k { font: 700 .66rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
/* titoli dei pass in Sora (scelto dal cliente il 18 ott): più stretto di Unbounded, quindi un po' più grande */
.rack, .rk-detail { --font-pass: "Sora", var(--font-display); }
.rk-t { margin-top: 10px; font: 800 clamp(1.05rem, 1.22vw, 1.4rem)/1.1 var(--font-pass); letter-spacing: -.03em; text-wrap: pretty; }   /* più parole per riga: frasi lunghe senza una parola per riga */
.rk-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; color: var(--ink); opacity: .22; }
/* riflesso olografico: una striscia di luce lilla che segue il puntatore */
.rk-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.04) 54%, transparent 62%);
  background-size: 180% 180%; background-position: calc(30% + var(--mx, 50%) * .4) 0; }
@media (hover: hover) and (pointer: fine) { .rk-pass:hover .rk-shine { opacity: 1; } }
.rk-pass.is-open .rk-shine { opacity: .6; }
.rk-back h3 { font: 800 1.05rem/1.12 var(--font-pass); letter-spacing: -.03em; padding-right: 26px; }
.rk-back p { margin-top: 8px; font-size: .68rem; line-height: 1.45; }
.rk-back .btn { margin-top: 10px; padding: .4rem .7rem; font-size: .62rem; }
.rk-tag { margin-top: auto; font: 700 .58rem/1 var(--font-display); opacity: .7; }
.rk-hit { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: inherit; border-radius: 14px; pointer-events: none; }   /* serve solo per la tastiera: col mouse si afferra tutto il pass */
.rk-hit:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; }
.rk-x { position: absolute; z-index: 3; top: 8px; left: 8px; width: 22px; height: 22px; font-size: .8rem; color: var(--ink); opacity: 0; pointer-events: none; transform: rotateY(180deg); transition: opacity .2s .3s; }
.rk-pass.is-open { cursor: ew-resize; }
.rk-pass.is-open .rk-hit { pointer-events: none; }
.rk-pass.is-open .rk-x { opacity: 1; pointer-events: auto; }
@media (max-width: 860px) {
  /* telefono: niente barra e niente ganci. I sette pass stanno tutti insieme in una schermata, in due colonne,
     orizzontali come badge, posati su un piano appena inclinato (3D): si toccano uno alla volta e si apre la scheda. */
  .rack { perspective: 1100px; perspective-origin: 50% 0; padding: 4px 0 8px; }
  .rack__bar, .rk-hook, .rk-cord, .rk-hang::before { display: none; }
  .rack__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 6px 0 14px; min-height: 0;
    transform: rotateX(-14deg); transform-origin: 50% 0; transform-style: preserve-3d; }   /* il piano si allontana verso il basso; lo scorrimento cambia l'inclinazione (lavora.js, effetto lente) */
  .rk-hang { width: auto; height: auto; }
  .rk-hang:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }   /* il settimo al centro, sotto */
  .rk-swing { position: relative; inset: auto; }
  .rk-pass { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1.5; touch-action: manipulation; }
  .rk-in { transform: translateZ(6px); }   /* i pass stanno appena sollevati dal piano */
  .rk-face { padding: 20px 12px 10px; border-radius: 12px; box-shadow: 0 16px 24px -14px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.25); }
  .rk-front .rk-hole { display: none; }   /* la fessura del cordino non serve più: al suo posto il "+" che dice che il pass si apre */
  .rk-plus { display: block; position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .85; }
  .rk-plus::before, .rk-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; border-radius: 2px; background: currentColor; }
  .rk-plus::after { transform: rotate(90deg); }
  .rk-face { padding-right: 36px; }
  .rk-k { font-size: var(--m-label); letter-spacing: .08em; }   /* era 9px: illeggibile (scala --m-* in style.css) */
  .rk-t { margin-top: 5px; font-size: .9rem; line-height: 1.12; letter-spacing: -.02em; }
  .rk-bars { height: 34%; }
  .rk-pass:active .rk-in { transform: translateZ(2px) scale(.97); transition: transform .12s ease; }
  .jobs__scroll { display: none !important; }   /* tutti i pass sono a schermo: non c'è niente da scorrere */
}

/* la scheda che si apre da un pass (lavora.js): fissa al centro dello schermo, a piena risoluzione */
.rk-detail { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; perspective: 1400px; }
.rk-detail[hidden] { display: none; }
.rk-detail__veil { position: absolute; inset: 0; background: rgba(8,3,14,.72); opacity: 0; }
.rk-card { --cw: min(380px, 84vw); position: relative; width: var(--cw); height: calc(var(--cw) * var(--ratio)); transform-style: preserve-3d; transform-origin: 50% 50%; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.rk-card__in { position: absolute; inset: 0; transform-style: preserve-3d; }
/* durante il volo la scheda è un livello fisso: si sposta e si scala senza essere ridisegnata a ogni fotogramma (sul telefono era il peso maggiore);
   a fine volo (is-anim tolto, lavora.js) torna normale e si ridisegna una volta, nitida */
.rk-detail.is-anim .rk-card, .rk-detail.is-anim .rk-card__in { will-change: transform; }
.rk-cface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rk-cfront .rk-mini { position: absolute; left: 0; top: 0; right: auto; bottom: auto; transform-origin: 0 0; }
.rk-cback { transform: rotateY(180deg); overflow: hidden; isolation: isolate; border-radius: 22px; padding: 46px 30px 28px; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--paper); color: var(--ink); box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.25); }
.rk-cback::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 40%, transparent 72%, rgba(255,255,255,.05)); }
.rk-cback .rk-hole { top: 16px; width: 54px; height: 12px; margin-left: -27px; }
.rk-cback .rk-k { font-size: .8rem; margin-bottom: 10px; }
.rk-cback h3 { font: 800 clamp(1.65rem, 2.5vw, 2.05rem)/1.08 var(--font-pass); letter-spacing: -.04em; padding-right: 40px; }
.rk-cback .rk-bars { height: 24%; }
.rk-cback .rk-tag { position: relative; z-index: 1; margin-bottom: 4px; }
.rk-cback p { margin-top: 14px; font-size: 1.1rem; line-height: 1.55; }
.rk-cback .btn { margin-top: 18px; }
.rk-cback .rk-tag { margin-top: auto; font-size: .85rem; }
/* a fine giro: niente 3D, il retro è piatto e nitido */
.rk-detail.is-back .rk-cfront { display: none; }
.rk-detail.is-back .rk-cback { transform: none; }
.rk-card__x { position: absolute; z-index: 3; top: 14px; right: 14px; width: 38px; height: 38px; color: var(--ink); opacity: 0; transition: opacity .2s; }
.rk-detail.is-back .rk-card__x, .rk-detail.is-spin .rk-card__x { opacity: 1; }   /* mentre la giri col mouse la × resta */

.bc__x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: transform .16s ease-out; }
.bc__x:active { transform: scale(.94); }

/* telefono: "Scorri →" sotto il titolo, a destra; la freccia accenna il movimento; sparisce appena si scorre la barra (lavora.js) */
.jobs__scroll { display: none; }
@media (max-width: 860px) {
  .jobs__scroll { display: flex; justify-self: end; align-items: center; gap: 8px; margin-top: -4px; font: 700 .72rem/1 var(--font-body); letter-spacing: .14em;
    text-transform: uppercase; color: #c4a1ff; transition: opacity .4s ease; }
  .jobs__scroll span { font-size: 1rem; letter-spacing: 0; animation: jobs-nudge 1.6s var(--ease) infinite; }
  .jobs__scroll.is-gone { opacity: 0; }
}
@keyframes jobs-nudge { 0%, 100% { transform: none; } 45% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .jobs__scroll span { animation: none; } }

/* "Candidati" accanto al titolo (desktop: a destra, in basso; telefono: sotto il titolo, con "Scorri →" a destra) */
.jobs__acts { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.jobs__apply span { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .jobs__apply:hover span { transform: translateX(4px); } }
@media (max-width: 860px) {
  .jobs__acts { justify-content: space-between; }
  .jobs__acts .jobs__scroll { margin-top: 0; }
  .jobs__apply { padding: .8rem 1.3rem; font-size: .92rem; }
}

/* ---------- la candidatura: una finestra trasparente sopra la pagina (candidati.js) ----------
   La pagina dietro è appena scurita; il pannello è vetro smerigliato: semitrasparente e sfocato (si vedono colori e forme, non le scritte).
   Mentre la finestra è aperta la fila dei pass è ferma (lavora.js), così la sfocatura non si ricalcola di continuo. */
.apply { width: min(520px, 100vw - 32px); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: #f7f3ff; overflow: visible; }
/* lo sfondo dietro la finestra è solo scurito: la sfocatura sta sul pannello */
.apply::backdrop { background: rgba(8,3,14,.45); }
.apply__x { position: absolute; z-index: 2; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(247,243,255,.3);
  background: rgba(255,255,255,.04); color: #f7f3ff; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .25s; }
.apply__x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .apply__x:hover { background: rgba(255,255,255,.12); } }
.apply__x:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

.jobs-form { --ink: #f7f3ff; max-width: none; display: grid; gap: 24px; padding: 34px 32px 30px; border-radius: 18px; color: var(--ink);
  background: rgba(30, 11, 58, .55); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid rgba(247,243,255,.16); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.jobs-form__note { display: grid; gap: 8px; padding-right: 48px; }
.jobs-form__note b { font: 800 clamp(1.6rem, 3vw, 2rem)/1 var(--font-display); letter-spacing: -.02em; }
.jobs-form__note span { font-size: .95rem; line-height: 1.4; color: rgba(247,243,255,.7); }
.jobs-form fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 14px; min-width: 0; }
.jobs-form .field { flex: 1 1 calc(50% - 7px); min-width: 0; gap: 7px; }
.jobs-form .field:first-child { flex-basis: calc(100% - 102px); }
.jobs-form .field--eta { flex: 0 0 88px; }
.jobs-form .field label { font: 700 .7rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(247,243,255,.6); }
.jobs-form .field input, .jobs-form .field select { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(247,243,255,.16);
  background: rgba(255,255,255,.05); color: var(--ink); font: 600 1rem/1 var(--font-body); transition: border-color .2s, background .2s; }
.jobs-form .field select { appearance: none; -webkit-appearance: none; padding-right: 30px; text-overflow: ellipsis; cursor: pointer;
  background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c4a1ff' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 10px 6px no-repeat; }
.jobs-form .field select option { color: #1a0b2e; }
.jobs-form .field input:focus, .jobs-form .field select:focus { outline: 0; border-color: #c4a1ff; background-color: rgba(155,92,240,.1); }
.jobs-form__go { flex: 1 1 100%; justify-content: center; height: 50px; margin-top: 8px; font-size: .95rem; }
.jobs-form .form__ok { padding: 14px 16px; font-size: .92rem; }
@media (max-width: 600px) {
  .apply { width: calc(100vw - 24px); }
  .jobs-form { padding: 28px 20px 22px; gap: 20px; }
  .jobs-form .field--eta { flex-basis: 76px; }
  .jobs-form .field:first-child { flex-basis: calc(100% - 90px); }
  .jobs-form .field input, .jobs-form .field select { font-size: 1rem; padding-left: 12px; }
  .jobs-form .field select { padding-right: 28px; background-position: right 11px center; }
  .jobs-form .field:nth-child(n+3) { flex-basis: 100%; }   /* telefono e ruolo a tutta larghezza: il ruolo si legge intero */
}