/* ==========================================================================
   Blocco condiviso — BENEFITS A PILA
   MRF `Benefits` 85:5382 · 1512 x 3036 (tre card, chiaro)
   Monitoring `Benefits` 123:2937 · 1512 x 3960 (quattro card, scuro)

   Verifica altezza MRF:
     264 (intro) + 40 + 884 + 40 + 884 + 40 + 884 = 3036 ✔
     intro = 171 (padding) + 58 (h2) + 16 + 19 (lead) = 264 ✔
     slot  = 304 (corsa) + 580 (card)                 = 884 ✔
     card  = 40 + 500 (immagine) + 40                 = 580 ✔

   ⚠️ LA PILA. Le card non sono distanziate di 344px per gusto: quello e lo
   spazio in cui scorrono. Titolo e wrapper sono `sticky top 0`, quindi
   scorrendo il titolo si aggancia in alto e ogni card sale fino a 304px dal
   bordo superiore — cioe esattamente sopra la precedente, coprendola.
   L'ultima non si aggancia: esce con la pagina e la sezione finisce.

   ⚠️ Perche funzioni, NESSUN antenato deve avere overflow hidden/clip/auto.
   Vale per .section, per #contenuto e per body. Se un giorno la pila smette
   di funzionare senza dare errore, e quasi sempre questo.
   ========================================================================== */

.pila {
  /* ⚠️ Sopra niente padding: si attacca a `The Challenge`, e il respiro lo da
     il padding-top dell'intro (171).

     ⚠️ SOTTO INVECE SI', E NON E' NEL MOCKUP. In Figma la sezione finisce a
     filo dell'ultima card, e con le card agganciate significa che l'ultima
     resta ferma fino all'ultimo pixel e poi la sezione successiva le arriva
     addosso — su MRF e il blocco blu delle Use Cases, e si vedeva. Questi
     160px sono lo spazio in cui titolo e ultima card si sganciano e se ne
     vanno insieme, prima che cominci la sezione dopo. Richiesta di Andrea,
     26 ago 2026: cambia l'altezza della sezione rispetto al mockup
     (3036 -> 3196 su MRF, 3960 -> 4120 su Monitoring). */
  padding-top: 0;
  padding-bottom: var(--space-7);        /* 160 */
  gap: var(--space-5);                   /* 40 fra tutti i figli */
  background: var(--color-white);

  /* Le due variabili che fanno il tema. */
  --pila-card-fondo: var(--color-neutral-100);   /* #f5f5f5 */
  --pila-titolo: var(--text-on-light);
  --pila-corpo: var(--text-on-light-muted);
}

/* Variante scura — Monitoring 123:2937. La sezione prende il fondo scuro e le
   card diventano il pannello, non il contrario.
   ⚠️ Il fondo NON e --gradient-section-dark: quello e a 180 gradi e sta in
   `Data Sources`. Qui Figma dichiara 146,992 gradi sul frame 1512x3960, e i
   colori sono invertiti rispetto alle Why Card. Le card sono #29384d, cioe il
   grigio-blu chiaro, non il #00122b del fondo. */
.pila--scura {
  background: var(--gradient-benefits-pila);
  --pila-card-fondo: var(--color-tertiary-400);  /* #29384d */
  --pila-titolo: var(--text-on-dark);
  --pila-corpo: var(--text-on-dark-muted);
}

/* --- L'intro 85:5433 — 1432 x 264, sticky ---------------------------------
   I 171px sopra sono gli stessi dell'Hero: e lo spazio dell'header, che qui
   serve quando il titolo si aggancia in alto.
-------------------------------------------------------------------------- */
.pila__intro {
  position: sticky;
  top: 0;
  width: var(--container-width);         /* 1432 */
  padding-top: 171px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                   /* 16 */
}

.pila__titolo {
  width: 100%;
  color: var(--pila-titolo);
  text-align: center;
}

.pila__lead {
  width: 100%;
  color: var(--pila-corpo);
  text-align: center;
}

/* --- Lo slot 123:2934 — 1432 x 884, sticky, 304 di corsa sopra la card ----
   ⚠️ I 304px NON sono un margine: sono la distanza da cui la card arriva.
   Toglierli fa collassare la pila e cambia l'altezza della sezione.
-------------------------------------------------------------------------- */
.pila__slot {
  position: sticky;
  top: 0;
  width: var(--container-width);
  padding-top: 304px;
}

/* L'ultima card esce insieme alla pagina (in Figma e l'unica `relative`):
   agganciarla vorrebbe dire tenerla ferma mentre la sezione e gia finita. */
.pila__slot:last-child {
  position: relative;
  top: auto;
}

/* Su Monitoring 123:2975 anche l'ultima card e dichiarata sticky. Non cambia
   l'altezza statica della sezione, cambia solo cosa succede in fondo alla
   corsa: l'ultima card resta agganciata finche la sezione non e finita. */
.pila--tutte-agganciate .pila__slot:last-child {
  position: sticky;
  top: 0;
}

/* --- La card 85:5458 — 1432 x 580 ----------------------------------------- */
.pila-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);                   /* 40 */
  width: 100%;
  padding: var(--space-5);               /* 40 */
  border-radius: var(--radius-lg);
  background: var(--pila-card-fondo);
}

/* Immagine 656 x 500. `contain`: come tutte le schermate di prodotto del
   progetto, non si ritaglia. */
.pila-card__media {
  flex: 1 0 0;
  min-width: 0;
  height: 500px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

/* Testo 656, padding verticale 16 (e quello del mockup, non un margine mio) */
.pila-card__testo {
  flex: 1 0 0;
  min-width: 0;
  padding-block: var(--space-3);         /* 16 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                   /* 16 */
}

.pila-card__titolo { color: var(--pila-titolo); }
.pila-card__corpo  { color: var(--pila-corpo); }

/* Gli attacchi in grassetto sono Inter Bold nel mockup, non semibold. */
.pila-card__corpo strong {
  font-weight: 700;
  color: var(--pila-titolo);
}