/**
 * DevSign · Percorso (tappe in fila) — stile del blocco.
 *
 * Dal concept A di /concept-automazioni/. Tutti i colori passano dai RUOLI
 * semantici (--ds-soft, --ds-line-strong, --ds-text): il blocco deve reggere il
 * toggle chiaro/scuro e le superfici (.ds-bg-alt, .ds-bg-ink) come il resto del
 * sito.
 *
 * ⚠️ La linea che collega le tappe è fatta di SEGMENTI fra un pallino e il
 * successivo, non di una riga continua che passa sotto i pallini. Una riga
 * continua andrebbe mascherata con un fondo pieno, e il fondo di questa sezione
 * dipende dalla superficie che le assegna l'editor (base, alt o ink): il
 * pallino avrebbe il colore sbagliato sulle altre due. I segmenti non hanno
 * niente da mascherare e valgono su qualunque superficie.
 */

.ds-percorso {
	--pc-gap: clamp(1rem, 2.5vw, 1.75rem);
	--pc-dot: 42px;

	padding-block: var(--ds-space-3xl, 6rem);
}

.ds-percorso__inner {
	width: 100%;
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
}

/* --- Testa --- */

.ds-percorso__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 var(--ds-space-s, 1rem);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

/* Il marcatore smeraldo dell'eyebrow: motivo del sistema, già su confronto,
   process e servizi. */
