/*
 * Fondamenta.
 *
 * Nessun colore è scritto qui (§59.3): l'unica interfaccia cromatica sono le
 * variabili generate dal registro dei token, comprese quelle derivate. Cercare
 * un valore esadecimale in questo file non deve dare risultati.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/*
 * `hidden` è display:none dell'user agent, cioè la regola più debole che esista:
 * qualunque classe con un `display` proprio la scavalca, e un elemento che si
 * dichiara nascosto resta sotto gli occhi. Qui il dichiarato vince.
 */
[hidden] { display: none !important; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-5);
	line-height: var(--line-height);
	color: var(--color-text);
	background: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

/*
 * I titoli hanno una famiglia propria. Nasce identica a quella dei testi — il
 * sito è stato disegnato così — ma è una variabile distinta perché nel pannello
 * sono due decisioni distinte, e senza questa riga la seconda non avrebbe alcun
 * effetto.
 */
h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--font-heading);
	color: var(--color-heading);
	letter-spacing: -0.015em;
	line-height: 1.25;
}

h1 { font-size: var(--step-8); }
h2 { font-size: var(--step-7); }
h3 { font-size: var(--step-6); }

p { margin: 0 0 1em; }

a {
	color: var(--color-link);
	text-underline-offset: 0.18em;
}

a:hover { color: var(--color-primary-hover); }

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul,
ol { margin: 0; padding: 0; }

li { list-style: none; }

/* ------------------------------------------------------------------ fuoco. */

/*
 * Il fuoco è **sempre visibile e mai rimosso** (§31). Rimuoverlo rende il sito
 * inutilizzabile a chi naviga da tastiera, e non c'è ragione estetica che valga
 * quella conseguenza.
 */
:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
	border-radius: var(--radius-check);
}

.pms-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: var(--radius-control);
	box-shadow: var(--shadow-popover);
}

.pms-skip:focus {
	left: 12px;
	top: 12px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- struttura. */

.pms-main { display: block; }

.pms-page__inner,
.pms-section__inner,
.pms-header__inner,
.pms-footer__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.pms-section__inner--narrow,
.pms-page--narrow .pms-page__inner {
	max-width: 760px;
}

.pms-page { padding: 32px 0 64px; }

/*
 * **La pagina che non c'è sta al centro.** Non ha contenuto da scorrere né
 * niente da leggere in ordine: è una constatazione e due strade per uscirne, e
 * lasciarla appoggiata in alto le dava l'aria di una pagina rimasta a metà, con
 * il piede che galleggiava a mezz'aria. Al centro, e con il testo centrato,
 * dice quello che è: una fermata, non una pagina vuota.
 */
.pms-page--404 {
	display: grid;
	place-items: center;
	min-height: min(68vh, 560px);
	text-align: center;
}

.pms-page--404 .pms-page__inner {
	display: grid;
	justify-items: center;
	gap: 14px;
}

.pms-page--404 .pms-page__intro {
	max-width: 46ch;
	margin: 0;
}

.pms-page--404 .pms-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 8px 0 0;
}

.pms-page__header { margin-bottom: 24px; }

/*
 * **Il titolo di una pagina è un titolo di pagina.** Restava alla misura del
 * livello — venti pixel, quanto un `h1` qualunque — su schermi larghi il triplo
 * di quanto serve a leggerlo: la privacy, i termini, i risultati editoriali e il
 * «non trovato» aprivano tutti con una riga che non annunciava nulla. Scala con
 * un solo `clamp`, un gradino sotto il titolo di una scheda: sono pagine di
 * testo, non vetrine.
 */
.pms-page__title {
	font-size: clamp(24px, 1vw + 15.6px, 30px);
	line-height: 1.2;
}

/*
 * L'occhiello che segue il titolo non aveva alcuna regola e cadeva al corpo del
 * sito: è la frase che dice di che cosa parla la pagina, e si legge alla misura
 * dei testi lunghi.
 */
