/*
 * Griglia a colonne con divisori verticali — aspetto
 *
 * Origine: .col-grid / .col-cell della cattura Ristrutturazione.html, dove
 * ricorre DUE volte: «Il nostro vantaggio» (4 colonne su fondo scuro) e
 * «I servizi» (6 colonne su fondo chiaro).
 *
 * ⚠️ Non e' .falone-values della pagina Impegno, che gli somiglia. Quella e'
 * una griglia 2×2 a blocchi, con margini asimmetrici per riga
 * (nth-child(-n+2) / (n+3)). Questa e' una FILA sola con divisori verticali e
 * margini per estremo (first-child / last-child), icone piu' grandi (60px
 * contro 33) e una scala tipografica diversa. Unirle avrebbe voluto dire un
 * widget con due modi e due serie di regole: piu' fragile che due widget.
 *
 * ⚠️ Le icone del sorgente sono SVG a CONTORNO (stroke accento, spessore
 * 1,5). Come nelle altre sezioni si usano quelle di Font Awesome, che sono
 * piene: scelta dell'utente del 29/07.
 *
 * Indice
 *   1. sezione
 *   2. griglia e celle
 *   3. impilamento
 */

/* ======================================================================
   1. SEZIONE
   ====================================================================== */
.falone-colgrid {
  padding:
    var(--falone-colgrid-pad-top, 88px)
    var(--falone-colgrid-pad-x, 52px)
    var(--falone-colgrid-pad-bottom, 92px);
  background: var(--falone-colgrid-bg, #121212);
  color: var(--falone-colgrid-ink, #fff);
}

.falone-colgrid__head { margin-bottom: var(--falone-colgrid-head-gap, 56px); }

.falone-colgrid__h2 {
  /* ⚠️ I 24px del modello (`h2 { margin-bottom: 24px }`), che qui mancavano:
     erano l'unico caso su otto widget con margine ZERO. Non e' solo coerenza —
     con l'interlinea 1.03 su un corpo di 74,88px l'inchiostro dell'ultima riga
     sborda ~15px sotto la propria scatola, e il sottotitolo partiva dal fondo
     della SCATOLA: si sovrapponeva al titolo di 15px, misurato su due widget.
     Con 24px restano 9px liberi, come nelle altre fasce. */
  margin: 0 0 var(--falone-h2-gap, 24px);
  max-width: none;
  color: var(--falone-colgrid-title-color, #fff);
}
/* la scala arriva da .falone-h2--page del tema */

/* ======================================================================
   2. GRIGLIA E CELLE
   ======================================================================
   ⚠️ I divisori non sono bordi: sono lo SFONDO della griglia visto
   attraverso un gap di 1px. `background: inherit` sulla cella non basterebbe
   se la sezione avesse un gradiente, ma qui e' un colore pieno. */
.falone-colgrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--falone-colgrid-cols, 4), minmax(0, 1fr));
  gap: var(--falone-colgrid-line-w, 1px);
  background: var(--falone-colgrid-line, rgba(255, 255, 255, .17));
}

