/*
 * Componente: banda di voci con icona.
 *
 * Un solo foglio per i widget «Barra numeri» e «Riquadri icona»: cambia la
 * disposizione interna della voce, non la struttura della banda.
 */

.sh-stats-bar {
	background-color: var(--sh-bg);
	color: var(--sh-ink);
}

.sh-stats-bar__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sh-space-md) var(--sh-space-sm);
	margin: 0;
	padding-block: var(--sh-space-lg);
	list-style: none;
}

@media (min-width: 768px) {
	.sh-stats-bar__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--sh-space-md);
	}
}

/* Due o quattro voci in 3 colonne lascerebbero una voce da sola: su tablet vanno 2 per riga. */
@media (min-width: 768px) and (max-width: 1023px) {
	.sh-stats-bar--cols-2 .sh-stats-bar__list,
	.sh-stats-bar--cols-4 .sh-stats-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.sh-stats-bar--cols-2 .sh-stats-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sh-stats-bar--cols-3 .sh-stats-bar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sh-stats-bar--cols-4 .sh-stats-bar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sh-stats-bar--cols-5 .sh-stats-bar__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sh-stats-bar--cols-6 .sh-stats-bar__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/*
 * L'icona sta al centro verticale del blocco di testo, anche quando il testo
 * è su due righe: è l'allineamento di tutte le bande dei mockup.
 */
.sh-stats-bar__item {
	display: flex;
	align-items: center;
	gap: var(--sh-space-sm);
	min-width: 0;
}

.sh-stats-bar--center .sh-stats-bar__item {
	flex-direction: column;
	align-items: center;
	gap: var(--sh-space-sm);
	text-align: center;
}

/*
 * flex: none è la correzione delle icone «piccole e sottili»: l'SVG ha
 * max-width: 100% dal reset e dentro un flex item restringibile veniva
 * schiacciato ben sotto i 48px dichiarati, con il tratto che si assottigliava
 * insieme all'icona.
 */
.sh-stats-bar__icon {
	display: inline-flex;
	flex: none;
	color: var(--sh-red);
}

.sh-stats-bar__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * Un valore o un'etichetta più larghi della colonna vanno a capo invece di
 * uscire dalla banda: «CHILOMETRAGGIO» a 360px veniva tagliato dal bordo.
 */
.sh-stats-bar__value,
.sh-stats-bar__label {
	display: block;
	overflow-wrap: anywhere;
}

/*
 * Il valore-parola è un titoletto, non un numero: nei mockup ha l'altezza
 * delle etichette maiuscole, non quella dei titoli di sezione. Alla dimensione
 * di .sh-t-title «PILOTI FORMATI» andava a capo in colonne da 5 e le voci si
 * sfalsavano. Niente text-wrap: balance, che spezzava in punti diversi a
 * seconda della larghezza della colonna.
 */
.sh-stats-bar__value--word {
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sh-stats-bar__label {
	color: var(--sh-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: uppercase;
}

/*
 * Divisori verticali fra le voci, da desktop. Su tablet la banda va a capo e
 * il filo finirebbe all'inizio della seconda riga, staccato da tutto.
 */
@media (min-width: 1024px) {
	.sh-stats-bar--dividers .sh-stats-bar__item + .sh-stats-bar__item {
		padding-inline-start: var(--sh-space-md);
		border-inline-start: 1px solid var(--sh-line);
	}
}

/*
 * Variante «riquadri icona»: titolo e descrizione breve al posto di valore ed
 * etichetta. È la banda delle pagine Auto di lusso.
 *
 * L'icona resta centrata sul blocco di testo, come in tutte le bande dei
 * mockup. Una regola precedente la ancorava in alto (flex-start) anche nella
 * disposizione centrata, dove annullava il centraggio: testo al centro e
 * icona spostata a sinistra — l'errore visto su «Chi siamo».
 */
.sh-stats-bar--icone .sh-stats-bar__label {
	font-size: 0.875rem;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Nei riquadri icona la colonna del testo è più stretta (c'è la descrizione
 * sotto e spesso 5 voci): nei mockup il titolo è alto quanto il testo corrente,
 * così «Servizio su misura» sta su una riga.
 */
.sh-stats-bar--icone .sh-stats-bar__value {
	margin-block-end: var(--sh-space-3xs);
	font-size: clamp(0.9375rem, 1.05vw, 1rem);
	letter-spacing: 0.01em;
}

/*
 * Icone grandi, la banda di Incentive aziendali: nel mockup le descrizioni sono
 * più grandi e quasi bianche. Le altre bande restano col grigio attenuato,
 * che nei loro mockup è proprio quello.
 */
.sh-stats-bar--icone-grandi .sh-stats-bar__label {
	color: var(--sh-ink);
	font-size: 1rem;
	opacity: 0.9;
}

/*
 * Centrato con divisori: padding simmetrico. Con il solo padding iniziale il
 * contenuto di ogni colonna risultava spostato di mezzo passo a destra.
 */
@media (min-width: 1024px) {
	.sh-stats-bar--center.sh-stats-bar--dividers .sh-stats-bar__item {
		padding-inline: var(--sh-space-sm);
	}
}

/* ==== Telefoni stretti ==== */

/*
 * Sotto i 480px una colonna da 150px non contiene icona, spazio e testo
 * affiancati. Le icone scendono a 40px (il tratto resta proporzionato: è in
 * unità del viewBox) e:
 *  - la barra numeri resta su due colonne, con l'icona sopra il testo;
 *  - i riquadri icona, che hanno descrizioni di più parole, vanno su una
 *    colonna sola e tengono l'icona a fianco.
 */
@media (max-width: 479px) {
	.sh-stats-bar__icon .sh-icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.sh-stats-bar--icone-grandi .sh-stats-bar__icon .sh-icon {
		width: 3rem;
		height: 3rem;
	}

	.sh-stats-bar--numeri.sh-stats-bar--left .sh-stats-bar__item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sh-space-2xs);
	}

	.sh-stats-bar--icone.sh-stats-bar--left .sh-stats-bar__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==== Variante a celle: la griglia dei valori di «Chi siamo» ==== */

.sh-stats-bar--celle .sh-stats-bar__list {
	gap: 0;
	padding-block: 0;
	border-block-start: 1px solid var(--sh-line);
	border-inline-start: 1px solid var(--sh-line);
}

.sh-stats-bar--celle .sh-stats-bar__item {
	padding: var(--sh-space-lg) var(--sh-space-md);
	background-color: var(--sh-card);
	border-block-end: 1px solid var(--sh-line);
	border-inline-end: 1px solid var(--sh-line);
}

@media (max-width: 479px) {
	.sh-stats-bar--celle .sh-stats-bar__item {
		padding: var(--sh-space-md) var(--sh-space-2xs);
	}
}