/*
 * LA SCHEDA DI UN ALLOGGIO O DI UNA ESPERIENZA
 *
 * **Un componente, due pagine.** Queste regole stavano dentro `home.css`, e la
 * pagina dei risultati mostrava quindi un'altra scheda: stesso markup, aspetto
 * diverso, e due disegni destinati ad allontanarsi a ogni correzione fatta da una
 * parte sola. Ora stanno qui, e le due pagine chiedono lo stesso foglio.
 *
 * **L'ambito è dichiarato, non tolto.** I selettori non sono diventati generici:
 * `.home` è diventato `:is(.home, .pms-search--results)`, che pesa esattamente quanto un
 * nome di classe. Specificità identica e ordine identico significano che la
 * homepage rende come rendeva — la migrazione non doveva cambiare un pixel — e
 * che nessun'altra pagina eredita per sbaglio una scheda che non ha chiesto.
 *
 * L'ordine delle regole qui dentro è quello che avevano in `home.css`: due
 * blocchi con la stessa specificità si risolvono per posizione, e invertirli
 * avrebbe cambiato il risultato senza cambiare una sola dichiarazione.
 */

/* --- Card -----------------------------------------------------------------
 *
 * **Il difetto più visibile della Home.** L'area immagine era quasi quadrata
 * — venti diciannovesimi — e con quattro colonne diventava un blocco di colore
 * alto trecento pixel: senza fotografie, ogni card era per due terzi vuota. Un
 * rapporto tre a due la riporta a proporzione, e il resto della card torna a
 * pesare quanto il suo contenuto.
 */
:is(.home, .pms-search--results) .pms-card .pms-media { aspect-ratio: 3 / 2; }

/*
 * Il segnaposto smette di essere una campitura piatta: una trama diagonale
 * appena percepibile dice «qui manca una fotografia» invece di sembrare un
 * riquadro rotto.
 */
:is(.home, .pms-search--results) .pms-media__placeholder {
	background:
		repeating-linear-gradient(
			135deg,
			var(--color-primary-soft) 0,
			var(--color-primary-soft) 10px,
			var(--color-primary-softer) 10px,
			var(--color-primary-softer) 20px
		);
}

:is(.home, .pms-search--results) .pms-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-container);
	transition:
		transform var(--motion-fast) ease,
		box-shadow var(--motion-fast) ease,
		border-color var(--motion-fast) ease;
}

:is(.home, .pms-search--results) .pms-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	flex: 1 1 auto;
	padding: clamp(0.875rem, 1.4vw, 1.125rem);
}

:is(.home, .pms-search--results) .pms-card__title { font-size: var(--text-dense); line-height: 1.3; }
:is(.home, .pms-search--results) .pms-card__place { font-size: var(--text-dense); color: var(--color-muted-strong); margin: 0; }

/* I dati secondari su una riga sola: erano un elenco che mandava a capo. */
:is(.home, .pms-search--results) .pms-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-dense);
	color: var(--color-muted-strong);
}

/* Il prezzo chiude la card, sempre alla stessa altezza fra card diverse. */
:is(.home, .pms-search--results) .pms-card__price { margin-top: auto; padding-top: 0.5rem; font-size: var(--text-meta); }

/*
 * **Un solo stato per il puntatore e per la tastiera.** Il sollevamento non
 * basta da solo: chi naviga da tastiera ha bisogno di un contorno, e chi ha
 * ridotto le animazioni non deve vedere nulla muoversi.
 */
:is(.home, .pms-search--results) .pms-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
	border-color: var(--color-border-strong);
}

:is(.home, .pms-search--results) .pms-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft);
}

@media (prefers-reduced-motion: reduce) {
	:is(.home, .pms-search--results) .pms-card { transition: none; }
	:is(.home, .pms-search--results) .pms-card:hover { transform: none; }
}

@media (max-width: 640px) {
	:is(.home, .pms-search--results) .pms-card .pms-media { aspect-ratio: 16 / 10; }
}

/* --- La scheda ------------------------------------------------------------ */

/*
 * **La scheda sta ferma.** Niente sollevamento al passaggio del cursore: con
 * quattro fotografie affiancate ogni movimento è un invito a guardare quella che
 * si è solo sfiorata, e il puntatore passa sopra le schede per arrivare altrove
 * più spesso di quanto ci si fermi. La fotografia si guarda perché è grande, non
 * perché si muove.
 */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) {
	overflow: visible;
	background: none;
	border: 0;
	border-radius: 0;
	transition: none;
	transform: none;
}

