/* ==========================================================================
   Blocco: Timeline annuale – Anno (csp-tla-anno)
   Mobile (base): l'anno è una barra in alto e i blocchi le scorrono sotto.
   Desktop (da 769px): l'anno è a sinistra e i blocchi scorrono a destra.
   In entrambi i casi lo sticky è limitato dalla griglia: quando finisce
   l'ultimo blocco, l'anno scorre via e arriva il successivo.
   ========================================================================== */

.csp-tla-anno {
	--csp-tla-spazio: 24px; /* spazio tra i blocchi */

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 32px 0;
	box-sizing: border-box;
}

.csp-tla-anno__label {
	position: sticky;
	/* --csp-tla-top è l'altezza della header, misurata da
	   timeline-annuale/script.js. */
	top: var(--csp-tla-top, 90px);
	z-index: 2;
	align-self: start;
	margin: 0 0 var(--csp-tla-spazio);
	padding: 12px 0;
	/* Opaco per coprire i blocchi che scorrono sotto. */
	background-color: var(--csp-tla-sfondo, #fff);
	font-family: "Gelasio";
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	color: #0E693A;
}

.csp-tla-anno__blocchi {
	display: flex;
	flex-direction: column;
	gap: var(--csp-tla-spazio);
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Desktop: anno a sinistra, blocchi a destra
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.csp-tla-anno {
		--csp-tla-spazio: 32px;

		grid-template-columns: 220px minmax(0, 1fr);
		column-gap: 48px;
		padding: 48px 0;
	}

	.csp-tla-anno__label {
		top: calc(var(--csp-tla-top, 90px) + 32px);
		margin: 0;
		padding: 0;
		background-color: transparent;
		font-size: 64px;
	}
}

@media (min-width: 1025px) {
	.csp-tla-anno {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.csp-tla-anno__label {
		font-size: 88px;
	}
}