/**
 * Loyalty — fascia sabbia di chiusura: le domande ricorrenti.
 *
 * Nella tavola `FASE2_pagina_loyalty.ai` questa fascia è bianca, con le domande
 * e le risposte impilate in cremisi. Sulla pagina finita non regge: arriva dopo
 * cinque fasce piene — due gradienti rossi, due blu e la sabbia dei tre motivi —
 * e una banda bianca con due righe di testo la fa finire nel vuoto.
 *
 * Perciò chiude come la sua gemella "3 buoni motivi", che sta sulla stessa
 * pagina: stesso fondo sabbia, stesso titolo in Light con le parole forti in
 * Bold e stesso blu acciaio per il testo. Le domande stanno in schede bianche,
 * piatte: sul fondo sabbia il bianco stacca da sé, e un'ombra qui non
 * aggiungeva profondità, solo sporco sul bordo.
 *
 * Il segno di apertura non è il disco rosso dei tre motivi ma il cerchio filato
 * dell'elenco delle posizioni aperte, in `posizioni.css`: le due fisarmoniche
 * del sito si aprono con lo stesso comando.
 *
 * Le distanze verticali sono quelle di `loyalty-motivi.css`: le due fasce sono
 * la stessa cosa vista due volte, e devono respirare uguale.
 */

.faq {
	padding-block: clamp( 48px, 5.4vw, 91px ) clamp( 56px, 6.3vw, 107px );
}

.faq > * {
	margin-block: 0;
}

/* Peso Light con le parole forti in Bold, come il titolo dei tre motivi: è il
   contrasto a fare il titolo, non la misura. */
.faq__title {
	margin: 0;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.faq__title strong {
	font-weight: 700;
}

/* --- Le schede ----------------------------------------------------------- */

/* Una scheda per riga, a tutta la colonna. Le domande sono lunghe e di lunghezza
   diversa fra loro: appaiate, la più corta lasciava mezza scheda vuota accanto
   a quella che andava a capo. In fila stanno tutte alla stessa misura. */
.wp-block-group.faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: clamp( 16px, 1.8vw, 24px );
	margin-block-start: clamp( 32px, 4vw, 56px );
}

.wp-block-group.faq__grid > * {
	margin-block: 0;
}

.faq__card {
	/* Lo stacco fra la domanda e la sua risposta. Sta qui, in una proprietà
	   personalizzata, perché serve in due punti: al paragrafo e al fotogramma
	   finale dell'animazione di apertura. */
	--faq-stacco: clamp( 16px, 1.6vw, 22px );

	padding: clamp( 24px, 2.4vw, 34px );
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white);
}

/* Via il triangolino del browser: al suo posto c'è il disco rosso.
   Servono due dichiarazioni — `list-style` per i browser moderni, lo
   pseudo-elemento per Safari, che ancora usa il suo. */
.faq__card > summary {
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp( 16px, 2vw, 28px );
	font-weight: 700;
	line-height: 1.27;
	letter-spacing: -0.025em;
	cursor: pointer;
	transition: color 0.2s ease;
}

.faq__card > summary::-webkit-details-marker {
	display: none;
}

/* Il segno è quello dell'elenco delle posizioni aperte di "Lavora con noi", in
   `posizioni.css`: cerchio filato e più al centro, tutto in `currentColor`. Le
   due fisarmoniche del sito si aprono con lo stesso comando, e qui il disco
   rosso pieno pesava più della domanda che accompagna. È un indicatore di
   stato, non contenuto — lo stato lo annuncia già `<summary>` — e per questo
   sta nel CSS. */
.faq__card > summary::after {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	/* Le due stanghette sono due sfumature piatte invece di due elementi in
	   più: una orizzontale e una verticale, disegnate al centro. */
	background-image: linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor );
	background-size: 50% 1.5px, 1.5px 50%;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.25s ease;
}

/* Là il colore del riepilogo passa al rosso col passaggio del mouse e il segno
   lo segue da sé, essendo in `currentColor`. */
.faq__card > summary:hover {
	color: var(--wp--preset--color--rosso);
}

/* Aperto, il segno ruota di 45° e si legge come una croce. */
.faq__card[open] > summary::after {
	transform: rotate( 45deg );
}

/* Il riepilogo è il comando, e col triangolino è sparito anche il contorno che
   il browser gli disegnava intorno: chi naviga da tastiera deve vedere dove si
   trova. */
.faq__card > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--rosso);
	outline-offset: 6px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Il testo della risposta è quello dei tre motivi: SemiBold, interlinea 1,5.
   Il rientro a destra tiene la colonna del segno libera anche sotto.

   Lo stacco dalla domanda è un padding e non un margine perché l'animazione
   qui sotto lo chiude insieme all'altezza: un margine resterebbe fuori e la
   scheda partirebbe già alta di 22 px. */
/* `overflow: hidden` serve all'animazione di apertura, che porta l'altezza da
   zero: senza, il testo sborderebbe dalla casella mentre questa si apre. Il
   movimento lo fa `assets/js/faq.js` e non un `@keyframes`, perché un'animazione
   CSS a scheda chiusa vive in un sottoalbero che il browser smette di
   ricalcolare e ogni tanto resta appesa a fine corsa — la scheda si riapriva di
   scatto, a intermittenza. Là c'è il ragionamento per esteso. */
.faq__risposta {
	overflow: hidden;
	margin: 0;
	padding-block-start: var(--faq-stacco);
	padding-inline-end: clamp( 50px, 5vw, 70px );
	font-weight: 600;
	line-height: 1.5;
}

@media ( prefers-reduced-motion: reduce ) {
	.faq__card > summary::after {
		transition: none;
		transform: none;
	}

	.faq__card[open] > summary::after {
		transform: rotate( 45deg );
	}

	/* La risposta compare e basta. Il modulo si tira indietro da sé quando il
	   sistema chiede meno movimento: qui non c'è niente da spegnere. */
}

/* --- Schermi stretti ----------------------------------------------------- */

@media ( max-width: 900px ) {
	.faq {
		padding-block: clamp( 44px, 11vw, 72px ) clamp( 48px, 12vw, 84px );
	}

	.wp-block-group.faq__grid {
		margin-block-start: clamp( 24px, 6vw, 40px );
	}

	.faq__risposta {
		padding-inline-end: 0;
	}
}