/*
 * ON Tabellone: numeri (home.css .raduni .facts), tabellone (scene.css .tabellone),
 * palmarès (scene.css .palmares). Mobile first: 600 px tablet, 901 px desktop.
 */

.on-tabellone {
	/* Effetti del tabellone dello stadio, presi dal prototipo: decorativi, non di brand */
	--on-tabellone-fondo: #0b0b0b;
	--on-tabellone-bordo: color-mix(in srgb, var(--on-white) 14%, transparent);
	--on-tabellone-riga: color-mix(in srgb, var(--on-shade) 35%, transparent);
	--on-tabellone-ombra: inset 0 0 0 1px color-mix(in srgb, var(--on-shade) 60%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--on-shade) 80%, transparent);
	--on-tabellone-luce: 0 0 18px color-mix(in srgb, var(--on-tv-green) 25%, transparent);
	--on-tabellone-luce-xl: 0 0 22px color-mix(in srgb, var(--on-tv-green) 22%, transparent);
	--on-tabellone-filetto-palmares: color-mix(in srgb, var(--on-white) 16%, transparent);
	/* Colori che seguono il tono della sezione (carta per default, come in home) */
	--on-tabellone-testo-2: var(--on-ink-2);
	--on-tabellone-filetto: var(--on-line);
}

.on-tone-dark .on-tabellone,
.on-tone-green .on-tabellone,
[data-tone="dark"] .on-tabellone,
[data-tone="green"] .on-tabellone {
	--on-tabellone-testo-2: var(--on-ink-inv-2);
	--on-tabellone-filetto: var(--on-line-inv);
}

.on-tabellone__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-tabellone__voce {
	margin: 0;
	padding: 0;
}

.on-tabellone__valore,
.on-tabellone__etichetta,
.on-tabellone__nota {
	display: block;
}

.on-tabellone__valore {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* ---------- Numeri: accanto al testo, in home ---------- */

.on-tabellone--numeri .on-tabellone__lista {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 22px;
}

.on-tabellone--numeri .on-tabellone__valore {
	font-family: var(--on-font-cond);
	font-size: 1.625rem;
	line-height: 1;
	text-transform: uppercase;
}

.on-tabellone--numeri .on-tabellone__etichetta,
.on-tabellone--numeri .on-tabellone__nota {
	margin-top: 2px;
	color: var(--on-tabellone-testo-2);
	font-size: var(--on-fs-micro);
	line-height: 1.5;
}

/* ---------- Tabellone: i riquadri neri dello stadio ---------- */

.on-tabellone--tabellone .on-tabellone__lista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.on-tabellone--tabellone .on-tabellone__voce {
	position: relative;
	min-width: 0;
	padding: 14px 12px;
	border: 1px solid var(--on-tabellone-bordo);
	background: var(--on-tabellone-fondo);
	box-shadow: var(--on-tabellone-ombra);
	color: var(--on-white);
}

/* Le righe del tubo catodico sopra il riquadro */
.on-tabellone--tabellone .on-tabellone__voce::before {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, var(--on-tabellone-riga) 0 2px, transparent 2px 5px);
	content: "";
	pointer-events: none;
}

.on-tabellone--tabellone .on-tabellone__etichetta {
	color: var(--on-tv-yellow);
	font-family: var(--on-font-tv);
	font-size: .9375rem;
	letter-spacing: .04em;
	line-height: 1.1;
	text-transform: uppercase;
}

/*
 * Riquadro come contenitore: un valore lungo ("1.000.000") si riduce fino a starci,
 * circa .65em per carattere nel font display; quelli corti restano alla misura del prototipo.
 */
.on-tabellone--tabellone .on-tabellone__voce {
	min-width: 0;
	container-type: inline-size;
}

.on-tabellone--tabellone .on-tabellone__valore {
	--on-tabellone-max: calc(100cqi / (var(--on-cifre, 3) * .66));
	margin-top: 10px;
	color: var(--on-white);
	font-family: var(--on-font-display);
	font-size: min(clamp(1.75rem, 8vw, 3.75rem), var(--on-tabellone-max));
	letter-spacing: -.03em;
	line-height: var(--on-lh-number);
	text-shadow: var(--on-tabellone-luce);
}

