/* ==========================================================================
   Blocco LA SCALETTA — responsive
   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui e una mia scelta
   di riflusso. Nessuna riga fuori da @media.

   A >= 1512 la sezione resta identica al mockup: cinque card da 800, rientro
   di 160 per gradino, l'ultima ancorata a destra, blocco alto 788.

   ⚠️ La diagonale e il punto delicato. A 1512 le card occupano
   800 + 4 x 160 = 1440 px, cioe piu del contenitore stesso (1432): a stare
   dentro ci pensa il fatto che l'ultima card e ancorata a destra e non a
   `left: 640`. Appena il contenitore si stringe, il rientro fisso di 160
   diventa scroll orizzontale — e infatti senza queste regole a 375px la
   pagina sborda di 464 px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Il rientro smette di essere fisso
   Diventa la quota di spazio che avanza: (larghezza utile - 800) / 4. Cosi la
   quinta card arriva sempre esattamente a filo destro, la prima sempre a filo
   sinistro, e quando il contenitore scende sotto gli 800 il rientro si annulla
   da solo invece di diventare negativo (di qui il max con 0).
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .scaletta-passo {
    margin-left: max(0px, calc(var(--i) * (100% - 800px) / 4));
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — la scaletta diventa una colonna
   Sotto i 1024 il contenitore e gia sotto gli 800 e la diagonale sparisce da
   sola. Qui si dichiara esplicitamente, cosi il comportamento non dipende da
   un calcolo che si annulla per caso.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .scaletta-passo {
    width: 100%;
    margin-left: 0;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .scaletta-passo {
    padding: var(--space-4);                    /* 40 -> 32, MIO */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   Il rientro di 36 del numero su una card larga ~343 mangia un decimo della
   riga: si stringe con il resto.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .scaletta-passo { padding: 24px; }
  .scaletta-passo__titolo { padding-left: 28px; }
}