.falone-colgrid__cell {
  /* ⚠️ Sotto: zero nel sorgente, dove la fila e' una sola e il filetto
     inferiore non esiste. Dove il filetto c'e', il testo gli si appoggia
     contro: la variabile permette di dargli respiro per istanza. */
  padding:
    var(--falone-colgrid-cell-top, 2px)
    var(--falone-colgrid-cell-x, 34px)
    var(--falone-colgrid-cell-bottom, 0);
  background: var(--falone-colgrid-cell-bg, #121212);
}

/* le celle agli estremi restano a filo del bordo della sezione */
.falone-colgrid__cell:first-child { padding-left: 0; }
.falone-colgrid__cell:last-child  { padding-right: 0; }

/* ⚠️ Selettore DISCENDENTE e regola su <svg> E su <i>: Font Awesome puo'
   arrivare come font o come SVG secondo la configurazione di Elementor.
   Senza, l'icona resterebbe alla misura di default. */
.falone-colgrid__cell .falone-colgrid__icon,
.falone-colgrid__cell .falone-colgrid__icon svg {
  display: block;
  width: var(--falone-colgrid-icon-w, 60px);
  height: var(--falone-colgrid-icon-h, 60px);
  margin-bottom: var(--falone-colgrid-icon-gap, 24px);
  color: var(--falone-colgrid-icon-color, #f7941d);
  /* riempimento e tratto passano da variabili: cosi' la stessa regola serve
     sia le icone Font Awesome (piene) sia quelle a contorno, e il modificatore
     piu' sotto non deve vincere nessuna gara di specificita' */
  fill: var(--falone-colgrid-icon-fill, currentColor);
  stroke: var(--falone-colgrid-icon-stroke, none);
  font-size: var(--falone-colgrid-icon-size, 52px);
  line-height: 1;
}

/* ----------------------------------------------------------------------
   Icone a CONTORNO
   ----------------------------------------------------------------------
   Il modificatore sta sul contenitore e imposta due variabili, che l'<svg>
   eredita. Scriverlo sull'<svg> non funzionerebbe: la regola qui sopra e'
   `.falone-colgrid__cell .falone-colgrid__icon svg`, cioe' (0,3,1).

   ⚠️ `vector-effect: non-scaling-stroke` NON e' un dettaglio. Il disegno ha
   viewBox 24x24 e viene reso a 60px: il tratto viene moltiplicato per 2,5, e
   l'1,7 del sorgente diventerebbe 4,25px — l'opposto di «sottile». Con
   questa proprieta' lo spessore e' in pixel di schermo, quindi 1,7 resta
   1,7 a qualunque misura dell'icona. */
.falone-colgrid__icon--contorno {
  --falone-colgrid-icon-fill: none;
  --falone-colgrid-icon-stroke: currentColor;
}

/* ⚠️ Anche sui `path`, non solo sull'<svg>: `vector-effect` NON e' una
   proprieta' ereditata, quindi dichiararla sul solo contenitore non
   raggiungerebbe i tracciati e il tratto tornerebbe a scalare.
   `stroke-width` e i due `stroke-line*` invece si ereditano: restano
   sull'<svg> perche' li' bastano. */
.falone-colgrid__icon--contorno .falone-svgicon {
  stroke-width: var(--falone-colgrid-icon-tratto, 1.7);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.falone-colgrid__icon--contorno .falone-svgicon,
.falone-colgrid__icon--contorno .falone-svgicon path {
  vector-effect: non-scaling-stroke;
}

.falone-colgrid__cell-title {
  margin: 0 0 var(--falone-colgrid-title-gap, 18px);
  color: var(--falone-colgrid-cell-title, #fff);
  /* ⚠️ font del CORPO, non del display */
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* ⚠️ Scala PER ISTANZA: Ristrutturazione usa clamp(.9rem, 1.02vw, 1.02rem)
     con interlinea 1,32, Edilizia Residenziale clamp(.78rem, .88vw, .88rem)
     con 1,3. Un valore fisso perderebbe la fluidita'. */
  font-size: clamp(.9rem, 1.02vw, 1.02rem);   /* ripiego */
  font-size: clamp(
    var(--falone-colgrid-ct-min, .9rem),
    var(--falone-colgrid-ct-vw, 1.02vw),
    var(--falone-colgrid-ct-max, 1.02rem)
  );
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--falone-colgrid-ct-lh, 1.32);
}

.falone-colgrid__cell-text {
  margin: 0;
  color: var(--falone-colgrid-text-color, rgba(255, 255, 255, .6));
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* 16px, richiesta esplicita del cliente (11/09): i testi delle celle
     erano piu' piccoli del corpo standard su tutte le pagine che usano
     questo widget (Ristrutturazione, Edilizia, Efficientamento,
     Infrastrutture — nessun'altra pagina lo usa). */
  font-size: var(--falone-colgrid-cx-size, 1rem);
  font-weight: 300;
  line-height: var(--falone-colgrid-cx-lh, 1.95);
}

/* ======================================================================
   3. IMPILAMENTO
   ======================================================================
   Il sorgente scala 4 -> 2 -> 1 e 6 -> 3 -> 1. A soglia intermedia i margini
   cambiano regola: non piu' primo/ultimo ma per POSIZIONE NELLA RIGA, o le
   celle interne resterebbero senza respiro e quelle di bordo con il doppio.
   Le regole nth-child sono scritte per il caso a 2 e a 3 colonne, i due che
   il sorgente usa. */
@media (max-width: 1180px) {
  .falone-colgrid__grid {
    grid-template-columns: repeat(var(--falone-colgrid-cols-tablet, 2), minmax(0, 1fr));
  }
  .falone-colgrid__cell { padding: var(--falone-colgrid-cell-top-tablet, 32px) 26px; }

  /* due colonne */
  .falone-colgrid--c2 .falone-colgrid__cell:nth-child(odd)  { padding-left: 0; }
  .falone-colgrid--c2 .falone-colgrid__cell:nth-child(even) { padding-right: 0; }

  /* tre colonne */
  .falone-colgrid--c3 .falone-colgrid__cell:nth-child(3n + 1) { padding-left: 0; }
  .falone-colgrid--c3 .falone-colgrid__cell:nth-child(3n)     { padding-right: 0; }
}

@media (max-width: 820px) {
  .falone-colgrid {
    padding: var(--falone-colgrid-pad-tablet, 72px) var(--falone-colgrid-pad-x-tablet, 18px);
  }
  .falone-colgrid__grid { grid-template-columns: 1fr; }

  /* a colonna unica i margini laterali non servono piu' */
  .falone-colgrid__cell,
  .falone-colgrid--c2 .falone-colgrid__cell:nth-child(odd),
  .falone-colgrid--c2 .falone-colgrid__cell:nth-child(even),
  .falone-colgrid--c3 .falone-colgrid__cell:nth-child(3n + 1),
  .falone-colgrid--c3 .falone-colgrid__cell:nth-child(3n) { padding: 32px 0; }
  .falone-colgrid__cell:first-child { padding-top: var(--falone-colgrid-cell-top, 2px); }

  .falone-colgrid__cell-text br,
  .falone-colgrid__h2 br { display: none; }
}

/* ======================================================================
   6. NUMERO DELLA CELLA
   ======================================================================
   Screen di Efficientamento (05/08): le celle della fascia scura hanno
   01-04 sopra l'icona. Non c'e' nel sorgente delle altre pagine, e senza
   numero non si stampa niente. */
.falone-colgrid__num {
  display: block;
  margin-bottom: var(--falone-colgrid-num-gap, 18px);
  color: var(--falone-colgrid-num-color, var(--falone-accent, #f7941d));
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-colgrid-num-size, .82rem);
  font-weight: 800;
  letter-spacing: .18em;
}

/* ======================================================================
   7. ICONA ACCANTO AL TITOLO
   ======================================================================
   Nello screen la fascia delle quattro qualita' ha l'icona a SINISTRA del
   titolo, non sopra. Cambia la struttura della cella, non un valore: la
   cella diventa una griglia a due colonne con l'icona nella prima e
   titolo piu' testo nella seconda.

   ⚠️ Il margine sotto l'icona va azzerato: nella disposizione verticale
   serviva a staccare il titolo, qui creerebbe uno scarto verticale. */
.falone-colgrid__grid--icona-lato .falone-colgrid__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--falone-colgrid-icona-lato-gap, 16px);
  align-items: start;
}

.falone-colgrid__grid--icona-lato .falone-colgrid__icon {
  grid-row: 1 / span 2;
  margin-bottom: 0;
}

@media (max-width: 820px) {
  /* su schermo stretto l'icona torna sopra: due colonne lascerebbero al
     testo pochi caratteri per riga */
  .falone-colgrid__grid--icona-lato .falone-colgrid__cell {
    grid-template-columns: 1fr;
  }
  .falone-colgrid__grid--icona-lato .falone-colgrid__icon {
    grid-row: auto;
    margin-bottom: var(--falone-colgrid-icon-gap, 24px);
  }
}

/* ======================================================================
   8. PIU' RIGHE, E LA RIGA DI CODA
   ======================================================================
   Il sorgente ha sempre una fila sola: 4 celle su 4 colonne, 6 su 6. Con
   sette voci (Infrastrutture) la griglia va a capo, e saltano fuori due
   difetti che una fila sola non poteva avere.

   ⚠️ 1. IL BUCO. Lo sfondo della griglia e' il colore dei DIVISORI: la
   cella mancante non e' vuota, e' un rettangolo grigio in mezzo al nulla,
   e si legge come un errore. Le celle della riga incompleta si dividono
   allora la larghezza intera, su una griglia di tracce piu' fitta che il
   modello calcola col minimo comune multiplo.

   ⚠️ 2. I MARGINI. `:first-child` e `:last-child` conoscono solo la prima
   e l'ultima cella di tutta la griglia: dalla seconda riga in poi la cella
   di sinistra resterebbe rientrata di 34px rispetto a quella sopra, e la
   fila sembrerebbe storta. Il modello marca le celle per posizione nella
   RIGA, che e' l'unica cosa che il CSS da solo non sa calcolare quando le
   righe hanno lunghezze diverse.

   ⚠️ Specificita': le regole di §2 sono `.falone-colgrid__cell:first-child`,
   cioe' (0,2,0). Queste sono (0,2,0) anche loro e vincono per ORDINE, che
   e' il motivo per cui stanno in fondo al foglio. */

.falone-colgrid__grid--coda {
  grid-template-columns: repeat(var(--falone-colgrid-tracce, 12), minmax(0, 1fr));
}

.falone-colgrid__grid--coda > .falone-colgrid__cell {
  grid-column: span var(--falone-cella-span, 1);
}

.falone-colgrid__grid--righe .falone-colgrid__cell--riga-inizio { padding-left: 0; }
.falone-colgrid__grid--righe .falone-colgrid__cell--riga-fine   { padding-right: 0; }

/* Con piu' righe il testo cade a un pelo dal divisore orizzontale: senza
   respiro sotto, le due file si toccano. Il valore vale solo qui, la fila
   singola del sorgente resta a zero. */
.falone-colgrid__grid--righe .falone-colgrid__cell {
  padding-bottom: var(--falone-colgrid-cell-bottom, 42px);
}

.falone-colgrid__grid--righe .falone-colgrid__cell--riga-sotto {
  padding-top: var(--falone-colgrid-cell-top-sotto, 46px);
}

/* Sotto i 1180 la griglia torna alle colonne del tablet: le tracce e gli
   span calcolati per il desktop non valgono piu'. Lo `span` sta in linea,
   quindi va disinnescato qui — e i margini tornano alle regole nth-child
   di §3, che a quel punto sono quelle giuste. */
@media (max-width: 1180px) {
  .falone-colgrid__grid--coda {
    grid-template-columns: repeat(var(--falone-colgrid-cols-tablet, 2), minmax(0, 1fr));
  }
  .falone-colgrid__grid--coda {
    grid-template-columns: repeat(var(--falone-colgrid-tracce-t, 2), minmax(0, 1fr));
  }
  .falone-colgrid__grid--coda > .falone-colgrid__cell {
    grid-column: span var(--falone-cella-span-t, 1);
  }
  .falone-colgrid__grid--righe .falone-colgrid__cell--riga-inizio,
  .falone-colgrid__grid--righe .falone-colgrid__cell--riga-fine {
    padding-left: 26px;
    padding-right: 26px;
  }
  .falone-colgrid__grid--righe .falone-colgrid__cell--riga-sotto { padding-top: var(--falone-colgrid-cell-top-tablet, 32px); }
}

/* ======================================================================
   11. CAROSELLO
   ======================================================================
   Quando le voci sono tante, la griglia le stringe: diventano schede che
   scorrono. Meccanismo identico alla fascia Garanzie — sesto riuso di
   rail.js, nessuna logica nuova.

   ⚠️ Lo scorrimento e' NATIVO: overflow-x piu' scroll-snap. Le frecce e
   la barra sono un'aggiunta dello script; senza JavaScript le schede
   restano tutte raggiungibili trascinando o da tastiera. */

.falone-colgrid--carosello .falone-colgrid__pista {
  display: grid;
  /* ⚠️ Senza questo la pista eredita `grid-template-columns: repeat(4,…)`
     dalla griglia: le prime quattro schede finiscono nelle colonne del
     modello e solo le altre tre in quelle automatiche. Misurato: schede
     larghe 82px invece di 600. */
  grid-template-columns: none;
  grid-auto-flow: column;
  /* larghezza di una scheda: la vista meno gli stacchi, diviso quante se
     ne vogliono vedere */
  /* ⚠️ Lo «spiraglio»: le schede sono piu' strette del necessario, cosi'
     di quella dopo se ne vede un pezzo al bordo. Senza, due schede piene
     riempiono la vista e niente dice che ce ne sono altre cinque — la
     barra sotto lo dice, ma la si guarda dopo. Un bordo tagliato invece
     si legge subito come «continua». */
  grid-auto-columns: calc(
    (100% - (var(--falone-colgrid-car-visibili, 2) - 1)
            * var(--falone-colgrid-car-gap, 18px)
          - var(--falone-colgrid-car-spiraglio, 58px))
    / var(--falone-colgrid-car-visibili, 2)
  );
  gap: var(--falone-colgrid-car-gap, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: none;
  /* ⚠️ `overflow-x` da solo ritaglia anche in verticale: senza questo
     spazio l'ombra e il contorno delle schede verrebbero tagliati. */
  padding: var(--falone-colgrid-car-pad-y, 4px) 0;
}

/* ⚠️ RETE DI SICUREZZA — non toglierla.
   La pista porta ANCHE la classe `falone-colgrid__grid`, perche' e' lo
   stesso contenitore in due vesti. Qualunque regola scritta per la
   GRIGLIA le finisce quindi addosso, e una `grid-template-columns` la
   distrugge: le colonne fisse si sommano a quelle automatiche del
   carosello e le schede vengono di larghezze diverse.
   E' successo davvero: una regola `body.page-id-79 #servizi
   .falone-colgrid__grid { grid-template-columns: repeat(4, …) }` dava
   quattro schede da 100px e tre da 290 invece di sette uguali. Misurato.
   `!important` qui e' voluto: deve vincere anche su un selettore con un
   id, che di specificita' ne ha molta di piu'. */
.falone-colgrid--carosello .falone-colgrid__pista {
  grid-template-columns: none !important;
}

.falone-colgrid--carosello .falone-colgrid__pista::-webkit-scrollbar { display: none; }

/* ⚠️ Una velatura sul bordo destro, che sfuma la scheda tagliata invece di
   troncarla di netto. `mask` non e' supportata ovunque: senza, non manca
   niente — resta lo spiraglio, che e' il segnale vero. La velatura si
   toglie quando la pista e' arrivata in fondo, altrimenti sfumerebbe
   l'ultima scheda senza motivo. */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
  .falone-colgrid--carosello .falone-colgrid__pista {
    mask-image: linear-gradient(
      90deg,
      #000 calc(100% - var(--falone-colgrid-car-velo, 90px)),
      rgba(0, 0, 0, .18) 100%
    );
  }
}

.falone-colgrid--carosello .falone-colgrid__pista:focus-visible {
  outline: 2px solid var(--falone-accent, #f7941d);
  outline-offset: 4px;
}

/* ⚠️ Le schede sono tutte alte uguale perche' sono celle di una griglia a
   una riga: `align-items` predefinito le stira. Non serve un'altezza
   fissa, che con testi di lunghezza diversa sarebbe una scommessa. */
.falone-colgrid--carosello .falone-colgrid__cell {
  grid-column: auto !important;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--falone-colgrid-car-scheda-pad, 28px);
  background: var(--falone-colgrid-car-scheda-bg, #fff);
  border: 1px solid var(--falone-colgrid-car-scheda-bordo, var(--falone-accent, #f7941d));
  transition: background var(--falone-dur-fast, .2s) var(--falone-ease, ease);
}

.falone-colgrid--carosello .falone-colgrid__cell:hover {
  background: var(--falone-colgrid-car-scheda-bg-hover, #fdf6ec);
}

.falone-colgrid--carosello .falone-colgrid__icon {
  width:  var(--falone-colgrid-car-icona, 42px);
  height: var(--falone-colgrid-car-icona, 42px);
  margin-bottom: var(--falone-colgrid-car-icona-gap, 18px);
}

.falone-colgrid--carosello .falone-colgrid__cell-title {
  margin: 0 0 var(--falone-colgrid-car-titolo-gap, 10px);
  font-size: var(--falone-colgrid-car-titolo, 1.05rem);
  line-height: 1.22;
}

.falone-colgrid--carosello .falone-colgrid__cell-text {
  margin: 0;
  /* 16px, stessa richiesta dell'11/09 vista sopra per il modo a griglia */
  font-size: var(--falone-colgrid-car-testo, 1rem);
  line-height: var(--falone-colgrid-car-testo-lh, 1.58);
}

.falone-colgrid--carosello .falone-rail-controls {
  --falone-rail-accent: var(--falone-accent, #f7941d);
  --falone-rail-btn-bg: transparent;
  margin: var(--falone-colgrid-car-comandi-gap, 34px) 0 0;
  width: min(100%, var(--falone-rail-controls-w, 560px));
}

@media (prefers-reduced-motion: reduce) {
  .falone-colgrid--carosello .falone-colgrid__pista { scroll-behavior: auto; }
  .falone-colgrid--carosello .falone-colgrid__cell { transition: none; }
}

/* ⚠️ Su schermo stretto due schede sarebbero due colonnine: una alla
   volta, e piu' compatta dentro. */
@media (max-width: 820px) {
  .falone-colgrid--carosello .falone-colgrid__pista {
    grid-auto-columns: 100%;
  }
  .falone-colgrid--carosello .falone-colgrid__cell {
    padding: var(--falone-colgrid-car-scheda-pad-mobile, 26px);
  }
  .falone-colgrid--carosello .falone-colgrid__cell-title {
    font-size: var(--falone-colgrid-car-titolo-mobile, 1.1rem);
  }
}

/* ⚠️ Rete di sicurezza per il remoto, dove il modello resta vecchio e
   l'intestazione viene stampata anche vuota: i suoi 56px di margine sotto
   escono dalla sezione per collassamento e diventano una striscia chiara
   sopra la fascia. `:has(*)` distingue il vuoto vero dal vuoto con dentro
   solo spazi, che `:empty` non vede. */
.falone-colgrid__head:not(:has(*)) { display: none; }

/* ======================================================================
   «Supporto tecnico» — quattro colonne, ultima riga incompleta
   ======================================================================
   Sette voci non si dividono per quattro. Le due strade tentate prima
   avevano un difetto ciascuna:

     · riga di coda allargata → le tre celle di sotto diventano 428px
       contro i 321 di sopra, e i filetti verticali non si incolonnano
       piu': si leggono come due griglie diverse impilate
     · buco lasciato vuoto → nel vuoto si vedeva lo sfondo della griglia,
       cioe' il colore dei DIVISORI: un rettangolo grigio

   Qui le colonne restano tutte uguali — quattro da 322px, i filetti in
   asse fra le due righe — e l'ottava cella semplicemente non c'e'. Non si
   vede perche' i divisori non sono piu' lo sfondo della griglia ma il
   BORDO di ogni cella: dove la cella manca, non c'e' bordo.

   L'ultima riga finisce a tre quarti come un paragrafo che finisce a
   meta' riga: non e' un buco, e' la fine del testo. */

/* ⚠️ Agganciato alla CLASSE, non al numero di pagina.
   Prima queste regole erano scritte `body.page-id-101 #servizi …` e
   `body.page-id-79 #servizi …`: dipendevano dall'id della pagina e
   dall'ancora della sezione. Su un'altra installazione — il remoto — la
   stessa pagina ha un altro id, la regola non si applicava e la griglia
   tornava alle tracce disuguali della riga di coda: colonne strette,
   titoli sovrapposti. Ora la classe la scrive il modello quando
   l'interruttore «Ultima riga a colonne uguali» e' acceso. */

.falone-colgrid__grid--pari {
  grid-template-columns: repeat(var(--falone-colgrid-cols, 4), minmax(0, 1fr));
  gap: 0;
  background: none;
}

.falone-colgrid__grid--pari .falone-colgrid__cell {
  grid-column: auto;
  margin-top: 0;
  padding: var(--falone-cg-top, 2px) var(--falone-cg-x, 34px) var(--falone-cg-bot, 34px);
  background: none;
  border-right:  1px solid var(--falone-colgrid-line, #e7e7e7);
  border-bottom: 1px solid var(--falone-colgrid-line, #e7e7e7);
}

/* fine di ogni riga, e ultima cella in assoluto: niente filetto a destra */
.falone-colgrid__grid--pari .falone-colgrid__cell--riga-fine {
  border-right: 0;
  padding-right: 0;
}

/* inizio di ogni riga a filo del titolo */
.falone-colgrid__grid--pari .falone-colgrid__cell--riga-inizio { padding-left: 0; }

/* righe dopo la prima: respiro sopra */
.falone-colgrid__grid--pari .falone-colgrid__cell--riga-sotto {
  padding-top: var(--falone-cg-riga2, 34px);
}

/* ultima riga: niente filetto sotto */
.falone-colgrid__grid--pari .falone-colgrid__cell--riga-ultima { border-bottom: 0; }

/* ⚠️ Sotto i 1180 le righe si spezzano altrove, quindi le classi calcolate
   per il desktop non valgono piu'. Qui si rimettono bordi e margini su
   TUTTE le celle e poi si tolgono di nuovo sulle posizioni della soglia
   intermedia, che il modello marca con le stesse classi piu' `-t`. */
@media (max-width: 1180px) {
  .falone-colgrid__grid--pari {
    grid-template-columns: repeat(var(--falone-colgrid-cols-tablet, 2), minmax(0, 1fr));
  }
  .falone-colgrid__grid--pari .falone-colgrid__cell {
    padding: var(--falone-cg-top-t, 26px);
    border-right:  1px solid var(--falone-colgrid-line, #e7e7e7);
    border-bottom: 1px solid var(--falone-colgrid-line, #e7e7e7);
  }
  .falone-colgrid__grid--pari .falone-colgrid__cell--riga-inizio-t { padding-left: 0; }
  .falone-colgrid__grid--pari .falone-colgrid__cell--riga-fine-t {
    border-right: 0;
    padding-right: 0;
  }
  .falone-colgrid__grid--pari .falone-colgrid__cell--riga-ultima-t { border-bottom: 0; }
}

/* Sottotitolo della sezione — le misure sono quelle di `.section-heading > p`
   del modello: 590px di larghezza, peso 300, colore del corpo. Il margine
   sotto resta quello del browser, come nel modello, cosi' entra nell'altezza
   dell'intestazione. */
.falone-colgrid__lead {
  max-width: var(--falone-colgrid-lead-w, 590px);
  margin: 0 0 var(--falone-p-gap, 1em);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: var(--falone-colgrid-lead-weight, 300);
  /* ⚠️ `inherit` NON va bene: la sezione ha `color: #fff` anche quando il
     fondale e' chiaro (i colori delle fasce chiare si impostano sui singoli
     elementi, non sul contenitore). Il sottotitolo veniva bianco su bianco —
     rapporto 1:1, invisibile. Si aggancia alla stessa variabile del testo
     delle celle, che il fondale chiaro imposta. */
  color: var(--falone-colgrid-text-color, rgba(255, 255, 255, .6));
}