/**
 * DevSign · Processo — carosello "scroll-driven pinned".
 *
 * Desktop (≥1024 + motion ok): la sezione si fissa (sticky) e le card scorrono
 * in orizzontale via JS (translateX); barra di progresso sopra le card.
 * Mobile / reduced-motion: scroll orizzontale nativo (swipe) con scroll-snap.
 * Token --ds-* globali.
 */

.ds-process {
	padding-block: var(--ds-space-3xl, 6rem);
	/* Larghezza della card in un posto solo: serve sia come flex-basis sia come
	   max-width (vedi la nota su .ds-process__step). Se cambia, cambiano insieme. */
	--ds-process-card: clamp(260px, 27vw, 380px);
}

/* Pin: su mobile altezza naturale; su desktop fornisce la corsa di scroll. */
.ds-process__pin {
	position: relative;
}

.ds-process__sticky {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-xl, 3rem);
	/*
	 * RECINTO A TUTTA LARGHEZZA.
	 * Le card devono uscire di scena al bordo dello SCHERMO, non al bordo della
	 * colonna da 1280: e' il recinto che le taglia (overflow: hidden, nella
	 * media query desktop piu' sotto).
	 * ⚠️ Il gutter della track era GIA' scritto per questo caso
	 * (`calc((100% - var(--ds-content)) / 2 + ...)`), ma restava inerte: dentro
	 * .entry-content, che ha max-width 1280px, quel calcolo vale 0 e il gutter
	 * si riduceva al solo padding di 24px. Allargando il recinto la matematica
	 * esistente torna a dare i 104px previsti a 1440.
	 * Unita': 100cqi sul container dichiarato su .page-article — NON 100vw, che
	 * include la barra di scorrimento. Sotto i 1280 il calcolo vale 0 e non
	 * cambia niente, quindi la regola non ha bisogno di media query.
	 */
	width: 100cqi;
	margin-inline: calc((100% - 100cqi) / 2);
}

/* Head + barra: alla content-width */
.ds-process__inner {
	width: 100%;
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
}

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

.ds-process__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--ds-lime, #20b07a);
}

.ds-process__cta {
	margin: var(--ds-space-s, 1rem) 0 0;
}

