/*
 * ON Pellicola Orizzontale: la striscia di pannelli a tutta altezza (scheda eroe #raduni-on,
 * pellicola del manifesto).
 * Misure dal prototipo: scene.css 136-153 (striscia e pannelli), 462-463 (pannello senza foto),
 * 484 (interlinee), 921 (senza foto sul telefono).
 * Mobile first: sul telefono i pannelli stanno in colonna, come nel prototipo (scene.css 153).
 * Da 901 px la fila scorre di lato in modo nativo (scroll-snap) finché il JS non monta il pin
 * (.is-pin): senza JS, con il movimento ridotto e nell'editor resta lo scorrimento nativo.
 * Due classi di specificità dove serve battere la Theme Style del kit (.elementor-kit-N h2, a).
 */

.on-pellicola {
	/* Variabili locali */
	--on-pe-pad: clamp(20px, 3vw, 48px);
	--on-pe-linea: color-mix(in srgb, var(--on-white) 12%, transparent);
	position: relative;
	overflow: hidden;
	background: var(--on-black);
	color: var(--on-white);
}

/* ---------- la striscia (lo scorrimento) e il binario (la fila che si muove) ---------- */

.on-pellicola__binario {
	/* Posizionato: è l'offsetParent dei pannelli, il JS ci misura dove stanno */
	position: relative;
}

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

.on-pellicola__voce {
	height: 78vh;
	height: 78svh;
	margin: 0;
	border-bottom: 1px solid var(--on-pe-linea);
}

/* ---------- l'introduzione ---------- */

.on-pellicola__intro {
	box-sizing: border-box;
	padding: 48px 20px 28px;
	background: var(--on-black);
}

/*
 * Nel prototipo l'occhiello è --green-soft, che scene.css 623 riporta al verde ON: a 14 px sul
 * nero non passa AA (4,47:1). Regola del piano (§3.2): sul nero le etichette vanno in chiaro.
 */
.on-pellicola .on-pellicola__occhiello {
	display: block;
	margin: 0;
	color: var(--on-ink-inv);
	line-height: 1.5;
}

.on-pellicola .on-pellicola__titolo {
	margin: 0;
	color: inherit;
	font-family: var(--on-font-cond);
	font-size: clamp(2.125rem, 4.6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
}

.on-pellicola .on-pellicola__occhiello + .on-pellicola__titolo {
	margin-top: 10px;
}

.on-pellicola .on-pellicola__testo {
	max-width: 34ch;
	margin: 14px 0 0;
	color: var(--on-ink-inv-2);
	font-size: var(--on-fs-body);
	line-height: var(--on-lh-body);
}

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

.on-pellicola .on-pellicola__pan {
	position: relative;
	display: block;
	overflow: hidden;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.on-pellicola a.on-pellicola__pan:hover,
.on-pellicola a.on-pellicola__pan:focus {
	color: inherit;
}

/* Il focus sul pannello: anello bianco dentro il bordo (la striscia taglia quello che esce) */
.on-pellicola .on-pellicola__pan:focus-visible {
	outline: 2px solid var(--on-white);
	outline-offset: -6px;
}

.on-pellicola .on-pellicola__img {
	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(.82) contrast(1.06) sepia(.1);
}

/* La velatura del prototipo: scura in alto sotto la barra, piena in basso sotto il testo */
.on-pellicola__pan::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--on-shade) 30%, transparent), transparent 35%, transparent 55%, color-mix(in srgb, var(--on-shade) 88%, transparent));
}

/*
 * Senza foto: il verde ON con le righe del nastro (scene.css 462-463). Il prototipo usava due
 * verdi suoi; qui il verde ON scurito verso il verde inchiostro, perché il testo bianco a 16 px
 * resti sopra 4,5:1 anche in alto (il verde ON pieno si ferma a 4,3:1).
 */