.pms-page__intro {
	max-width: 62ch;
	margin: 10px 0 0;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

.pms-page__intro > p:last-child { margin-bottom: 0; }

/*
 * --- Testo lungo: quello che l'admin scrive nell'editor -------------------
 *
 * **Una misura di lettura, non la larghezza della finestra.** Il contenuto
 * editoriale — informativa, cookie, termini, e qualunque pagina scritta a mano —
 * cadeva a tredici pixel e mezzo su milletrecento di riga: circa duecento
 * caratteri, quattro volte quanto un occhio segue senza perdere il capo.
 *
 * **E i punti elenco tornano.** Il tema toglie i segni da ogni `li` perché quasi
 * tutte le sue liste sono strutture, non elenchi; ma dentro un testo scritto un
 * elenco puntato senza punti è una successione di righe che nessuno riconosce
 * come elenco. Qui, e solo qui, i segni si rimettono.
 */
.pms-entry__content {
	max-width: 68ch;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
}

.pms-entry__content > :first-child { margin-top: 0; }
.pms-entry__content > :last-child { margin-bottom: 0; }

.pms-entry__content h2 { margin: 1.6em 0 0.4em; font-size: var(--text-section); }
.pms-entry__content h3 { margin: 1.4em 0 0.3em; font-size: var(--step-7); }

.pms-entry__content :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.pms-entry__content ul > li { list-style: disc; }
.pms-entry__content ol > li { list-style: decimal; }
.pms-entry__content li { margin-bottom: 0.35em; }
.pms-entry__content li::marker { color: var(--color-muted); }

/* Dentro un testo un collegamento si dichiara: qui non ci sono altri segnali. */
.pms-entry__content a { text-decoration: underline; }

.pms-entry__content :is(img, figure) { margin: 1.4em 0; }
.pms-entry__content img { border-radius: var(--radius-container); }

.pms-entry__content blockquote {
	margin: 1.4em 0;
	padding-left: 1em;
	border-left: 2px solid var(--color-border);
	color: var(--color-muted-strong);
}

.pms-entry__content :is(table) { width: 100%; border-collapse: collapse; }
.pms-entry__content :is(th, td) { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border); }

/*
 * --- Elenchi editoriali: ricerca nativa e ripiego -------------------------
 *
 * Fra un risultato e l'altro c'è spazio e nient'altro: una riga di separazione
 * per ogni voce avrebbe disegnato una tabella dove c'è un elenco di titoli.
 */
.pms-page__list > .pms-entry + .pms-entry { margin-top: 26px; }

.pms-entry__title { margin: 0 0 4px; font-size: var(--step-7); }

.pms-entry__excerpt {
	max-width: 68ch;
	font-size: var(--text-meta);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

.pms-entry__excerpt > p:last-child { margin-bottom: 0; }

/*
 * --- Pagina di sola lettura ------------------------------------------------
 *
 * **Una colonna sola, centrata nel contenitore.** Un'informativa o dei termini
 * si leggono e basta: niente colonna accanto — nemmeno vuota, che sposterebbe il
 * testo di lato senza dare nulla in cambio — e niente riga larga quanto lo
 * schermo. Il contenitore stringe alla misura di lettura e si centra da sé; su
 * telefono la misura è quella della finestra, che è già la sola disponibile.
 */
.pms-page--article .pms-page__inner {
	max-width: calc(690px + var(--gutter) * 2);
}

/*
 * Qui la misura di lettura è quella del contenitore, e il testo la riempie: se
 * la tenesse anche il blocco interno, resterebbe più stretto di ciò che lo
 * contiene e il titolo sopra di lui finirebbe più largo del testo che annuncia.
 * Altrove — dove il contenuto sta in una colonna di una pagina più ampia — il
 * tetto in caratteri continua a valere.
 */
.pms-page--article .pms-entry__content { max-width: none; }

.pms-sidebar { font-size: var(--text-meta); }

.pms-sidebar .widget + .widget { margin-top: 26px; }

/* Il titolo di un widget annuncia una colonna, come nel piè di pagina. */
.pms-sidebar .widget__title,
.pms-sidebar .wp-block-heading {
	margin: 0 0 0.5rem;
	font-size: var(--step-3);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text);
}

.pms-sidebar li { margin-bottom: 0.3rem; }
.pms-sidebar a { color: inherit; text-decoration: none; }
.pms-sidebar a:hover,
.pms-sidebar a:focus-visible { text-decoration: underline; }

.pms-section { padding: 48px 0; }

.pms-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

/*
 * **Il titolo di una sezione non è un `h2` qualunque.** Fuori dalla pagina
 * iniziale — che ha una regola propria e la conserva — cadeva a sedici pixel e
 * mezzo: annunciava sei riquadri di servizi pesando quanto il titolo di uno di
 * quelli. Prende il gradino dichiarato per le intestazioni di sezione, lo stesso
 * che regge i titoli dentro un testo lungo.
 */
.pms-section__title {
	margin: 0;
	font-size: var(--text-section);
	line-height: 1.2;
}

.pms-section__more {
	font-size: var(--step-4);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ griglie. */

.pms-grid {
	display: grid;
	gap: 26px 22px;
}

.pms-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pms-grid--places { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ------------------------------------------------------------------ schede. */

.pms-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-container);
	overflow: hidden;
	transition: box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
}

.pms-card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-soft);
}

.pms-media {
	position: relative;
	display: block;
	aspect-ratio: 20 / 19;
	background: var(--color-primary-soft);
	overflow: hidden;
}

/*
 * **Misura predefinita dei simboli.** Un `<svg>` senza misura vale ventiquattro
 * pixel e va a capo come un blocco: dove qualcuno gliela dà — l'apertura, il
 * mazzo, la homepage — vince la sua; dove nessuno ci ha pensato, il simbolo
 * resta alto quanto la riga di testo accanto a cui sta, che è l'unica misura
 * sempre giusta.
 */
