/**
 * Stili dei blocchi custom — alian.it
 *
 * Caricato solo nelle pagine che usano uno dei due blocchi (handle "alian-blocks"
 * dichiarato nei block.json). Usa esclusivamente i token: nessun colore letterale.
 */

/* --- alian/numeri-chiave -------------------------------------------------- */

/*
 * Tre card, stessa anatomia della fascia contatori di Persona (icona, numero,
 * etichetta) ma costruite sui token: superficie, bordo e accento del progetto,
 * nessun colore letterale.
 */

/*
 * Impaginazione: o tutte in linea, o tutte incolonnate — mai due sopra e una
 * sotto, che spezza la lettura dei tre dati come insieme.
 *
 * Per questo si parte da una colonna sola (mobile-first) e si passa alla riga
 * unica solo quando c'è spazio certo per tutte. Un `auto-fit` con
 * `minmax(200px, 1fr)` da solo non basta: su uno schermo da ~430px due card da
 * 200px entrano, e la terza va a capo. È esattamente il caso da evitare.
 */
.al-numeri {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 48em) { /* 768px: da qui in su le tre card stanno comode in riga */
	.al-numeri {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.al-numero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 2rem 1.25rem;
	background: var(--al-surface);
	border: 1px solid var(--al-border);
}

.al-numero .al-icona {
	color: var(--al-accent);
	margin-bottom: 0.25rem;
}

/*
 * Il dato in mono con cifre tabulari: durante l'animazione il numero cambia in
 * continuazione e senza `tabular-nums` la card "salterebbe" a ogni frame,
 * perché le cifre proporzionali hanno larghezze diverse.
 */
.al-numero__dato {
	font-family: var(--al-font-mono);
	font-size: var(--al-fs-data-lg);
	line-height: 1;
	color: var(--al-text);
	font-variant-numeric: tabular-nums;
}

.al-numero__etichetta {
	font-size: 1rem;
	color: var(--al-text-secondary);
}

/* --- alian/plugin-showcase ------------------------------------------------ */

.al-plugins {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.al-plugin {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--al-surface);
	border: 1px solid var(--al-border);
}

.al-plugin__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.al-plugin__body {
	min-width: 0; /* permette al testo lungo di andare a capo dentro la griglia */
}

.al-plugin__name {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

.al-plugin__name a {
	color: var(--al-text);
	text-decoration: none;
}

/* Indizio non-colore sul link strutturale: sottolineatura solo a hover/focus. */
.al-plugin__name a:hover,
.al-plugin__name a:focus-visible {
	color: var(--al-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.al-plugin__desc {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--al-text-secondary);
}

.al-plugin__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-family: var(--al-font-mono);
	font-size: var(--al-fs-label);
	letter-spacing: var(--al-tracking-label);
	color: var(--al-text-muted);
}