/**
 * DevSign · Prima / dopo — stile del blocco.
 *
 * Impianto: concept D di /concept-prima-dopo/, scelto il 16/09/2026.
 * Verdetto + tendina in alto, elenco dei tragitti sotto, «com'era» in fondo
 * dentro un dettaglio chiuso.
 *
 * Ruoli semantici, mai i token grezzi: l'inversione usa `--ds-text`/`--ds-bg`
 * e non `--ds-ink`/`--ds-paper`, che sono light-only e in dark farebbero
 * sparire il pannello.
 */

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

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

/* ------------------------------------------------------------------ *
 * INTESTAZIONE
 * ------------------------------------------------------------------ */

.ds-primadopo__title {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--ds-text, #292929);
}

.ds-primadopo__lead {
	margin: var(--ds-space-s, 1rem) 0 0;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ds-soft, #6b6862);
}

/* ------------------------------------------------------------------ *
 * 1 · IL VERDETTO E LA PROVA
 * ------------------------------------------------------------------ */

.ds-primadopo__focus {
	display: grid;
	gap: var(--ds-space-l, 2rem);
	margin-top: var(--ds-space-xl, 3rem);
}

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

.ds-primadopo__pair {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: 0.75rem 0 0;
}

/*
 * ⚠️ Prima e dopo si distinguono per FACCIA e MISURA, mai per colore.
 * Smorzare il «prima» e' il riflesso naturale ed e' vietato: `--ds-soft` sulla
 * carta ha 4,59:1 di margine e qualunque tinta in piu' lo spinge sotto soglia.
 */
