/*
 * Interventi specialistici — aspetto
 *
 * Origine: .special-band / .special-copy / .special-media / .special-lead /
 * .step-grid / .step-n della cattura Ristrutturazione.html, dove ricorre DUE
 * volte: post sisma (fondo scuro, testo a sinistra) e post alluvione (fondo
 * chiaro, immagine a sinistra).
 *
 * ⚠️ Chiaro e scuro non sono due sezioni diverse: sono la stessa con una
 * classe in piu'. Nel sorgente `.special-band` e' chiara e
 * `.special-band.dark-band` scura, e i colori di testo e divisori cambiano
 * di conseguenza. Qui la scelta e' un controllo che aggiunge `--dark`, e i
 * colori restano variabili: cosi' non c'e' una coppia di regole da tenere
 * allineata a mano.
 *
 * Indice
 *   1. fascia a due colonne
 *   2. testo
 *   3. fotografia
 *   4. passaggi numerati
 *   5. impilamento
 */

/* ======================================================================
   1. FASCIA A DUE COLONNE
   ====================================================================== */
.falone-special {
  display: grid;
  grid-template-columns:
    minmax(0, var(--falone-special-left-fr, 1fr))
    minmax(0, var(--falone-special-right-fr, 1.02fr));

  gap: clamp(36px, 4.6vw, 72px);   /* ripiego */
  gap: var(--falone-special-gap,
    clamp(
      var(--falone-special-gap-min, 36px),
      var(--falone-special-gap-vw, 4.6vw),
      var(--falone-special-gap-max, 72px)
    ));
  align-items: center;
  padding:
    var(--falone-special-pad-y, 76px)
    var(--falone-special-pad-x, 52px);
  background: var(--falone-special-bg, #f5f4f1);
  color: var(--falone-special-ink, #262626);
}

/* ⚠️ Con l'immagine a sinistra i PESI si scambiano: nel sorgente
   `.special-band.reversed` e' 1.02fr / 1fr, non 1fr / 1.02fr. Non basta
   cambiare l'ordine degli elementi. */
.falone-special--reversed {
  grid-template-columns:
    minmax(0, var(--falone-special-right-fr, 1.02fr))
    minmax(0, var(--falone-special-left-fr, 1fr));
}

.falone-special--dark {
  background: var(--falone-special-bg-dark, #121212);
  color: var(--falone-special-ink-dark, #fff);
}

/* ======================================================================
   2. TESTO
   ====================================================================== */
.falone-special__h2 {
  margin: 0 0 var(--falone-special-title-gap, 18px);
  color: inherit;
}
/* la scala arriva da .falone-h2--page del tema */

.falone-special__lead {
  max-width: var(--falone-special-lead-max, 600px);
  margin: 0 0 var(--falone-special-lead-gap, 34px);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* 16px, richiesta esplicita del cliente (11/09) */
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.95;
  color: var(--falone-special-lead-color, #666);
}

.falone-special--dark .falone-special__lead {
  color: rgba(255, 255, 255, .72);   /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-special--dark .falone-special__lead {
    color: color-mix(in srgb,
      var(--falone-special-ink-dark, #fff) calc(var(--falone-special-lead-op, .72) * 100%),
      transparent);
  }
}

/* ======================================================================
   3. FOTOGRAFIA
   ======================================================================
   ⚠️ Selettore DISCENDENTE: `.elementor img { height: auto }` (0,1,1)
   batterebbe la classe sola e il rapporto d'aspetto non verrebbe rispettato. */
.falone-special__media .falone-special__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--falone-special-ratio, 4 / 3);
  object-fit: cover;
}

/* ----------------------------------------------------------------------
   Collage di tre fotografie
   ----------------------------------------------------------------------
   ⚠️ Alternativa alla fotografia singola, non un'aggiunta: in Edilizia
   Residenziale la stessa fascia porta tre immagini invece di una — la prima
   alta il doppio a sinistra, le altre due impilate a destra.
   `min-height: 0` sulle immagini serve perche' dentro una griglia il minimo
   automatico e' il contenuto, e le righe non si comprimerebbero. */
.falone-special__collage {
  display: grid;
  grid-template-columns:
    minmax(0, var(--falone-special-collage-fr, 1.72fr))
    minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--falone-special-collage-gap, 8px);
  aspect-ratio: var(--falone-special-collage-ratio, 2.55);
}

/* ⚠️ Selettore DISCENDENTE: `.elementor img { height: auto }` (0,1,1)
   batterebbe la classe sola e le celle resterebbero vuote sotto. */
.falone-special__collage .falone-special__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  aspect-ratio: auto;   /* qui lo decide la cella, non l'immagine */
}

/* la prima occupa entrambe le righe */
.falone-special__collage .falone-special__img:first-child { grid-row: 1 / 3; }

/* ======================================================================
   4. PASSAGGI NUMERATI
   ======================================================================
   Tre celle con divisori verticali, come .falone-colgrid ma con un numero
   invece dell'icona e una scala piu' piccola. Vive qui perche' nel sorgente
   esiste solo dentro questa fascia. */
.falone-special__steps {
  display: grid;
  grid-template-columns: repeat(var(--falone-special-cols, 3), minmax(0, 1fr));
  gap: var(--falone-special-line-w, 1px);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--falone-special-line, #dedddb);
}

.falone-special--dark .falone-special__steps {
  background: var(--falone-special-line-dark, rgba(255, 255, 255, .17));
}

.falone-special__step {
  margin: 0;
  padding: 0 var(--falone-special-step-x, 22px);
  background: var(--falone-special-bg, #f5f4f1);
}

.falone-special--dark .falone-special__step {
  background: var(--falone-special-bg-dark, #121212);
}

.falone-special__step:first-child { padding-left: 0; }
.falone-special__step:last-child  { padding-right: 0; }

.falone-special__num {
  display: block;
  margin-bottom: var(--falone-special-num-gap, 16px);
  color: var(--falone-special-num-color, #f7941d);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);   /* ripiego */
  font-size: clamp(
    var(--falone-special-num-min, 1.3rem),
    var(--falone-special-num-vw, 1.9vw),
    var(--falone-special-num-max, 1.7rem)
  );
  font-weight: 600;
  line-height: 1;
}

.falone-special__step-title {
  margin: 0 0 var(--falone-special-step-title-gap, 14px);
  color: inherit;
  /* ⚠️ font del CORPO, non del display */
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* ⚠️ Scala per istanza: Ristrutturazione clamp(.8rem,.9vw,.9rem)/1.32,
     Edilizia clamp(.72rem,.8vw,.8rem)/1.3. */
  font-size: clamp(.8rem, .9vw, .9rem);   /* ripiego */
  font-size: clamp(
    var(--falone-special-st-min, .8rem),
    var(--falone-special-st-vw, .9vw),
    var(--falone-special-st-max, .9rem)
  );
  font-weight: 700;
  line-height: var(--falone-special-st-lh, 1.32);
}

.falone-special__step-text {
  margin: 0;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-special-sx-size, .74rem);
  font-weight: 300;
  line-height: var(--falone-special-sx-lh, 1.8);
  color: var(--falone-special-step-text, #666);
}

.falone-special--dark .falone-special__step-text {
  color: rgba(255, 255, 255, .58);   /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-special--dark .falone-special__step-text {
    color: color-mix(in srgb,
      var(--falone-special-ink-dark, #fff) calc(var(--falone-special-step-text-op, .58) * 100%),
      transparent);
  }
}

/* ----------------------------------------------------------------------
   Passaggi in ELENCO VERTICALE
   ----------------------------------------------------------------------
   ⚠️ Alternativa alla fila con divisori, non una variante di stile: il
   sorgente di Efficientamento Energetico usa `.step-list`, dove ogni
   passaggio e' una riga con il numero in una colonna a se'. Niente divisori,
   niente sfondo sulla griglia. */
.falone-special--steps-list .falone-special__steps {
  display: grid;
  grid-template-columns: none;
  gap: var(--falone-special-list-gap, 18px);
  background: none;
}

.falone-special--steps-list .falone-special__step {
  display: grid;
  grid-template-columns: var(--falone-special-list-num-w, 52px) minmax(0, 1fr);
  align-items: start;
  padding: 0;
  background: none;
}

/* il numero non ha piu' bisogno dello stacco sotto: sta a fianco */
.falone-special--steps-list .falone-special__num { margin-bottom: 0; }

/* titolo e testo vanno raccolti nella seconda colonna: senza un contenitore
   finirebbero su tre colonne diverse della griglia */
.falone-special--steps-list .falone-special__step-body { min-width: 0; }

.falone-special--steps-list .falone-special__step-title {
  margin-bottom: var(--falone-special-list-title-gap, 4px);
}

/* ======================================================================
   5. IMPILAMENTO
   ====================================================================== */
@media (max-width: 1180px) {
  .falone-special,
  .falone-special--reversed { grid-template-columns: 1fr; }

  /* il collage perde le due righe fisse: la prima passa a tutta larghezza.
     ⚠️ Il rapporto d'insieme e quello della grande cambiano da pagina a
     pagina: Edilizia tiene il 2.55 anche impilato, Efficientamento lo
     libera e da' 16/9 alla grande. Sono due controlli. */
  .falone-special__collage {
    grid-template-rows: auto;
    aspect-ratio: var(--falone-special-collage-ratio-tablet, var(--falone-special-collage-ratio, 2.55));
  }
  .falone-special__collage .falone-special__img:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
    aspect-ratio: var(--falone-special-collage-main-tablet, auto);
  }

  /* ⚠️ Impilata, l'immagine non deve precedere il testo: chi legge trova
     prima il titolo. Il sorgente lo fa con `order: 2` sulla fotografia. */
  .falone-special--reversed .falone-special__media { order: 2; }
}

@media (max-width: 820px) {
  .falone-special {
    padding: var(--falone-special-pad-y-tablet, 72px) var(--falone-special-pad-x-tablet, 18px);
  }
  .falone-special__collage { grid-template-columns: 1fr; }
  .falone-special__steps { grid-template-columns: 1fr; }
  .falone-special__step,
  .falone-special__step:first-child,
  .falone-special__step:last-child { padding: 26px 0; }
  .falone-special__step:first-child { padding-top: 0; }

  .falone-special__lead br,
  .falone-special__step-text br,
  .falone-special__h2 br { display: none; }
}

/* ======================================================================
   10. IL COLLAGE COME CAROSELLO
   ======================================================================
   Richiesta dell'utente (18/08): al posto del collage a tre, una
   fotografia grande per volta con le frecce sotto, come la fascia «Nuove
   realizzazioni» della home.

   Lo scorrimento e' nativo — overflow-x piu' scroll-snap — e i comandi
   arrivano dal componente condiviso del tema. Nessun JavaScript nuovo:
   e' il quinto riuso di rail.js.

   ⚠️ La diapositiva vale il 100% della pista, quindi il passo di un clic
   e' esattamente una fotografia. Il modello lo dichiara con
   `data-falone-step-card`, che legge lo scarto dal `gap` invece di
   supporlo. */
.falone-special__media--slider { display: block; }

.falone-special__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--falone-special-slider-gap, 14px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* la barra di sistema toglierebbe altezza alla fotografia */
  scrollbar-width: none;
}

.falone-special__pista::-webkit-scrollbar { display: none; }

.falone-special__pista:focus-visible {
  outline: 2px solid var(--falone-accent, #f7941d);
  outline-offset: 3px;
}

.falone-special__slide {
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: var(--falone-special-slider-ratio, 1.2);
  overflow: hidden;
}

/* ⚠️ Regola DISCENDENTE su <img>: Elementor pubblica
   `.elementor img { height: auto }` con specificita' (0,1,1), che batte una
   classe sola. Senza, la fotografia non riempie la diapositiva e sotto
   resta una fascia vuota. */
.falone-special__slide .falone-special__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.falone-special__media--slider .falone-rail-controls {
  --falone-rail-accent: var(--falone-special-slider-accent, var(--falone-accent, #f7941d));
  --falone-rail-btn: 40px;
  --falone-rail-btn-bg: transparent;
  margin-top: var(--falone-special-slider-controls-gap, 18px);
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .falone-special__pista { scroll-behavior: auto; }
}