/* =========================================================================
   Alzati e Fattura — sezione 06 STATS
   Desktop 1440×208 · mobile 390×348.
   Foto sfocata sul fondo + velatura, tre numeri che salgono allo scroll.
   ========================================================================= */

.aef-stats,
.aef-stats *,
.aef-stats *::before,
.aef-stats *::after { box-sizing: border-box; }

.aef-stats {
  --ink: #030F0F;
  --deep: #0A3B26;
  --green-bright: #00E27B;
  --muted: #C7D2CC;

  position: relative;
  isolation: isolate;
  display: flex;
  /* In alto, non al centro: le tre descrizioni sono lunghe diverse e appena
     una va a capo prima delle altre — succede sotto i 1000 px — il
     centramento faceva scendere i numeri a scaletta. A schermo largo, dove
     stanno tutte su una riga, non cambia nulla. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  /* Contenuto tenuto a 1200px al centro: vedi mercato.css */
  padding: 64px max(120px, (100% - 1200px) / 2);
  border-top: 1px solid var(--deep);
  border-bottom: 1px solid var(--deep);
  background-color: var(--ink);
  overflow: hidden;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Foto di sfondo con la stessa sfocatura leggera del Figma */
.aef-stats::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -2;
  background-image: var(--aef-stats-bg, url('../img/stats-bg.webp'));
  background-size: cover;
  background-position: center center;
  filter: blur(2px);
}

/* Velatura più densa ai bordi e più leggera al centro, come nel file */
.aef-stats::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(3, 15, 15, 0.92) 0%,
    rgba(3, 15, 15, 0.78) 50%,
    rgba(3, 15, 15, 0.92) 100%
  );
}

/* ---------- Variante «griglia verde» (landing Partner) ----------
   Al posto della fotografia sfocata, il fondo del frame Partner: un reticolo
   verde sopra un gradiente verticale.

   Nel Figma i 30 rettangoli sono **22 verticali e 8 orizzontali**, tutti da 1px
   e con passo 64 nelle due direzioni, verde brillante al 10%. La prima versione
   ne aveva letti solo otto — tutti verticali — e disegnava solo le colonne: a
   schermo mancava metà del reticolo.
   Le linee cadono in fondo al passo (63→64px) e l'immagine è spostata di 1px:
   così la prima resta a 64 dal bordo come nel frame, e non a 59 come quando
   l'inset dello strato di serie spostava l'origine delle ripetizioni.
   Sul telefono il passo è 48: la variante sta in fondo al file, dentro la media
   query, perché una regola con due classi scritta quassù vincerebbe anche lì. */
.aef-stats--griglia::before {
  /* Lo strato di serie sborda di 4px per lato (`inset:-4px`): serve alla
     sfocatura della variante fotografica, ma qui sposta l'origine delle
     ripetizioni e portava la prima linea a 59 invece che a 64. Qui il reticolo
     copre esattamente la sezione. */
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 63px,
      rgba(0, 226, 123, 0.10) 63px,
      rgba(0, 226, 123, 0.10) 64px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 63px,
      rgba(0, 226, 123, 0.10) 63px,
      rgba(0, 226, 123, 0.10) 64px
    );
  /* Le linee cadono in fondo al passo (63→64px), quindi da sole partirebbero a
     63. Un pixel di spostamento dell'immagine le porta a 64, 128, 192 … 1408,
     esattamente dove il frame mette i rettangoli. */
  background-position: 1px 1px;
  background-size: auto;
  filter: none;
}

.aef-stats--griglia {
  /* Nel frame la sezione **non ha bordi**: sopra e sotto sfuma il gradiente, e
     basta. Le due righe da 1px di serie tagliavano netto proprio dove il
     disegno vuole la sfumatura. */
  border-top: 0;
  border-bottom: 0;
  /* Quattro colonne con 40 di spazio: a 1440 fanno 4×270 + 3×40 = 1200 esatti.
     La giustificazione resta quella di serie — `space-between`, che è anche
     quella del frame (primaryAxisAlignItems SPACE_BETWEEN): con le colonne che
     si spartiscono l'avanzo non resta spazio da distribuire, quindi non sposta
     nulla. Era stata forzata a `flex-start` quando le colonne erano larghe 254
     e l'avanzo portava lo spazio a 61. */
  gap: 40px;
}

/* Nel frame numero ed etichetta sono **centrati** dentro la colonna
   (textAlignHorizontal CENTER, allineamento trasversale CENTER). Di serie sono
   a sinistra, ed è la differenza che si nota di più a colpo d'occhio. */
