/* ==========================================================================
   Blocchi introdotti da Compliance — responsive
   Tabella di confronto, Visibility, Testo che scorre.
   PROVVISORIO. Nessuna riga fuori da @media.
   ========================================================================== */

/* --- TABELLA DI CONFRONTO ------------------------------------------------
   Una tabella a due colonne non si "impila" senza perdere il confronto, che
   e tutto il suo senso: la riga di sinistra ha significato solo accanto a
   quella di destra. Quindi sotto una certa larghezza NON si trasforma: si fa
   scorrere in orizzontale dentro il suo contenitore, con una larghezza
   minima che tiene le due colonne leggibili.
   E l'unico punto del progetto in cui uno scroll orizzontale e voluto — e
   sta dentro un contenitore, non nella pagina.
-------------------------------------------------------------------------- */
/* ⚠️ 8 set 2026 — NIENTE PIU SCORRIMENTO NEMMENO SUL TABLET.
   Il `min-width: 720px` qui sotto veniva da quando la tabella si stringeva a
   fisarmonica; con `table-layout: fixed` non e piu necessario, e a 768 il
   contenitore e largo 688: la tabella usciva di 32px e bisognava trascinarla
   di lato per leggere la colonna «After». Misurato, non stimato — ed era
   identico in italiano e in inglese.
   Ora le due colonne valgono 344px l'una: piu larghe dei 360 del minimo di
   prima meno i padding, quindi non si perde niente in leggibilita.
   Il contenitore resta `overflow-x: auto` e mantiene `tabindex`/`role`: se un
   domani si aggiunge una terza colonna, torna a scorrere da solo invece di
   sfondare la pagina. */
@media (max-width: 1023px) {
  .confronto__scorrevole {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .confronto__tabella {
    min-width: 0;
    table-layout: fixed;               /* due colonne esatte, 50% e 50% */
  }

  .confronto__tabella td,
  .confronto__tabella thead th {
    padding: var(--space-3);           /* 16 invece di 24 */
  }
}

/* --- SUL TELEFONO LE DUE COLONNE RESTANO AFFIANCATE ----------------------
   ⚠️ 8 set 2026 — SOSTITUISCE L'IMPILAMENTO A COPPIE DEL 7 SET.
   Il 7 avevo trasformato la tabella in blocchetti «prima» + «dopo» impilati,
   per via dei mezzi schermi bianchi che Andrea aveva segnalato. Il giorno
   dopo ha chiesto di rivederla «come da Figma»: nel file non esiste nessun
   frame mobile, quindi il riferimento e il mockup a 1512 — due colonne
   affiancate — e quella e la scelta che ha confermato.

   Le due colonne restano quindi una accanto all'altra a ogni larghezza e si
   stringono insieme alla pagina: a 390px ogni cella vale circa 155px.

   ⚠️ E QUI TORNA IL PROBLEMA DEI VUOTI, e va detto invece che nascosto: in
   una <table> le due celle di una riga sono alte uguale per costruzione, e
   quella con il testo piu lungo detta l'altezza a entrambe. La differenza
   rispetto a prima e che adesso si vedono TUTTE E DUE, quindi quel vuoto si
   legge come allineamento e non come un buco.
   Si fa solo quel che si puo per ridurlo: padding piu stretti, corpo del
   testo ridotto, e le parole lunghe che possono spezzarsi invece di allargare
   la colonna.

   Niente piu scorrimento orizzontale e niente piu `min-width`: la tabella sta
   dentro lo schermo, che era il punto di partenza della segnalazione del
   7 set («rivedere dimensioni colonne in modo che non escano dalla larghezza
   dello schermo»).
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .confronto__scorrevole {
    overflow-x: visible;
  }

  .confronto__tabella {
    min-width: 0;                      /* niente scorrimento: ci sta dentro */
    table-layout: fixed;               /* due colonne esatte, 50% e 50% */
  }

  .confronto__tabella td,
  .confronto__tabella thead th {
    padding: 12px;
  }

  /* L'intestazione ristampata dentro la cella non serve piu: le due colonne
     hanno di nuovo la loro intestazione in cima, visibile. */
  .confronto__tabella td::before {
    content: none;
  }

  /* Su una colonna da ~155px il corpo normale fa righe di tre parole e le
     celle diventano altissime. 14/18 e il compromesso: si legge e la tabella
     resta di un'altezza sensata. */
  .confronto__tabella .t-body,
  .confronto__tabella thead th {
    font-size: 14px;
    line-height: 18px;
  }

  /* La riga icona + testo su una colonna stretta: l'icona sopra, il testo
     sotto, cosi al testo restano tutti i 155px invece di 123. */
  .confronto__cella {
    flex-direction: column;
    gap: 6px;
  }

  /* Una parola piu lunga della colonna allargherebbe la tabella e la
     farebbe uscire dallo schermo: qui puo spezzarsi. E' il male minore, e
     riguarda solo parole come «documentazione» su 155px. */
  .confronto__cella .t-body {
    overflow-wrap: anywhere;
  }
}