.on-pellicola .on-pellicola__pan.is-nofoto {
	height: auto;
	padding: 72px 0 32px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--on-green) 82%, var(--on-black)), var(--on-green-ink));
}

.on-pellicola__pan.is-nofoto::after {
	background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-shade) 18%, transparent) 0 2px, transparent 2px 5px);
}

.on-pellicola__voce:has(.is-nofoto) {
	height: auto;
}

.on-pellicola__t {
	position: absolute;
	right: var(--on-pe-pad);
	bottom: clamp(28px, 6vh, 72px);
	left: var(--on-pe-pad);
	z-index: 2;
}

.on-pellicola__pan.is-nofoto .on-pellicola__t {
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	padding: 0 20px;
}

.on-pellicola .on-pellicola__occhio {
	display: block;
	margin: 0;
	color: var(--on-ink-inv);
	line-height: 1.5;
}

.on-pellicola .on-pellicola__grande {
	display: block;
	margin: 0;
	font-family: var(--on-font-display);
	font-size: clamp(4rem, 9vw, 10rem);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: .96;
	/* Gli stadi senza nome breve ("Stadio Artemio Franchi") vanno a capo invece di uscire */
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.on-pellicola .on-pellicola__nome {
	margin: 10px 0 0;
	color: inherit;
	font-family: var(--on-font-cond);
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
}

.on-pellicola .on-pellicola__descr {
	max-width: 40ch;
	margin: 10px 0 0;
	color: var(--on-ink-inv);
	font-size: var(--on-fs-body);
	line-height: var(--on-lh-body);
}

/* =====================================================================
 * Computer: la fila alta quanto lo schermo, che scorre di lato
 * ================================================================== */

@media (min-width: 901px) {
	/* Senza pin la fila scorre di lato in modo nativo: una barra sottile per chi usa il mouse */
	.on-pellicola__striscia {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-color: color-mix(in srgb, var(--on-white) 30%, transparent) transparent;
		scrollbar-width: thin;
	}

	/* La regione prende il focus per scorrere con le frecce: l'anello sta dentro */
	.on-pellicola .on-pellicola__striscia:focus-visible {
		outline: 2px solid var(--on-white);
		outline-offset: -4px;
	}

	.on-pellicola__binario {
		display: flex;
		width: max-content;
		height: 100vh;
		height: 100svh;
	}

	.on-pellicola__intro {
		display: grid;
		flex: 0 0 min(48vw, 640px);
		align-content: end;
		padding: var(--on-pe-pad);
		border-right: 1px solid var(--on-pe-linea);
		scroll-snap-align: start;
	}

	.on-pellicola .on-pellicola__pannelli {
		display: flex;
		height: 100%;
	}

	.on-pellicola__voce,
	.on-pellicola__voce:has(.is-nofoto) {
		flex: 0 0 min(78vw, 1100px);
		height: 100%;
		border-right: 1px solid var(--on-pe-linea);
		border-bottom: 0;
		scroll-snap-align: start;
	}

	.on-pellicola .on-pellicola__pan.is-nofoto {
		height: 100%;
		padding: 0;
	}

	.on-pellicola__pan.is-nofoto .on-pellicola__t {
		position: absolute;
		right: var(--on-pe-pad);
		bottom: clamp(28px, 6vh, 72px);
		left: var(--on-pe-pad);
		padding: 0;
	}
}

/* =====================================================================
 * Il pin (.is-pin, lo mette on-pellicola-orizzontale.js solo sul computer con GSAP e
 * movimento consentito): la pagina scorre, la fila va di lato.
 * ================================================================== */

.on-pellicola.is-pin {
	/* clip e non hidden: una sezione che non scorre, così il focus su un pannello fuori campo non la sposta di lato */
	overflow: clip;
}

.on-pellicola.is-pin .on-pellicola__striscia {
	overflow: visible;
	scroll-snap-type: none;
}

.on-pellicola.is-pin .on-pellicola__binario {
	will-change: transform;
}