/* --- La fotografia --------------------------------------------------------
 *
 * **Quattro a tre.** Il quattro a cinque dava alla scheda l'altezza di un
 * manifesto: bella da sola, ma quattro affiancate riempivano lo schermo e
 * spingevano il prezzo sotto la piega. Il tre a quattro orizzontale tiene la
 * fotografia protagonista — resta i due terzi della scheda — e restituisce alla
 * sezione la sua riga.
 */

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__gallery {
	position: relative;
}

/*
 * **La striscia scorre da sé.** Il contenitore è un carosello nativo: `scroll-
 * snap` aggancia ogni fotografia, il dito la muove con l'inerzia del sistema e
 * nessun JavaScript interviene fra il gesto e il movimento. Alle frecce resta
 * solo da spostarlo di una larghezza.
 */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__media {
	position: relative;
	display: flex;
	aspect-ratio: 4 / 3;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;

	/* Lo scorrimento resta nella striscia: non trascina la pagina né la cronologia. */
	overscroll-behavior-x: contain;

	border-radius: var(--radius-container);
	background: var(--color-surface-soft);

	/* La barra di scorrimento qui sarebbe una riga grigia sopra la fotografia. */
	scrollbar-width: none;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__media::-webkit-scrollbar { display: none; }

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-media__image {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;

	/* Ferma anche lei: nessun ingrandimento, né col cursore né col fuoco. */
	transition: none;
	transform: none;
}

/* --- I comandi della galleria ---------------------------------------------
 *
 * Compaiono solo quando c'è chi li ascolta: `is-ready` la mette il copione dopo
 * aver trovato più di una fotografia. Senza JavaScript la striscia si scorre
 * ancora col dito, e non restano pulsanti che non fanno niente.
 */

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__nav {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--color-text);

	/* Vetro chiaro: si stacca da qualunque fotografia senza portarci un colore. */
	background: rgb(255 255 255 / 0.92);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.14);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity var(--motion-fast) ease;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__gallery.is-ready .pms-card__nav { display: inline-flex; }

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__nav .pms-icon { width: 20px; height: 20px; }

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__nav--prev { left: 10px; }
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__nav--next { right: 10px; }

/*
 * Al passaggio del cursore, e al fuoco da tastiera. Una freccia che agli estremi
 * non porta da nessuna parte resta invisibile: `disabled` la esclude di qui.
 */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__gallery.is-ready:hover .pms-card__nav:not([disabled]),
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__gallery.is-ready:focus-within .pms-card__nav:not([disabled]) { opacity: 1; }

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__nav:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
}

/*
 * **Sul telefono il passaggio del cursore non esiste**, e una freccia sempre
 * accesa sopra la fotografia è un ingombro: lì la striscia si scorre col dito e
 * i punti dicono che ce n'è più di una.
 */
@media (hover: none) {
	:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__gallery.is-ready .pms-card__nav { display: none; }
}

/* --- I punti -------------------------------------------------------------- */

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__dots {
	display: none;
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 2;
	gap: 5px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;

	/* Sono un'indicazione, non un comando: il dito ci passa sopra e scorre. */
	pointer-events: none;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__gallery.is-ready .pms-card__dots { display: flex; }

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.6);

	/* Su una fotografia chiara il bianco sparisce: l'ombra lo tiene visibile. */
	box-shadow: 0 0 3px rgb(0 0 0 / 0.35);
	transition: width var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__dot.is-current {
	width: 14px;
	background: #fff;
}

/*
 * **La regola generale delle schede va spenta esplicitamente.** Il sollevamento
 * e l'ombra al passaggio del cursore arrivano da `:is(.home, .pms-search--results) .pms-card:hover`, che
 * vale anche per le esperienze e non si tocca: pesa quanto questa, quindi non
 * basta dichiarare `transform: none` a riposo — va detto anche qui.
 */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience):hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

/*
 * Il contorno del fuoco resta — è l'unico segnale che dice a chi naviga da
 * tastiera dove si trova, e non è un effetto: è come si legge la pagina.
 */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience):focus-within {
	border-color: transparent;
	box-shadow: none;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__media:has(:focus-visible),
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__title a:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 3px;
	border-radius: var(--radius-control);
}

/* «In evidenza» galleggia sulla fotografia: è un'etichetta, non un pulsante. */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px;
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text);
	background: rgb(255 255 255 / 0.92);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

