/* ==========================================================================
   Blocco condiviso — DUE PASSAGGI A SCROLL BLOCCATO (frase + immagine)
   Compliance `Outcome` 63:1564 · 1512 x 1058

   ⚠️ CAMBIO DI NATURA — richiesta di Andrea, 26 ago 2026.
   Prima: una finestra alta una riga (58px) dentro cui le due frasi
   scorrevano in ciclo continuo con una @keyframes, sopra un'immagine sola e
   ferma. Adesso: due PASSAGGI. La sezione si blocca centrata nella finestra
   e lo scroll fa avanzare frase E immagine insieme, come in `How Vidim
   Helps` e nel workflow.

   Conseguenza sul markup: ogni passo si porta dietro la propria immagine, e
   i passi stanno TUTTI nella stessa cella di griglia, sovrapposti. Questo e
   quel che tiene ferma l'altezza della sezione: vale il passo piu alto, non
   la somma, quindi non cambia ne al cambio di passo ne aggiungendone uno.

   ⚠️ Chi anima e animations.js (initScorre). Qui si dichiara solo lo stato
   STATICO — primo passo visibile, gli altri a opacita 0 — che e quello che
   si vede senza JavaScript ed e identico al mockup. Gli altri passi restano
   pero raggiungibili: sotto i 1024, e quando le animazioni sono spente,
   la pila si srotola (vedi responsive/29-compliance.css e la classe
   `scorre--srotolato` che mette interfaccia.js).

   Verifica altezza: 160 + 58 (riga) + 80 + 600 (immagine) + 160 = 1058 ✔
   ========================================================================== */

.scorre {
  --riga: 58px;                        /* una riga di titolo 48/58 */
  --scorre-stacco: var(--space-6);     /* 80 — fra la frase e l'immagine */
  --scorre-media: 600px;
}

/* La cella unica in cui i passi si sovrappongono. */
.scorre__passi {
  display: grid;
  width: 100%;
}

.scorre__passo {
  grid-area: 1 / 1;                    /* tutti nella stessa cella */
  display: flex;
  flex-direction: column;
  gap: var(--scorre-stacco);
  min-width: 0;
}

/* Stato statico: si vede il primo, gli altri sono pronti a entrare.
   ⚠️ `visibility` oltre all'opacita: un passo a opacita 0 resta cliccabile e
   leggibile dagli screen reader, e sopra il passo visibile ci sono due
   titoli sovrapposti che si annullano a vicenda. `initScorre` la rimette a
   `visible` sui passi che sta animando. */
.scorre__passo:not(.is-attivo) {
  opacity: 0;
  visibility: hidden;
}

.scorre__riga {
  /* ⚠️ Altezza fissa a una riga: e la misura del mockup e quel che rende
     l'altezza della sezione indipendente da quale frase e in scena. Le frasi
     sono `nowrap`; sotto i 768 il corpo si riduce (vedi il responsive). */
  height: var(--riga);
  color: var(--text-on-light);
  text-align: center;
  white-space: nowrap;
}

.scorre__media {
  width: 100%;
  height: var(--scorre-media);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.scorre__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- La pila srotolata ----------------------------------------------------
   Quando non c'e nessuno scroll a far avanzare i passi — animazioni ridotte,
   GSAP non caricato — i passi non possono restare sovrapposti: si vedrebbe
   solo il primo e il secondo sarebbe irraggiungibile. Diventano quello che
   sono, due blocchi in colonna.
-------------------------------------------------------------------------- */
.scorre--srotolato .scorre__passi {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);                 /* 160, come il padding di sezione */
}

.scorre--srotolato .scorre__passo {
  opacity: 1;
  visibility: visible;
}