/**
 * DevSign · FAQ — stile del blocco.
 *
 * Accordion con <details>/<summary>. Icona +/− tramite ::before, ruota su [open].
 * Usa i token --ds-* globali.
 */

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

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

/* --- Head --- */
.ds-faq__head {
	margin-bottom: var(--ds-space-2xl, 4rem);
}

/*
 * Sulle pagine servizio l'header porta solo l'eyebrow (nessun titolo): 4rem
 * sotto una riga di 13px sembravano un errore di rendering. Con il solo
 * eyebrow lo stacco si riduce a una spaziatura normale.
 */
.ds-faq__head:not(:has(.ds-faq__heading)) {
	margin-bottom: var(--ds-space-m, 1.5rem);
}

.ds-faq__eyebrow {
	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);
	/* Quando è un <h2> (FAQ senza titolo) non deve prendere peso e interlinea
	   dei titoli: resta identico all'occhiello in <p>. */
	font-weight: 400;
	line-height: inherit;
}

.ds-faq__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;
}

/* --- Accordion --- */
.ds-faq__item {
	border-bottom: 1px solid var(--ds-line, #e2dfd9);
}

.ds-faq__item:first-child {
	border-top: 1px solid var(--ds-line, #e2dfd9);
}

.ds-faq__question {
	display: grid;
	/* numero · domanda · icona. Il numero da' struttura e riempie la colonna
	   sinistra, che era vuota: 19 istanze su 20 non hanno nemmeno un titolo,
	   quindi il blocco partiva con un eyebrow di 13px e basta. */
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--ds-space-m, 1.5rem);
	padding: var(--ds-space-l, 2rem) var(--ds-space-s, 1rem);
	cursor: pointer;
	list-style: none;
	font-family: var(--ds-font-display, serif);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 500;
	line-height: 1.3; /* 1.25 era sotto la soglia su domande di due righe (29/09/2026) */
	letter-spacing: -0.01em;
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-faq__num {
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--ds-accent-text, #0d6f4a);
	font-variant-numeric: tabular-nums;
}

.ds-faq__text {
	text-wrap: balance;
}

/* La riga intera reagisce, non solo l'icona. */
.ds-faq__question:hover {
	background: color-mix(in srgb, var(--ds-text, #292929) 4%, transparent);
}

/*
 * Sul fondo tenue della voce aperta lo smeraldo del numero scendeva a 4.46:1
 * (misurato campionando i pixel: serve 4.5). Il numero della voce attiva passa
 * al colore pieno — piu' leggibile e coerente: quella e' la voce in primo piano.
 */
.ds-faq__item[open] .ds-faq__num {
	color: var(--ds-text, #292929);
}

/* Dove sei: il motivo-firma smeraldo segna la voce aperta.
 *
 * ⚠️ La tinta al 5% E' UNA SUPERFICIE, e una superficie porta i suoi ruoli —
 * la stessa convenzione che il tema ha gia' su `.ds-bg-alt`. Senza,
 * `--ds-soft` del testo della risposta cade a 4,47:1 in light (misurato il
 * 16/09 campionando i pixel: il calcolo puro dice 4,63, la grana del body si
 * mangia gli altri 0,16). Con `--ds-soft-alt`: 5,12 light, dark invariato a
 * 5,22 perche' li' i due token coincidono.
 * ⚠️ Il token, non il suo valore: cablare `#625f59` qui manda il dark a
 * 2,04:1 (testo chiaro-scuro su fondo scuro). Misurato provandolo. */
.ds-faq__item[open] {
	--ds-soft: var(--ds-soft-alt, #625f59);
	background: color-mix(in srgb, var(--ds-lime, #20b07a) 5%, transparent);
	box-shadow: inset 3px 0 0 0 var(--ds-lime, #20b07a);
}

/* Nasconde il marker nativo (Safari/Chrome) */
.ds-faq__question::-webkit-details-marker {
	display: none;
}

/*
 * Prima qui c'era `color: var(--ds-text)`, cioè esattamente il colore già
 * ereditato: una riga alta 70px che al passaggio del mouse non reagiva.
 * L'icona è l'affordance: al hover si accende come all'apertura.
 */
.ds-faq__question:hover .ds-faq__icon,
.ds-faq__question:focus-visible .ds-faq__icon {
	border-color: var(--ds-lime, #20b07a);
	background: color-mix(in srgb, var(--ds-lime, #20b07a) 14%, transparent);
}

/* Icona decorativa: quadrato arrotondato (radius dei button) con bordo lime
   soft + "+" che diventa "−". All'apertura si riempie di lime tenue; le barre
   (+/−) usano --ds-text → nere in chiaro, bianche in scuro. */
.ds-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	/* Fallback: senza color-mix il border shorthand cade del tutto e l'icona
	   +/- resta senza box, cioe' senza la sua affordance. */
	border: 2px solid var(--ds-lime, #20b07a);
	border: 2px solid color-mix(in srgb, var(--ds-lime, #afff6f) 75%, transparent);
	border-radius: var(--ds-radius-md, 12px);
	background: transparent;
	transition: background-color var(--ds-t-base, 260ms) var(--ds-ease, ease);
}

.ds-faq__icon::before,
.ds-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--ds-text, #292929);
	transform: translate(-50%, -50%);
	transition: transform var(--ds-t-base, 260ms) var(--ds-ease, ease),
		opacity var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ds-faq__item[open] .ds-faq__icon {
	background: color-mix(in srgb, var(--ds-lime, #afff6f) 20%, transparent);
}

.ds-faq__item[open] .ds-faq__icon::after {
	opacity: 0;
}



/* --- Risposta --- */
.ds-faq__answer {
	/* Rientro pari a numero + gap: la risposta si allinea alla domanda,
	   non al bordo, cosi' la colonna di lettura resta una sola. */
	padding: 0 var(--ds-space-l, 2rem) var(--ds-space-l, 2rem)
		calc(var(--ds-space-s, 1rem) + 2ch + var(--ds-space-m, 1.5rem));
	color: var(--ds-soft, #6b6862);
	max-width: 36em; /* era 68ch = ~85 caratteri in Inter: stessa correzione della prosa, 28/09/2026 */
	overflow: hidden; /* clip durante l'animazione d'altezza (initFaq) */
}

.ds-faq__answer-text > :first-child {
	margin-top: 0;
}

.ds-faq__answer-text > :last-child {
	margin-bottom: 0;
}

.ds-faq__answer a {
	color: var(--ds-text, #292929);
	text-decoration-color: var(--ds-lime, #afff6f);
}

/* L'apertura/chiusura anima l'altezza via JS (initFaq, WAAPI). In
   reduced-motion o senza JS resta il toggle nativo di <details> (istantaneo). */

/* --- Reveal on-scroll (gated su .js) --- */
@media (prefers-reduced-motion: no-preference) {
	.js .ds-faq[data-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity var(--ds-t-base, 260ms) var(--ds-ease, ease),
			transform var(--ds-t-base, 260ms) var(--ds-ease, ease);
	}

	.js .ds-faq[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}


/* --- Chiusura: una via d'uscita per chi non ha trovato la sua domanda --- */
/* --- Chiusura ---
   Era un <p> grigio opzionale, e su 20 istanze non e' mai stato compilato: il
   blocco finiva su un filetto, in fondo a pagine di vendita, subito dopo la
   domanda sul prezzo. Ora e' un pannello con una via d'uscita vera. */
.ds-faq__closing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-m, 1.5rem);
	margin-top: var(--ds-space-xl, 3rem);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-card, #fff);
}

.ds-faq__closing-text {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ds-text, #292929);
}

.ds-faq__closing-sub {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--ds-font-body, sans-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--ds-soft, #6b6862);
}

.ds-faq__closing-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-m, 1.5rem);
}

/* Dal 29/09/2026 (critique della home) «Fammi la tua domanda» è un SECONDARIO del
   sistema bottoni (`btn btn--secondary`): era un primario pieno in mono, e sulle
   pagine la banda CTA subito dopo porta già il primario. */
.ds-faq__closing-cta {
	white-space: nowrap;
}

.ds-faq__closing-alt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ds-accent-text, #0d6f4a);
	font-size: 0.9375rem;
	text-underline-offset: 3px;
}

/* L'override testuale (campo closing_cta) resta una riga, senza pannello. */
.ds-faq__closing:not(:has(.ds-faq__closing-actions)) {
	display: block;
	border: 0;
	padding: 0;
	background: none;
	margin-top: var(--ds-space-m, 1.5rem);
}

.ds-faq__closing:not(:has(.ds-faq__closing-actions)) .ds-faq__closing-text {
	font-family: var(--ds-font-body, sans-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--ds-soft, #6b6862);
}

/* NIENTE `color` qui: questa regola e' (0,1,1) e batteva `.ds-faq__closing-cta`
   (0,1,0), che sta piu' su nel file. Il bottone primario prendeva lo smeraldo
   di testo invece dell'ink — e in dark `--ds-accent-text` VALE lo smeraldo del
   fondo, cioe' testo invisibile (misurato 1:1 su 21 istanze). Il colore dei
   due link della chiusura lo dichiara ciascuno per conto suo. */
.ds-faq__closing a {
	text-underline-offset: 3px;
}

/* Stessa rassicurazione della cta-band, nello stesso punto: sotto il click. */
.ds-faq__closing-note {
	margin: var(--ds-space-s, 0.75rem) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ds-soft, #6b6862);
}

/* ----------------------------------------------------------------------------
 * DUE COLONNE — 01/09/2026
 *
 * Prima: una colonna sola centrata a 820px, con l'intestazione sopra
 * l'accordion. Ora l'intestazione sta a sinistra e le domande a destra, come
 * la FAQ della pagina Studio.
 *
 * ⚠️ Il motivo per cui la colonna sinistra porta anche il CONTEGGIO e la CTA
 * di chiusura, e non solo eyebrow + titolo: misurato sul DB, **20 istanze su
 * 21 non hanno il titolo compilato** — solo la Home ce l'ha. Con eyebrow e
 * basta, quella colonna sarebbe una riga mono di 13px accanto a un accordion
 * alto 700px, cioe' lo stesso vuoto che il redesign del 28/08 aveva chiuso
 * riducendo lo stacco dell'header. Il conteggio e' un dato vero, non un
 * riempitivo, e la CTA e' l'elemento che gia' chiudeva il blocco.
 *
 * ⚠️ CONTAINER query, non media query: su alcune pagine il blocco vive dentro
 * una colonna del contenuto, e la larghezza del viewport non dice niente sullo
 * spazio che ha davvero. Con una media query un blocco in colonna stretta
 * avrebbe spaccato in due 400px.
 *
 * ⚠️ L'ordine nel DOM resta head → lista → chiusura, cioe' l'ordine di lettura
 * giusto (le domande, poi la via d'uscita). Il posizionamento e' fatto con
 * grid-template-areas, e la chiusura e' allineata al FONDO della colonna: cosi'
 * e' anche l'ultimo elemento in basso, e il focus da tastiera non risale a
 * sorpresa verso l'alto dopo l'ultima domanda.
 * ------------------------------------------------------------------------- */

.ds-faq {
	container-type: inline-size;
	container-name: dsfaq;
}

.ds-faq__count {
	margin: var(--ds-space-m, 1.5rem) 0 0;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--ds-soft, #6b6862);
}

.ds-faq__count span {
	color: var(--ds-accent-text, #0d6f4a);
	font-variant-numeric: tabular-nums;
}

@container dsfaq (min-width: 860px) {
	.ds-faq__inner {
		/* 1280 come la gabbia degli altri blocchi (28/09/2026): a 1180 la
		   colonna sinistra partiva a x 154 contro 104 del resto della pagina. */
		max-width: var(--ds-content, 1280px);
		display: grid;
		grid-template-columns: 38fr 62fr;
		/* La prima riga prende lo spazio, la seconda quello che serve: senza,
		   l'area dell'intestazione sarebbe alta quanto l'intestazione e lo
		   sticky non avrebbe corsa. */
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"head list"
			"closing list";
		column-gap: var(--ds-space-2xl, 4rem);
	}

	/*
	 * La cella si allunga per tutta la riga (niente `align-self: start`) e lo
	 * sticky sta sul figlio: cosi' il contenitore dello sticky e' la cella e
	 * l'intestazione si ferma dove finisce la sua riga, appena sopra la CTA.
	 * Con lo sticky sull'elemento di griglia il contenitore sarebbe il grid
	 * container intero, e l'intestazione scorreva sopra la chiusura.
	 */
	.ds-faq__head {
		grid-area: head;
		align-self: stretch;
		margin-bottom: 0;
	}

	.ds-faq__head-inner {
		position: sticky;
		top: calc(var(--ds-header-h, 80px) + var(--ds-space-l, 2rem));
	}

	/* Lo stacco ridotto senza titolo non serve piu': qui l'intestazione non ha
	   niente sotto di se' nella sua colonna. */
	.ds-faq__head:not(:has(.ds-faq__heading)) {
		margin-bottom: 0;
	}

	.ds-faq__list {
		grid-area: list;
	}

	.ds-faq__closing {
		grid-area: closing;
		align-self: end;
		margin-top: var(--ds-space-2xl, 4rem);
		/* In colonna il blocco e' stretto: testo e azioni vanno impilati,
		   non affiancati con space-between. */
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.ds-faq__closing-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ds-space-s, 1rem);
	}
}


/* --- Opener del calcolatore dentro la risposta (16/09) ---
   Sta accanto al prezzo, che e' dove la domanda nasce: le altre vie (voce di
   menu, CTA secondaria del cta-band) stanno fuori da quel momento.
   Visibile solo a domanda aperta, ed e' voluto: chi non chiede il prezzo non
   ha bisogno di una stima.

   ⚠️ COLORE: NON usare `--ds-accent-text` qui. Misurato il 16/09 campionando i
   pixel, l'accento su questo fondo da' 4,30:1 in light — sotto 1.4.3 — perche'
   `.ds-faq__item[open]` (riga 107) tinge la domanda aperta di smeraldo al 5% e
   quella tinta mangia il margine dell'accento, che su paper puro e' appena
   4,54. E' la trappola gia' registrata: «anche un alone e' una superficie».
   Si usa la convenzione che il blocco ha gia' per i link dentro le risposte —
   ink + sottolineatura smeraldo — che sta sopra 10:1 in entrambi i temi.

   ⚠️ Specificita': `.ds-faq__answer a` piu' su in questo file e' (0,1,1). Qui
   NON la si combatte, la si eredita: il colore giusto e' il suo. Le proprieta'
   che devono vincere (display, min-height) stanno su (0,2,0). Quarta volta che
   questa coppia di selettori morde su questo tema. */
.ds-faq__calc {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.9rem;
	margin: var(--ds-space-m, 1.5rem) 0 0;
	padding-top: var(--ds-space-s, 1rem);
	border-top: 1px solid var(--ds-line, #e2dfd9);
}

.ds-faq__answer .ds-faq__calc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px; /* bersaglio tattile: si tocca col pollice dentro un accordion */
	font-family: var(--ds-font-body, sans-serif);
	font-size: 1rem;
	font-weight: 500;
	/* `color` NON dichiarato di proposito: eredita `.ds-faq__answer a`. */
	text-decoration: underline;
	text-decoration-color: var(--ds-lime, #20b07a);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.ds-faq__answer .ds-faq__calc-link span {
	transition: transform var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-faq__answer .ds-faq__calc-link:hover span,
.ds-faq__answer .ds-faq__calc-link:focus-visible span {
	transform: translateX(3px);
}

.ds-faq__answer .ds-faq__calc-link:hover,
.ds-faq__answer .ds-faq__calc-link:focus-visible {
	text-decoration-thickness: 3px;
}

/* Nota in ink, come il link: la distinzione la fanno la misura e l'assenza di
   sottolineatura. Nasce quando `--ds-soft` sul fondo tinto stava a 4,44; oggi
   quel token e' `--ds-soft-alt` (5,12) e passerebbe, ma l'ink resta la scelta:
   una riga di rassicurazione accanto a una CTA non si smorza. */
.ds-faq__calc-note {
	font-size: 0.875rem;
	color: var(--ds-text, #292929);
}

@media (prefers-reduced-motion: reduce) {
	.ds-faq__answer .ds-faq__calc-link span {
		transition: none;
	}
}

/* Sfalsamento delle card (16/09/2026).
 * ⚠️ `--ds-stagger-base` dice da quale gradino ripartono i figli di un
 * contenitore sfalsato DENTRO un altro. Senza, ripartirebbero da zero e lo
 * sfalsamento sparirebbe: a quel punto il contenitore è ancora a `opacity: 0`
 * e le card, già arrivate, comparirebbero tutte insieme con lui.
 * Il valore è il gradino del contenitore stesso nella griglia del padre (intestazione, poi elenco). */
.ds-faq__list {
	--ds-stagger-base: calc(1 * var(--ds-stagger-step, 70ms));
}

/* Colonna stretta (28/09/2026): a 390 il rientro «numero + gap» a sinistra e
 * i 2rem a destra lasciavano alla risposta 249px, cioè 22-29 caratteri per
 * riga. Sotto i 600px la risposta si allinea al bordo della domanda. */
@container dsfaq (max-width: 600px) {
	.ds-faq__answer {
		padding-inline: var(--ds-space-s, 1rem);
	}
}