.aef-stats--griglia .aef-stats__item {
  align-items: center;
  text-align: center;
}

/* Le colonne si **spartiscono** lo spazio, non sono inchiodate a 270px.
   Nel frame la fila «stats» è FILL e i quattro «stat» hanno layoutGrow=1: a
   1440 il conto torna comunque a 270 esatti — (1200 − 3×40) / 4 — ma la regola
   vera è che si dividono l'avanzo. Con `flex: 0 0 270px` sotto i 1440 le quattro
   colonne chiedevano più spazio di quanto ce ne fosse e, con `overflow:hidden`
   sulla sezione, la quarta veniva tagliata dal bordo senza che si vedesse che
   mancava: a 1024 amputata, a 900 fuori schermo, a 768 restavano due voci e
   mezza su quattro.
   Vale **solo da 768 in su**: due classi pesano più di una, quindi senza il
   limite questa regola vincerebbe anche dentro la media query del telefono. */
@media (min-width: 768px) {
  .aef-stats--griglia .aef-stats__item {
    flex: 1 1 0;
  }

  /* L'a-capo esplicito della quarta etichetta. Nel Figma il testo ha un ritorno
     a capo dopo «top» (U+2028) e il valore che arriva dal pannello se lo porta
     dietro come a-capo del sorgente; l'HTML lo riduce a uno spazio e l'andata a
     capo la sceglie il browser, che spezzava «…top imprenditori / italiani»
     invece di «…top / imprenditori italiani».
     `pre-line` tiene l'a-capo scritto nel testo e continua a collassare gli
     spazi, quindi non tocca le altre tre etichette. Solo sull'etichetta: il
     numero, nel sorgente, sta su più righe e con `pre-line` si spezzerebbe.
     Solo da 768 in su: sul telefono il frame vuole l'etichetta su una riga
     sola, e lì l'a-capo deve tornare uno spazio. */
  .aef-stats--griglia .aef-stats__label {
    white-space: pre-line;
  }
}

/* ---------- Fascia di mezzo (768 → 900): il prezzo delle colonne fluide ----
   Il Figma disegna 1440 e 390 e non dice niente di quello che c'è in mezzo.
   Con `flex: 1 1 0` le quattro colonne si spartiscono lo spazio, e a 768 la
   colonna vale 154px — misurato in pagina, non stimato: (768 − 80 di margini
   − 3×24 di spazio) / 4. Sotto quella soglia due cose si rompono, e sono
   **due difetti nuovi**, nati con le colonne fluide:

   1. «€ 1.48 mld» a 36px occupa 169.6px di inchiostro: sotto gli 830px di
      finestra la colonna scende sotto quel valore e il numero si spezza in due
      righe («€ 1.48» / «mld»).
   2. La riga «speaker, scelti tra i top» occupa 158.4px: sotto i 782px la
      colonna non la regge più e l'a-capo esplicito tenuto da `pre-line`
      lascia «top» orfano su una riga da solo.

   Il numero scala con la colonna invece di saltare a gradino: a 900 vale
   esattamente i 36px della regola di sopra (nessun salto al confine), a 768
   scende a 30 — 141.4px di inchiostro dentro 154 di colonna, con 12px di
   margine che assorbono anche la barra di scorrimento di Windows, che `100vw`
   conta e la colonna no. La verifica della tenuta sta nel misuratore, riga per
   riga a undici larghezze.
   L'a-capo esplicito torna a essere uno spazio: sopra i 782px il browser
   spezza comunque dopo «top» e il disegno non cambia di un pixel, sotto evita
   l'orfano e la quarta etichetta va a capo come già fanno le altre tre.

   Tutto sotto `.aef-stats--griglia`: le due landing in linea servono
   `class="aef-stats"` senza variante e non vedono nessuna di queste righe.
   Sta **dopo** il blocco qui sopra perché ha la stessa specificità (due
   classi) e a parità vince l'ultima scritta: dentro la fascia deve vincere
   questa. */
@media (min-width: 768px) and (max-width: 900px) {
  .aef-stats--griglia .aef-stats__value {
    font-size: clamp(30px, calc(30px + (100vw - 768px) / 22), 36px);
    /* 7/6 è esattamente il rapporto 42/36 della regola di sopra: scritto così
       a 900px l'interlinea vale 42px tondi e il confine non fa nessun salto,
       nemmeno di un centesimo di pixel. Scritto 1.167 ne valeva 42.012. */
    line-height: calc(7 / 6);
  }

  .aef-stats--griglia .aef-stats__label {
    white-space: normal;
  }
}

