/* ==================================================================
   LDL — due percorsi, due meccaniche diverse.

   Audit e sistemi  -> una pista orizzontale che si traccia da sinistra
                       e avanza di tappa in tappa.
   Compliance e gare -> un dossier che si spunta riga per riga, con il
                       segno di spunta che si disegna.

   Nessuno dei due ripete i movimenti gia' usati sul sito (le schede che
   scorrono della formazione, i livelli del modello BIM). Senza
   JavaScript entrambi restano completi e leggibili.
   ================================================================== */

/* ================================================= 1. LA PISTA
   Cinque tappe su un binario. Il tratto colorato dice a che punto si
   e' del percorso; le tappe gia' passate restano accese, piu' tenui. */

.giro-pista .section-head{margin-bottom:clamp(34px,4vw,54px)}

.pista{position:relative;--varco:clamp(14px,1.8vw,30px)}

/* Il binario corre dietro i bolli, all'altezza del loro centro, e si
   ferma esattamente sull'ultimo: con cinque colonne uguali il centro
   dell'ultimo bollo dista da destra un quinto della larghezza, meno la
   parte di varchi che gli compete, meno il raggio del bollo. */
.binario{position:absolute;left:10px;top:9px;height:2px;
  right:calc(20% - .8 * var(--varco) - 10px);
  background:var(--filo,#D3E3EA);border-radius:2px;overflow:hidden}
.binario i{display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--acqua-scuro,#00525E),var(--acqua,#007A8A));
  transform:scaleX(1);transform-origin:left center;
  transition:transform .85s cubic-bezier(.3,.9,.25,1)}
/* senza JavaScript il binario resta pieno e tutte le tappe leggibili */
html.ha-pista .binario i{transform:scaleX(0)}

.tappe{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:var(--varco);margin:0;padding:0}
.tappa{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  border:0;background:transparent;padding:0;
  -webkit-appearance:none;appearance:none}

.tappa .bollo{display:block;width:20px;height:20px;border-radius:50%;
  background:#FFFFFF;border:2px solid var(--filo,#D3E3EA);
  box-shadow:0 0 0 5px #F2F8FB;
  transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.22,1.4,.36,1)}
.tappa.passata .bollo{border-color:var(--acqua,#007A8A)}
.tappa.attiva  .bollo{border-color:var(--acqua-scuro,#00525E);
  background:var(--acqua-scuro,#00525E);transform:scale(1.22)}

.tappa .quando{display:block;margin:22px 0 5px;font-weight:800;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tenue,#3A5B67);
  transition:color .4s ease}
.tappa.passata .quando,.tappa.attiva .quando{color:var(--acqua-scuro,#00525E)}
.tappa b{display:block;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.26;
  color:var(--tenue,#3A5B67);margin-bottom:8px;transition:color .4s ease}
.tappa.passata b,.tappa.attiva b{color:var(--inchiostro,#0B2E3D)}
/* il testo resta leggibile anche sulle tappe non ancora raggiunte: a
   distinguerle bastano il bollo e il colore dei titoli */
.tappa em{display:block;font-style:normal;font-size:.93rem;line-height:1.56;
  color:var(--corpo,#44636F)}
.tappa:focus-visible{outline:3px solid var(--acqua,#007A8A);outline-offset:6px;
  border-radius:8px}
@media (hover:hover){ .tappa:hover .bollo{transform:scale(1.14)} }

/* ingresso: il binario si traccia, poi le tappe salgono una dopo l'altra */
html.ha-pista .binario i{transition:none}
html.ha-pista .pista.entra .binario i{transition:transform 1.05s cubic-bezier(.3,.9,.25,1)}
html.ha-pista .tappa{opacity:0;transform:translate3d(0,18px,0)}
html.ha-pista .pista.entra .tappa{animation:piSale .72s cubic-bezier(.22,1,.3,1) forwards;
  animation-delay:calc(260ms + var(--i,0) * 110ms)}
@keyframes piSale{from{opacity:0;transform:translate3d(0,18px,0)}
                  to  {opacity:1;transform:none}}

.giro-pista .nota-norme{font-size:.95rem;color:var(--tenue,#3A5B67);
  border-left:2px solid var(--filo,#D3E3EA);padding-left:14px;
  margin:clamp(34px,4vw,48px) 0 0;max-width:72ch}

@media(max-width:900px){
  .binario{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .binario i{width:100%;height:100%;transform:scaleY(0);transform-origin:center top;
    background:linear-gradient(180deg,var(--acqua-scuro,#00525E),var(--acqua,#007A8A))}
  .tappe{grid-template-columns:1fr;gap:26px;padding-left:40px}
  .tappa{position:relative}
  .tappa .bollo{position:absolute;left:-40px;top:2px}
  .tappa .quando{margin-top:0}
}

/* ================================================ 2. IL DOSSIER
   A sinistra i cinque passi, a destra la cartella che si riempie:
   ogni passo spunta le proprie righe, una dopo l'altra. */

.giro-dossier .split{display:grid;grid-template-columns:1fr 1.02fr;
  gap:clamp(28px,4vw,64px);align-items:start}
.giro-dossier .nota-norme{font-size:.95rem;color:var(--tenue,#3A5B67);
  border-left:2px solid var(--filo,#D3E3EA);padding-left:14px;margin-top:24px}

.fasi{list-style:none;margin:26px 0 0;padding:0;display:flex;
  flex-direction:column;gap:3px}
.fase{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:13px 14px;border:0;border-radius:12px;background:transparent;
  transition:background .3s ease}
.fase .fn{font-weight:800;font-size:.76rem;letter-spacing:.12em;padding-top:3px;
  color:var(--acqua,#007A8A);opacity:.55;transition:opacity .3s ease}
.fase b{display:block;font-size:1rem;color:var(--inchiostro,#0B2E3D)}
/* Il testo si richiude solo se c'e' il JavaScript a riaprirlo: senza,
   restano leggibili tutte e cinque le descrizioni. */
.fase em{display:block;font-style:normal;font-size:.92rem;line-height:1.52;
  color:var(--corpo,#44636F);margin-top:4px;
  transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease}
html.ha-fasi .fase em{max-height:0;overflow:hidden;opacity:0;margin-top:0}
.fase.attiva{background:#EDF5F8}
.fase.attiva .fn{opacity:1}
html.ha-fasi .fase.attiva em{max-height:9em;opacity:1;margin-top:4px}
@media (hover:hover){ .fase:hover{background:#F2F8FB} }
.fase:focus-visible{outline:3px solid var(--acqua,#007A8A);outline-offset:2px}

.cartella{border-radius:20px;padding:clamp(24px,2.4vw,34px);
  background:linear-gradient(158deg,#FFFFFF 0%,#F7FBFC 54%,#EAF3F7 100%);
  border:1px solid var(--filo,#D3E3EA);
  box-shadow:0 16px 40px rgba(11,46,61,.10)}
.cartella .testata{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--filo,#D3E3EA)}
.cartella .testata span{font-weight:800;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acqua-scuro,#00525E)}
.cartella .conta{font-weight:800;font-size:.84rem;color:var(--tenue,#3A5B67);
  font-variant-numeric:tabular-nums}

.carte{list-style:none;margin:0;padding:0}
.carta{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(11,46,61,.06);
  font-size:.95rem;color:var(--tenue,#3A5B67);
  transition:color .5s ease}
.carta:last-child{border-bottom:0}
/* le righe non ancora spuntate restano leggibili: a distinguerle basta
   il cerchio, vuoto o pieno. Testo sbiadito vuol dire testo perso. */
.carta.fatta{color:var(--inchiostro,#0B2E3D);font-weight:600}

.carta .spunta{width:22px;height:22px;border-radius:50%;display:block;
  border:1.5px solid var(--filo,#D3E3EA);
  transition:border-color .45s ease, background .45s ease}
.carta.fatta .spunta{border-color:var(--acqua,#007A8A);background:var(--acqua,#007A8A)}
.carta .spunta path{fill:none;stroke:#FFFFFF;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16}
.carta.fatta .spunta path{animation:doSegna .42s cubic-bezier(.3,.9,.25,1) forwards}
@keyframes doSegna{to{stroke-dashoffset:0}}

@media(max-width:980px){ .giro-dossier .split{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  html.ha-pista .tappa{opacity:1 !important;transform:none !important;animation:none !important}
  .binario i{transition:none !important;transform:scaleX(1) !important}
  .tappa .bollo{transition:none}
  html.ha-fasi .fase em{max-height:none;opacity:1;margin-top:4px}
  .carta{color:var(--inchiostro,#0B2E3D)}
  .carta .spunta{border-color:var(--acqua,#007A8A);background:var(--acqua,#007A8A)}
  .carta .spunta path{stroke-dashoffset:0;animation:none}
}