/**
 * Data Numbers — aspetto. BLOCCO NUOVO, non un porting.
 *
 * Una fila di riquadri colorati, ognuno con un numero grande e un'etichetta sotto.
 * Non esiste un widget elewidget corrispondente: la forma è quella che serve a questo
 * blocco e basta.
 *
 * LO SCOPE. Come gli altri fogli dei componenti: tutto prefissato `.se-gjs-page`, che
 * esiste sia sul frontend sia nel canvas dell'editor. Un foglio solo, caricato nei due
 * posti.
 *
 * ── QUATTRO PER RIGA, E POI A CAPO ────────────────────────────────────────────────────
 *
 * Il contenitore è flex con `wrap`, e ogni riquadro ha `flex-basis: calc(25% - 0.75rem)`.
 * Il conto è esatto e non approssimato: con quattro riquadri in fila ci sono TRE spazi da
 * 1rem, quindi a ciascuno resta (100% − 3rem) / 4, che è appunto 25% − 0.75rem. Il quinto
 * non ci sta e va a capo — il massimo di quattro non è imposto da una regola, è una
 * conseguenza della misura, e resta vero a qualunque larghezza.
 *
 * `flex-grow: 1` perché con meno di quattro i riquadri devono riempire la riga invece di
 * lasciare un vuoto a destra: tre riquadri diventano tre terzi.
 *
 * ── I COLORI NON SONO QUI ─────────────────────────────────────────────────────────────
 *
 * Lo sfondo del singolo riquadro e quello del contenitore si scelgono dal pannello, quindi
 * vivono nello stile del componente e non in questo foglio. Qui c'è solo il colore di
 * PARTENZA, che è quello con cui un riquadro nuovo nasce.
 */

.se-gjs-page .dataNumbers {
	/* Il colore di partenza dei riquadri, in un posto solo: lo legge il markup iniziale
	   del blocco (components/datanumbers.js) e lo si ritocca qui. */
	--se-dn-bg: #3182bd;
	--se-dn-radius: 14px;

	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}

.se-gjs-page .dataNumbers .dataNumber {
	/* Vedi «QUATTRO PER RIGA» nella testata: la base è un quarto meno la sua parte di
	   spazi, e `grow` fa riempire la riga quando sono meno di quattro. */
	flex: 1 1 calc(25% - 0.75rem);
	/* Senza questo un riquadro non si stringerebbe MAI sotto la misura del suo contenuto
	   (`min-width: auto` è il valore di serie degli elementi flex): un numero lungo
	   basterebbe a far sfondare la riga. */
	min-width: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;

	padding: 2rem 1.5rem;
	border-radius: var(--se-dn-radius);
	background: var(--se-dn-bg);
	color: #fff;
	text-align: center;
}

.se-gjs-page .dataNumbers .dataNumber__valore {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
}

.se-gjs-page .dataNumbers .dataNumber__titolo {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
}

/* Sotto i 991px quattro riquadri in fila diventano quattro colonne strette: si passa a
   due per riga. La base è metà meno il suo unico spazio. */
@media screen and (max-width: 991px) {
	.se-gjs-page .dataNumbers .dataNumber {
		flex-basis: calc(50% - 0.5rem);
	}

	.se-gjs-page .dataNumbers .dataNumber__valore {
		font-size: 36px;
	}
}

/* Sul telefono uno per riga: due riquadri affiancati su 390px non lascerebbero spazio
   nemmeno al numero. */
@media screen and (max-width: 600px) {
	.se-gjs-page .dataNumbers .dataNumber {
		flex-basis: 100%;
	}
}