.aef-stats--griglia::after {
  /* Gradiente **verticale**, non orizzontale: è questo che fa sfumare il bordo
     sopra e sotto. Nel frame va da nero a verde scuro fra il 32% e il 68% e
     torna nero. Scritto a 90° la sfumatura correva da sinistra a destra e i
     bordi restavano netti. */
  background: linear-gradient(
    180deg,
    #030F0F 0%,
    #0A3B26 32%,
    #0A3B26 68%,
    #030F0F 100%
  );
  /* Il gradiente sta SOTTO le righe, non sopra: altrimenti le cancella.
     `::before` ha z-index -2 e `::after` -1, quindi qui si scambiano. */
  z-index: -3;
}


.aef-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 254px;
}

.aef-stats__value {
  margin: 0;
  color: var(--green-bright);
  font-size: 44px;
  font-weight: 900;
  line-height: 48px;
  font-variant-numeric: tabular-nums;
}

.aef-stats__label {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

/* ---------- Comparsa ---------- */
.aef-anima .aef-stats .aef-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.aef-stats .aef-reveal.is-in { opacity: 1; transform: none; }
.aef-stats .aef-reveal:nth-child(2) { transition-delay: .08s }
.aef-stats .aef-reveal:nth-child(3) { transition-delay: .16s }
/* La landing Partner ha quattro numeri, non tre: senza questa riga il quarto
   compariva insieme al primo, rompendo la cascata. */
.aef-stats .aef-reveal:nth-child(4) { transition-delay: .24s }

body.elementor-editor-active .aef-stats .aef-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-stats { padding: 52px 40px; gap: 24px; }
  .aef-stats__value { font-size: 36px; line-height: 42px; }
}

/* =========================================================================
   MOBILE — frame 390×348: le tre voci vanno in colonna
   ========================================================================= */
@media (max-width: 767px) {
  .aef-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 40px 24px;
  }

  .aef-stats__item { flex: 1 1 auto; width: 100%; }

  .aef-stats__value { font-size: 34px; line-height: 40px; }
  .aef-stats__label { font-size: 15px; line-height: 22px; }
}

/* =========================================================================
   MOBILE — frame Partner «Striscia KPI — mobile · variante griglia» 390×469
   Quattro voci in colonna larghe 342, margini 48/24, spazio 28 fra una voce e
   l'altra e 4 dentro ciascuna. Numeri 36/42, etichette 14/21.
   ========================================================================= */
@media (max-width: 767px) {
  .aef-stats--griglia {
    gap: 28px;
    padding: 48px 24px;
    /* Il frame del telefono non dichiara primaryAxisAlignItems (= MIN). In
       colonna, con l'altezza data dal contenuto, non cambia un pixel: si scrive
       perché è quello che dice il frame. */
    justify-content: flex-start;
  }

  /* Sul telefono il passo del reticolo è **48**, non 64: il frame ha otto linee
     verticali (48 … 384) e nove orizzontali (48 … 432). La regola del reticolo
     sta fuori dalle media query e pesa due classi, quindi senza questa scendeva
     quaggiù col passo del desktop e si contavano sei verticali e sette
     orizzontali. Lo spostamento di 1px dell'immagine lo eredita da lassù. */
  .aef-stats--griglia::before {
    background-image:
      repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 47px,
        rgba(0, 226, 123, 0.10) 47px,
        rgba(0, 226, 123, 0.10) 48px
      ),
      repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 47px,
        rgba(0, 226, 123, 0.10) 47px,
        rgba(0, 226, 123, 0.10) 48px
      );
  }

  .aef-stats--griglia .aef-stats__item {
    flex: 1 1 auto;
    width: 100%;
    gap: 4px;
    /* Nel frame del telefono i due testi sono a **sinistra**
       (textAlignHorizontal LEFT, allineamento trasversale MIN). Il centraggio
       della variante griglia è scritto fuori dalle media query e pesa due
       classi: senza queste due righe vinceva anche quaggiù, e non centrava solo
       il testo — stringeva la scatola del paragrafo sul contenuto e la portava
       al centro, spostando numeri ed etichette fino a 140px dal margine. */
    align-items: flex-start;
    text-align: left;
  }

  .aef-stats--griglia .aef-stats__value { font-size: 36px; line-height: 42px; }
  .aef-stats--griglia .aef-stats__label { font-size: 14px; line-height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .aef-stats .aef-reveal { opacity: 1; transform: none; transition: none; }
}