.ds-primadopo__before {
	font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
	line-height: 1.3;
	color: var(--ds-text, #292929);
}

.ds-primadopo__after {
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--ds-text, #292929);
}

/* Verdetto in parole invece che in cifre: a 64px andrebbe a capo tre volte e
   smetterebbe di essere un colpo d'occhio. */
.ds-primadopo__after--lungo {
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ds-primadopo__arrow {
	align-self: center;
}

.ds-primadopo__arrow svg {
	display: block;
	width: clamp(2rem, 4vw, 3rem);
	height: auto;
	overflow: visible;
}

.ds-primadopo__arrow path {
	fill: none;
	stroke: var(--ds-lime, #20b07a);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ds-primadopo__foot {
	margin: 0.75rem 0 0;
	max-width: 42ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ds-soft, #6b6862);
}

@media (min-width: 900px) {
	.ds-primadopo__focus {
		grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
		gap: var(--ds-space-2xl, 4rem);
		/* In alto, non centrati: il verdetto e il bordo superiore del
		   fotogramma fanno una riga sola. Centrato, il numero galleggiava in
		   mezzo a un vuoto alto quanto mezza immagine. */
		align-items: start;
	}

	/* Con una cosa sola in fascia, quella cosa prende tutta la riga: il
	   verdetto non resta in una colonna da 14rem, e la tendina non si stringe
	   nella colonna del verdetto lasciando mezza riga vuota. */
	.ds-primadopo__focus--solo-verdetto,
	.ds-primadopo__focus--solo-tendina {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * 2 · L'ELENCO DEI TRAGITTI
 * Una riga che si muove, non due colonne che si oppongono: quelle sono
 * gia' il blocco `confronto`, che dice un'altra cosa.
 * ------------------------------------------------------------------ */

.ds-primadopo__rows {
	margin: var(--ds-space-2xl, 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.ds-primadopo__row {
	display: grid;
	gap: 0.5rem;
	padding-block: var(--ds-space-m, 1.5rem);
	border-top: 1px solid var(--ds-line, #e2dfd9);
}

.ds-primadopo__row:last-child {
	border-bottom: 1px solid var(--ds-line, #e2dfd9);
}

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

.ds-primadopo__states {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

.ds-primadopo__row-before {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--ds-text, #292929);
}

/* Il dopo: pannello invertito rispetto alla pagina, la stessa grammatica della
   colonna «su misura» di `confronto`. 12,67:1 light / 14,35:1 dark. */
.ds-primadopo__row-after {
	display: inline-block;
	padding: 0.5rem 0.95rem;
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-text, #292929);
	color: var(--ds-bg, #f1efeb);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.4;
}

.ds-primadopo__line {
	display: flex;
	align-items: center;
	gap: 3px;
	width: 2.5rem;
	height: 2.5rem;
	margin-left: 0.6rem;
	/* Scatola quadrata: ruotandola di 90° l'ingombro non cambia e la freccia
	   verticale non va a sbattere contro il pannello sotto. */
	transform: rotate(90deg);
}

/*
 * ⚠️ Il tratto e' un elemento con un fondo, non un <path> in un SVG stirato.
 * Misurato il 16/09: con `preserveAspectRatio="none"` + `pathLength="1"` +
 * `vector-effect: non-scaling-stroke` Chrome calcola il tratteggio ignorando
 * `pathLength` e la linea esce spezzata in tre segmenti. Con un fondo e
 * `scaleX` il disegno e' esatto — ed e' l'animazione che questo tema ha
 * adottato ovunque al posto di `width`.
 */
.ds-primadopo__rail {
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: var(--ds-lime, #20b07a);
	transform-origin: left center;
}

.ds-primadopo__tip {
	flex: 0 0 auto;
	width: 8px;
	height: 12px;
	overflow: visible;
}

.ds-primadopo__tip path {
	fill: none;
	stroke: var(--ds-lime, #20b07a);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 782px) {
	/*
	 * Quattro colonne, non un flex che si allunga: con il tragitto libero di
	 * crescere i pannelli finivano a settecento pixel dal testo di partenza e
	 * il movimento si perdeva nel vuoto. Cosi' il tratto ha una misura fissa e
	 * i pannelli partono tutti dalla stessa ascissa.
	 */
	.ds-primadopo__row {
		grid-template-columns:
			11rem
			minmax(6rem, 1fr)
			clamp(2.5rem, 5vw, 4.5rem)
			minmax(0, 1.15fr);
		gap: var(--ds-space-m, 1.5rem);
		align-items: center;
	}

	/* `display: contents` scioglie il paragrafo: i tre stati diventano celle
	   della griglia della riga, e la lettura linearizzata resta una frase. */
	.ds-primadopo__states {
		display: contents;
	}

	.ds-primadopo__line {
		width: auto;
		height: 12px;
		margin-left: 0;
		transform: none;
	}

	.ds-primadopo__row-after {
		justify-self: start;
	}
}

/* Il tratto si disegna all'ingresso, sfalsato riga per riga; la punta arriva
   dopo. Stato di riposo = gia' disegnato: senza JS e con reduced-motion non
   manca niente. */
@media (prefers-reduced-motion: no-preference) {
	.js .ds-primadopo[data-reveal] .ds-primadopo__rail {
		transform: scaleX(0);
		transition: transform 520ms var(--ds-ease, ease);
		transition-delay: calc(var(--d, 0) * 120ms + 160ms);
	}

	.js .ds-primadopo[data-reveal] .ds-primadopo__tip {
		opacity: 0;
		transition: opacity 240ms var(--ds-ease, ease);
		transition-delay: calc(var(--d, 0) * 120ms + 600ms);
	}

	.js .ds-primadopo[data-reveal].is-revealed .ds-primadopo__rail {
		transform: scaleX(1);
	}

	.js .ds-primadopo[data-reveal].is-revealed .ds-primadopo__tip {
		opacity: 1;
	}

	.js .ds-primadopo[data-reveal] .ds-primadopo__arrow path {
		stroke-dasharray: 60;
		stroke-dashoffset: 60;
		transition: stroke-dashoffset 600ms var(--ds-ease, ease) 160ms;
	}

	.js .ds-primadopo[data-reveal].is-revealed .ds-primadopo__arrow path {
		stroke-dashoffset: 0;
	}
}

/* ------------------------------------------------------------------ *
 * LA TENDINA
 * Stato di riposo = SENZA JavaScript: due riquadri affiancati, che restano
 * un confronto vero. La sovrapposizione si accende solo con `.js`.
 * ------------------------------------------------------------------ */

.ds-primadopo__frame {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ds-space-m, 1.5rem);
}

.ds-primadopo__side {
	position: relative;
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-md, 12px);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--ds-inset, #f1efeb);
}

.ds-primadopo__side img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* Chip: una delle tre eccezioni al raggio unico di 12px del tema. */
.ds-primadopo__tag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--ds-line, #e2dfd9);
	background: var(--ds-card, #fff);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ds-text, #292929);
}

.ds-primadopo__rule,
.ds-primadopo__range {
	display: none;
}

@media (min-width: 600px) {
	.ds-primadopo__frame {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- con JavaScript: i due lati si sovrappongono e la tendina li divide --- */

.js .ds-primadopo__frame {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-md, 12px);
	overflow: hidden;
	background: var(--ds-inset, #f1efeb);
}

.js .ds-primadopo__side {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
}

.js .ds-primadopo__side--before {
	clip-path: inset(0 calc(100% - var(--ds-wipe, 50%)) 0 0);
}

.js .ds-primadopo__side--after .ds-primadopo__tag {
	left: auto;
	right: 0.75rem;
}

.js .ds-primadopo__rule {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ds-wipe, 50%);
	width: 2px;
	margin-left: -1px;
	background: var(--ds-lime, #20b07a);
	/*
	 * ⚠️ Il pomello e' disegnato QUI e non nel thumb del range: un thumb alto
	 * quanto una traccia in percentuale si incolla al bordo superiore e non
	 * esiste un modo affidabile di centrarlo. Misurato.
	 */
	pointer-events: none;
}

.js .ds-primadopo__rule::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--ds-lime, #20b07a);
	border-radius: 999px;
	background-color: var(--ds-lime, #20b07a);
	/* Due chevron opposti, mai un burger: la maniglia decisa il 29/08. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%23292929' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 L4 8 L9 13'/%3E%3Cpath d='M15 3 L20 8 L15 13'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 16px;
	transition: background-color var(--ds-t-base, 260ms) var(--ds-ease, ease);
}

/*
 * Il controllo vero: trasparente, grande quanto il fotogramma, cosi' si
 * trascina ovunque. Trascinamento, frecce della tastiera e stato di focus
 * arrivano dal range nativo invece di essere reinventati.
 */
.js .ds-primadopo__range {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
}

.js .ds-primadopo__range::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
}

.js .ds-primadopo__range::-moz-range-track {
	height: 100%;
	background: transparent;
}

.js .ds-primadopo__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

.js .ds-primadopo__range::-moz-range-thumb {
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

/* Hover e focus: inversione di colore, nessun movimento — il gesto unico del
   sistema bottoni. */
.js .ds-primadopo__range:hover ~ .ds-primadopo__rule::after,
.js .ds-primadopo__range:focus-visible ~ .ds-primadopo__rule::after {
	background-color: var(--ds-bg, #f1efeb);
}

.js .ds-primadopo__range:focus-visible ~ .ds-primadopo__rule::after {
	box-shadow: 0 0 0 3px var(--ds-text, #292929);
}

.js .ds-primadopo__range:focus-visible {
	outline: none;
}

/* ------------------------------------------------------------------ *
 * 3 · «COM'ERA», CHIUSO DI DEFAULT
 * ------------------------------------------------------------------ */

.ds-primadopo__old {
	margin-top: var(--ds-space-2xl, 4rem);
}

.ds-primadopo__summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--ds-space-s, 1rem);
	min-height: 44px;
	padding-block: 0.5rem;
	border-top: 1px solid var(--ds-line, #e2dfd9);
	cursor: pointer;
	list-style: none;
}

.ds-primadopo__summary::-webkit-details-marker {
	display: none;
}

.ds-primadopo__summary-label {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ds-text, #292929);
	text-decoration: underline;
	text-decoration-color: var(--ds-lime, #20b07a);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.ds-primadopo__summary:hover .ds-primadopo__summary-label,
.ds-primadopo__summary:focus-visible .ds-primadopo__summary-label {
	text-decoration-thickness: 3px;
}

.ds-primadopo__summary-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1px solid var(--ds-line-strong, #b9b4ab);
	border-radius: 999px;
	transition: transform var(--ds-t-base, 260ms) var(--ds-ease, ease);
}

.ds-primadopo__summary-mark svg {
	width: 12px;
	height: 8px;
}

.ds-primadopo__summary-mark path {
	fill: none;
	stroke: var(--ds-text, #292929);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ds-primadopo__old[open] .ds-primadopo__summary-mark {
	transform: rotate(180deg);
}

.ds-primadopo__reso {
	display: grid;
	gap: var(--ds-space-l, 2rem);
	margin-top: var(--ds-space-l, 2rem);
}

.ds-primadopo__panel {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0.75rem;
	margin: 0;
}

.ds-primadopo__cap {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

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

/*
 * ⚠️ Il pannello «prima» ha colori FISSI e non segue il tema: e' la citazione
 * di un sito che esisteva, cioe' l'equivalente di uno screenshot — e uno
 * screenshot non si inverte in dark. Il pannello «dopo» invece usa i token e
 * cambia col tema, perche' quello e' il sito vivo. La differenza e' voluta.
 */
.ds-primadopo__paper {
	padding: 1.5rem;
	border: 1px solid var(--ds-line, #e2dfd9);
	/* Angoli vivi: il raggio di 12px e' una scelta di QUESTO sistema, e il
	   pannello «prima» cita un sito che non ce l'aveva. */
	border-radius: 0;
	background: #fff;
	color: #000;
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	line-height: 1.2;
}

.ds-primadopo__kicker {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 12px;
}

.ds-primadopo__oldtitle {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
}

.ds-primadopo__oldp {
	/* Nessun limite di misura: la riga lunghissima E' il difetto citato. */
	margin: 0 0 10px;
	max-width: none;
}

/* `all: revert` riporta il bottone allo stile dell'user agent: e' il punto del
   concept, non una dimenticanza. Fuori dall'ordine di tabulazione perche' non
   fa niente: e' una resa, non un controllo. */
.ds-primadopo__oldbtn {
	all: revert;
	font-size: 13px;
}

.ds-primadopo__paper--brand {
	padding: 1.75rem;
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-card, #fff);
	color: var(--ds-text, #292929);
	font-family: var(--ds-font-body, system-ui);
	font-size: 1rem;
	line-height: 1.6;
}

.ds-primadopo__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.85rem;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

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

.ds-primadopo__newtitle {
	margin: 0 0 0.75rem;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--ds-text, #292929);
}

.ds-primadopo__newp {
	margin: 0 0 0.75rem;
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ds-soft, #6b6862);
}

.ds-primadopo__newcta {
	margin: 1.25rem 0 0;
}

/* Bottone primario del tema: inchiostro su smeraldo, 5,23:1 in entrambi i
   temi. E' una resa, non un controllo: nessun hover, nessun focus. */
.ds-primadopo__newbtn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.65rem 1.25rem;
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-lime, #20b07a);
	color: #292929;
	font-family: var(--ds-font-body, system-ui);
	font-size: 0.9375rem;
	font-weight: 500;
}

@media (min-width: 900px) {
	.ds-primadopo__reso {
		grid-template-columns: 1fr 1fr;
		gap: var(--ds-space-xl, 3rem);
		align-items: start;
	}
}