/*
 * Il nostro approccio — aspetto
 *
 * Origine: .approach-section / .approach-heading / .approach-steps /
 * .approach-step / .step-num della cattura Impegno.html. Ogni valore letto.
 *
 * ⚠️ NON e' il componente .falone-steps condiviso. Quello e' un ELENCO A
 * RIGHE (numero | titolo | testo su tre colonne, con filetti orizzontali fra
 * le righe). Questo e' una FILA di cinque colonne affiancate, con una linea
 * che collega un numero al successivo. Stessa idea, impaginazione diversa:
 * riusare l'altro avrebbe voluto dire riscriverlo per intero.
 *
 * Indice
 *   1. sezione
 *   2. fila dei passaggi
 *   3. numero e linea di collegamento
 */

/* ======================================================================
   1. SEZIONE
   ====================================================================== */
.falone-approach {
  padding:
    var(--falone-approach-pad-top, 82px)
    var(--falone-approach-pad-x, 52px)
    var(--falone-approach-pad-bottom, 84px);
  background: var(--falone-approach-bg, #fff);
}

.falone-approach__head { margin-bottom: var(--falone-approach-head-gap, 44px); }

.falone-approach__h2 {
  max-width: none;
  margin: 0;
  color: var(--falone-approach-title-color, #262626);
}
/* la scala arriva da .falone-h2--page del tema */

/* ======================================================================
   2. FILA DEI PASSAGGI
   ======================================================================
   ⚠️ `margin-block: 0` e non `margin: 0`: azzerare tutti i margini
   cancellerebbe anche il margin-left che allinea la fila al resto della
   pagina. E' un'attenzione che il sorgente ha, e va conservata. */
.falone-approach__steps {
  display: grid;
  grid-template-columns: repeat(var(--falone-approach-cols, 5), minmax(0, 1fr));
  gap: var(--falone-approach-gap, 14px);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.falone-approach__steps > li { margin: 0; }

/* ======================================================================
   3. NUMERO E LINEA DI COLLEGAMENTO
   ======================================================================
   La linea e' uno ::after che occupa lo spazio rimasto accanto al numero:
   `flex: 1 1 auto` su un contenitore flex. Nessun elemento in piu' nel
   markup, e si accorcia da se' se il numero e' piu' largo. */
.falone-approach__num {
  display: flex;
  align-items: center;
  gap: var(--falone-approach-num-gap, 16px);
  margin-bottom: var(--falone-approach-num-bottom, 20px);
  color: var(--falone-approach-num-color, #f7941d);
  font-family: var(--falone-font-display, "Jost", sans-serif);

  font-size: clamp(1.5rem, 2.35vw, 2.2rem);   /* ripiego */
  font-size: clamp(
    var(--falone-approach-num-min, 1.5rem),
    var(--falone-approach-num-vw, 2.35vw),
    var(--falone-approach-num-max, 2.2rem)
  );
  font-weight: 600;
  line-height: 1;
}

.falone-approach__num::after {
  content: "";
  flex: 1 1 auto;
  height: var(--falone-approach-line-h, 1px);
  background: var(--falone-approach-line, #dcdcdc);
}

/* l'ultimo non collega niente: la linea sparirebbe nel vuoto */
.falone-approach__step:last-child .falone-approach__num::after { display: none; }

.falone-approach__step-title {
  margin: 0 0 var(--falone-approach-title-gap, 12px);
  color: var(--falone-approach-step-title, #262626);
  /* ⚠️ font del CORPO, non del display */
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(.86rem, .98vw, .95rem);
  font-weight: 700;
  line-height: 1.2;
}

.falone-approach__step-text {
  margin: 0;
  color: var(--falone-approach-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.62;
}

/* ======================================================================
   IMPILAMENTO
   ======================================================================
   Il sorgente scala 5 -> 3 -> 1. A tre colonne la linea va nascosta anche
   al terzo passaggio di ogni riga, o punterebbe fuori dalla griglia. */
@media (max-width: 1180px) {
  .falone-approach__steps {
    grid-template-columns: repeat(var(--falone-approach-cols-tablet, 3), minmax(0, 1fr));
    gap: 34px 14px;
  }
  .falone-approach__step:nth-child(3n) .falone-approach__num::after { display: none; }
}

@media (max-width: 820px) {
  .falone-approach {
    padding: var(--falone-approach-pad-tablet, 72px) var(--falone-approach-pad-x-tablet, 18px);
  }
  .falone-approach__steps {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  /* ⚠️ !important come nel sorgente: serve a battere la regola nth-child(3n)
     della soglia precedente, che ha specificita' maggiore. */
  .falone-approach__step .falone-approach__num::after { display: none !important; }

  .falone-approach__step-text br,
  .falone-approach__h2 br { display: none; }
}