/* --- VISIBILITY ----------------------------------------------------------
   ⚠️ 7 set 2026 — IL RIQUADRO SEGUE LA FORMA DELLO SCHEMA. Andrea ha chiesto
   che questa immagine «non si tagli ma si ridimensioni»: adesso e in
   `contain` (vedi assets.css), quindi non si taglia piu. Ma il riquadro era
   alto 463 FISSI e solo la larghezza si stringeva: a 1024 diventava 452x463,
   quasi quadrato, e un'immagine 3:2 dentro un quadrato lascia 160px di bande
   vuote sopra e sotto.
   Con il rapporto del mockup — 696/463 = 1.503, cioe esattamente quello del
   file 1392x926 — il riquadro si rimpicciolisce mantenendo la forma: niente
   ritaglio e niente bande. A 1512 non cambia nulla, li 696x463 sono i numeri
   di Figma.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .visibility__media {
    /* ⚠️ Anche `align-self`, altrimenti il rapporto non conta niente: il
       riquadro e dichiarato `stretch` e si allunga fino all'altezza della
       colonna di testo accanto, che sotto i 1512 e piu alta. Misurato a
       1440: con il solo aspect-ratio veniva 660x482 invece di 660x439.
       `flex-start` lo riporta in cima, allineato al titolo come nel mockup. */
    align-self: flex-start;
    height: auto;
    aspect-ratio: 696 / 463;
  }
}

@media (max-width: 1279px) {
  /* 160 di gap fra il titolo e il paragrafo lungo funzionano su una colonna
     da 696. Quando si stringe diventano un buco. */
  .visibility__col { gap: var(--space-6); }
}

/* ⚠️ SUL TELEFONO QUEL GAP SCENDE ANCORA, e la regola sta in
   responsive/45-mobile-7set.css insieme alle altre della stessa passata:
   Andrea ha chiesto di togliere lo spazio fra i due paragrafi, non solo di
   ridurlo. Qui resta il gradino intermedio dei laptop. */

@media (max-width: 1023px) {
  .visibility__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  /* ⚠️ 7 set 2026 — L'IMMAGINE ERA ALTA ZERO, ed e il difetto che Andrea ha
     segnalato come «manca l'immagine dopo il paragrafo». Stessa causa
     dell'Hero delle pagine interne: `.visibility__media` e `flex: 1 1 0`, e
     in una colonna il `flex-basis` governa l'ALTEZZA. Base 0, nessuna
     altezza di riga da distribuire, `height: auto` che non dice niente:
     l'`aspect-ratio` non aveva una misura da cui partire e il riquadro
     restava alto 0. Misurato a 390 e a 768: 358x0 e 688x0.
     `flex: 0 0 auto` ridà all'immagine la sua altezza. */
  .visibility__media {
    flex: 0 0 auto;
    align-self: auto;
    height: auto;
    aspect-ratio: 696 / 463;
    order: -1;                         /* l'immagine sale sopra il testo */
  }

  .visibility { padding-bottom: 0; }
}

/* --- OUTCOME A DUE PASSAGGI ---------------------------------------------
   ⚠️ LE FRASI VANNO A CAPO SOLO QUI SOTTO. Da 1024 in su sono `nowrap` e
   alte esattamente una riga: e quella misura fissa a rendere l'altezza della
   sezione indipendente da quale frase e in scena, che e cio che permette di
   sovrapporre i passi senza che la pagina sotto si muova al cambio.
   Sotto i 1024 i passi sono srotolati e quel vincolo non serve piu: la frase
   piu lunga a 48px e larga circa 700px e su un telefono sfonderebbe, quindi
   torna a comportarsi come un titolo qualsiasi e va a capo. Il corpo lo
   scala gia il clamp del core (30-48px), non serve ritoccarlo qui.

   ⚠️ Prima della revisione del 26 ago 2026 la frase stava dentro una
   finestra con `overflow: clip`: su schermi stretti non sfondava perche
   veniva TAGLIATA. Non era una soluzione, era il difetto nascosto.
-------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* Sotto la larghezza di progetto l'immagine perde l'altezza fissa: un box
     600px alto con `contain` lascerebbe due fasce vuote sopra e sotto. */
  .scorre__media {
    height: auto;
    aspect-ratio: 1432 / 600;
  }
}