.pms-icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

/* Il dato e il suo simbolo sono una cosa sola, e stanno su una riga. */
.pms-card__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.pms-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pms-media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-primary-soft);
}

.pms-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	font-size: var(--step-2);
	font-weight: 700;
	color: var(--color-on-primary);
	background: var(--color-primary);
	border-radius: 999px;
}

.pms-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
	flex: 1;
}

.pms-card__title {
	margin: 0;
	font-size: var(--step-7);
}

.pms-card__title a { color: var(--color-heading); text-decoration: none; }
.pms-card__title a:hover { text-decoration: underline; }

.pms-card__place {
	margin: 0;
	font-size: var(--text-dense);
	color: var(--color-muted);
}

.pms-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: var(--text-dense);
	color: var(--color-muted);
}

.pms-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
}

.pms-card__price { margin: 0; text-align: right; }

.pms-card__amount {
	display: block;
	font-size: var(--text-body);
	font-weight: 800;
	color: var(--color-heading);
}

.pms-card__price-note {
	display: block;
	font-size: var(--step-4);
	color: var(--color-muted);
}

.pms-rating {
	font-size: var(--step-5);
	font-weight: 700;
	color: var(--color-primary);
}

/* ---------------------------------------------------------------- località. */

.pms-place__link {
	display: block;
	position: relative;
	border-radius: var(--radius-container);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-on-accent);
}

.pms-place__media { display: block; aspect-ratio: 4 / 3; }

.pms-place__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--color-overlay), transparent 62%);
}

.pms-place__body {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
}

.pms-place__name {
	display: block;
	font-size: var(--step-7);
	font-weight: 700;
}

/* -------------------------------------------------------------- recensioni. */

.pms-review {
	padding: 18px 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-container);
}

.pms-review__rating { margin: 0 0 6px; color: var(--color-primary); }
.pms-review__title { margin: 0 0 6px; font-size: var(--step-7); }
.pms-review__body { margin: 0; padding: 0; font-size: var(--text-meta); }
.pms-review__author { margin: 8px 0 0; font-size: var(--step-5); color: var(--color-muted); }

/*
 * --- L'estratto si chiude con una dissolvenza, non con un taglio -----------
 *
 * Stesso disegno della descrizione della scheda, misura diversa: qui la scheda è
 * stretta e il testo che conta è poco. Chiuso, il blocco è alto quanto la soglia
 * e l'ultima riga svanisce nel fondo della scheda; aperto, l'altezza sparisce e
 * con essa la sfumatura. Nessuna ellissi, nessuna seconda copia del testo,
 * nessun troncamento: ciò che non si vede è sotto il bordo, non altrove.
 *
 * **L'altezza chiusa sta sotto ciò che la soglia lascia passare.** Il modello
 * decide con i caratteri — novanta — e questa misura deve garantire che a quel
 * punto ci sia davvero qualcosa da scoprire. Misurato sul banco: in una scheda
 * da trecentodieci pixel una riga porta circa trentotto caratteri, quindi
 * novanta ne occupano poco meno di due righe e mezzo — tre virgola sessantasei
 * em — ed è lì che si taglia.
 *
 * **La misura corta serve anche all'occhio.** Le schede di una riga si stirano
 * tutte all'altezza della più alta: con un estratto lungo, accanto a una
 * recensione di due righe restava mezza scheda vuota, e la differenza si leggeva
 * come un errore di impaginazione. Portando il taglio vicino al testo più breve
 * che si incontra, le schede finiscono quasi tutte alla stessa misura.
 *
 * La sfumatura sfoca sul fondo della scheda, non su quello della pagina: la
 * recensione è una scheda chiara appoggiata sopra, e un gradiente verso il fondo
 * pagina si sarebbe visto come una banda grigia.
 */
/*
 * **Il testo occupa almeno quanto l'estratto.** Le schede non si stirano più
 * l'una sull'altra — così ne apre una per volta — e senza questa misura una
 * recensione di due righe finiva molto più corta di quella accanto, con il
 * bordo inferiore della riga a scalini. Portando ogni testo almeno all'altezza
 * a cui l'estratto si chiude, le schede tornano vicine senza tornare legate.
 */
.pms-review__body {
	/*
	 * Quanto è alto l'estratto: una misura sola, usata due volte. Il taglio e
	 * l'altezza minima devono coincidere, o le schede tornerebbero a scalini.
	 */
	--pms-recensione-estratto: 3.65em;

	min-height: var(--pms-recensione-estratto);
}

.pms-review__body.is-clamped {
	position: relative;
	max-height: var(--pms-recensione-estratto);
	overflow: hidden;
}

.pms-review__body.is-clamped::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 1.4em;
	background: linear-gradient(to bottom, transparent, var(--color-surface));
	pointer-events: none;
}

