/* ==========================================================================
   Blocco: Timeline numerica (csp-tln)
   - .csp-tln-wrap → fascia a tutta larghezza del viewport con colore di
                     fondo opzionale (background inline dalla view)
   - .csp-tln      → container interno centrato (max-width 1200px) con la
                     linea verticale, il titolo e gli step
   Mobile (base): titolo sopra, step in colonna, linea e pallini a sinistra.
   Desktop (da 769px): zig-zag ottenuto con i float: gli step dispari vanno
   a destra e quelli pari a sinistra, ognuno sotto al precedente del suo lato.
   Così ogni colonna segue l'altezza reale degli step, senza JS.
   Stile del singolo step: vedi timeline-numerica-item/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper a tutta larghezza ("full bleed")
   -------------------------------------------------------------------------- */
.csp-tln-wrap {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* 100vw include la scrollbar verticale su Windows/Linux: evita la scrollbar
   orizzontale. "clip" non crea un contesto di scroll e non rompe sticky. */
body:has(.csp-tln-wrap) {
	overflow-x: clip;
}

/* Nell'editor il blocco è già "align full": niente 100vw. */
.editor-styles-wrapper .csp-tln-wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Con colore di fondo la fascia ha respiro sopra e sotto. */
.csp-tln-has-bg {
	padding: 3.5rem 0;
}

/* --------------------------------------------------------------------------
   Container interno (variabili condivise con gli step)
   -------------------------------------------------------------------------- */
.csp-tln {
	--csp-tln-colore: #0E693A;
	--csp-tln-pallino: 24px;
	--csp-tln-pallino-centro: 10px; /* distanza dal bordo superiore dello step */
	--csp-tln-rientro: 36px;        /* mobile: spazio a sinistra degli step */
	--csp-tln-spazio: 40px;         /* spazio verticale tra gli step di un lato */
	--csp-tln-num-size: 64px;
	--csp-tln-num-w: calc(var(--csp-tln-num-size) * 0.75);

	counter-reset: csp-tln-step;
	position: relative;
	display: flow-root;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Titolo
   -------------------------------------------------------------------------- */
.csp-tln > h1,
.csp-tln > h2,
.csp-tln > h3,
.csp-tln > h4,
.csp-tln > h5,
.csp-tln > h6 {
	font-family: "Gelasio";
	text-align: center;
	font-size: 34px;
	line-height: 1.2;
	color: #0E693A;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Step: colonna unica (mobile)
   -------------------------------------------------------------------------- */
.csp-tln > .csp-tln-item {
	margin-top: var(--csp-tln-spazio);
	margin-left: var(--csp-tln-rientro);
}

.csp-tln > .csp-tln-item:first-child {
	margin-top: 0;
}

/* Il segmento di linea dell'ultimo step si ferma alla fine dello step. */
.csp-tln > .csp-tln-item:nth-last-child(1 of .csp-tln-item) {
	--csp-tln-linea-fine: 0px;
}

/* Dal decimo step il numero ha due cifre: serve più spazio. */
.csp-tln > .csp-tln-item:nth-child(n+10 of .csp-tln-item) {
	--csp-tln-num-w: calc(var(--csp-tln-num-size) * 1.4);
}

/* --------------------------------------------------------------------------
   Desktop: zig-zag ai lati della linea centrale
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.csp-tln-has-bg {
		padding: 80px 0;
	}

	.csp-tln {
		--csp-tln-spazio: 75px;
		--csp-tln-primo: 40px;  /* il primo step parte più in basso del titolo */
		--csp-tln-gap: 24px;    /* metà dello spazio tra le colonne */

		padding: 0 2rem;
	}

	/* Linea verticale centrale, dal primo pallino a fine blocco.
	   Su mobile è sostituita dai segmenti dei singoli step. */
	.csp-tln::before {
		content: "";
		position: absolute;
		top: calc(var(--csp-tln-primo) + var(--csp-tln-pallino-centro));
		bottom: 0;
		left: 50%;
		width: 1px;
		background-color: var(--csp-tln-colore);
		transform: translateX(-50%);
	}

	.csp-tln > h1,
	.csp-tln > h2,
	.csp-tln > h3,
	.csp-tln > h4,
	.csp-tln > h5,
	.csp-tln > h6 {
		float: left;
		clear: left;
		width: calc(50% - var(--csp-tln-gap));
		font-size: 48px;
	}

	.csp-tln > .csp-tln-item {
		float: right;
		clear: right;
		width: calc(50% - var(--csp-tln-gap));
		margin-left: 0;
	}

	/* Step pari: a sinistra, con il contenuto specchiato. */
	.csp-tln > .csp-tln-item:nth-child(even of .csp-tln-item) {
		--csp-tln-allinea: right;
		--csp-tln-pallino-x: calc(100% + var(--csp-tln-gap) - var(--csp-tln-pallino) / 2);
		--csp-tln-num-sx: 0px;
		--csp-tln-num-dx: var(--csp-tln-num-w);

		float: left;
		clear: left;
	}

	.csp-tln > .csp-tln-item:nth-child(1 of .csp-tln-item) {
		margin-top: var(--csp-tln-primo);
	}

	/* Senza titolo il secondo step scende comunque, per mantenere lo sfalsamento. */
	.csp-tln > .csp-tln-item:first-child + .csp-tln-item {
		margin-top: calc(var(--csp-tln-primo) + 110px);
	}
}

@media (min-width: 1025px) {
	.csp-tln {
		--csp-tln-gap: 48px;
		--csp-tln-num-size: 80px;
	}
}