/*
 * Sezione a due colonne (Storia) — aspetto
 *
 * Origine: .page-section / .page-section.split / .page-copy / .history-copy
 * di source-clean/styles.css. Ogni valore letto.
 */

.falone-split {
  display: grid;
  /* ⚠️ L'unita' fr sta nel VALORE della variabile: `calc(1.05 * 1fr)`
     renderebbe invalida tutta la grid-template-columns. */
  grid-template-columns:
    minmax(0, var(--falone-split-left-fr, 1.05fr))
    minmax(var(--falone-split-right-min, 320px), var(--falone-split-right-fr, .95fr));
  /* ⚠️ Lo stacco fluido e' PARAMETRIZZATO in tre parti: ogni pagina del
     sorgente ha la sua formula —
       Costruttori clamp(42px, 7vw, 120px)
       Impegno     clamp(40px, 6vw,  96px)
     e un controllo che scrivesse un numero fisso perderebbe la fluidita'. */
  gap: clamp(42px, 7vw, 120px);   /* ripiego */
  gap: var(--falone-split-gap,
    clamp(
      var(--falone-split-gap-min, 42px),
      var(--falone-split-gap-vw, 7vw),
      var(--falone-split-gap-max, 120px)
    ));
  align-items: var(--falone-split-align, start);
  padding: var(--falone-split-pad-y, 112px) var(--falone-split-pad-x, 52px);
  background: var(--falone-split-bg, #fff);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ⚠️ Stesso meccanismo di `.falone-intro`: due pseudo-elementi, la
   fotografia (schiarita) e il velo sopra. Se non e' stata scelta nessuna
   immagine la variabile e' indefinita e lo pseudo-elemento resta
   trasparente: la fascia funziona come prima, a fondo piatto. */
.falone-split::before,
.falone-split::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.falone-split::before {
  background-image: var(--falone-split-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--falone-split-bg-op, .8);
}

.falone-split::after {
  background-color: rgba(245, 244, 241, .78);   /* ripiego */
  background-color: color-mix(
    in srgb,
    var(--falone-split-veil-color, #F5F4F1) calc(var(--falone-split-veil-op, .78) * 100%),
    transparent
  );
}

.falone-split__head,
.falone-split__copy {
  position: relative;
  z-index: 1;
}

.falone-split__h2 {
  /* modello: `h2 { margin-bottom: 24px }` */
  margin: 0 0 var(--falone-h2-gap, 24px);
  /* ⚠️ .page-section h2 del sorgente usa --ink (#262626), NON --black:
     un grigio molto scuro, non il nero delle fasce. */
  color: var(--falone-split-title-color, #262626);
  letter-spacing: var(--falone-split-title-ls, normal);

  /* ⚠️ La scala del titolo e' PER ISTANZA, e per difetto e' quella dell'h2
     globale del sorgente — clamp(2.35rem, 5.2vw, 5rem), interlinea 1.03 —
     che e' quella usata nella pagina Creatori di Valore.
     Impegno la sovrascrive con clamp(2rem, 3.5vw, 3.25rem) e 1.14: e' una
     regola sua, non il globale.
     Questa regola batte .falone-h2 del tema per ORDINE, non per
     specificita': sono entrambe (0,1,0), ma split.css dichiara come
     dipendenza l'ultimo foglio del tema e quindi viene stampato dopo. */
  font-size: var(--falone-split-title-size,
    clamp(
      var(--falone-split-title-min, 2.35rem),
      var(--falone-split-title-vw, 5.2vw),
      var(--falone-split-title-max, 5rem)
    ));
  line-height: var(--falone-split-title-lh, 1.03);
}

/* ⚠️ Sotto i 480px il resto dei titoli di sezione (--falone-h2, in
   tokens.css) passa a un secondo clamp con un minimo piu' alto — 35,2px
   invece di 37,6, ma un massimo di 57,6 invece di fermarsi al minimo del
   primo — cosi' il titolo non si schiaccia sotto un certo corpo su schermi
   molto stretti. Questa regola ha la sua stessa scala, per istanza: senza
   questo blocco restava ancorata al minimo del clamp desktop (37,6px),
   piu' piccola di ogni altro titolo di sezione alla stessa larghezza. */
@media (max-width: 480px) {
  .falone-split__h2 {
    font-size: var(--falone-split-title-size,
      clamp(
        var(--falone-split-title-min-mobile, 2.2rem),
        var(--falone-split-title-vw-mobile, 12vw),
        var(--falone-split-title-max-mobile, 3.6rem)
      ));
  }
}

/* Una parola in accento dentro il titolo: nel sorgente <span class="accent">,
   che azzera anche il corsivo perche' i titoli display sono in corsivo. */
.falone-split__h2 .falone-accent {
  color: var(--falone-split-accent, #f7941d);
  font-style: normal;
}

.falone-split__copy {
  max-width: var(--falone-split-copy-max, 780px);
  /* .history-copy: 50px di stacco in alto, per allineare il testo al titolo */
  padding-top: var(--falone-split-copy-top, 50px);
  color: var(--falone-split-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-split-text-size, 1rem);
  font-weight: var(--falone-split-text-weight, 400);
  line-height: var(--falone-split-text-lh, normal);
}

/* nell'introduzione di Impegno una frase e' in grassetto e prende --ink,
   piu' scuro del testo attorno */
.falone-split__copy strong {
  color: var(--falone-split-strong-color, #262626);
  font-weight: 700;
}

.falone-split__copy p { margin: 0 0 var(--falone-split-para-gap, 20px); }
.falone-split__copy p:last-child { margin-bottom: 0; }

/* ⚠️ La soglia a cui le colonne si impilano cambia da pagina a pagina:
   `.page-section.split` di Creatori di Valore si impila a 820,
   `.impegno-intro` di Il nostro impegno a 1180. Una @media non accetta una
   variabile, quindi la soglia e' una CLASSE scelta dal pannello. */
@media (max-width: 1180px) {
  .falone-split--stack-1180 {
    grid-template-columns: 1fr;
  }
  /* impilato, il tetto di larghezza stringerebbe il testo senza ragione:
     il sorgente lo toglie insieme allo stacco */
  .falone-split--stack-1180 .falone-split__copy {
    padding-top: 0;
    max-width: none;
  }
}

@media (max-width: 820px) {
  .falone-split {
    grid-template-columns: 1fr;
    padding: var(--falone-split-pad-y-tablet, 72px) var(--falone-split-pad-x-tablet, 18px);
  }
  /* impilate, i 50px di stacco non servono piu': il testo segue il titolo */
  .falone-split__copy { padding-top: 0; }
}

/* ======================================================================
   IL TESTO DI DESTRA PARTE DALLA RIGA DEL TITOLO
   ======================================================================
   Nelle sezioni «split» la colonna di sinistra contiene occhiello + titolo,
   quella di destra solo il testo. Le due partono dallo stesso bordo alto,
   quindi il testo si allineava all'OCCHIELLO e non al titolo — e siccome
   il rientro era stato impostato a mano, su ogni pagina era diverso:

     Ristrutturazione · Edilizia · Infrastrutture   18px  -> testo 22,9px SOPRA il titolo
     Costruttori · Efficientamento                  50px  -> testo  9,1px SOTTO
     Il nostro impegno                              44px  -> testo  3,1px SOTTO

   Il valore corretto e' uno solo: l'altezza dell'occhiello piu' il suo
   stacco, cioe' 22,93 + 18 = 40,93px. Scritto come somma delle due misure
   invece che come numero fisso, cosi' se un giorno cambia il corpo
   dell'occhiello il testo resta agganciato al titolo.

   ⚠️ `!important` perche' il rientro arriva dalle impostazioni del widget,
   che Elementor stampa a specificita' (0,4,0): nessun selettore ragionevole
   la batte. Toccare i dati di sei pagine per un valore uguale su tutte
   sarebbe stato piu' fragile di una riga sola.

   ⚠️ Vale per l'occhiello su UNA riga — verificato: lo e' su tutte e sei.
   Con un occhiello su due righe il testo tornerebbe a scendere. */
body .falone-split__copy {
  padding-top: calc(
    var(--falone-eyebrow-lh, 22.93px) + var(--falone-eyebrow-gap, 18px)
  ) !important;
}

@media (max-width: 1180px) {
  /* impilate, il rientro non ha piu' senso: il testo segue il titolo */
  body .falone-split__copy { padding-top: var(--falone-split-copy-top-stack, 24px) !important; }
}