/*
 * I nostri valori — aspetto
 *
 * Origine: .values-band / .values-title / .values-grid / .value-cell della
 * cattura Impegno.html. Ogni valore letto, compresi i blocchi @media.
 *
 * ⚠️ Le icone del sorgente sono SVG in linea con contorno (stroke accento,
 * spessore 1,7, nessun riempimento). Su decisione dell'utente si usano le
 * icone di Font Awesome invece di estrarre quegli SVG: scudo, stella, foglia,
 * persone. Font Awesome le disegna PIENE, non a contorno — la forma e'
 * la stessa, il tratto no.
 *
 * Indice
 *   1. fascia scura a due colonne
 *   2. griglia dei valori
 *   3. cella
 */

/* ======================================================================
   1. FASCIA SCURA A DUE COLONNE
   ======================================================================
   ⚠️ #111 del sorgente normalizzato su #121212, come le altre fasce scure. */
.falone-values {
  display: grid;
  grid-template-columns:
    minmax(var(--falone-values-head-min, 260px), var(--falone-values-head-fr, .78fr))
    minmax(0, var(--falone-values-grid-fr, 1.32fr));

  gap: clamp(40px, 6vw, 104px);   /* ripiego */
  gap: var(--falone-values-gap,
    clamp(
      var(--falone-values-gap-min, 40px),
      var(--falone-values-gap-vw, 6vw),
      var(--falone-values-gap-max, 104px)
    ));
  align-items: start;
  padding:
    var(--falone-values-pad-y, 78px)
    var(--falone-values-pad-x, 52px);
  background: var(--falone-values-bg, #121212);
  color: var(--falone-values-ink, #fff);
}

.falone-values__h2 {
  margin: 0;
  color: var(--falone-values-ink, #fff);
}
/* la scala arriva da .falone-h2--page del tema: qui e' la stessa di
   approccio, futuro e chiusura */

/* ======================================================================
   2. GRIGLIA DEI VALORI
   ======================================================================
   ⚠️ I filetti non sono bordi: sono lo SFONDO della griglia visto attraverso
   un gap di 1px, come nelle schede della pagina Costruttori. Con dei border
   si raddoppierebbero fra due celle vicine. */
.falone-values__grid {
  display: grid;
  grid-template-columns: repeat(var(--falone-values-cols, 2), minmax(0, 1fr));
  gap: var(--falone-values-line-w, 1px);

  background: rgba(255, 255, 255, .16);   /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-values__grid {
    background: color-mix(in srgb,
      var(--falone-values-ink, #fff) calc(var(--falone-values-line-op, .16) * 100%),
      transparent);
  }
}

/* ======================================================================
   3. CELLA
   ======================================================================
   ⚠️ I margini interni del sorgente non sono uniformi, e la ragione e'
   l'allineamento ottico: la prima riga sta quasi a filo del titolo (4px),
   la seconda respira (34px), e la colonna di SINISTRA non ha rientro
   perche' deve allinearsi al bordo della griglia.
     .value-cell               padding: 0 40px 34px
     :nth-child(-n+2)          padding-top: 4px
     :nth-child(n+3)           padding-top: 34px
     :nth-child(odd)           padding-left: 0
   Riprodotti tali e quali. */
.falone-values__cell {
  display: block;
  padding: 0 var(--falone-values-cell-pad-x, 40px) var(--falone-values-cell-pad-b, 34px);
  background: var(--falone-values-bg, #121212);
}

.falone-values__cell:nth-child(-n + 2) { padding-top: var(--falone-values-row1-top, 4px); }
.falone-values__cell:nth-child(n + 3)  { padding-top: var(--falone-values-row2-top, 34px); }
.falone-values__cell:nth-child(odd)    { padding-left: 0; }

/* ⚠️ Selettore DISCENDENTE e regola su <svg> E su <i>: Font Awesome puo'
   arrivare come font (elemento <i>) o come SVG, secondo come Elementor e'
   configurato. Coperti entrambi, o l'icona resterebbe della misura di
   default. */
.falone-values__cell .falone-values__icon,
.falone-values__cell .falone-values__icon svg {
  display: block;
  width: var(--falone-values-icon-w, 33px);
  height: var(--falone-values-icon-h, 37px);
  margin-bottom: var(--falone-values-icon-gap, 18px);
  color: var(--falone-values-icon-color, #f7941d);
  /* ⚠️ Parametrizzate per reggere sia le icone Font Awesome (piene) sia quelle
     a contorno. I ripieghi sono i valori di prima: nessuna pagina cambia. */
  fill: var(--falone-values-icon-fill, currentColor);
  stroke: var(--falone-values-icon-stroke, none);
  font-size: var(--falone-values-icon-size, 30px);
  line-height: 1;
}

/* Icone a contorno: il contenitore imposta le variabili, l'svg le eredita. */
.falone-values__icon--contorno {
  --falone-values-icon-fill: none;
  --falone-values-icon-stroke: currentColor;
}

.falone-values__icon--contorno .falone-svgicon {
  stroke-width: var(--falone-values-icon-tratto, 1.7);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ⚠️ `vector-effect` anche sui `path`: non e' ereditata, e senza di essa il
   tratto verrebbe moltiplicato dal rapporto fra la misura resa e il viewBox
   24x24 — l'1,7 del sorgente diventerebbe spesso il doppio. */
.falone-values__icon--contorno .falone-svgicon,
.falone-values__icon--contorno .falone-svgicon path { vector-effect: non-scaling-stroke; }

.falone-values__cell-title {
  margin: 0 0 var(--falone-values-title-gap, 12px);
  color: var(--falone-values-ink, #fff);
  /* ⚠️ font del CORPO, non del display: il sorgente usa --font-body qui */
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.falone-values__cell-text {
  margin: 0;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* 16px, richiesta esplicita del cliente (11/09), come sulle celle di
     falone-colgrid. */
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.62;

  color: rgba(255, 255, 255, .6);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-values-ink, #fff) calc(var(--falone-values-text-op, .6) * 100%),
    transparent);
}

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

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

  /* a colonna unica i margini asimmetrici non servono piu': tutte uguali */
  .falone-values__cell,
  .falone-values__cell:nth-child(odd),
  .falone-values__cell:nth-child(-n + 2),
  .falone-values__cell:nth-child(n + 3) { padding: 38px 0; }
  .falone-values__cell:first-child { padding-top: 4px; }

  /* ⚠️ Il sorgente nasconde i <br> del testo sotto gli 820px: le righe
     spezzate a mano vanno a capo dove capita, su schermo stretto. */
  .falone-values__cell-text br,
  .falone-values__h2 br { display: none; }
}