/* ==========================================================================
   Blocco BENEFITS A PILA — 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: intro 264 con 171 di padding
   sopra, slot da 884 con 304 di corsa, card 1432 x 580 con immagine 656 x 500.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso
   L'immagine perde l'altezza fissa: a larghezza ridotta un box 500px alto con
   `contain` lascerebbe due fasce vuote sopra e sotto la schermata.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .pila__intro,
  .pila__slot {
    width: 100%;
  }

  .pila-card__media {
    height: auto;
    aspect-ratio: 656 / 500;
  }
}


/* --------------------------------------------------------------------------
   >= 1024 · LA CARD DEVE STARE NELLA FINESTRA
   ⚠️ Stesso problema di `How Vidim Helps` e del blocco `workflow`, e stessa
   natura: quando la card si aggancia in alto, il suo bordo inferiore cade a
   304 + 580 = 884px dal bordo superiore della finestra. Su un MacBook 13"
   (finestra ~730px) le card si vedevano tagliate sotto, e non c'era nessuno
   scroll che potesse mostrare il resto: la card e ferma li per costruzione.

   ⚠️ QUELLO CHE CEDE E' L'IMMAGINE, NON LA CORSA. Ci ho provato al
   contrario — far salire la card piu in alto su finestre basse — e su un 13"
   la corsa arrivava a 264, cioe esattamente l'altezza dell'intro: la card si
   fermava a 4px dall'occhiello, appiccicata. Richiesta di Andrea, 26 ago
   2026: quel respiro non si tocca. La corsa resta quindi FISSA a 304, come
   nel mockup, ed e l'altezza dell'immagine dentro la card a fare spazio.

     corsa 304 = 264 di intro agganciata + 40 di respiro (misure del mockup)

     finestra 1100 -> immagine 500  (= mockup)
     finestra  900 -> immagine 492
     finestra  800 -> immagine 392
     finestra  730 -> immagine 322

   ⚠️ Il titolo non si stacca mai e la card non gli va mai sopra: sono due
   cose diverse e le tiene in piedi lo stesso numero. Se un giorno la corsa
   torna variabile, il minimo non e 264 ma 264 + 40.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .pila {
    /* 264 = l'intro: 171 di padding + 58 di titolo + 16 + 19 di occhiello.
       104 = i 40+40 di padding della card piu 24 di respiro sotto.

       ⚠️ IL NOME. Queste sono ALTEZZE e si chiamano `--pila-h-*`. Non
       chiamarle `--pila-titolo`: quel nome e gia il COLORE del titolo,
       dichiarato in blocchi/benefits-pila.css e usato da .pila__titolo,
       .pila-card__titolo e dagli strong del corpo. Chiamandola cosi (ed e
       successo, 26 ago 2026) da 1024 in su tutti quei testi si ritrovavano
       `color: 264px`, cioe un valore invalido: il colore tornava a
       ereditare, e sulla variante scura di Monitoring i titoli diventavano
       scuri su fondo scuro. Sotto i 1024 restavano giusti — che e il modo in
       cui il difetto e stato notato. */
    --pila-h-intro: 264px;
    --pila-h-respiro: var(--space-5);              /* 40 */

    /* Lo legge anche animations.js (initPila) per accompagnare il titolo. */
    --pila-corsa: calc(var(--pila-h-intro) + var(--pila-h-respiro));   /* 304 */
  }

  /* `max-height` e non `height`: sopra i 1512 l'altezza e 500 fissi, sotto la
     detta l'aspect-ratio del blocco precedente. Qui si mette solo un tetto —
     quel che resta della finestra tolta la corsa e i 104 della card.
     Il minimo di 220 e una resa: sotto i ~630px di finestra non ci sta piu
     niente e si preferisce un pezzo di card fuori a un'immagine invisibile.
     Nessuna finestra reale ci arriva con l'header di sistema e la barra. */
  .pila-card__media {
    max-height: max(220px, min(500px, 100vh - var(--pila-corsa) - 104px));
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet e telefono — LA PILA RESTA UNA PILA

   ⚠️ RIFATTO IL 2 SET 2026. Prima qui la pila si scioglieva in tre blocchi in
   colonna, con questa motivazione: «impilare card a schermo intero su un
   telefono significa tenere ferma la pagina per tre schermate». Andrea ha
   chiesto il contrario — gli effetti di scroll vanno portati anche sul
   telefono — e la condizione che rende la cosa giusta e la stessa di Why
   Vidim: il contenuto deve PRENDERE LO SCHERMO.

   Quindi la pila resta una pila, ma con misure da telefono:
     · il titolo NON e piu agganciato. Sul desktop resta in cima mentre le
       card gli passano sotto; su un telefono si mangerebbe un quinto dello
       schermo per tutta la sezione. Scorre via, e le card cominciano dopo.
     · ogni card e alta una schermata (`100svh` meno un filo di respiro), in
       colonna: immagine sopra, testo sotto.
     · anche l'ULTIMA card e agganciata. Sul desktop e `relative` di
       proposito — esce insieme alla pagina — ma qui, con le card larghe
       quanto lo schermo, vederla scivolare via da sola mentre la penultima e
       ancora ferma sembra un errore.

   ⚠️ Nessuna classe da JavaScript, a differenza di Why Vidim e dei Workflow:
   questa non e un'animazione ma `position: sticky`, cioe impaginazione. Vale
   anche con «riduci movimento» e senza JavaScript, e non c'e nessun rischio
   di contenuto irraggiungibile — le card stanno tutte nel flusso.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .pila__intro {
    position: static;
    padding-top: 0;
  }

  /* Il respiro sopra il titolo lo dava il padding dello sticky: ora serve un
     padding di sezione vero, sulla stessa scala del resto del tema. */
  .pila { padding-block: 96px; }

  /* La corsa da 304 non ha piu senso: era l'altezza dell'intro agganciata.
     Qui sopra la card c'e solo il respiro fra una e l'altra. */
  .pila__slot,
  .pila__slot:last-child {
    position: sticky;
    top: 0;
    padding-top: 12px;
  }

  .pila-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);                 /* 40 -> 32 */
    height: 100vh;                       /* riserva senza svh */
    height: calc(100svh - 24px);
  }

  /* Chi cede spazio e l'immagine: il testo e quello che si legge. */
  .pila-card__media {
    flex: 1 1 auto;
    min-height: 110px;
    height: auto;
    aspect-ratio: auto;
  }

  .pila-card__testo {
    flex: 0 0 auto;
    padding-block: 0;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pila { padding-block: 64px; }
  .pila-card { padding: var(--space-4); }   /* 40 -> 32 */
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  /* ⚠️ IL BUDGET E STRETTO, ed e misurato. Su un 360x640 la card vale 616px:
     la terza di MRF chiede 457 di testo e 48 di padding, e all'immagine ne
     restano 110 — il minimo. Padding e gap ridotti liberano una quarantina
     di pixel di margine, cosi un testo un po' piu lungo caricato dal
     backoffice non fa uscire il contenuto dal fondo della card, che in una
     pila agganciata sarebbe irraggiungibile. */
  .pila-card {
    padding: 20px;
    gap: 20px;
  }
  .pila-card__media { min-height: 90px; }
}


/* --------------------------------------------------------------------------
   Schermo basso (telefono in orizzontale)
   L'immagine si riduce al minimo: sotto i 520px di altezza, fra titolo e
   corpo della card non resta quasi niente.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) and (max-height: 520px) {
  .pila-card__media { min-height: 70px; }
  .pila-card { gap: var(--space-3); }
}