/* ==========================================================================
   PASSATA MOBILE DEL 7 SETTEMBRE 2026 — e le centrature valgono anche su
   tablet, dall'8 settembre
   --------------------------------------------------------------------------
   Tutte le richieste che Andrea ha elencato sotto «MODIFICHE MOBILE», raccolte
   in un file solo invece che sparse in otto.

   ⚠️ PERCHE INSIEME E NON OGNUNA NEL SUO FOGLIO. Sono richieste di UNA
   revisione, fatte lo stesso giorno guardando lo stesso telefono, e quasi
   tutte dicono la stessa cosa: su una colonna sola il testo va centrato.
   Tenerle insieme rende leggibile la scelta complessiva e reversibile in
   blocco se il mockup mobile — che ancora non esiste — dira altro.
   Se una di queste regole diventera definitiva, il posto giusto e il foglio
   del suo blocco.

   Il file si chiama 45- perche i responsive si caricano in ordine alfabetico
   e questo deve arrivare DOPO i fogli di blocco (00-40), altrimenti le loro
   regole allo stesso breakpoint vincerebbero per ordine.

   ⚠️ 8 set 2026 — LE CENTRATURE SALGONO A 1023. Andrea ha chiesto le stesse
   centrature anche fra 768 e 1024. Sono la stessa scelta per la stessa
   ragione — su una colonna sola il testo non ha piu niente accanto a cui
   allinearsi — quindi si allarga il @media invece di riscrivere gli stessi
   venti selettori in un secondo file: due copie della stessa regola sono due
   posti da ricordarsi di cambiare insieme, e prima o poi uno si dimentica.
   Restano a 767 le regole che il tablet NON vuole: le altezze delle immagini
   e il pulsante a piena larghezza.

   REGOLA INVIOLABILE, come negli altri responsive: nessuna riga fuori da
   @media. Sopra i 1024 non cambia niente.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 767 · TITOLI E PARAGRAFI CENTRATI

   Richiesta ripetuta pagina per pagina: «giustificare titolo e paragrafo al
   centro». Su desktop questi blocchi di testo stanno in una colonna stretta
   accanto a qualcos'altro, e l'allineamento a sinistra li lega a cio che
   hanno accanto. Sul telefono quel qualcosa non c'e piu: il testo occupa
   tutta la larghezza e le righe finali corte lasciano il blocco sbilanciato.

   ⚠️ `text-align` DA SOLO NON BASTA quasi mai in questo tema: questi blocchi
   sono contenitori flex con `align-items: flex-start`, quindi i figli — e
   soprattutto i pulsanti — resterebbero incollati a sinistra mentre il testo
   si centra. Si centra anche l'asse trasversale.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* HOME — «The information is there…» (63:2908)
     ⚠️ Il titolo e il paragrafo dichiarano `text-align: left` esplicito nel
     foglio di sezione: l'ereditarieta dal contenitore non basta a
     scavalcarlo, vanno nominati. Vale per quasi tutti i blocchi qui sotto. */
  .how__text {
    align-items: center;
  }
  .how__text,
  .how__h2,
  .how__para {
    text-align: center;
  }

  /* HOME — «Designed for people…»: il titolo e la nota a fianco stanno in una
     `.section-head--split`, cioe due colonne. Impilate, si centrano. */
  .easy .section-head { align-items: center; }
  .easy .section-head,
  .easy .section-head--split .section-head__title,
  .easy .section-head--split .section-head__aside {
    text-align: center;
  }

  /* MAINTENANCE, MRF, MONITORING — «Designed for people…» e «And when
     something goes wrong…»: e lo stesso blocco (`easy-introduce` variante 2)
     su tre pagine. */
  .easy2__intro {
    align-items: center;
    text-align: center;
  }

  /* MAINTENANCE — «Know what needs attention…» */
  .mnt-outcome__testo {
    align-items: center;
    text-align: center;
  }

  /* MAINTENANCE e COMPLIANCE — «From planning to evidence…» e «From check
     planning…»: stesso blocco `workflow`. */
  .workflow__titolo { text-align: center; }

  /* MAINTENANCE — «From chasing maintenance to controlling it» */
  .mnt-ba__intro {
    align-items: center;
    text-align: center;
  }

  /* MONITORING — «See what is happening…» */
  .domande__testo,
  .domande__titolo,
  .domande__lead {
    text-align: center;
  }
  .domande__testo { align-items: center; }

  /* MONITORING — «Connect the data. See the change…» */
  .scaletta__intro { align-items: center; }
  .scaletta__intro,
  .scaletta__titolo,
  .scaletta__lead {
    text-align: center;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · COMPLIANCE — «Visibility across sites»

   Tre cose insieme, tutte segnalate da Andrea sulla stessa sezione:
     · titolo e paragrafo centrati;
     · «manca l'immagine dopo il paragrafo» — non mancava: l'`order: -1` del
       riflusso a 1024 la portava sopra il testo. Sul telefono l'ordine
       giusto e quello del mockup: prima si dice cosa, poi si mostra;
     · «rimuovere lo spazio tra i 2 paragrafi» — i 160px di gap del mockup
       servono a distribuire la colonna lungo i 463 dell'immagine che le sta
       ACCANTO. Impilata, quell'immagine non c'e piu e il gap diventa un buco.
       Si scende allo stacco normale fra due paragrafi.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .visibility__col {
    gap: var(--space-3);              /* 16 — era 80, prima ancora 160 */
    align-items: center;
    text-align: center;
  }

  .visibility__testa {
    align-items: center;
    text-align: center;
  }

  .visibility__media {
    order: 0;                         /* torna dopo il testo */
  }
}


