/* ==========================================================================
   Blocco: Timeline numerica – Step (csp-tln-item)
   Numero automatico (contatore CSS), pallino sulla linea, titolo e testo.
   Il lato sinistro (step pari) è deciso dal blocco contenitore, che qui
   arriva solo come variabili: --csp-tln-allinea, --csp-tln-pallino-x,
   --csp-tln-num-sx e --csp-tln-num-dx. Così le stesse regole valgono sia sul
   front-end sia nell'editor, dove gli step sono avvolti da Gutenberg.
   ========================================================================== */

.csp-tln-item {
	counter-increment: csp-tln-step;
	position: relative;
	padding: 24px 24px 28px;
	background-color: #fff;
	text-align: var(--csp-tln-allinea, left);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Pallino e segmento di linea (mobile: la linea segue gli step a sinistra)
   -------------------------------------------------------------------------- */
.csp-tln-item::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: calc(var(--csp-tln-pallino-centro) - var(--csp-tln-pallino) / 2);
	left: calc(var(--csp-tln-rientro) * -1);
	width: var(--csp-tln-pallino);
	height: var(--csp-tln-pallino);
	border-radius: 50%;
	background-color: var(--csp-tln-colore);
}

.csp-tln-item::after {
	content: "";
	position: absolute;
	top: var(--csp-tln-pallino-centro);
	bottom: calc(var(--csp-tln-linea-fine, var(--csp-tln-spazio) * -1));
	left: calc(var(--csp-tln-rientro) * -1 + var(--csp-tln-pallino) / 2);
	width: 1px;
	background-color: var(--csp-tln-colore);
	transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Titolo con numero
   Il numero è assoluto (non flex) per non spezzare grassetti, link e a capo
   dentro il titolo; align-content centra il testo mantenendolo inline.
   -------------------------------------------------------------------------- */
.csp-tln-item :is(h1, h2, h3, h4, h5, h6) {
	position: relative;
	min-height: var(--csp-tln-num-size);
	margin: 0 0 20px;
	padding-left: var(--csp-tln-num-sx, var(--csp-tln-num-w));
	padding-right: var(--csp-tln-num-dx, 0px);
	align-content: center;
	font-family: "Gelasio";
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #0E693A;
	text-align: inherit;
}

.csp-tln-item :is(h1, h2, h3, h4, h5, h6)::before {
	content: counter(csp-tln-step);
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	font-family: "futura-pt";
	font-size: var(--csp-tln-num-size);
	font-weight: 400;
	line-height: 1;
	color: #0E693A;
	text-align: inherit;
	pointer-events: none;
	transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Testo
   -------------------------------------------------------------------------- */
.csp-tln-item p {
	margin: 0;
	font-family: "futura-pt";
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	color: #5E6977;
	text-align: inherit;
}

/* --------------------------------------------------------------------------
   Desktop: la linea è unica e centrale (vedi timeline-numerica/style.css)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.csp-tln-item {
		padding: 28px 32px 36px;
	}

	.csp-tln-item::before {
		left: var(--csp-tln-pallino-x, calc(var(--csp-tln-gap) * -1 - var(--csp-tln-pallino) / 2));
	}

	.csp-tln-item::after {
		display: none;
	}

	.csp-tln-item :is(h1, h2, h3, h4, h5, h6) {
		font-size: 22px;
		margin-bottom: 28px;
	}
}