.ds-percorso__eyebrow::before {
	content: "";
	flex: none;
	width: 22px;
	height: 1px;
	background: var(--ds-lime, #20b07a);
}

.ds-percorso__heading {
	margin: 0 0 var(--ds-space-m, 1.5rem);
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.625rem, 3.4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	max-width: 24ch;
}

.ds-percorso__text {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	max-width: 34em; /* era 62ch = 85 caratteri in Inter; a 36em questo testo, a parole corte, dava 80 (28/09/2026) */
	color: var(--ds-soft, #6b6862);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* --- Il tragitto --- */

.ds-percorso__flusso {
	list-style: none;
	margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
	padding: 0;
	display: grid;
	gap: var(--pc-gap);
}

.ds-percorso__tappa {
	position: relative;
	display: grid;
	grid-template-columns: var(--pc-dot) 1fr;
	align-items: start;
	gap: 0.9rem;
}

.ds-percorso__num {
	display: grid;
	place-items: center;
	width: var(--pc-dot);
	height: var(--pc-dot);
	border: 1px solid var(--ds-line-strong, #8a857c);
	border-radius: var(--ds-radius-pill, 999px);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.875rem;
	color: var(--ds-text, #292929);
}

.ds-percorso__body {
	display: grid;
	gap: 0.35rem;
	padding-top: 0.55rem;
}

.ds-percorso__titolo {
	color: var(--ds-text, #292929);
	font-size: 1.0625rem;
	line-height: 1.45;
	max-width: 32ch;
}

.ds-percorso__desc {
	color: var(--ds-soft, #6b6862);
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 38ch;
}

.ds-percorso__azione {
	margin: 0;
}

/* --- Variante con illustrazione: due colonne -------------------------------
   Nasce dal concept C di /concept-automazioni/, scelto il 22/09/2026.
   ⚠️ TUTTO il contenuto sta in una colonna, l'illustrazione nell'altra. La
   prima stesura teneva il tragitto a tutta larghezza sotto una testa a due
   colonne: misurato, la colonna di testo valeva 252px contro i 730 della
   scena e restavano 477px di colonna vuota, più due assi di allineamento
   diversi nella stessa sezione. Riempiendo la colonna con tragitto e CTA il
   vuoto si riduce e l'asse torna uno solo.
   ⚠️ Il testo resta a SINISTRA e l'illustrazione a destra: a 390 la colonna
   si linearizza nell'ordine del markup, quindi il titolo arriva prima
   dell'immagine — misurato, 126px contro i 399 della sezione che apriva col
   disegno. È il guadagno vero di questa forma, e invertire le colonne lo
   butterebbe via. */

@media (min-width: 782px) {
	.ds-percorso.has-media .ds-percorso__griglia {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
	}

	/* Con l'illustrazione accanto la colonna è stretta: il tragitto sta in
	   tre colonne più corte e le etichette scendono di misura. */
	.ds-percorso.has-media {
		--pc-gap: clamp(0.75rem, 1.6vw, 1.25rem);
		--pc-dot: 38px;
	}

	.ds-percorso.has-media .ds-percorso__titolo {
		font-size: 0.9375rem;
		line-height: 1.4;
		font-weight: 500;
		max-width: none;
	}

	.ds-percorso.has-media .ds-percorso__desc {
		font-size: 0.875rem;
		max-width: none;
	}

	.ds-percorso.has-media .ds-percorso__num {
		font-size: 0.8125rem;
	}
}

.ds-percorso__media {
	width: 100%;
}

/* Stessa cornice del blocco `servizio-media`: superficie, raggio e ombra. */
.ds-percorso__frame {
	border-radius: var(--ds-radius-md, 12px);
	overflow: hidden;
	border: 1px solid var(--ds-line, #e2dfd9);
	background: var(--ds-inset, #f1efeb);
	box-shadow: 0 24px 50px -30px rgba(41, 41, 41, 0.45);
}

.ds-percorso__frame svg,
.ds-percorso__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.ds-percorso__media {
		margin-top: clamp(1.5rem, 4vw, 2.5rem);
	}
}

/* --- Da 782px in su: le tappe in fila --- */

@media (min-width: 782px) {
	.ds-percorso__flusso {
		grid-template-columns: repeat(3, 1fr);
	}

	.ds-percorso.has-2-tappe .ds-percorso__flusso {
		grid-template-columns: repeat(2, 1fr);
	}

	.ds-percorso.has-4-tappe .ds-percorso__flusso {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Allineate a SINISTRA, non centrate: il primo pallino sta sulla stessa
	   ascissa dell'eyebrow e del titolo, e il tragitto comincia da dove
	   comincia la lettura. Centrando, il 01 rientrava di 175px rispetto al
	   testo sopra — in un sistema allineato a sinistra è l'elemento fuori
	   posto, non l'eccezione elegante. */
	/* ⚠️ `align-content: start` non è cosmesi. Senza, la tappa è una griglia a
	   due righe dentro un item che il contenitore stira all'altezza della tappa
	   più alta: `align-content` computa `normal`, cioè stretch, e il residuo si
	   spartisce fra le righe. Misurato il 22/09: l'etichetta della prima tappa
	   (una riga sola) scendeva di 12px rispetto alle altre due, mentre i pallini
	   restavano allineati — tre elementi paralleli con una didascalia fuori
	   riga. */
	.ds-percorso__tappa {
		grid-template-columns: 1fr;
		justify-items: start;
		align-content: start;
		gap: 1rem;
	}

	/* ⚠️ Il collegamento esiste SOLO da 782px in su, ed è una decisione
	   misurata, non una dimenticanza. In colonna unica il segmento vive nello
	   spazio fra un pallino e il successivo, che con una tappa di una riga sola
	   vale 0px: su questa home il primo segmento usciva alto 0 e il secondo 16.
	   Un moncone di 16px non legge come un tragitto, legge come un difetto — e
	   in colonna la sequenza la portano già i numeri e l'ordine dell'`<ol>`.
	   L'alternativa (riga continua sotto i pallini) vorrebbe un fondo pieno nel
	   pallino, che qui non si può sapere: dipende dalla superficie. */
	/* ⚠️ Il segmento passa da `--ds-soft`, NON da `--ds-line-strong`, e la
	   ragione è misurata: campionando i pixel sulla superficie vera — la
	   sezione in home porta `ds-bg-alt` — `--ds-line-strong` dipinge a
	   **2,82:1 in chiaro e 2,80 in scuro**, sotto il 3:1 di WCAG 1.4.11. E qui
	   la soglia si applica: questo segmento non è un ornamento, è l'unico
	   oggetto grafico che distingue un tragitto da un elenco, quindi è
	   necessario a capire il contenuto. `--ds-soft` è un RUOLO che segue la
	   superficie (su `.ds-bg-alt` diventa `--ds-soft-alt`) e flippa col tema:
	   4,89:1 in chiaro, 5,16 in scuro. Misurare solo sulla carta della pagina
	   concept avrebbe mancato il difetto di 0,23 punti.
	   Il bordo del pallino resta `--ds-line-strong`: è uno `<span aria-hidden>`
	   dentro un `<li>` non interattivo, 1.4.11 non lo richiede. */
	.ds-percorso__tappa:not(:last-child)::after {
		content: "";
		position: absolute;
		background: var(--ds-soft, #6b6862);
		left: calc(var(--pc-dot) + 8px);
		top: calc(var(--pc-dot) / 2);
		width: calc(100% + var(--pc-gap) - var(--pc-dot) - 16px);
		height: 1px;
	}

	.ds-percorso__body {
		padding-top: 0;
	}

	.ds-percorso__titolo,
	.ds-percorso__desc {
		max-width: 26ch;
	}
}