/* --- Il testo, sotto la fotografia ---------------------------------------- */

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__body {
	gap: 0;
	padding: clamp(0.875rem, 1.2vw, 1.125rem) 0 0;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__title {
	margin: 0;
	font-size: clamp(1.125rem, 1.3vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.02em;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__place {
	margin: 0.25rem 0 0;
	font-size: var(--text-dense);
	color: var(--color-muted-strong);
}

/* --- I dati, con il loro simbolo ------------------------------------------
 *
 * L'icona sta accanto al numero come un'unità di misura: dice di che cosa parla
 * la cifra senza farsi leggere. Sedici pixel, colore del testo attenuato, mai
 * l'accento — quattro accenti per scheda e per sedici schede la pagina diventa
 * rossa. Nessun riquadro attorno: un badge per «3 camere» pesa quanto il dato.
 */

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__facts,
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.875rem;
	margin: 0.625rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-dense);
	color: var(--color-muted-strong);
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__amenities {
	margin-top: 0.375rem;
	color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__facts li,
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__amenities li {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__facts .pms-icon,
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__amenities .pms-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: 0.65;
}

/* --- Il prezzo ------------------------------------------------------------ */

/*
 * **Il prezzo segue i dati, non il fondo della scheda.** Spingerlo in basso con
 * `auto` allineava le quattro cifre su una riga sola, ma il prezzo di chi aveva
 * meno dati restava sospeso sopra un vuoto largo quanto una riga di testo — e un
 * vuoto dentro la scheda si nota molto più di uno scarto di quindici pixel fra
 * una scheda e l'altra. Ora sta dove finisce ciò che lo precede, staccato quanto
 * basta perché si legga come l'ultima cosa.
 */
:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.875rem;
	padding-top: 0;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0;
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__amount {
	font-size: clamp(1rem, 1.05vw, 1.0625rem);
	font-weight: 700;
	color: var(--color-heading);
}

:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__price-note {
	font-size: var(--step-4);
	font-weight: 500;
	color: var(--color-muted-strong);
}

@media (max-width: 640px) {
	:is(.home, .pms-search--results) :is(.pms-card--property, .pms-card--experience) .pms-card__media { aspect-ratio: 4 / 3; }
}

/* --- La stessa scheda, in un fumetto della mappa ---------------------------
 *
 * **Non è un secondo disegno.** Premendo un prezzo sulla mappa si apre questa
 * scheda: stesso modello, stessa vista, stesso prezzo già calcolato, stessa
 * gerarchia — fotografia, nome, località, le tre misure, il prezzo. Qui sotto
 * non si ridichiara nulla di tutto ciò: si dice soltanto quanto spazio c'è.
 *
 * Duecentosessanta pixel non sono trecentoventi: la fotografia prende un
 * rapporto più largo per lasciare respiro al testo, e i due passi di tipografia
 * scendono di un gradino. Tutto il resto — raggio, colori, spazi, il modo di
 * mostrare ospiti, camere e bagni, lo stile del prezzo — arriva dalle regole
 * qui sopra, perché è la stessa scheda.
 */
:is(.home, .pms-search--results) .pms-card--compact { width: 100%; }

:is(.home, .pms-search--results) .pms-card--compact .pms-card__media { aspect-ratio: 16 / 10; }

:is(.home, .pms-search--results) .pms-card--compact .pms-card__body { padding: 0.625rem 0 0; gap: 0.25rem; }

:is(.home, .pms-search--results) .pms-card--compact .pms-card__title { font-size: var(--step-3); }

:is(.home, .pms-search--results) .pms-card--compact .pms-card__facts { gap: 0.125rem 0.625rem; }

:is(.home, .pms-search--results) .pms-card--compact .pms-card__footer { margin-top: 0.5rem; }

/*
 * **Ferma anche lei.** Il sollevamento al passaggio del cursore, dentro un
 * fumetto ancorato a un punto, farebbe ballare la scheda sopra la mappa.
 */
:is(.home, .pms-search--results) .pms-card--compact:hover { transform: none; box-shadow: none; }

/* ==========================================================================
   La carta del mazzo (§18).

   **Una carta è una carta, ovunque venga posata.** Queste regole vivevano in
   `home.css` sotto il corpo `.home`, insieme al mazzo che le fa scorrere: erano
   raggiungibili da una pagina sola, e chiunque altro avesse voluto la stessa
   carta avrebbe dovuto riscriverla — due copie che divergono al primo ritocco.
   Qui c'è la carta e basta: fondo, contorno, raggio, ombra e le sue tre
   tipografie.

   **Come le carte sono disposte non è affare loro.** La pagina iniziale ne
   mostra una per volta e lascia le altre dietro; la pagina dei proprietari le
   impila mentre si scorre. Quelle meccaniche stanno dove appartengono — in
   `home.css` la prima, in `owners.css` la seconda — e nessuna delle due ridisegna
   la carta.
   ========================================================================== */

/* --- La carta ------------------------------------------------------------- */

.pms-deck__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	text-align: center;

	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-container);

	/*
	 * Un'ombra sola, verso il basso: è ciò che distingue una carta appoggiata da
	 * un rettangolo disegnato. Alle carte dietro non serve attenuarla — le copre
	 * quella davanti, e la profondità la fanno già lo scalino e la scala.
	 */
	box-shadow: 0 18px 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.pms-deck__icon {
	position: relative;
	display: inline-flex;
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
	color: var(--color-heading);
}

.pms-deck__icon::before {
	content: '';
	position: absolute;
	top: -12px;
	left: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.pms-deck__icon .pms-icon {
	position: relative;
	display: block;
	width: clamp(46px, 3.6vw, 54px);
	height: clamp(46px, 3.6vw, 54px);
}

.pms-deck__title {
	margin: 0 0 0.625rem;
	font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.pms-deck__text {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(0.9375rem, 1vw, 1rem);
	line-height: 1.65;
	color: var(--color-muted-strong);
}

/*
 * Il numero non è un'etichetta: è il segno che il mazzo ha un ordine. Sta in
 * fondo, piccolo e in maiuscoletto spaziato, e la cifra corrente è l'unica che
 * si legga davvero.
 */
.pms-deck__count {
	margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
	font-size: var(--step-2);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

.pms-deck__count-now { color: var(--color-text); }

/*
 * Su schermo stretto il testo non ha bisogno di un limite di misura: la colonna
 * è già più stretta dei trentaquattro caratteri, e il limite non farebbe altro
 * che spostare il testo fuori asse rispetto al titolo.
 */
@media (max-width: 640px) {
	.pms-deck__text { max-width: none; }
}


/* ==========================================================================
 * LA RECENSIONE, E LE DUE RIGHE CHE LA PORTANO
 *
 * **Il testo è la scheda.** Una recensione non si confronta con le altre: si
 * legge. Il riquadro perde quindi il bordo pieno e il fondo grigio da portale,
 * e resta una superficie chiara con dentro molto respiro; le stelle si vedono
 * ma non comandano, e in fondo — staccata da una linea sottile — quello che
 * firma la recensione.
 *
 * **Stava sotto `.home`, e non era della pagina iniziale.** La struttura del
 * carosello è in `base.css` e serve tutti; questo è il suo aspetto, e serviva
 * una pagina sola perché una sola lo rendeva. Ora la pagina dei proprietari ha
 * il proprio insieme di recensioni con lo stesso linguaggio visivo: o si copiava
 * qui accanto lo stesso disegno con un altro nome, o lo si portava dove i
 * componenti condivisi già stanno. È la stessa scelta fatta per la carta del
 * mazzo, ed è il motivo per cui questo foglio esiste.
 * ========================================================================== */

/*
 * **L'intestazione è della sezione, non della pagina iniziale.** Misura del
 * titolo, altezza di riga, crenatura, filetto rosso e distacco dal carosello
 * stavano fra le regole ristrette alla facciata: la stessa sezione, altrove,
 * sarebbe arrivata con il titolo di quattro pixel più piccolo, la metà dello
 * spazio sotto e nessun filetto. Le alternative erano riscriverle identiche di
 * là — un'imitazione, destinata a divergere — o portarle qui, accanto al
 * carosello che annunciano. Ora la sezione si porta dietro il proprio aspetto
 * ovunque venga composta.
 *
 * Il contenitore compare nel selettore perché è vero — l'intestazione sta dentro
 * la fascia — e perché così questa regola vince sulle regole generiche di pagina
 * senza dipendere dall'ordine in cui i fogli vengono caricati.
 */
/*
 * **Anche lo spazio attorno è del componente.** La sezione stava al ritmo della
 * pagina che la ospitava: quarantacinque pixel scarsi sulla facciata, quarantotto
 * fissi altrove, e due sezioni che si dicono identiche non possono cominciare a
 * distanze diverse da ciò che le precede. Il valore è quello della facciata,
 * dov'è nata: da 1,5rem a 2,75rem secondo la larghezza.
 */
.pms-section--reviews {
	padding-block: clamp(1.5rem, 2.8vw, 2.75rem);
}

.pms-section--reviews .pms-section__inner .pms-section__header {
	align-items: baseline;
	margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
}

.pms-section--reviews .pms-section__inner .pms-section__title {
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pms-section--reviews .pms-section__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
	border-radius: 999px;
	background: var(--color-primary);
}

.pms-carousel { --pms-carosello-passo: clamp(1rem, 1.8vw, 1.5rem); }

.pms-carousel__track { --pms-carosello-scheda: clamp(19rem, 26vw, 23rem); }

.pms-review {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	background: var(--color-surface);
	border-color: transparent;
	box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px -16px rgb(0 0 0 / 22%);
}

/*
 * **Sobrie.** In un carosello di schede chiare cinque stelle piene nel colore
 * d'accento sono la prima cosa che si vede, e sono la meno interessante.
 */
.pms-review__rating {
	margin: 0 0 0.625rem;
	font-size: var(--step-2);
	letter-spacing: 0.12em;
	color: var(--color-muted-strong);
	opacity: 0.85;
}

.pms-review__title {
	margin: 0 0 0.5rem;
	font-size: var(--step-6);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.pms-review__body {
	margin: 0;
	font-size: var(--text-meta);
	line-height: 1.55;
	color: var(--color-text);
}

.pms-review__body p { margin: 0 0 0.5rem; }
.pms-review__body p:last-child { margin-bottom: 0; }

/*
 * **Il nome di chi ha scritto si incolonna con gli altri.** In una riga di schede
 * affiancate i testi hanno lunghezze diverse, e un nome appoggiato subito sotto
 * il proprio testo finisce a un'altezza diversa in ogni scheda: la riga si legge
 * sfilacciata, e con l'estratto — che porta alcune schede alla misura piena e
 * altre a due righe — si notava ancora di più. Lo spazio libero della colonna va
 * quindi **sopra** il nome, non sotto: i nomi si allineano fra loro e con le
 * firme in fondo, e lo stacco dal testo resta quello che serve a separarli.
 */
.pms-review__author {
	margin: auto 0 0;
	font-size: var(--step-5);
	font-weight: 600;
	color: var(--color-heading);
}

/* Con il nome sopra, la firma segue a distanza fissa. */
.pms-review__footer {
	margin-top: 0.875rem;
	padding-top: 0.875rem;
}

/* Senza nome non c'è niente da incolonnare: lo spazio libero se lo prende la firma. */
.pms-review:not( :has( .pms-review__author ) ) .pms-review__footer {
	margin-top: auto;
}

/*
 * **La firma ha le stesse misure che porti o no da qualche parte.** Dove c'è una
 * risorsa recensita la firma è un collegamento, dove non c'è è un `span`: perché
 * i due casi calcolino gli stessi valori, lo scostamento della sottolineatura —
 * che il foglio dichiara sui collegamenti e che si eredita — è dichiarato qui per
 * entrambi. Resta una sola proprietà a distinguerli, la forma del puntatore, e
 * quella deve distinguerli: uno si clicca, l'altro no.
 */
.pms-review__subject {
	text-underline-offset: 0.18em;
}

/*
 * **Un segno, non un effetto.** La scheda non si muove e non cambia fondo: si
 * sottolinea il titolo, che è quanto basta a dire che si può cliccare. Solo dove
 * si può: una sottolineatura al passaggio su una firma che non porta da nessuna
 * parte prometterebbe un collegamento che non c'è.
 */
a.pms-review__subject:hover .pms-review__subject-title { text-decoration: underline; }

.pms-review__thumb {
	width: 46px;
	height: 46px;
	border-radius: 8px;
}

/* --- Adattamento ---------------------------------------------------------- */

@media (max-width: 640px) {
	/*
	 * **Anche sul telefono le righe scorrono da sole.** Qui erano diventate due
	 * fasce da trascinare col dito: una scelta difendibile — su schermo stretto
	 * una scheda che passa mentre la si legge dà fastidio — ma che spezzava in
	 * due il componente. Su un telefono, dove non si vede più di una scheda per
	 * volta, una fascia ferma sembra soltanto ferma: nessuno la trascina, e le
	 * testimonianze oltre la prima non le legge nessuno. Il movimento continuo
	 * dice da solo che ce n'è dell'altro.
	 *
	 * Resta il fermo immagine al tocco prolungato — è il `focus-within` del foglio
	 * di base — e resta intatto ciò che vale per chi ha chiesto meno movimento,
	 * qui sotto: lì le righe tornano fasce da scorrere a mano.
	 *
	 * Cambia solo la misura della scheda, perché venti rem su trecentosettantacinque
	 * pixel non ci starebbero.
	 */
	.pms-carousel__track { --pms-carosello-scheda: min(20rem, 82vw); }
}

@media (prefers-reduced-motion: reduce) {
	/* Le righe tornano a scorrere a mano: il riempimento va dove serve. */
	.pms-carousel { padding-bottom: 0; }

	.pms-carousel__row {
		padding-inline: var(--gutter);
		padding-block-end: var(--pms-carosello-passo);
	}
}