/*
 * --- Il comando che apre ---------------------------------------------------
 *
 * **Un pulsante che si legge come un collegamento.** Lo usano la descrizione e i
 * servizi della scheda, e le recensioni, che compaiono anche dove il foglio
 * della scheda non arriva: sta qui perché questo foglio c'è su ogni pagina.
 */
.pms-more {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	padding: 0;
	font: inherit;
	font-size: var(--step-3);
	font-weight: 700;
	color: var(--color-text);
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

.pms-more:hover { color: var(--color-muted-strong); }

.pms-more:focus-visible { outline: 2px solid var(--color-outline); outline-offset: 3px; }

/*
 * **La variante delle recensioni, dichiarata dopo la regola generica** perché è
 * lei a doverla correggere: hanno la stessa forza, e vince chi arriva ultimo.
 *
 * Largo quanto la sua parola: nel nastro la scheda è una colonna flessibile e
 * ogni figlio, se non lo si trattiene, si allarga per tutta la scheda — la
 * sottolineatura diventava una riga scura da un bordo all'altro, che si leggeva
 * come un separatore e non come un pulsante.
 *
 * Sopra, quasi niente: il comando appartiene al testo che apre, e la dissolvenza
 * lascia già la propria aria in fondo alla riga tagliata. Sotto lo stacco resta,
 * perché lì comincia la firma.
 */
.pms-review__more {
	align-self: flex-start;
	margin: 2px 0 10px;
}

/* La firma: una miniatura quadrata, il titolo, la località. */
.pms-review__footer {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}

.pms-review__subject {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.pms-review__subject:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.pms-review__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	aspect-ratio: 1;
	border-radius: var(--radius-control);
}

.pms-review__subject-text { min-width: 0; }

.pms-review__subject-title,
.pms-review__subject-place {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pms-review__subject-title { font-size: var(--step-5); font-weight: 600; }
.pms-review__subject-place { font-size: var(--step-2); color: var(--color-muted); }

/*
 * `.pms-trust` non c'è più: era il riquadro grigio dei sei servizi ai
 * proprietari, l'unico posto in cui vivesse, e quella sezione è stata tolta
 * insieme a tutto ciò che stava fra l'apertura e il piè di pagina. La sezione
 * «Perché affidarsi a noi» della pagina iniziale non l'ha mai usato — ha il
 * proprio mazzo di carte.
 */

/* ------------------------------------------------------------------ stati. */

.pms-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 20px;
	text-align: center;
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-container);
	color: var(--color-muted-strong);
}

.pms-state--error {
	border-style: solid;
	border-color: var(--color-danger);
	background: var(--color-danger-soft);
	color: var(--color-text);
}

/*
 * **Uno stato vuoto è una risposta, non un buco.** Il contorno tratteggiato
 * disegnava il perimetro di ciò che manca — è la convenzione di un segnaposto,
 * di un'area di trascinamento, di qualcosa che si sta ancora costruendo — e su
 * una pagina di risultati diceva a chi cerca che il sito è incompleto, quando
 * invece la risposta è completa: qui non c'è niente che corrisponda.
 *
 * Resta quindi un pannello pieno e quieto: nessun bordo, il fondo tenue dei
 * contenitori del sito, il raggio del sistema e spazio attorno alle parole. È la
 * stessa forma che hanno le altre superfici, e per questo non si nota.
 */
.pms-state--empty {
	flex-direction: column;
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
	color: var(--color-text);
	background: var(--color-surface-soft);
	border: 0;
}

/*
 * La misura è quella dei titoli di scheda del sistema, non una scala inventata
 * per l'occasione: il messaggio deve leggersi come l'affermazione che è, e
 * staccarsi dal suggerimento che gli sta sotto senza gridare.
 */
.pms-state--empty .pms-state__message {
	max-width: 32ch;
	font-size: var(--text-body);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-heading);
	text-wrap: balance;
}

.pms-state__message { margin: 0; }

.pms-state__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--color-border-strong);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: pms-spin 900ms linear infinite;
}

@keyframes pms-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ avvisi. */

/*
 * **Chi si porta il fondo si porta anche il testo.** L'avviso dipinge la propria
 * carta con i colori del foglio, ma il colore delle lettere lo ereditava da dove
 * capitava di comparire: dentro l'apertura dei proprietari — un vetro scuro dove
 * tutto è schiarito per farsi leggere — il messaggio di conferma finiva quasi
 * bianco su verde chiarissimo, cioè illeggibile. Le due metà della stessa
 * decisione ora stanno insieme.
 */
.pms-notice {
	padding: 14px 18px;
	margin: 0 0 20px;
	border-radius: var(--radius-container);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	background: var(--color-surface-soft);
}

