/**
 * DevSign · Testimonianze — stile del blocco.
 *
 * Con 3 o più testimonianze la prima passa in evidenza: quattro card identiche,
 * con quattro file di stelle uguali, non davano all'occhio un punto d'ingresso
 * (misurato il 28/08: 93% del viewport desktop, 178% su mobile per quattro frasi).
 * Le stelle ora compaiono UNA volta, come sintesi in testa alla sezione.
 *
 * Usa i token semantici --ds-* (mai i grezzi: sono light-only).
 */

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

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

/* --- Head --- */
.ds-testimonial__head {
	max-width: 56ch;
	margin-bottom: var(--ds-space-xl, 3rem);
}

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

.ds-testimonial__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;
	text-wrap: balance;
}

/* --- Sintesi voti (una volta sola, non per card) --- */
.ds-testimonial__summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
	margin: var(--ds-space-s, 1rem) 0 0;
}

.ds-testimonial__summary-text {
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	color: var(--ds-soft, #6b6862);
}

/* --- Stelle --- */
.ds-testimonial__stars {
	display: inline-flex;
	gap: 0.1rem;
	font-size: 1rem;
	line-height: 1;
	color: var(--ds-soft, #6b6862);
}

.ds-testimonial__star.is-on {
	/* La stella è informativa (voto), non decorativa, e sta su fondo chiaro:
	   serve il minimo AA. Vedi --ds-accent-text. */
	color: var(--ds-accent-text, #0d6f4a);
	-webkit-text-stroke: 0.5px var(--ds-ink, #292929);
}

/* --- Griglia card --- */
.ds-testimonial__grid {
	display: grid;
	gap: var(--ds-space-m, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.ds-testimonial__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Con la card in evidenza le altre stanno su tre colonne: con 4 card totali
	   la riga sotto si chiude esatta. */
	.ds-testimonial__grid.has-lead {
		grid-template-columns: repeat(3, 1fr);
	}

	.ds-testimonial__card.is-lead {
		grid-column: 1 / -1;
	}

	/* Con TRE card (una in evidenza + due) la terza colonna restava vuota
	   (misurato il 19/09 in home, dopo l'uscita della card dell'agenzia). */
	.ds-testimonial__grid.has-lead[data-count="3"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ds-testimonial__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-s, 1rem);
	padding: var(--ds-space-l, 2rem);
	background: var(--ds-card, #fff);
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-lg, 12px);
}

/*
 * Card in evidenza: pannello quieto (non bianco) e citazione da pull quote,
 * con il glifo di apertura trattato come segno grafico invece che come
 * carattere inline — prima produceva uno spazio storto a inizio riga.
 */
.ds-testimonial__card.is-lead {
	background: var(--ds-inset, #f1efeb);
	/* Sotto i 900px il glifo sta SOPRA la citazione, non a fianco: senza questo
	   spazio in testa gli finiva addosso alla prima riga. */
	padding: 3.75rem var(--ds-space-l, 2rem) var(--ds-space-l, 2rem);
}

/*
 * La lead occupa tutta la riga: a colonna singola restavano ~600px di vuoto a
 * destra e la card cresceva a 370px di altezza. Citazione e autore stanno
 * affiancati, appoggiati alla stessa linea di base.
 */
@media (min-width: 900px) {
	.ds-testimonial__card.is-lead {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--ds-space-l, 2rem);
		padding: var(--ds-space-l, 2rem) var(--ds-space-l, 2rem) var(--ds-space-l, 2rem) 4.25rem;
	}

	.ds-testimonial__card.is-lead .ds-testimonial__author {
		padding-top: 0;
	}
}

.ds-testimonial__card.is-lead::before {
	content: "\201C";
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	font-family: var(--ds-font-display, serif);
	font-size: 3.5rem;
	line-height: 1;
	/* Smeraldo pieno: a 0.28 la virgoletta si leggeva come una macchia grigia
	   e il segno non si vedeva. E' decorativa (il testo della citazione sta
	   sotto, leggibile), quindi non ha vincoli di contrasto propri. */
	color: var(--ds-lime, #20b07a);
	opacity: 0.85;
	pointer-events: none;
}

.ds-testimonial__card.is-lead .ds-testimonial__quote {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	max-width: 52ch;
}

/* Il motivo-firma smeraldo, sul nome di chi ha parlato. */
.ds-testimonial__card.is-lead .ds-testimonial__author-name::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 5px;
	background: var(--ds-accent-text, #0d6f4a);
	border-radius: 2px;
}

/*
 * Card "in attesa": visibili SOLO nell'editor — in produzione il template le
 * scarta (vedi template.php). Si dichiarano non pubblicate invece di
 * travestirsi da recensione.
 */
.ds-testimonial__card.is-pending {
	background: var(--ds-inset, #f1efeb);
	border-style: dashed;
}

.ds-testimonial__card.is-pending .ds-testimonial__quote {
	color: var(--ds-soft, #6b6862);
	font-style: italic;
}

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

/*
 * Una sola card: senza questo occupava metà riga lasciando l'altra metà vuota
 * (misurato su /portfolio/fernova/: 630px di vuoto). Diventa una pull quote
 * a tutta riga, allineata a SINISTRA come occhiello e titolo sopra: centrata
 * (fino al 29/09/2026) partiva a x 398 sotto un titolo a x 104 e rompeva
 * l'asse della sezione (critique di /agenzie/).
 */
.ds-testimonial__card:only-child {
	grid-column: 1 / -1;
	max-width: 60ch;
	margin-inline: 0;
	text-align: left;
	align-items: flex-start;
}

.ds-testimonial__card:only-child .ds-testimonial__quote {
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
}

/* --- Citazione --- */
.ds-testimonial__quote {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	line-height: 1.45;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

/* Virgolette solo sulle card minori: sulla lead il segno è già grafico. */
.ds-testimonial__card:not(.is-lead) .ds-testimonial__quote::before {
	content: "\201C";
}

.ds-testimonial__card:not(.is-lead) .ds-testimonial__quote::after {
	content: "\201D";
}

/* --- Autore --- */
.ds-testimonial__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: var(--ds-space-s, 1rem);
}

.ds-testimonial__avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	object-fit: cover;
	flex: 0 0 auto;
}

/* Ripiego finché non arrivano le foto: monogramma, come il resto del sito. */
.ds-testimonial__avatar--mono {
	display: grid;
	place-items: center;
	background: var(--ds-card, #fff);
	border: 1px solid var(--ds-line, #e2dfd9);
	font-family: var(--ds-font-display, serif);
	font-size: 1.125rem;
	line-height: 1;
	color: var(--ds-accent-text, #0d6f4a);
}

.ds-testimonial__card.is-lead .ds-testimonial__avatar--mono {
	background: var(--ds-card, #fff);
}

.ds-testimonial__author-text {
	display: flex;
	flex-direction: column;
}

.ds-testimonial__author-name {
	font-weight: 600;
	font-size: 0.9375rem;
}

.ds-testimonial__author-role {
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	color: var(--ds-soft, #6b6862);
}

/* --- Loghi clienti --- */
.ds-testimonial__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-xl, 3rem);
	margin: var(--ds-space-2xl, 4rem) 0 0;
	padding: var(--ds-space-l, 2rem) 0 0;
	border-top: 1px solid var(--ds-line, #e2dfd9);
	list-style: none;
}

.ds-testimonial__logo img {
	height: 28px;
	width: auto;
	opacity: 0.6;
	filter: grayscale(1);
	transition: opacity var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		filter var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-testimonial__logo img:hover {
	opacity: 1;
	filter: grayscale(0);
}

/* --- Reveal on-scroll (gated su .js) --- */
@media (prefers-reduced-motion: no-preference) {
	.js .ds-testimonial[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-testimonial[data-reveal].is-revealed {
		opacity: 1;
		transform: 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 griglia). */
.ds-testimonial__grid {
	--ds-stagger-base: calc(1 * var(--ds-stagger-step, 70ms));
}

/* Link alle recensioni esterne — «Leggi le recensioni su Google →».
   Convenzione del terziario del sistema bottoni (28/08): testo + freccia che
   si sposta di 3px in hover, nessun movimento del resto. */
.ds-testimonial__reviews {
	margin: 0.9rem 0 0;
}

.ds-testimonial__reviews-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ds-text);
	font-size: 0.9375rem;
	text-decoration: underline;
	text-decoration-color: var(--ds-lime, #20b07a);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.ds-testimonial__reviews-link span[aria-hidden] {
	transition: transform 0.25s var(--ds-ease, ease);
}

@media (prefers-reduced-motion: no-preference) {
	.ds-testimonial__reviews-link:hover span[aria-hidden] {
		transform: translateX(3px);
	}
}