/* <= 1023 · LA PILA SI SROTOLA
   Da qui in giu niente pin (lo smonta gsap.matchMedia, come ovunque nel
   tema): senza scroll bloccato non c'e niente che faccia avanzare i passi, e
   sovrapposti resterebbero con il secondo irraggiungibile. Diventano due
   blocchi in colonna, frase e immagine, uno dopo l'altro. */
@media (max-width: 1023px) {
  .scorre__passi {
    display: flex;
    flex-direction: column;
    gap: 96px;                         /* stessa scala del padding di sezione */
  }

  .scorre__passo {
    opacity: 1;
    visibility: visible;
  }

  .scorre { --scorre-stacco: var(--space-5); }   /* 80 -> 40 */
}


/* --------------------------------------------------------------------------
   <= 1279 · la frase torna un titolo normale

   ⚠️ 4 set 2026 — QUESTA REGOLA ERA A 1023 E ADESSO E A 1279, ed e la
   correzione di uno sbordamento vero: a 1024 il contenitore e largo 944 e la
   frase nuova del secondo passo — «Build a traceable record of what
   happened», che ha sostituito «Prove it happened» — misura 966px a 48px di
   corpo. Con `nowrap` sbordava di 22px.

   Il taglio a 1279 non e a occhio: a 1280 il contenitore e 1200 e la frase ci
   sta comoda; sotto, no. E' quindi la prima larghezza in cui il `nowrap` non
   e piu sostenibile per la frase piu lunga.

   ⚠️ Da qui in giu la sezione puo diventare piu alta, perche una frase su due
   righe si porta i suoi 58px: e voluto, sotto i 1512 le altezze fisse sono
   gia rilasciate. A 1512 non cambia niente e il mockup resta rispettato.

   Se un domani arriva una frase ancora piu lunga, il posto da guardare e
   questo: il valore da alzare e il 1279.
-------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .scorre__riga {
    white-space: normal;
    height: auto;
  }
}

/* --- IN ITALIANO LA SOGLIA E MOLTO PIU ALTA ------------------------------
   ⚠️ 4 set 2026, misurando le pagine italiane a tutte le larghezze — cosa che
   fino a oggi nessun controllo faceva: `audit` girava solo su render/, cioe
   solo in inglese.

   La frase piu lunga di Compliance in italiano — «Costruisci una
   registrazione tracciabile di quel che e stato fatto» — e larga 1416px
   contro i ~1180 dell'inglese. Il taglio a 1279 e stato calcolato
   sull'inglese e in italiano non basta:

     1280  contenitore 1200 · frase 1416 → sborda di 216, e la pagina diventa
           larga 1456 su 1280: barra orizzontale su tutto il sito;
     1440  contenitore 1360 · frase 1416 → sborda di 56;
     1512  contenitore 1432 · frase 1416 → ci sta, con 16px di margine.

   Quindi in italiano il `nowrap` regge SOLO alla larghezza del mockup. Sotto
   i 1496 (1416 + i 40+40 di gutter) la frase deve poter andare a capo.
   L'inglese non si sposta: la sua soglia resta 1279.

   Se arriva una frase italiana ancora piu lunga, il numero da alzare e
   questo 1495 — e si trova rimisurando come sopra.
   -------------------------------------------------------------------------- */
@media (max-width: 1495px) {
  :lang(it) .scorre__riga {
    white-space: normal;
    height: auto;
  }
}

@media (max-width: 767px) {
  .scorre { --scorre-stacco: 32px; }

  .scorre__passi { gap: 64px; }
}

@media (max-width: 479px) {
  .scorre { --scorre-stacco: 24px; }
}


