/*
 * Processo — aspetto
 *
 * Origine: .process-section / .process-heading / .process-list /
 * .process-item di source-clean/styles.css. Ogni valore letto.
 *
 * Indice
 *   1. sezione e colonne
 *   2. intestazione ferma allo scroll
 *   3. elenco e righe
 *   4. impilamento
 */

/* ======================================================================
   1. SEZIONE E COLONNE
   ======================================================================
   Griglia del sorgente: minmax(300px,.44fr) minmax(0,1fr) — l'intestazione
   vale 0.44/1.44 = 30,5%, con un minimo di 300px. */
/* Grid e non flex: con `fr` lo spazio si distribuisce DOPO aver sottratto il
   gap, come nel sorgente. Con una percentuale su flex l'intestazione veniva
   407px invece di 386 — misurato. */
.falone-process {
  display: grid;
  grid-template-columns:
    minmax(300px, var(--falone-process-head-fr, .44fr))
    minmax(0, 1fr);
  align-items: start;
  gap: var(--falone-process-col-gap, 72px);
  padding: 112px 52px;   /* scavalcato dal controllo Margini interni */
  background: var(--falone-process-bg, #121212);
  color: var(--falone-process-title-color, #fff);
}

/* ======================================================================
   2. INTESTAZIONE FERMA ALLO SCROLL
   ======================================================================
   position: sticky, non JavaScript: il browser lo fa da se', senza costi
   per frame e senza niente da smontare.

   ⚠️ Perche' funzioni, il contenitore NON deve avere overflow nascosto e
   l'elemento deve avere align-self: start — con `stretch` (il default nei
   flex) occuperebbe tutta l'altezza e non avrebbe spazio per scorrere. */

/* ⚠️ Nel sorgente il rientro vale per ENTRAMBE le colonne: il gruppo di
   regole che porta `margin-left: var(--text-left-offset)` include sia
   .process-heading sia .process-list. Nel porting era finito solo
   sull'intestazione, e l'elenco dei passi restava 50px piu' a sinistra
   del riferimento — misurato 860 contro 910 a 1440px. */
.falone-process > .falone-steps {
  margin-left: var(--falone-indent, 0px);
}

.falone-process__head {
  margin-left: var(--falone-indent, 0px);
  position: sticky;
  top: var(--falone-process-sticky-top, 120px);
  align-self: start;   /* con `stretch` non avrebbe spazio per scorrere */
}

/* ⚠️ Fascia SENZA TITOLO: una colonna sola.
   La griglia riserva all'intestazione `minmax(300px, .44fr)`. Con il solo
   occhiello resterebbero 300px di vuoto a sinistra e l'elenco schiacciato a
   destra: e' il caso della fascia «I nostri vantaggi competitivi» di
   Efficientamento Energetico, che ha l'occhiello e nessun titolo.
   Qui l'occhiello torna sopra e l'elenco prende tutta la larghezza, cioe' la
   disposizione che quella fascia aveva prima.
   ⚠️ E lo sticky va SPENTO: in colonna singola l'intestazione e' sopra
   l'elenco, e restare incollata in alto mentre l'elenco le passa sotto non e'
   l'effetto della home — la' l'intestazione sta a fianco.
   La classe la scrive il modello solo quando il titolo e' vuoto: le istanze con
   titolo non cambiano di una virgola. */
.falone-process--senza-titolo {
  grid-template-columns: 1fr;
  gap: var(--falone-process-gap-senza-titolo, 40px);
}

.falone-process--senza-titolo .falone-process__head { position: static; }

.falone-process__h2 {
  margin: 0;
  color: var(--falone-process-title-color, #fff);
}
/* famiglia e corpo fluido arrivano da .falone-h2 del tema */

/* ======================================================================
   3. ELENCO E RIGHE
   ======================================================================
   ⚠️ PROMOSSE NEL TEMA il 04/08, alla seconda occorrenza: elenco, righe,
   numero, titolo e testo sono ora .falone-steps* in components.css, perche'
   il sorgente usa gli stessi valori anche nella sezione Metodo della pagina
   Costruttori. Qui restano solo i controlli, che scrivono le variabili
   --falone-steps-* del componente. Niente e' cambiato nei valori: verificato
   confrontando le misure prima e dopo. */

/* ======================================================================
   4. IMPILAMENTO
   ======================================================================
   A 1180px le due colonne si impilano e l'intestazione smette di restare
   ferma: su schermo stretto occuperebbe mezza finestra per tutta la
   sezione. L'impilamento delle singole righe a 820px e' nel componente. */
@media (max-width: 1180px) {
  .falone-process { grid-template-columns: 1fr; }
  .falone-process__head {
    position: relative;
    top: auto;
  }
}

/* l'impilamento delle righe a 820px sta nel componente condiviso */