.pms-notice--info { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pms-notice--success { border-color: var(--color-success); background: var(--color-success-soft); }
.pms-notice--warning { border-color: var(--color-warning); background: var(--color-warning-soft); }
.pms-notice--error { border-color: var(--color-danger); background: var(--color-danger-soft); }

.pms-notice__title { margin: 0 0 6px; font-size: var(--step-7); }
.pms-notice__list { font-size: var(--text-meta); }
.pms-notice__list li { list-style: disc; margin-left: 18px; }

/* --------------------------------------------------------------- pulsanti. */

.pms-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	font: inherit;
	font-size: var(--step-4);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.pms-button--primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.pms-button--primary:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
}

.pms-button--primary:active { background: var(--color-primary-active); }

.pms-button--ghost {
	background: var(--color-surface);
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.pms-button--ghost:hover {
	background: var(--color-surface-hover);
	color: var(--color-text);
}

.pms-button[disabled],
.pms-button[aria-disabled="true"] {
	background: var(--color-disabled-surface);
	border-color: var(--color-border);
	color: var(--color-disabled);
	cursor: not-allowed;
}

/* ------------------------------------------------------------ paginazione. */

.pms-pagination { margin-top: 28px; }

.pms-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.pms-pagination__link {
	display: inline-flex;
	min-width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	font-size: var(--step-4);
	text-decoration: none;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
}

.pms-pagination__link:hover { background: var(--color-surface-hover); }

.pms-pagination__link.is-current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
}

/* ------------------------------------------------------------- carosello. */

/*
 * **Due righe indipendenti, in senso opposto** (§18). Ogni riga è la striscia
 * che scorre: contiene due volte le stesse schede, e trasla esattamente di una
 * copia — così alla fine del giro la seconda si trova dove stava la prima e non
 * si vede alcuna cucitura.
 *
 * Lo scarto è dichiarato una volta e usato tre volte: fra le schede, fra le due
 * copie e nel calcolo della traslazione. Se le tre misure divergessero, ogni
 * giro salterebbe di qualche pixel.
 */
.pms-carousel {
	--pms-carosello-passo: 22px;

	position: relative;
	overflow: hidden;

	/*
	 * **Il ritaglio orizzontale non deve tagliare anche il fondo.** `overflow`
	 * agisce su entrambi gli assi, e senza riempimento il bordo inferiore del
	 * contenitore cade esattamente sul fondo delle schede dell'ultima riga:
	 * l'ombra viene rasata e gli angoli tondi perdono il loro margine. La prima
	 * riga non ne soffriva perché ha sotto di sé lo spazio che la separa dalla
	 * seconda — qui si dà alla seconda lo stesso, che è anche il motivo per cui
	 * la misura è la stessa.
	 */
	padding-bottom: var(--pms-carosello-passo);
}

.pms-carousel__row {
	display: flex;
	gap: var(--pms-carosello-passo);
	width: max-content;
	animation: pms-marquee 70s linear infinite;

	/*
	 * **Il dito muove la striscia, l'animazione non se ne accorge.** Sono due
	 * spostamenti sovrapposti su due proprietà diverse: `transform` è del giro
	 * automatico e non va mai toccata — riscriverla vorrebbe dire interromperlo e
	 * farlo ripartire da capo — mentre `translate` è a sé e porta soltanto quanto
	 * si è trascinato. Il copione scrive un numero, e la posizione che si vede è
	 * la somma delle due. È il motivo per cui fermarsi, trascinare e ripartire non
	 * producono nessun salto: il giro, sotto, non è mai stato disturbato.
	 */
	translate: var(--pms-trascinamento, 0px) 0;

	/*
	 * **Il verticale resta della pagina.** Con `pan-y` il browser continua a
	 * scorrere la pagina quando il gesto va in su o in giù, e lascia a noi
	 * l'orizzontale: la sezione non intrappola il dito, e non c'è nessun
	 * `preventDefault` che possa sbagliarsi.
	 */
	touch-action: pan-y;

	/*
	 * **La riga è il riferimento di ciò che sta dentro di lei.** I testi riservati
	 * ai lettori di schermo sono posizionati in assoluto: senza questa riga si
	 * ancoravano al carosello — l'antenato posizionato più vicino — e su schermo
	 * stretto, dove la riga diventa una fascia che si trascina col dito, uscivano
	 * dal suo ritaglio e allargavano la pagina di qualche migliaio di pixel. Il
	 * dito trascinava la pagina invece della fascia. Da qui dentro non esce più
	 * niente.
	 */
	position: relative;
}

/* La prima riga scorre verso destra, la seconda verso sinistra. */
.pms-carousel__row--avanti { animation-direction: reverse; }

.pms-carousel__row + .pms-carousel__row { margin-top: var(--pms-carosello-passo); }

