/*
 * Mappa servizi — stile del blocco.
 *
 * Una colonna sola, con una spina che RAMIFICA: tronco a sinistra, un ramo per
 * gruppo di servizi, e i nodi che si staccano dal ramo. La prima stesura
 * disegnava sette raccordi identici verso sette righe identiche: prometteva
 * una mappa e mostrava un elenco. Ora il disegno E' la struttura — si sceglie
 * prima il ramo (3 decisioni invece di 7), e i due servizi allo stesso prezzo
 * finiscono nello stesso ramo, dove sono varianti e non alternative.
 *
 * La modalita' albero e' additiva: senza rami nominati vale la geometria
 * piatta, tronco e raccordi diretti.
 *
 * ── Geometria, tutta derivata da tre misure ───────────────────────────────
 *   --gut  distanza fra l'asse del tronco e il bordo della colonna contenuto
 *   --ind  rientro del ramo rispetto al tronco (0 in modalita' piatta)
 *   --pad  padding sinistro della spina = gut + 0.75rem + ind
 * Da queste due posizioni:
 *   --rail   asse del tronco, in coordinate della colonna contenuto (negativo)
 *   --srail  asse del ramo = rail + ind
 * Padding, linee e raccordi leggono le stesse variabili, quindi restano
 * allineati per costruzione: nessun numero ripetuto a mano in piu' punti.
 *
 * Nota sull'altezza: rispetto alla versione a due colonne il guadagno e' di
 * LEGGIBILITA', non di altezza (1123px contro 1105 a 1440, con sette rami e
 * sette criteri di scelta che prima non c'erano).
 *
 * Animazione: tronco e rami si estendono, i raccordi si disegnano, tutto
 * agganciato a `.is-revealed`. Senza JS e con reduced-motion sono gia' a posto.
 */

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

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

/* ---------------------------------------------------------------- head -- */

.ds-mappa__head {
	margin-bottom: var(--ds-space-xl, 3rem);
}

.ds-mappa__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.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

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

.ds-mappa__heading {
	margin: 0;
	max-width: 22ch;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ds-text, #292929);
}

.ds-mappa__mark {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.ds-mappa__mark-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	width: 100%;
	height: 0.26em;
	color: var(--ds-lime, #20b07a);
	overflow: visible;
}

.ds-mappa__mark-line path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.js .ds-mappa__mark-line path {
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 760ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
	}

	.js .is-revealed .ds-mappa__mark-line path {
		stroke-dashoffset: 0;
	}
}

.ds-mappa__intro {
	margin: var(--ds-space-m, 1.5rem) 0 0;
	max-width: 58ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ds-soft, #6b6862);
}

/* --------------------------------------------------------------- spina -- */

.ds-mappa__spine {
	--gut: 2.75rem;
	--ind: 0rem;
	--pad: calc(var(--gut) + 0.75rem + var(--ind));
	--rail: calc(var(--pad) * -1 + var(--gut) * 0.5);
	--srail: calc(var(--rail) + var(--ind));
	position: relative;
	max-width: 52rem;
	padding-left: var(--pad);
}

.ds-mappa--tree {
	--ind: 1.5rem;
}

/*
 * La linea appartiene alla LISTA, non al contenitore, e sporge in su e in giu'
 * esattamente fino al centro dei due pallini. Attaccata al contenitore
 * proseguiva sotto il pallino finale per tutta l'altezza della nota, cioe'
 * ricascava nel difetto della prima versione: una spina che finisce nel nulla.
 *
 * Lo sbalzo e' costante per costruzione: 1.5rem di margine + 0.925rem, che e'
 * il centro del pallino (top 0.55rem + meta' di 0.75rem). Per questo la radice
 * ha line-height fisso: se cambia, cambia anche lo sbalzo.
 */
.ds-mappa__trunk {
	position: relative;
}

.ds-mappa__trunk::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--rail);
	width: 2px;
	margin-left: -1px;
	border-radius: 2px;
	background: var(--ds-lime, #20b07a);
	transform-origin: top;
}

.ds-mappa--root .ds-mappa__trunk::before {
	top: -2.425rem;
}

.ds-mappa--end .ds-mappa__trunk::before {
	bottom: -2.425rem;
}

/* Senza radice l'albero parte dal centro del primo pallino di ramo, non dal
   bordo del primo blocco: 0.55rem di offset + meta' del pallino da 0.75rem. */
.ds-mappa--tree:not(.ds-mappa--root) .ds-mappa__trunk::before {
	top: 0.925rem;
}

@media (prefers-reduced-motion: no-preference) {
	.js .ds-mappa__trunk::before {
		transform: scaleY(0);
		transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.js .is-revealed .ds-mappa__trunk::before {
		transform: scaleY(1);
	}
}

/* ---------------------------------------------------------------- rami -- */

.ds-mappa__branches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ds-space-ml, 1.5rem);
}

.ds-mappa__branch {
	position: relative;
}

.ds-mappa__branch-label {
	position: relative;
	margin: 0 0 0.75rem;
	line-height: 1.85rem;
}

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