.on-tabellone--tabellone .on-tabellone__nota {
	max-width: 24ch;
	margin-top: 10px;
	color: var(--on-ink-inv-2);
	font-size: var(--on-fs-small);
	line-height: 1.45;
}

/*
 * Misura grande (manifesto.html 72, scene.css 121-123): niente riduzione, il riquadro non è
 * un contenitore e la colonna si allarga quanto il numero (1fr con il minimo sul contenuto).
 */
.on-tabellone--grande.on-tabellone--tabellone .on-tabellone__voce {
	container-type: normal;
}

.on-tabellone--grande.on-tabellone--tabellone .on-tabellone__valore {
	font-size: clamp(1.75rem, 8vw, 3.75rem);
}

/* ---------- Palmarès: i trofei ---------- */

.on-tabellone--palmares .on-tabellone__lista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--on-tabellone-filetto-palmares);
}

.on-tabellone--palmares .on-tabellone__voce {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	gap: 2px 10px;
	padding: 16px 10px 16px 0;
	border-bottom: 1px solid var(--on-tabellone-filetto-palmares);
}

.on-tabellone--palmares .on-tabellone__valore {
	grid-row: span 2;
	font-family: var(--on-font-display);
	font-size: 17vw;
	line-height: var(--on-lh-number);
	text-shadow: var(--on-tabellone-luce-xl);
}

.on-tabellone--palmares .on-tabellone__etichetta {
	align-self: end;
	font-family: var(--on-font-cond);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
}

.on-tabellone--palmares .on-tabellone__nota {
	align-self: start;
	color: var(--on-muted);
	font-size: var(--on-fs-micro);
}

@media (min-width: 901px) {
	.on-tabellone--numeri .on-tabellone__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding-left: clamp(20px, 3vw, 40px);
		border-left: 1px solid var(--on-tabellone-filetto);
	}

	.on-tabellone--numeri .on-tabellone__valore {
		font-size: clamp(1.25rem, .25rem + 1.55vw, 1.625rem);
	}

	.on-tabellone--numeri .on-tabellone__etichetta,
	.on-tabellone--numeri .on-tabellone__nota {
		font-size: .8125rem;
	}

	.on-tabellone--tabellone .on-tabellone__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	.on-tabellone--tabellone .on-tabellone__voce {
		padding: 22px 22px 18px;
	}

	.on-tabellone--tabellone .on-tabellone__etichetta {
		font-size: 1.125rem;
	}

	.on-tabellone--tabellone .on-tabellone__valore {
		font-size: min(clamp(2.875rem, 5.6vw, 6rem), var(--on-tabellone-max));
		letter-spacing: -.01em;
	}

	.on-tabellone--grande.on-tabellone--tabellone .on-tabellone__lista {
		grid-template-columns: repeat(4, 1fr);
	}

	.on-tabellone--grande.on-tabellone--tabellone .on-tabellone__voce {
		min-width: auto;
	}

	.on-tabellone--grande.on-tabellone--tabellone .on-tabellone__valore {
		font-size: clamp(2.875rem, 5.6vw, 6rem);
	}

	.on-tabellone--palmares .on-tabellone__lista {
		grid-template-columns: repeat(3, 1fr);
	}

	.on-tabellone--palmares .on-tabellone__voce {
		gap: 2px 18px;
		padding: 22px 18px 22px 0;
	}

	.on-tabellone--palmares .on-tabellone__valore {
		font-size: var(--on-fs-number-xl);
	}

	.on-tabellone--palmares .on-tabellone__etichetta {
		font-size: clamp(1.25rem, .5rem + 1.3vw, 1.75rem);
	}

	.on-tabellone--palmares .on-tabellone__nota {
		font-size: var(--on-fs-small);
	}
}