.pms-carousel__track {
	--pms-carosello-scheda: 320px;

	display: flex;
	gap: var(--pms-carosello-passo);

	/*
	 * **Ogni scheda alta quanto il proprio testo.** Stirate tutte all'altezza
	 * della più alta, le schede si tirano dietro a vicenda: aprendo una
	 * recensione con «Visualizza altro» cresceva la riga, e con la riga
	 * crescevano anche tutte le altre — un comando premuto in una scheda
	 * spostava le sue vicine, che è esattamente ciò che non deve fare. Lasciate
	 * alla propria altezza, si allineano in cima e si aprono una per volta.
	 *
	 * A riposo le altezze restano vicine perché l'estratto le porta quasi tutte
	 * alla stessa misura: è per questo che la soglia è bassa.
	 */
	align-items: flex-start;
}

/*
 * **La scheda dichiara la propria misura due volte, e non è una svista.** Una
 * scheda di questa striscia non cresce e non si stringe: `flex` le dà la
 * larghezza, e tanto dovrebbe bastare. Ma la riga si misura su `max-content` —
 * è così che il nastro conosce la propria lunghezza — e lì WebKit non limita il
 * contributo della scheda alla larghezza dichiarata: prende quella del testo
 * srotolato, e la traccia esce molto più larga di ciò che contiene. Misurato sul
 * banco: otto schede da trecentosessantotto pixel occupano 3 112 pixel, ma la
 * traccia ne misurava 5 435 sulla prima riga e 6 709 sulla seconda. Quei
 * duemila e passa pixel di nulla scorrevano dentro il nastro come un buco
 * bianco, e chi guardava vedeva le recensioni sparire a metà giro. Chromium il
 * contributo lo limita da sé, ed è per questo che il difetto si vedeva solo in
 * Safari e su iPhone.
 *
 * `max-width` chiude la questione, perché il contributo di una scatola è
 * limitato dalla sua larghezza massima in ogni motore. La misura resta una
 * sola, dichiarata qui sopra: le due proprietà non possono divergere.
 */
.pms-carousel__track > * {
	flex: 0 0 var(--pms-carosello-scheda);
	max-width: var(--pms-carosello-scheda);
}

/*
 * **Si ferma la riga che si sta guardando, e solo quella.** Le due righe sono
 * elementi distinti e ciascuna porta la propria animazione: fermarne una non
 * tocca l'altra. `animation-play-state` sospende dove si trova e riprende da lì
 * — nessun salto, nessun ritorno all'inizio.
 *
 * Solo dove esiste un puntatore fine: su uno schermo che si tocca «hover»
 * significa «ho appena toccato», e la riga resterebbe ferma dopo lo swipe.
 */
@media (hover: hover) and (pointer: fine) {
	.pms-carousel__row:hover { animation-play-state: paused; }
}

/*
 * Il fuoco da tastiera ferma la riga ovunque. Senza più un comando visibile è
 * l'unico modo perché chi naviga da tastiera possa leggere una recensione e
 * raggiungerne il collegamento senza inseguirlo.
 */
.pms-carousel__row:focus-within { animation-play-state: paused; }

/*
 * **Fermo vuol dire fermo dov'è.** Non azzerato, non riportato all'inizio:
 * `animation-play-state` sospende il giro nel punto esatto in cui si trova e
 * riprenderlo lo fa continuare da lì. Ferma tutte e due le righe, perché chi
 * tocca una recensione sta leggendo la sezione, non una striscia sola — e una
 * che continuasse a scorrere di fianco a quella ferma sarebbe solo fastidiosa.
 */
.pms-carousel.is-fermo .pms-carousel__row { animation-play-state: paused; }

/*
 * Mentre si trascina non si seleziona il testo per sbaglio: è un gesto, non una
 * selezione. Dura quanto il gesto.
 */
.pms-carousel__row.is-trascinando { user-select: none; }

/*
 * **Un giro è una traccia, comunque siano le copie.** La riga si sposta di
 * esattamente una traccia più uno scarto: alla fine la copia successiva si trova
 * dove stava quella prima di lei, e il ricominciare non si vede. Con due copie
 * — il caso del modello — questo vale la metà della riga meno mezzo scarto, che
 * è la misura di sempre; con più copie la stessa frazione si accorcia da sé.
 *
 * Quante siano lo dichiara il copione, che è l'unico a poter misurare quanto è
 * larga la finestra e quanto è lunga una traccia. Senza copione restano due, e
 * il carosello si comporta come ha sempre fatto.
 */
@keyframes pms-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc((-100% - var(--pms-carosello-passo)) / var(--pms-carosello-copie, 2))); }
}

/*
 * Chi ha chiesto meno movimento lo ottiene senza dover premere nulla (§31).
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * Fermare l'animazione e basta lascerebbe visibili le prime schede e
	 * irraggiungibili tutte le altre: la striscia torna a essere una fascia che
	 * si scorre a mano, e la copia — che serviva solo alla continuità — sparisce.
	 */
	.pms-carousel { overflow: visible; }

	.pms-carousel__row {
		animation: none;
		width: auto;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.pms-carousel__track[aria-hidden] { display: none; }
}

/* ---------------------------------------------------------- piè di pagina. */