/* --------------------------------------------------------------------------
   >= 1024 · LA SEZIONE DEVE STARE NELLA FINESTRA
   ⚠️ Non e una regola di riflusso: e un vincolo dell'animazione, lo stesso
   gia applicato a `How Vidim Helps` (04) e al workflow (25). Da 1024 in su
   questa sezione viene BLOCCATA, e una sezione bloccata piu alta della
   finestra e mutilata — la parte che sporge non e raggiungibile da nessuno
   scroll, perche in quel tratto lo scroll sta pilotando l'animazione.
   Su un MacBook 13" (finestra ~730px) di 1058px ne resterebbero fuori 328,
   cioe piu di meta immagine.

   A mockup: 160 + 58 (frase) + 80 (stacco) + 600 (immagine) + 160 = 1058.
   Qui quei valori diventano il MASSIMO invece che misure fisse:
     - il padding cede per primo, fino a 56px;
     - poi cede l'altezza dell'immagine, mai la frase.
   Su una finestra alta almeno 1058 il calcolo restituisce esattamente 160 e
   600, quindi il mockup e rispettato al pixel e non cambia nulla.

     finestra 1058+ -> padding 160, immagine 600  (= mockup)
     finestra  900  -> padding  81, immagine 600
     finestra  800  -> padding  56, immagine 550
     finestra  730  -> padding  56, immagine 480
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .scorre {
    /* 738 = 58 (frase) + 80 (stacco) + 600 (immagine) */
    --scorre-pad: clamp(56px, (100vh - 738px) / 2, 160px);
    --scorre-media: min(600px, max(300px, 100vh - 2 * var(--scorre-pad) - 138px));
    padding-block: var(--scorre-pad);
  }

  /* Annulla l'aspect-ratio del blocco <= 1511, che qui detterebbe di nuovo
     l'altezza: l'immagine e `contain`, quindi rimpicciolendo il riquadro la
     schermata si rimpicciolisce con lui senza deformarsi. */
  .scorre__media {
    height: var(--scorre-media);
    aspect-ratio: auto;
  }
}


/* ==========================================================================
   <= 1023 · I PASSI TORNANO SOVRAPPOSTI, E SI BLOCCANO

   ⚠️ SOSTITUISCE, NON CANCELLA, la regola qui sopra che li srotola. Quella
   resta il comportamento senza JavaScript, con «riduci movimento» o se GSAP
   non carica: due blocchi in colonna, frase e immagine, tutti leggibili.
   Quando invece l'animazione parte, `animations.js` mette `.scorre--pin`
   sulla sezione e da li in giu comanda questo blocco — richiesta di Andrea,
   2 set 2026: gli scroll bloccati vanno portati anche sul telefono.

   Qui non serve uno stage separato come su Why Vidim e sui Workflow: la
   sezione NON ha un titolo sopra, e fatta solo dalle due frasi con la
   propria immagine. Quello che si blocca e direttamente `.scorre__passi`,
   che diventa alto una schermata.

   `svh` e non `vh`: su iOS `vh` esclude le barre del browser e la frase
   finirebbe sotto il bordo proprio mentre lo scroll non puo piu scorrere.
   ========================================================================== */
@media (max-width: 1023px) {
  .scorre--pin .scorre__passi {
    display: grid;                   /* di nuovo una cella sola */
    gap: 0;
    height: 100vh;                   /* riserva per i browser senza svh */
    height: 100svh;
    align-content: center;
  }

  .scorre--pin .scorre__passo {
    grid-area: 1 / 1;                /* tutti sovrapposti */
    justify-content: center;
  }

  /* Torna il comportamento di partenza: si vede solo quello in scena. Senza
     `visibility` due titoli sovrapposti si annullano per chi legge con uno
     screen reader. */
  .scorre--pin .scorre__passo:not(.is-attivo) {
    opacity: 0;
    visibility: hidden;
  }

  /* La frase resta un titolo normale (va a capo): `nowrap` a 30px su 343 di
     larghezza sfonderebbe. L'altezza fissa di una riga non serve piu, perche
     qui a tenere ferma la sezione ci pensa `100svh`. */
  .scorre--pin .scorre__riga {
    white-space: normal;
    height: auto;
    flex: 0 0 auto;
  }

  /* L'immagine si prende quel che avanza fra la frase e il bordo.
     ⚠️ Piu grande di cosi non puo diventare: e una schermata 1432x600 in
     `contain`, quindi su una colonna da 343px la sua altezza e 144 e basta —
     allargare il box aggiungerebbe solo fasce vuote. Il peso visivo della
     schermata bloccata lo fa la FRASE, che qui cresce. */
  .scorre--pin .scorre__media {
    height: auto;
    max-height: 46svh;
    aspect-ratio: 1432 / 600;
  }

  /* La frase e il contenuto della sezione: su una schermata tutta sua puo
     permettersi il corpo dei titoli grandi invece del minimo del clamp. */
  .scorre--pin .scorre__riga {
    font-size: clamp(30px, 9vw, 48px);
    line-height: 1.15;
    text-wrap: balance;
  }

  .scorre--pin { --scorre-stacco: var(--space-5); }   /* 40 */
}

@media (max-width: 1023px) and (max-height: 520px) {
  .scorre--pin .scorre__media { max-height: 40svh; }
}