.ds-process__heading {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Barra di progresso con dot-step */
.ds-process__bar {
	position: relative;
	margin-top: var(--ds-space-l, 2rem);
	height: 14px;
	display: flex;
	align-items: center;
}

/* Track grigio scuro */
.ds-process__bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: color-mix(in srgb, var(--ds-text, #292929) 22%, transparent);
	border-radius: 999px;
}

/* Linea smeraldo di avanzamento. Scala via transform invece di animare width:
   il valore cambia a ogni frame di scroll e animare width farebbe ricalcolare
   il layout ogni volta. */
.ds-process__bar-fill {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	transform-origin: left center;
	transform: translateY(-50%) scaleX(0);
	background: var(--ds-lime, #20b07a);
	transition: transform 0.1s linear;
	will-change: transform;
}

/* Dot degli step — rientrati così resta un tratto di linea prima del primo
   dot e dopo l'ultimo (la track grigia e la linea lime li coprono). */
.ds-process__dots {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 24px;
	right: 24px;
}

.ds-process__dot {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--ds-bg, #f1efeb); /* "vuoto": anello sul fondo */
	/* Fallback: senza color-mix il dot "vuoto" perde il bordo e sparisce
	   sul fondo pagina. */
	border: 2px solid var(--ds-line-strong, #8a857c);
	border: 2px solid color-mix(in srgb, var(--ds-text, #292929) 34%, transparent);
	transition: background-color 0.25s var(--ds-ease, ease),
		border-color 0.25s var(--ds-ease, ease);
}

.ds-process__dot.is-done {
	background: var(--ds-lime, #afff6f);
	border-color: var(--ds-lime, #afff6f);
}

/* Viewport + track */
.ds-process__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Container per lo spaziatore di coda della track (vedi ::after piu' sotto):
	   serve una base di misura che NON sia la track, che essendo `max-content`
	   renderebbe circolare qualsiasi percentuale scritta dentro di lei. */
	container-type: inline-size;
	/* Su mobile lo scroll nativo con `scroll-snap-type: x mandatory` agganciava
	   l'INIZIO della prima card e si mangiava il gutter: scrollLeft restava a 24
	   e la card partiva da x=0 mentre l'H2 stava a x=24, disallineati.
	   Lo scroll-padding sposta il punto d'aggancio del contenitore, quindi lo
	   snap rispetta il gutter. Stessa espressione del padding della track. */
	scroll-padding-inline-start: max(var(--ds-space-m, 1.5rem), calc((100% - var(--ds-content, 1280px)) / 2 + var(--ds-space-m, 1.5rem)));
}

.ds-process__viewport::-webkit-scrollbar {
	display: none;
}

.ds-process__track {
	display: flex;
	gap: var(--ds-space-l, 2rem);
	margin: 0;
	padding: 0;
	/* spazio sopra/sotto così le card che si sollevano non vengono tagliate */
	padding-block: 20px;
	/* Gutter basato su 100% (larghezza reale del viewport, scrollbar esclusa) e
	   non su 100vw: allinea la prima card alla stessa colonna centrata (1280) +
	   padding interno dell'header, così carosello e titolo partono allineati.
	   ⚠️ SOLO A SINISTRA: il gutter di coda è lo ::after qui sotto, non padding. */
	padding-inline: max(var(--ds-space-m, 1.5rem), calc((100% - var(--ds-content, 1280px)) / 2 + var(--ds-space-m, 1.5rem))) 0;
	list-style: none;
	width: max-content;
}

/* Gutter di coda come SPAZIATORE, non come padding.
   WebKit, calcolando il `max-content` della track, contava 130px dei 208 di
   padding-inline: la track usciva 78px piu' stretta del contenuto e l'ultima
   card finiva dentro il padding — margine finale 26px invece di 104, solo su
   Safari e solo con 5 tappe. Un flex item ha invece larghezza propria e
   partecipa al calcolo intrinseco in entrambi i motori.
   La misura e' in `cqi` (inline size del viewport, non della track) perche' una
   percentuale dentro un flex item si risolverebbe sulla track `max-content`.
   Testati prima e inefficaci: 100vw, 100cqi sul padding, max-width e flex-basis
   fissi sulla card — agivano tutti sul padding o sulla card, non sulla track. */
.ds-process__track::after {
	content: "";
	flex: 0 0 max(var(--ds-space-m, 1.5rem), calc((100cqi - var(--ds-content, 1280px)) / 2 + var(--ds-space-m, 1.5rem)));
	/* Lo spaziatore e' un flex item, quindi il `gap` lo precede e si sommerebbe
	   al gutter (104 + 32 = 136 di coda). Il margine negativo annulla il gap,
	   cosi' la coda vale esattamente il gutter a ogni larghezza — anche sotto i
	   1280, dove il gutter (24px) e' piu' stretto del gap. */
	margin-inline-start: calc(-1 * var(--ds-space-l, 2rem));
}

/* Card step */
.ds-process__step {
	scroll-snap-align: start;
	flex: 0 0 var(--ds-process-card);
	/* max-width OLTRE al flex-basis, non per ridondanza: la track e' larga
	   `max-content` e WebKit ne calcola il contributo intrinseco dal contenuto
	   della card, ignorando il flex-basis. Senza questo limite, su Safari 26.6
	   la track usciva 2283px invece di 1412 con 975px di VUOTO in coda (contro
	   i 104 del gutter), e il JS attivava il pinning su pagine dove le card
	   entravano gia' nello schermo. Chrome non e' interessato. */
	max-width: var(--ds-process-card);
	display: flex;
	flex-direction: column;
	min-height: min(38vh, 320px);
	padding: clamp(1.5rem, 2.2vw, 2rem);
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-card, #fff);
	transition: opacity 0.3s var(--ds-ease, ease),
		transform 0.3s var(--ds-ease, ease),
		border-color 0.3s var(--ds-ease, ease),
		box-shadow 0.3s var(--ds-ease, ease);
}

/* La tappa che ha raggiunto il suo dot: unico oggetto in rilievo. La
   distinzione passa da bordo e ombra, NON da un calo di opacita' sul testo
   (che affosserebbe il contrasto delle card non attive). */
.ds-process__step.is-active {
	/* Fallback: senza color-mix la tappa attiva non si distinguerebbe. */
	border-color: var(--ds-lime, #20b07a);
	border-color: color-mix(in srgb, var(--ds-lime, #20b07a) 55%, var(--ds-line, #e2dfd9));
	box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.4);
}

/* Riga alta: numerale-ghost + durata */
.ds-process__step-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ds-space-s, 1rem);
	margin-bottom: var(--ds-space-m, 1.5rem);
	padding-bottom: var(--ds-space-s, 1rem);
	border-bottom: 1px solid var(--ds-line, #e2dfd9);
}

.ds-process__num {
	font-family: var(--ds-font-display, serif);
	font-size: clamp(2.25rem, 3.4vw, 3rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--ds-text, #292929);
}

.ds-process__duration {
	flex: 0 0 auto;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ds-accent-text, #0d6f4a);
}

.ds-process__step-title {
	margin: 0 0 var(--ds-space-xs, 0.5rem);
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ds-process__step-desc {
	margin: 0;
	color: var(--ds-soft, #6b6862);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Deliverable ancorato in basso: riempie la card e chiude la promessa */
.ds-process__deliverable {
	margin: var(--ds-space-l, 2rem) 0 0;
	padding-top: var(--ds-space-s, 1rem);
	border-top: 1px solid var(--ds-line, #e2dfd9);
	/* spinge in fondo qualunque sia la lunghezza della descrizione */
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.ds-process__deliverable-label {
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

.ds-process__deliverable-text {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ds-text, #292929);
}

/* --- Desktop: modalità pinned (solo se l'utente non ha reduced-motion) --- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.ds-process__pin {
		height: calc(100vh + (var(--ds-process-count, 5) - 1) * 26vh);
	}

	.ds-process__sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		justify-content: center;
		overflow: hidden;
	}

	.ds-process__viewport {
		overflow: hidden; /* lo scorrimento è guidato da JS via translateX */
		scroll-snap-type: none; /* niente snap nativo: evita scrollLeft residuo */
	}

	.ds-process__track {
		will-change: transform;
	}
}