/*
 * **Niente fascia, una riga sottilissima.** Il piè di pagina non ha un fondo
 * proprio: chiude la pagina con lo spazio e con un filetto appena percettibile,
 * non con un blocco di colore che sposta l'attenzione dall'ultima sezione
 * all'ultima cosa che si legge. Ed è basso: due righe di composizione, in un
 * corpo più piccolo di quello del testo corrente, perché qui si consulta e non
 * si legge.
 *
 * Il grigio è scritto per esteso, e non è il bordo del sito: questo filetto e
 * quello sotto la testata sono una coppia a sé, più chiara di `--color-border`,
 * e restano gli unici due punti in cui il colore non viene da un token.
 *
 * **E non occupa spazio**, per la stessa ragione della testata: disegnato sopra
 * il fondo invece che come bordo, l'altezza del piè di pagina resta quella
 * approvata. `position: relative` serve solo ad ancorarlo e non muove nulla.
 */
.pms-footer {
	position: relative;
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(1.125rem, 2.2vw, 1.625rem) clamp(1rem, 2vw, 1.375rem);
	font-size: var(--step-4);
	line-height: 1.45;
	color: var(--color-muted-strong);
}

.pms-footer::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: #f1f1f1;
	pointer-events: none;
}

/*
 * **I collegamenti non gridano.** Qui sono recapiti e note legali, non inviti
 * ad agire: prendono il colore del testo che li circonda e si dichiarano con una
 * sottolineatura solo quando li si sfiora o li si raggiunge da tastiera.
 */
.pms-footer a {
	color: inherit;
	text-decoration: none;
}

.pms-footer a:hover,
.pms-footer a:focus-visible { text-decoration: underline; }

/*
 * **Tre zone per riga, e il centro è davvero al centro.** Le due fasce laterali
 * hanno la stessa frazione di spazio — `1fr` entrambe — così la zona centrale
 * cade sull'asse del contenitore qualunque cosa contengano i lati: se dipendesse
 * dalla larghezza del marchio, il gruppo si sposterebbe il giorno in cui si
 * carica un logo più lungo. `minmax(0, …)` lascia che i lati si stringano invece
 * di spingere il centro fuori asse.
 */
.pms-footer__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem clamp(1rem, 2.4vw, 2rem);
}

.pms-footer__row--top {
	grid-template-areas: 'logo dati lang';
}

/*
 * **La seconda riga si legge per ultima e pesa meno**: un corpo più piccolo, un
 * grigio più chiaro e uno stacco più alto di una riga di testo bastano a
 * dichiararlo. Un filetto sarebbe stato un segno in più per dire ciò che lo
 * spazio dice già, e in un piè di pagina alto quattro righe si sarebbe visto più
 * di quello che separa.
 */
.pms-footer__row--bottom {
	grid-template-areas: 'copyright recapiti legali';
	margin-top: clamp(0.75rem, 1.8vw, 1.375rem);
	font-size: var(--step-3);
	color: var(--color-muted);
}

.pms-footer__brand { grid-area: logo; justify-self: start; line-height: 0; }
.pms-footer__company { grid-area: dati; justify-self: center; text-align: center; }
.pms-footer__lang { grid-area: lang; justify-self: end; }
.pms-footer__copyright { grid-area: copyright; justify-self: start; margin: 0; }
/* I recapiti si usano — ci si scrive, ci si telefona — e restano leggibili
   quanto i dati sopra di loro, un mezzo punto più dei testi che li affiancano. */
.pms-footer__contacts {
	grid-area: recapiti;
	justify-self: center;
	margin: 0;
	font-size: var(--step-4);
	text-align: center;
}
/* Le tre voci restano un elenco, composto su una riga sola e allineato al fondo. */
.pms-footer__legal {
	grid-area: legali;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Il marchio è piccolo: qui è una firma, non un'insegna. */
.pms-footer__brand img,
.pms-footer__logo img {
	width: auto;
	height: clamp(22px, 2.4vw, 28px);
}

/*
 * Le due righe del gruppo centrale stanno vicine fra loro più di quanto stiano
 * vicine a qualsiasi altra cosa: è la prossimità a dichiarare che sono un blocco
 * solo, e non serve altro a dirlo. `balance` le manda a capo dove cade una
 * pausa, invece che dove finisce lo spazio.
 */
.pms-footer__line {
	margin: 0;
	text-wrap: balance;
}

/*
 * Il punto medio separa due voci che esistono entrambe — non è mai scritto
 * prima della prima — ed è un segno, non una parola: chi ascolta la pagina non
 * lo sente.
 */
.pms-footer__sep {
	margin: 0 0.15rem;
	color: var(--color-muted);
}

/* --- Selettore di lingua --------------------------------------------------- */

.pms-languages { position: relative; }

/*
 * Il pulsante compare solo quando c'è chi lo ascolta: senza JavaScript
 * comanderebbe un pannello che nessuno apre, e l'elenco resta in chiaro.
 */
.pms-languages__toggle { display: none; }

/*
 * Il rientro negativo recupera l'imbottitura del pulsante: la parola si allinea
 * al bordo del contenitore, invece di scostarsene di mezzo carattere.
 */
.pms-languages.is-ready .pms-languages__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.5rem;
	margin-right: -0.5rem;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
}