/* Pallino del ramo, sul tronco. */
.ds-mappa__branch-label::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: var(--rail);
	width: 0.75rem;
	height: 0.75rem;
	margin-left: -0.375rem;
	border-radius: 50%;
	background: var(--ds-lime, #20b07a);
}

/*
 * Il gomito: dal tronco va a destra e poi scende sul ramo. Angolo arrotondato
 * con border-top + border-right, cioe' la curva che unisce un tratto
 * orizzontale che arriva da sinistra a uno verticale che scende.
 */
.ds-mappa__branch-label::after {
	content: "";
	position: absolute;
	top: 0.925rem;
	left: var(--rail);
	width: var(--ind);
	height: 0.75rem;
	margin-top: -1px;
	border-top: 2px solid var(--ds-lime, #20b07a);
	border-right: 2px solid var(--ds-lime, #20b07a);
	border-top-right-radius: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.js .ds-mappa__branch-label::after {
		clip-path: inset(0 100% 0 0);
		transition: clip-path 460ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
	}

	.js .is-revealed .ds-mappa__branch-label::after {
		clip-path: inset(0 0 0 0);
	}
}

/*
 * Il ramo verticale e' costruito a segmenti, uno per nodo, invece che con una
 * linea sola sul contenitore: cosi' finisce ESATTAMENTE al centro dell'ultimo
 * nodo qualunque sia l'altezza delle righe. Con una linea sola servirebbe
 * conoscere l'altezza dell'ultima riga, che dipende dal testo.
 */
.ds-mappa--tree .ds-mappa__item::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(var(--ds-space-2xs, 0.5rem) * -1);
	left: var(--srail);
	width: 2px;
	margin-left: -1px;
	background: var(--ds-lime, #20b07a);
	transform-origin: top;
}

/* Il primo nodo risale fino al gomito; l'ultimo si ferma al proprio centro. */
.ds-mappa--tree .ds-mappa__item:first-child::after {
	top: -1.3rem;
}

.ds-mappa--tree .ds-mappa__item:last-child::after {
	bottom: auto;
	height: 50%;
}

.ds-mappa--tree .ds-mappa__item:first-child:last-child::after {
	height: calc(50% + 1.3rem);
}

@media (prefers-reduced-motion: no-preference) {
	.js .ds-mappa--tree .ds-mappa__item::after {
		transform: scaleY(0);
		transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(420ms + var(--d) * 70ms);
	}

	.js .is-revealed .ds-mappa--tree .ds-mappa__item::after {
		transform: scaleY(1);
	}
}

/* -- radice e destinazione: i due capi che alla prima versione mancavano -- */

.ds-mappa__root,
.ds-mappa__end {
	position: relative;
	margin: 0;
}

.ds-mappa__root {
	margin-bottom: var(--ds-space-m, 1.5rem);
}

.ds-mappa__end {
	margin-top: var(--ds-space-m, 1.5rem);
}

.ds-mappa__root::before,
.ds-mappa__end::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: var(--rail);
	width: 0.75rem;
	height: 0.75rem;
	margin: 0 0 0 -0.375rem;
	border-radius: 50%;
	background: var(--ds-lime, #20b07a);
}

.ds-mappa__root {
	line-height: 1.85rem;
}

.ds-mappa__root span {
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

/* --------------------------------------------------------------- righe -- */

.ds-mappa__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ds-space-2xs, 0.5rem);
}

.ds-mappa__item {
	position: relative;
}

/*
 * Raccordo: parte esattamente sull'asse del ramo (sul tronco in modalita'
 * piatta, dove --ind vale 0 e i due assi coincidono) e muore sul bordo riga.
 */
.ds-mappa__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--srail);
	width: calc(var(--srail) * -1);
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--ds-lime, #20b07a);
	transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
	.js .ds-mappa__item::before {
		transform: scaleX(0);
		transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(360ms + var(--d) * 70ms);
	}

	.js .is-revealed .ds-mappa__item::before {
		transform: scaleX(1);
	}
}

/*
 * Quattro colonne SEMPRE presenti, anche quando badge o prezzo sono vuoti, e
 * `min-height` sulla riga. Prima l'altezza dipendeva dal numero di caratteri:
 * riga col badge 82,73px contro 58,55; riga senza hint -45px su mobile; riga
 * senza prezzo con la freccia spostata di 20px. La colonna del prezzo ha una
 * larghezza minima cosi' la freccia resta ancorata anche a prezzo assente.
 */
