/*
 * ON Tappe: anno grande, titolo e nota in colonna, con il filetto verde a sinistra.
 * Prototipo: scene.css 393-397 (.tappe), 486 (interlinea del titolo), 655-659 (sempre in colonna,
 * colonna ferma accanto al testo). Mobile first: le regole senza media query valgono per il telefono.
 */

.on-tappe {
	--on-tappe-anno: var(--on-green);
	--on-tappe-titolo: var(--on-ink);
	--on-tappe-nota: var(--on-ink-2);
	min-width: 0;
}

/* Sul nero e sul verde i testi passano al chiaro (l'anno verde sul verde sparirebbe) */
.on-tone-dark .on-tappe,
[data-tone="dark"] .on-tappe {
	--on-tappe-titolo: var(--on-white);
	--on-tappe-nota: var(--on-ink-inv-2);
}

.on-tone-green .on-tappe,
[data-tone="green"] .on-tappe {
	--on-tappe-anno: var(--on-white);
	--on-tappe-titolo: var(--on-white);
	--on-tappe-nota: var(--on-white);
}

/* Due classi: la lista del kit o del tema non deve rimettere numeri e rientri */
.on-tappe .on-tappe__lista {
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--on-green);
	list-style: none;
}

.on-tone-green .on-tappe .on-tappe__lista,
[data-tone="green"] .on-tappe .on-tappe__lista {
	border-left-color: var(--on-white);
}

.on-tappe .on-tappe__voce {
	position: relative;
	margin: 0;
	padding: 0 0 22px 22px;
}

/* L'anno: testo grande (40-60 px), il verde ON passa anche sulla carta (3,76:1 oltre i 24 px) */
.on-tappe .on-tappe__anno {
	display: block;
	color: var(--on-tappe-anno);
	font-family: var(--on-font-display);
	font-size: clamp(40px, 3.6vw, 60px);
	font-weight: 700;
	line-height: .9;
}

.on-tappe .on-tappe__titolo {
	display: block;
	margin-top: 4px;
	color: var(--on-tappe-titolo);
	font-family: var(--on-font-cond);
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
}

.on-tappe .on-tappe__nota {
	display: block;
	margin-top: 4px;
	color: var(--on-tappe-nota);
	font-size: var(--on-fs-small);
	line-height: 1.45;
}

/*
 * Colonna ferma accanto al testo (controllo "Resta fermo": classe sul wrapper del widget).
 * Sul telefono la colonna va sotto il testo e le tappe scorrono con la pagina.
 */
@media (min-width: 901px) {

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