/*
 * Valore reale — aspetto
 *
 * Origine: .value-section / .value-copy / .value-metrics di
 * source-clean/styles.css. Ogni valore letto.
 *
 * Indice
 *   1. sezione e colonne
 *   2. testo
 *   3. indicatori
 *   4. impilamento
 */

/* ======================================================================
   1. SEZIONE E COLONNE
   ======================================================================
   Griglia del sorgente: minmax(0,1fr) minmax(320px,.5fr) — gli indicatori
   valgono 0.5/1.5 = 33,3%, con un minimo di 320px.
   Grid e non flex: con `fr` lo spazio si distribuisce dopo il gap. */
.falone-value {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, var(--falone-value-metrics-fr, .5fr));
  gap: var(--falone-value-gap, 74px);
  align-items: end;
  padding: 112px 52px;   /* scavalcato dal controllo Margini interni */
  background: var(--falone-value-bg, #f5f4f1);
}

/* ======================================================================
   2. TESTO
   ====================================================================== */
.falone-value__copy { margin-left: var(--falone-indent, 0px); }

.falone-value__h2 {
  margin: 0 0 24px;
  color: var(--falone-value-title-color, #121212);
}

.falone-value__text {
  max-width: var(--falone-value-text-w, 650px);
  margin: 0;
  color: var(--falone-value-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* ⚠️ Il corpo non era dichiarato: ereditava 1rem dal corpo pagina. Il
     ripiego e' quindi 1rem, il valore che il browser applicava — non
     `inherit`, che qui coinciderebbe ma altrove ha gia' fatto danni. */
  font-size: var(--falone-value-text-size, 1rem);
  font-weight: 300;
}

.falone-value .falone-eyebrow { color: var(--falone-value-accent, #f7941d); }

/* ======================================================================
   3. INDICATORI
   ======================================================================
   Le celle sono separate da linee di 1px ottenute con gap: 1px piu' lo
   sfondo del contenitore — lo stesso accorgimento delle schede Valori nella
   pagina Impegno. Non sono bordi: cosi' non si raddoppiano fra celle
   adiacenti. */
.falone-value__metrics {
  display: grid;
  /* ⚠️ Il numero di colonne e' un parametro, e il predefinito e' 1: cosi' la
     home resta incolonnata come nel sorgente. Portandolo a 4 i numeri si
     mettono in fila e il filetto da 1px, che qui e' il `gap` sullo sfondo,
     diventa un divisore VERTICALE invece che orizzontale — la forma dello
     screen di Ristrutturazione del 05/08. Nessuna regola in piu': cambia solo
     la direzione in cui il gap si vede. */
  grid-template-columns: repeat(var(--falone-value-cols, 1), minmax(0, 1fr));
  gap: 1px;
  background: var(--falone-value-line, #e7e7e7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.falone-value__metric {
  padding: var(--falone-value-cell-pad, 28px);
  background: var(--falone-value-cell-bg, #fff);
}

.falone-value__num {
  display: block;
  /* ⚠️ Prima era --falone-value-accent, la STESSA variabile dell'occhiello:
     un colore per due cose che nello screen di Efficientamento Energetico
     sono diverse (occhiello arancione, numero nero). Il ripiego punta ancora
     ad --falone-value-accent, quindi home, 81 e 82 non cambiano. */
  color: var(--falone-value-num-color, var(--falone-value-accent, #f7941d));
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: clamp(
    var(--falone-value-num-min, 3.2rem),
    var(--falone-value-num-vw, 6vw),
    var(--falone-value-num-max, 5rem)
  );
  font-weight: 600;
  line-height: 1;

  /* ⚠️ il numero cambia durante l'animazione: senza questo la cella si
     allarga e restringe a ogni cifra in piu' o in meno */
  font-variant-numeric: tabular-nums;
}

.falone-value__label {
  display: block;
  margin-top: 10px;
  color: var(--falone-value-label-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-value-label-size, .66rem);
  font-weight: var(--falone-value-label-weight, 800);
  /* ⚠️ Nello screen di Efficientamento Energetico l'etichetta e' in tondo
     minuscolo e non spaziata; nella home e' un occhiello maiuscolo. I ripieghi
     sono i valori della home, quindi non cambia niente da sola. */
  letter-spacing: var(--falone-value-label-ls, .18em);
  text-transform: var(--falone-value-label-tt, uppercase);
}

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

/* ⚠️ Sotto gli 820px la fila torna a incolonnarsi: quattro celle su uno
   schermo stretto darebbero numeri da poche decine di pixel. */
@media (max-width: 820px) {
  .falone-value__metrics { grid-template-columns: 1fr; }
}

/* ======================================================================
   ICONA E DESCRIZIONE NELLA CELLA
   ======================================================================
   Dallo screen di Efficientamento (05/08). Senza icona e senza descrizione
   il modello non stampa niente, quindi la home non cambia.

   ⚠️ `vector-effect` anche sui `path`: non e' una proprieta' ereditata, e
   senza il tratto scalerebbe con la misura dell'icona. Stessa nota di
   colgrid.css. */
.falone-value__metric .falone-value__icon,
.falone-value__metric .falone-value__icon svg {
  display: block;
  width: var(--falone-value-icon-w, 40px);
  height: var(--falone-value-icon-h, 40px);
  margin-bottom: var(--falone-value-icon-gap, 16px);
  color: var(--falone-value-icon-color, var(--falone-accent, #f7941d));
  fill: none;
  stroke: currentColor;
}

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

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

.falone-value__desc {
  margin: var(--falone-value-desc-top, 8px) 0 0;
  color: var(--falone-value-desc-color, #666666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* 16px, come il resto dei testi descrittivi del sito (richiesta 11/09) */
  font-size: var(--falone-value-desc-size, 1rem);
  font-weight: 300;
  line-height: var(--falone-value-desc-lh, 1.6);
}

/* ======================================================================
   SCALA DEL TITOLO, PER ISTANZA
   ======================================================================
   ⚠️ .falone-h2 e' la scala della HOME: 74,88px a 1440. Sulle pagine interne
   e' troppo grande — su Efficientamento il titolo andava a quattro righe
   mentre nello screen ne occupa due. Stessa lezione gia' imparata con
   falone-split: la scala di un titolo va resa per istanza quando il widget
   serve piu' pagine, col valore della home come punto di partenza.

   ⚠️ Due classi (0,2,0) per battere `.falone-h2` del tema, che e' (0,1,0)
   ma potrebbe caricare dopo. I ripieghi sono i valori della home, quindi
   senza controlli impostati nulla cambia. */
.falone-value .falone-value__h2 {
  font-size: clamp(
    var(--falone-value-h2-min, 2.35rem),
    var(--falone-value-h2-vw, 5.2vw),
    var(--falone-value-h2-max, 5rem)
  );
  line-height: var(--falone-value-h2-lh, 1.03);
}