/*
 * ON Programma: il tabellone "La giornata" (prototipo home.css 394-399, 477-479, 681, 703, 767;
 * sito.css 99-105; scene.css 752 per la lavagna delle pagine interne).
 * Mobile first. Il tabellone è nero anche su carta: i suoi colori sono fissi.
 */

.on-programma {
	/* Tessera della palette e lavagna: neri del prototipo (decorativi, non di brand) */
	--on-programma-tessera: #1c1c1c;
	--on-programma-fondo: color-mix(in srgb, var(--on-black) 92%, transparent);
	--on-programma-ombra: 0 50px 90px -40px color-mix(in srgb, var(--on-shade) 90%, transparent);
	--on-programma-filo: color-mix(in srgb, var(--on-white) 22%, transparent);
	--on-programma-riga: color-mix(in srgb, var(--on-white) 12%, transparent);
	/* Orari e voci: 20 px sul telefono, 22 sul tablet, poi --d-s del prototipo (21-26 px) */
	--on-programma-fs: 1.25rem;
	padding: 18px 18px 14px;
	border: 1px solid var(--on-programma-filo);
	background: var(--on-programma-fondo);
	box-shadow: var(--on-programma-ombra);
	color: var(--on-white);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.on-programma__testa {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--on-programma-filo);
}

/*
 * Il prototipo li scrive nel verde chiaro (poi verde ON): su nero un testo di 13-14 px
 * in #008D33 non arriva a 4,5:1, quindi qui sono bianchi (piano §3.2).
 * Doppia classe: il titolo è un h3 e ".elementor-kit-6 h3" (0,1,1) lo porterebbe a corpo titolo.
 */
.on-programma .on-programma__titolo,
.on-programma .on-programma__quando {
	margin: 0;
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--on-white);
}

.on-programma__voci {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 22px;
	margin: 0;
}

.on-programma__ora,
.on-programma__voce {
	margin: 0;
	padding: 15px 0 12px;
	border-bottom: 1px solid var(--on-programma-riga);
	font-family: var(--on-font-cond);
	font-size: var(--on-programma-fs);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* Orari in verde ON: sono testo grande e in grassetto (≥ 18,7 px), 3,9:1 sulla tessera */
.on-programma__ora {
	font-variant-numeric: tabular-nums;
	color: var(--on-green);
}

.on-programma__voce {
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.on-programma__voce small {
	display: block;
	margin-top: 6px;
	font-family: var(--on-font-text);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	color: var(--on-ink-inv-2);
}

.on-programma__piede {
	display: block;
	margin: 14px 0 0;
	font-family: var(--on-font-cond);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--on-muted);
}

/* Palette: gli orari su tessere scure, come i tabelloni delle stazioni (home.css 477-479) */
.on-programma--palette .on-programma__ora {
	position: relative;
	margin: 6px 0;
	padding: 10px 10px 8px;
	border-bottom: 0;
	border-radius: 3px;
	background: var(--on-programma-tessera);
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--on-white) 7%, transparent), 0 2px 4px color-mix(in srgb, var(--on-shade) 50%, transparent);
	transform-style: preserve-3d;
}

.on-programma--palette .on-programma__voce {
	padding: 21px 0 12px;
}

/* Lavagna delle pagine interne: righe di gesso e un alone (sito.css 99, scene.css 752) */
.on-programma--lavagna {
	--on-programma-fondo: color-mix(in srgb, var(--on-black) 94%, transparent);
	--on-programma-ombra: 0 50px 90px -40px color-mix(in srgb, var(--on-shade) 60%, transparent);
	background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-white) 2.5%, transparent) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--on-white) 8%, transparent), transparent 60%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* L'inclinazione 3D la imposta il modulo JS solo con GSAP e il mouse */
.on-motion .on-programma[data-on-tilt] {
	transform-style: preserve-3d;
	will-change: transform;
}

@media (min-width: 600px) {

	.on-programma {
		--on-programma-fs: 1.375rem;
	}
}

@media (min-width: 901px) {

	.on-programma {
		--on-programma-fs: clamp(1.3125rem, .25rem + 1.42vw, 1.625rem);
		padding: 22px 24px 18px;
	}

	.on-programma .on-programma__titolo,
	.on-programma .on-programma__quando {
		font-size: var(--on-fs-small);
	}
}

/*
 * Lavagna ferma accanto al racconto (controllo "Resta fermo": classe sul wrapper del widget,
 * sito.css 95-96). Sul telefono la colonna va sotto il testo e la lavagna scorre con la pagina.
 */
@media (min-width: 901px) {

	.elementor-widget.on-programma--fisso-yes {
		position: sticky;
		top: calc(var(--on-bar-h) + 24px);
	}
}