/*
 * ON Fila Figurine: le leggende del raduno in fila (prototipo scene.css 161-171, 375-382:
 * .stk-row.small). La figurina ha il suo foglio (on-figurina.css), la testata quello di
 * ON Titolo Sezione: qui solo la griglia e l'invito.
 * Mobile first: tre per riga sul telefono, cinque dal tablet largo, sette sul desktop.
 */

.on-fila-figurine {
	--on-fila-colonne: 3;
	--on-fila-gap: 10px;
}

/*
 * L'invito a destra del titolo: lo span.k del .st del prototipo (raduno-ferrara-2023.html:108,
 * home.css 29 e 645), nel colore del testo, 14 px e 12 px fino a 900 px.
 */
.on-fila-figurine .on-fila-figurine__nota {
	margin: 0;
	color: inherit;
	font-size: 12px;
	letter-spacing: .1em;
}

@media (min-width: 901px) {
	.on-fila-figurine .on-fila-figurine__nota {
		font-size: 14px;
	}
}

.on-tone-dark .on-fila-figurine .on-fila-figurine__nota,
.on-tone-green .on-fila-figurine .on-fila-figurine__nota,
[data-tone="dark"] .on-fila-figurine .on-fila-figurine__nota,
[data-tone="green"] .on-fila-figurine .on-fila-figurine__nota {
	color: inherit;
}

/* Sul verde l'invito piccolo va su un'etichetta verde inchiostro (contrasto AA, vedi Titolo Sezione) */
.on-tone-green .on-fila-figurine .on-fila-figurine__nota,
[data-tone="green"] .on-fila-figurine .on-fila-figurine__nota {
	justify-self: start;
	width: fit-content;
	padding: 4px 9px 3px;
	border-radius: 2px;
	background: var(--on-green-ink);
	color: var(--on-white);
}

/* Due classi: la lista del kit o del tema non deve rimettere puntini e rientri */
.on-fila-figurine .on-fila-figurine__fila {
	display: grid;
	grid-template-columns: repeat(var(--on-fila-colonne), minmax(0, 1fr));
	gap: var(--on-fila-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	perspective: 1400px;
	/* Come la .stk-row del prototipo: le cornici di altezze diverse partono tutte dall'alto. */
	align-items: start;
}

/* Il titolo della testata è il .st h2 del prototipo (sito.css 77): 30-56 px, 52 a 1440 */
.on-fila-figurine .on-fila-figurine__testa {
	--on-ts-fs: clamp(1.875rem, 3.6vw, 3.5rem);
}

/*
 * Ogni casella misura la sua larghezza: il nome nella striscia della cornice è in cqw
 * (on-figurina.css), come nel prototipo (.stk-row .slot).
 */
.on-fila-figurine__casella {
	position: relative;
	min-width: 0;
	margin: 0;
	container-type: inline-size;
}

/*
 * L'invito sotto la fila (Gli altri eroi, eroe-zanetti.html 113: p.k con margine di 18 px, colore
 * #DFF5E6 scritto nel prototipo, 14 px e 12 px fino a 900 px, home.css 29 e 645): testo semplice,
 * a tutta riga, senza l'etichetta verde inchiostro dell'invito in testata.
 */
.on-fila-figurine .on-fila-figurine__nota--sotto,
.on-tone-green .on-fila-figurine .on-fila-figurine__nota--sotto,
[data-tone="green"] .on-fila-figurine .on-fila-figurine__nota--sotto {
	justify-self: stretch;
	width: auto;
	margin-top: 18px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: #dff5e6;
	font-size: 12px;
	letter-spacing: .1em;
}

@media (min-width: 901px) {
	.on-fila-figurine .on-fila-figurine__nota--sotto,
	.on-tone-green .on-fila-figurine .on-fila-figurine__nota--sotto,
	[data-tone="green"] .on-fila-figurine .on-fila-figurine__nota--sotto {
		font-size: 14px;
	}
}

@media (min-width: 901px) {
	.on-fila-figurine {
		--on-fila-colonne: 5;
		--on-fila-gap: clamp(10px, 1.4vw, 20px);
	}
}

@media (min-width: 1101px) {
	.on-fila-figurine {
		--on-fila-colonne: 7;
	}
}

/*
 * Misura grande: la .stk-row senza .small del prototipo (scene.css 161, 171), sei per riga dal
 * tablet largo e tre sul telefono, con un passo un po' più ampio. Dopo le regole della piccola,
 * a pari specificità vince lei.
 */
.on-fila-figurine--grande {
	--on-fila-gap: clamp(10px, 1.6vw, 24px);
}

@media (min-width: 901px) {
	.on-fila-figurine--grande {
		--on-fila-colonne: 6;
		--on-fila-gap: clamp(10px, 1.6vw, 24px);
	}
}