/* LA PAGINA DELLE DOMANDE (/faq/) · v0.84.0 · 01/11/2026
   La testa (titolo, lede, data, ricerca, argomenti), poi una sezione .as-domande per categoria (stili in base.css: da
   computer il titolo resta fermo in colonna mentre scorrono le domande, da telefono la categoria si apre col +), il
   riquadro «nessun risultato» e la fascia di chiusura. Solo token: nessun valore nuovo fuori dalla scala. */

.as-faq { padding-bottom: var(--as-sp-8); }
.as-faq__testa { display: grid; gap: var(--as-sp-5); justify-items: start; }
.as-faq__testa h1 { max-width: 15ch; text-wrap: balance; }
.as-faq__lede { color: var(--as-muted); max-width: 46ch; }
.as-faq__data { font-size: var(--as-type-meta); letter-spacing: .04em; color: var(--as-muted); }

/* La ricerca: un campo solo, largo, con la lente dentro. 16px: iOS non zooma (Errori §0.4). */
.as-faq__cerca { position: relative; width: 100%; max-width: 620px; margin-top: var(--as-sp-3); }
.as-faq__cerca[hidden] { display: none; }
.as-faq__cerca input {
	width: 100%;
	min-width: 0;
	height: 56px;
	margin: 0;
	padding: 0 var(--as-sp-5) 0 52px;
	background: var(--as-bg);
	color: var(--as-ink);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--as-line);
	border-radius: calc(var(--as-r-s) * var(--as-brm));
	font: inherit;
	font-size: 16px;
	font-weight: 300;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) {
	.as-faq__cerca input { corner-shape: squircle; }
}
.as-faq__cerca input::placeholder { color: var(--as-muted); opacity: 1; }
.as-faq__cerca input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--as-ink); }
.as-faq__cerca input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--as-ink); }
.as-faq__lente { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; color: var(--as-muted); pointer-events: none; }

/* Gli argomenti: le chip dell'archivio, col numero delle domande in apice. Vanno a capo, mai di lato. */
.as-faq__indice { width: 100%; }
.as-faq__indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--as-sp-2); }
.as-faq__indice li[hidden] { display: none; }
.as-faq__indice .as-chip { font-size: 13px; letter-spacing: .02em; }

/* Le categorie sono una lista sola: meno aria tra l'una e l'altra che tra due sezioni qualunque. */
.as-main[data-barba-namespace="faq"] .as-domande { padding-block: 0 var(--as-sp-8); }
.as-main[data-barba-namespace="faq"] .as-domande .as-display-sm { max-width: 14ch; }

.as-faq__vuoto { padding-block: 0 var(--as-sp-8); }
.as-faq__vuoto[hidden] { display: none; }
.as-faq__vuoto .as-container { display: grid; gap: var(--as-sp-5); justify-items: start; }
.as-faq__vuoto .as-lede { max-width: 40ch; }
.as-faq__vuoto-cta { margin: 0; }

@media (max-width: 999px) {
	.as-main[data-barba-namespace="faq"] .as-domande { padding-block: 0 var(--as-sp-6); }
}
@media (max-width: 699px) {
	.as-faq { padding-bottom: var(--as-sp-7); }
	.as-faq__testa { gap: var(--as-sp-4); }
	.as-faq__cerca input { height: 52px; }
	.as-main[data-barba-namespace="faq"] .as-domande { padding-block: 0 var(--as-sp-5); }
}