/*
 * Eptamed — Statistiche (widget Elementor)
 * Porting della sezione "Trust Strip" di index.html. Il widget produce solo
 * la griglia di colonne: sfondo/bordi della sezione restano al Section/
 * Container di Elementor che la ospita, per non duplicare layout che
 * Elementor gestisce già.
 */

.ept-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
}

/*
 * Layout (corretto 2026-10-04 dopo il primo tentativo a "card" — il cliente
 * voleva il cerchio icona come prima, SENZA contorno/sfondo a card, e da
 * tablet/desktop la riga orizzontale di sempre): solo su mobile l'icona va
 * sopra al testo (verticale), da tablet in su torna icona+testo affiancati
 * come nella versione originale — nessun bordo/sfondo in nessun caso.
 */
.ept-stats-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* Su mobile (2 colonne), se il totale è dispari l'ultima voce resta da
   sola sull'ultima riga: occupa tutta la larghezza (entrambe le colonne) ma
   torna orizzontale come su desktop — icona a sinistra, numero+testo a
   destra, allineata a sinistra come la prima card — invece di restare
   verticale/centrata come le altre voci dispari del mobile (richiesta
   esplicita 2026-10-04, con screenshot). justify-self:stretch (non center)
   fa sì che la card riempia tutta la riga invece di restringersi al
   contenuto e centrarsi. Questa regola deve stare PRIMA della media query
   sotto: a parità di specificità (stessa classe) vince l'ultima nell'ordine
   del file, quindi il reset desktop dentro @media va scritto dopo, non
   prima, altrimenti resta sempre attivo anche a schermo largo — bug già
   preso una volta. */
.ept-stats-item--last-odd {
  grid-column: span 2;
  justify-self: stretch;
  flex-direction: row;
  align-items: center;
}

/* Essendo in riga (non in colonna come le altre voci mobile), il testo
   deve occupare solo lo spazio che gli serve accanto all'icona, non il
   100% della card — stesso motivo del reset analogo già fatto per il
   layout desktop qui sotto. */
.ept-stats-item--last-odd .ept-stats-body {
  width: auto;
}

/* Tablet: PRIMA si passava direttamente a "tante colonne quante sono le
   voci" già a 640px (repeat(N,1fr)) — con 5 colonne su un iPad (~768px)
   ogni colonna restava larghissima ~150px MA con icona+testo affiancati in
   riga, titolo/copy andavano in overlap/wrap bruttissimo (segnalato dal
   cliente 2026-10-04, "lato responsive è un casino"). auto-fit lascia che
   il browser calcoli da solo quante colonne entrano DAVVERO in quella
   larghezza (min 150px ciascuna), invece di forzarne sempre N: su schermi
   stretti si riduce a 2-3 colonne, mai più strette del necessario. Da qui
   in su torna anche la riga orizzontale icona+testo originale. */
@media (min-width: 640px) {
  .ept-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .ept-stats-item {
    flex-direction: row;
    align-items: center;
  }
  .ept-stats-item--last-odd {
    grid-column: auto;
    justify-self: auto;
  }
  /* In riga (non più in colonna) il testo deve tornare a occupare solo lo
     spazio che gli serve accanto all'icona, non il 100% del contenitore
     (altrimenti spingerebbe oltre il bordo della colonna) — width:100%
     sotto resta solo per l'impilamento verticale di mobile. */
  .ept-stats-body {
    width: auto;
  }
}

/* Da qui in su c'è sempre spazio per una riga sola con tutte le colonne
   fianco a fianco (il caso che auto-fit da solo non garantisce sempre,
   essendo pensato per "quante ne entrano", non "esattamente N") — quindi
   si forza il numero esatto, come nel comportamento desktop originale. */
@media (min-width: 1024px) {
  .ept-stats-grid {
    grid-template-columns: repeat(var(--ept-stats-cols, 6), 1fr);
  }
}

.ept-stats-icon {
  flex-shrink: 0;
  /* clamp() impedisce che un'icona impostata grande in pannello rompa il
     layout su schermi molto stretti: non supera mai il 18% della larghezza
     disponibile, qualunque valore sia stato scelto in Elementor. */
  width: clamp(28px, var(--ept-stats-icon-size, 40px), 18vw);
  height: clamp(28px, var(--ept-stats-icon-size, 40px), 18vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ept-stats-icon-bg, var(--c-primary-light, #EFF2F5));
  color: var(--ept-stats-icon-color, var(--c-accent, #BC5A29));
}

/* Dimensione icona responsive per colonna — vedi icon_size_tablet/
   icon_size_mobile in class-stats-widget.php: se l'admin ha impostato un
   valore specifico per quel breakpoint lo usa, altrimenti ricade sempre su
   quella desktop (mai un'icona a 0/vuota se tablet/mobile non sono state
   toccate). Stessi due breakpoint già usati per il resto del layout. */
@media (min-width: 640px) and (max-width: 1023px) {
  .ept-stats-icon {
    width: clamp(28px, var(--ept-stats-icon-size-tablet, var(--ept-stats-icon-size, 40px)), 18vw);
    height: clamp(28px, var(--ept-stats-icon-size-tablet, var(--ept-stats-icon-size, 40px)), 18vw);
  }
}

@media (max-width: 639px) {
  .ept-stats-icon {
    width: clamp(28px, var(--ept-stats-icon-size-mobile, var(--ept-stats-icon-size, 40px)), 18vw);
    height: clamp(28px, var(--ept-stats-icon-size-mobile, var(--ept-stats-icon-size, 40px)), 18vw);
  }
}

.ept-stats-icon svg {
  width: 50%;
  height: 50%;
  display: block;
}

.ept-stats-icon i {
  font-size: 50%;
  line-height: 1;
}

/* Flex con gap (non più margini fissi su titolo/lineetta/copy) così il
   controllo "Spazio tra titolo e testo sotto" nel pannello Elementor può
   regolare un unico valore invece di dover toccare tre margini diversi —
   richiesta esplicita 2026-10-04. */
.ept-stats-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.ept-stats-title {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-primary, #134169);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Lineetta d'accento — elemento a sé (non più ::after sul titolo), così
   compare SEMPRE anche per una colonna senza numero/titolo (es. "Made in
   Italy", solo icona + testo, nessun campo "Titolo" compilato) — prima
   spariva insieme al titolo mancante, segnalato dal cliente 2026-10-04.
   Eredita lo stesso colore scelto per l'icona di quella colonna
   (--ept-stats-icon-color), così resta abbinata anche se l'admin cambia
   colore icona per icona, senza un campo a parte. */
.ept-stats-underline {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin: 0;
  background: var(--ept-stats-icon-color, var(--c-accent, #BC5A29));
}

.ept-stats-copy {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.9375rem;
  color: var(--c-dark-gray, #4E5655);
  line-height: 1.3;
  margin: 0;
}