.pms-languages__toggle .pms-icon { transition: transform var(--motion-fast) ease; }
.pms-languages__toggle[aria-expanded='true'] .pms-icon { transform: rotate(180deg); }

.pms-languages__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
}

/*
 * Aperto, il pannello galleggia sopra la pagina e si apre verso l'alto. Si
 * ancora a destra perché a destra sta il pulsante: allinearlo a sinistra lo
 * avrebbe fatto sporgere oltre il bordo del contenitore, essendo più largo di
 * ciò che lo comanda.
 */
/*
 * **Trentacinque: il livello dei pannelli che si aprono.** Il menu finiva sotto
 * il contatto rapido — venti contro venticinque — e non per colpa di un contesto
 * di impilamento: fra questo pannello e la radice non ce n'è nessuno, verificato,
 * quindi i due indici si confrontano davvero e il più basso perde. Non si abbassa
 * il pulsante di contatto, che deve restare sopra la pagina: si porta il menu
 * dove stanno gli altri pannelli del tema — quelli di «Dove», «Quando» e «Chi» —
 * cioè davanti ai comandi che galleggiano (venti e venticinque) e dietro alle
 * cose che devono poterlo coprire: la testata (quaranta), il foglio dei filtri
 * (novanta), quello della ricerca (novantacinque) e la lente delle fotografie
 * (centoventi). Aperto sta davanti; chiuso non esiste.
 */
.pms-languages.is-ready .pms-languages__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.4rem);
	z-index: 35;
	flex-direction: column;
	gap: 0;
	min-width: 9rem;
	padding: 0.35rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 15px;
	box-shadow: 0 12px 32px -18px rgb(0 0 0 / 30%);
}

.pms-languages__link { text-decoration: none; color: inherit; }

.pms-languages.is-ready .pms-languages__link {
	display: block;
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
	white-space: nowrap;
}

/* Cambia il fondo, non il colore del testo: come nel menu della testata. */
.pms-languages.is-ready .pms-languages__link:hover,
.pms-languages.is-ready .pms-languages__link:focus-visible { background: var(--color-surface-hover); }

@media (prefers-reduced-motion: reduce) {
	.pms-languages__toggle .pms-icon { transition: none; }
}

/*
 * **La prima riga regge, la seconda no.** Marchio, dati e lingua stanno in tre
 * zone anche su tablet — sono corti. Copyright, recapiti e note legali insieme
 * chiedono più spazio di quanto ne resti: prima di stringerli fino a spezzarli,
 * i recapiti salgono su una riga propria al centro e sotto restano le due
 * estremità, che è la stessa composizione letta su due livelli.
 */
@media (max-width: 960px) {
	.pms-footer__row--bottom {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			'recapiti recapiti'
			'copyright legali';
		gap: 0.35rem clamp(1rem, 2.4vw, 2rem);
	}
}

@media (max-width: 640px) {
	/*
	 * **Su schermo stretto non restano tre zone**, ma nemmeno un elenco allineato
	 * a caso: marchio e lingua tengono la riga che aprono — sono le due cose che
	 * si guardano, non si leggono — e sotto scorre la composizione, tutta a
	 * sinistra, con lo stesso passo fra un blocco e l'altro.
	 */
	.pms-footer__row--top {
		grid-template-columns: auto auto;
		grid-template-areas:
			'logo lang'
			'dati dati';
		justify-content: space-between;
		gap: 0.875rem;
	}

	/*
	 * Lo stacco è lo stesso fra tutti i blocchi impilati — quello del margine e
	 * quello della griglia hanno lo stesso valore — perché a distanze diverse i
	 * quattro blocchi si sarebbero raggruppati a due a due da soli.
	 */
	.pms-footer__row--bottom {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'recapiti'
			'legali'
			'copyright';
		gap: 0.625rem;
		margin-top: 0.625rem;
	}

	.pms-footer__company,
	.pms-footer__contacts {
		justify-self: start;
		text-align: left;
	}

	.pms-footer__legal { justify-self: start; justify-content: flex-start; }
}

/* ------------------------------------------------------- punti di rottura. */

@media (max-width: 1320px) {
	/* Doppia radice: le variabili in linea arrivano dopo, e a pari specificità vincerebbero. */
	:root:root { --gutter: 22px; }
}

@media (max-width: 640px) {
	:root:root { --gutter: 16px; }
}

@media (max-width: 640px) {
	.pms-section { padding: 32px 0; }
	.pms-grid--cards { grid-template-columns: 1fr; }
}