/* --------------------------------------------------------------------------
   <= 767 · ALTEZZE DELLE IMMAGINI NELLE CARD

   Numeri dati da Andrea, uno per sezione. Sono altezze, non proporzioni: e
   una scelta di ritmo verticale, quindi il ritaglio lo fa il `cover` /
   `contain` gia dichiarato nei blocchi.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* HOME — «Designed for people…»: qui l'immagine E la card (sta sul fondo,
     in assoluto), quindi l'altezza chiesta e quella della card. */
  .easy-card { min-height: 600px; }

  /* MONITORING — «Turn plant signals into operational context».
     ⚠️ La pila e una sezione a scorrimento bloccato: la card e alta
     `100svh - 24px` e dentro ci stanno immagine e testo. Un'altezza FISSA
     dell'immagine si prende la sua parte e lascia il resto al testo.

     ⚠️ `flex: 0 1 auto`, NON `0 0 auto`, ed e la riga che tiene in piedi la
     sezione. L'altezza chiesta e un OBIETTIVO, non un obbligo: la card e alta
     quanto lo schermo e dentro non si puo scorrere, quindi su un telefono
     corto un'immagine incomprimibile spingerebbe il testo fuori dal fondo,
     dove nessuno puo raggiungerlo. Misurato prima di questa riga: su MRF card
     3, il testo usciva di 27px su iPhone SE e di 64px su un Android da 640.
     Con `1` di shrink l'immagine cede quel che serve e solo quando serve: a
     390x844 resta esattamente 240 (e 320 su Monitoring), come chiesto.
     Il `max-height` in svh e la stessa rete vista dall'altro lato, per gli
     schermi molto bassi. Lo verifica lo script della pila. */
  #mon-benefits .pila-card__media {
    flex: 0 1 auto;
    height: 320px;
    min-height: 0;
    max-height: 45svh;
  }

  /* MRF — «More throughput»: TUTTE alte 240, non solo alcune. */
  #mrf-benefits .pila-card__media {
    flex: 0 1 auto;
    height: 240px;
    min-height: 0;
    max-height: 40svh;
  }
}