/*
 * ON Valori: i valori del manifesto (prototipo scene.css .valori1 413-424, 483 interlinea,
 * 626 occhiello, 636-641 riflettori della testata).
 *
 * Due stati:
 * - fermo (sempre, senza JS, con il movimento ridotto, nell'editor, con lo schermo basso): i
 *   pannelli in colonna, ognuno alto uno schermo con la foto e il testo in fondo;
 * - sticky (solo sotto html.on-motion, con il movimento consentito e almeno 480 px di altezza):
 *   ogni pannello resta fermo e il successivo gli sale sopra, come il prototipo.
 * Mobile first: le regole senza media query sono quelle del telefono, da 901 px il computer.
 *
 * Scostamenti voluti dal prototipo: l'occhiello è chiaro (il verde ON sotto i riflettori scende
 * sotto 4,5:1); la parola è grande come nel prototipo ma mai più larga della sua colonna (nel
 * prototipo "Aggregazione", senza a capo, sborda sul testo a 1440 e fuori schermo a 390).
 */

.on-valori {
	position: relative;
	background-color: var(--on-night);
	color: var(--on-white);
}

/* ---------- testata, con i riflettori dello stadio ---------- */

.on-valori .on-valori__testa {
	padding: clamp(72px, 8vw, 120px) var(--on-gutter) 28px;
	background-image:
		radial-gradient(ellipse 38% 55% at 12% -12%, color-mix(in srgb, var(--on-cream) 9%, transparent), transparent 70%),
		radial-gradient(ellipse 38% 55% at 88% -12%, color-mix(in srgb, var(--on-cream) 9%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--on-green) 6%, transparent) 0%, transparent 40%);
}

.on-valori .on-valori__occhiello,
.on-valori .on-valori__titolo {
	max-width: 1392px;
	margin-right: auto;
	margin-left: auto;
}

.on-valori .on-valori__occhiello {
	margin-top: 0;
	margin-bottom: 0;
	color: var(--on-ink-inv);
}

.on-valori .on-valori__titolo {
	margin-top: 10px;
	margin-bottom: 0;
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: clamp(2.125rem, 4vw, 4rem);
	line-height: 1.08;
	text-transform: uppercase;
}

/* ---------- i pannelli ---------- */

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

.on-valori .on-valori__pan {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100svh;
	margin: 0;
	overflow: hidden;
	background-color: var(--on-night);
	box-shadow: 0 -30px 60px color-mix(in srgb, var(--on-shade) 60%, transparent);
}

.on-valori .on-valori__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--on-foto-x, 50%) var(--on-foto-y, 50%);
	filter: saturate(.8) contrast(1.05) sepia(.1) brightness(.62);
	transform: scale(1.06);
}

.on-valori .on-valori__pan::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--on-shade) 35%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--on-shade) 82%, transparent) 100%);
}

/* Senza foto: il nero della notte con la grana */
.on-valori .on-valori__pan--senza-foto {
	background-image: var(--on-grain);
}

.on-valori .on-valori__testo {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: end;
	width: 100%;
	max-width: 1392px;
	margin: 0 auto;
	padding: 0 20px 48px;
}

.on-valori .on-valori__n {
	grid-column: 1 / -1;
	color: var(--on-green);
	font-family: var(--on-font-tv);
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1;
}

/* La parola si misura sulla sua colonna: --on-valori-lettere la scrive il PHP (vedi nastro) */
.on-valori .on-valori__misura {
	min-width: 0;
	container-type: inline-size;
}

.on-valori .on-valori__parola {
	margin: 0;
	color: var(--on-paper);
	font-family: var(--on-font-display);
	font-size: 12.6vw;
	font-size: min(12.6vw, calc(100cqi / (var(--on-valori-lettere, 8) * .76)));
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.on-valori .on-valori__desc {
	max-width: 34ch;
	margin: 0;
	padding-bottom: .6em;
	color: var(--on-ink-inv);
	font-size: 1rem;
	line-height: 1.5;
}

/* ---------- computer ---------- */

@media (min-width: 901px) {
	.on-valori .on-valori__testo {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 34ch);
		gap: 12px clamp(24px, 4vw, 64px);
		padding: 0 var(--on-gutter) clamp(40px, 8vh, 96px);
	}

	.on-valori .on-valori__parola {
		font-size: clamp(3.5rem, 10.6vw, 11.875rem);
		font-size: min(clamp(3.5rem, 10.6vw, 11.875rem), calc(100cqi / (var(--on-valori-lettere, 8) * .76)));
	}

	.on-valori .on-valori__desc {
		font-size: var(--on-fs-lede);
	}
}

/* =========================================================================
 * Sticky: solo con GSAP attivo (html.on-motion), il movimento consentito e uno schermo non
 * troppo basso (con lo zoom forte il testo in fondo al pannello fermo resterebbe tagliato).
 * ====================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-height: 480px) {
	.on-motion .on-valori:not(.on-valori--statico) .on-valori__pan {
		position: sticky;
		top: 0;
		height: 100svh;
	}
}