.ds-mappa__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(5.5rem, auto) 1rem;
	align-items: center;
	gap: 0.25rem 1.25rem;
	min-height: 3.5rem;
	padding: 0.6875rem 1.25rem;
	/* Riga = controllo: il bordo sta a 3:1 (WCAG 1.4.11), non su --ds-line. */
	border: 1px solid var(--ds-line-strong, #6f6c66);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-card, #fff);
	color: var(--ds-text, #292929);
	text-decoration: none;
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		border-color var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

/*
 * Inversione di colore, nessun movimento: il gesto unico del sistema bottoni.
 * Ruoli semantici (--ds-text / --ds-bg), MAI --ds-ink / --ds-paper, che sono
 * light-only e in dark farebbero sparire la riga.
 */
.ds-mappa__row:hover,
.ds-mappa__row:focus-visible {
	background: var(--ds-text, #292929);
	border-color: var(--ds-text, #292929);
	color: var(--ds-bg, #f1efeb);
}

.ds-mappa__row--flat {
	cursor: default;
}

.ds-mappa__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.75rem;
	min-width: 0;
}

.ds-mappa__name {
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
	letter-spacing: -0.01em;
}

.ds-mappa__hint {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ds-soft, #6b6862);
}

/* In hover la riga e' invertita: `--ds-soft` non ci vive, serve currentColor. */
.ds-mappa__row:hover .ds-mappa__hint,
.ds-mappa__row:focus-visible .ds-mappa__hint {
	color: currentColor;
	opacity: 0.82;
}

.ds-mappa__badge {
	justify-self: end;
	padding: 0.15rem 0.55rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ds-accent-text, #0d6f4a);
}

.ds-mappa__row:hover .ds-mappa__badge,
.ds-mappa__row:focus-visible .ds-mappa__badge {
	color: currentColor;
}

/* Cella vuota: tiene la colonna senza disegnare una pill di zero contenuto. */
.ds-mappa__badge.is-empty {
	padding: 0;
	border: 0;
}

.ds-mappa__price {
	justify-self: end;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: currentColor;
	opacity: 0.72;
}

.ds-mappa__go {
	justify-self: end;
	font-size: 1rem;
	line-height: 1;
	/* .5 dava 3,03:1 in light: unico segnale direzionale della riga, e il
	   piu' debole elemento presente. A .7 sta a 5,0:1. */
	opacity: 0.7;
}

.ds-mappa__row:hover .ds-mappa__go,
.ds-mappa__row:focus-visible .ds-mappa__go {
	opacity: 1;
}

/* --------------------------------------------------------- destinazione -- */

/*
 * La destinazione e' un BOTTONE SECONDARIO del sistema (`.btn .btn--secondary`
 * nel foglio globale), non un link colorato. Era l'elemento con meno peso
 * visivo del blocco — sotto sette righe con bordo pieno — mentre e' l'uscita
 * per chi non sa scegliere, cioe' il visitatore che il calcolatore esiste per
 * convertire. Resta secondario e non primario: il primario e' la riga di
 * servizio, che porta una conversione piu' qualificata.
 * Qui solo la geometria: colore, bordo e inversione in hover vengono dal
 * sistema bottoni, non riscritti.
 */
.ds-mappa__cta {
	max-width: 100%;
}

.ds-mappa__cta-arrow {
	flex: none;
}

.ds-mappa__cta-note {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ds-soft, #6b6862);
}

.ds-mappa__foot {
	margin: var(--ds-space-l, 2rem) 0 0;
	max-width: 58ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ds-soft, #6b6862);
}

/* -------------------------------------------------------------- stretto -- */

/*
 * Sotto i 720px il prezzo scende sotto al nome invece di comprimerlo: a 390
 * la prima versione mandava a capo «Sito professionale» e alzava quella sola
 * card da 110 a 160px, rompendo il ritmo dell'elenco.
 */
@media (max-width: 719px) {
	.ds-mappa__spine {
		--gut: 1.75rem;
	}

	.ds-mappa--tree {
		--ind: 0.875rem;
	}

	.ds-mappa__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.15rem 1rem;
		padding: 0.625rem 1rem;
	}

	.ds-mappa__name {
		line-height: 1.25;
	}

	/*
	 * Due righe di criterio per costruzione (2 x line-height), non per caso:
	 * a 390 il criterio piu' corto stava su una riga sola e quella riga
	 * misurava 109px contro 130 delle altre. Il ritmo dell'elenco non deve
	 * dipendere da quanti caratteri ha una frase.
	 */
	.ds-mappa__hint {
		display: block;
		min-height: 2.8em;
	}

	/*
	 * Tre righe ESPLICITE e collocazione per area. Con la griglia implicita
	 * `grid-row: -2` sulla freccia risolveva sulla prima riga e la freccia
	 * finiva sopra il nome del servizio. La freccia spanna le righe 2-3 e si
	 * allinea in basso, cosi' resta accanto al prezzo anche quando il badge
	 * manca e la sua riga collassa a zero.
	 */
	.ds-mappa__row {
		grid-template-rows: auto auto auto;
	}

	.ds-mappa__main {
		grid-area: 1 / 1 / 2 / 3;
	}

	.ds-mappa__badge {
		grid-area: 2 / 1 / 3 / 2;
		justify-self: start;
	}

	.ds-mappa__badge.is-empty {
		display: none;
	}

	.ds-mappa__price {
		grid-area: 3 / 1 / 4 / 2;
		justify-self: start;
	}

	.ds-mappa__go {
		grid-area: 2 / 2 / 4 / 3;
		align-self: end;
		justify-self: end;
	}
}