/*
 * La pagina dei proprietari (§22).
 *
 * L'apertura è del componente condiviso (`hero.css`), il modulo di `forms.css` e
 * la carta di `cards.css`: qui c'è soltanto ciò che è di questa pagina, cioè come
 * le sue sezioni sono composte. Oggi ce n'è una — i limiti dell'affitto
 * tradizionale, quattro carte che su una scrivania si attraversano di lato e su
 * un tablet si leggono in colonna.
 */

/* ============================================ primo capitolo: i limiti. */

/*
 * **Due capitoli diversi, non uno che si restringe.** Da 1081 in su c'è un
 * viaggio: la scena si blocca sotto la testata e la fila di carte attraversa lo
 * schermo. Sotto, le stesse quattro carte stanno una sotto l'altra nel flusso
 * normale della pagina — nessun blocco, nessuno scorrimento laterale, nessun
 * aggancio. Non è la stessa cosa in piccolo: è un'altra cosa.
 *
 * **La linea è quella del tema, non una scelta di questa sezione.** A 1080
 * l'apertura passa a una colonna, la barra in cima va a due righe e la colonna
 * appiccicata del dettaglio diventa statica: è lì che questo progetto smette di
 * essere una scrivania. Scegliere qui un numero diverso avrebbe significato
 * avere due idee di «tablet» nello stesso foglio.
 */

/*
 * **Il richiamo dell'apertura arriva qui, e si ferma sotto la testata.** Senza
 * questo margine il browser allineerebbe la sezione al bordo della finestra, dove
 * c'è la barra appiccicata, e il primo a scomparire sarebbe proprio il titolo che
 * dice dove si è arrivati. Vale a ogni misura: il collegamento esiste anche dove
 * il viaggio non c'è.
 */
.pms-section--limits {
	scroll-margin-top: calc(var(--pms-testata-h, 6rem) + clamp(1rem, 2vw, 2rem));
}

/*
 * **E l'apertura si ferma allo stesso modo.** Ci si torna dall'invito in fondo
 * alla pagina: senza questo margine il bordo superiore dell'apertura finirebbe
 * sotto la barra appiccicata, che è precisamente il pezzo che si vuole rivedere.
 * È la stessa misura del capitolo qui sopra, per la stessa ragione.
 */
.pms-hero--owners {
	scroll-margin-top: calc(var(--pms-testata-h, 6rem) + clamp(1rem, 2vw, 2rem));
}

/*
 * **Ci si arriva scorrendo, non saltando.** Senza questa riga il browser sposta
 * la pagina di colpo, e chi legge perde il filo di dove si trovasse. Vale per la
 * sola pagina che porta la pila, e chi ha chiesto meno movimento la ritrova
 * azzerata dal foglio di base.
 */
html:has(.pms-section--limits) { scroll-behavior: smooth; }

/*
 * **La targhetta dice di che cosa si parla prima che il titolo lo dica.** Una
 * parola sopra il titolo, in maiuscoletto spaziato e nel colore dell'accento.
 * Gli stessi valori li usa l'invito finale, che è un componente a sé.
 */
.pms-section__badge {
	margin: 0 0 clamp(0.75rem, 1.4vw, 1rem);
	font-size: var(--step-2);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/*
 * **Una misura sola per i titoli dei capitoli.** I tre che si annunciano allo
 * stesso modo — targhetta, titolo, filetto — devono anche pesare allo stesso
 * modo, invece di scegliersi ciascuno la propria e far scendere la pagina a
 * scalini che nessuno ha deciso.
 *
 * **Fuori restano le due cose che non sono titoli di sezione**: la frase del
 * passaggio, che è un'affermazione a tutta pagina e ha una scala sua, e «Dicono
 * di noi», che è la sezione condivisa con la pagina iniziale e tiene la misura di
 * là — cambiarla qui la cambierebbe anche lì.
 */
.pms-section--limits .pms-section__title,
.pms-section--short .pms-section__title,
.pms-steps__title {
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
}

/*
 * **L'intestazione sta al centro.** Non è la riga con il titolo a sinistra e un
 * collegamento a destra: qui non si va da nessuna parte, si comincia a leggere —
 * e ciò che segue è un viaggio orizzontale, che parte meglio da un punto
 * centrale.
 */
.pms-limits__intro {
	display: block;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.pms-section--limits .pms-section__title {
	max-width: 24ch;
	margin-inline: auto;

	/*
	 * **Le righe si riempiono, non si pareggiano.** Il titolo è di due frasi, e il
	 * pareggiatore sceglierebbe il taglio più simmetrico — cioè in mezzo a una
	 * frase. Riempiendo, il punto in cui si va a capo cade dove cade il punto
	 * fermo, che è dove l'autore l'ha messo.
	 */
	text-wrap: pretty;
}

/* Lo stesso segno delle sezioni della pagina iniziale, sotto il centro del titolo. */
.pms-section--limits .pms-section__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin: clamp(0.875rem, 1.6vw, 1.25rem) auto 0;
	border-radius: 999px;
	background: var(--color-primary);
}

/*
 * L'introduzione prepara le quattro carte: due o tre righe al corpo del discorso,
 * con una misura da leggere e non la larghezza della pagina.
 *
 * **Al corpo dei testi, non a quello dei contorni.** Stava un gradino sotto — lo
 * stesso della riga di una scheda — e finiva per pesare quanto il testo delle
 * carte che introduce, appiattendo l'ordine di lettura. Il paragrafo che apre un
 * capitolo è il testo principale della pagina, e il testo principale di questo
 * sito, dalla descrizione di un alloggio alle pagine scritte a mano, si legge a
 * sedici pixel. La misura in `ch` non cambia: la riga resta lunga gli stessi
 * caratteri, e cresce con il corpo.
 */
.pms-limits__text {
	margin-top: clamp(1.125rem, 2vw, 1.625rem);
	max-width: 58ch;
	margin-inline: auto;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

.pms-limits__text > p { margin: 0 0 0.75rem; }
.pms-limits__text > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- le carte. */

.pms-limits__track {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * **Qui la carta non ha ombra.** È la sola differenza dal componente condiviso,
 * ed è di questa sezione: la pagina iniziale posa le sue carte una sull'altra e
 * l'ombra serve a dire quale sta sopra; qui stanno sullo stesso piano — in fila
 * sulla scrivania, in colonna sul tablet — e quattro ombre affiancate sarebbero
 * quattro macchie senza significato.
 */
.pms-limits__item .pms-deck__card {
	height: 100%;
	box-shadow: none;
}

/*
 * Il numero sta sotto il simbolo e sopra il titolo: qui non conta a quante schede
 * si sia di un mazzo, numera l'affermazione che si sta leggendo.
 */
.pms-limits__item .pms-deck__count { margin: 0 0 clamp(0.5rem, 0.9vw, 0.75rem); }
.pms-limits__item .pms-deck__icon { margin-bottom: clamp(0.75rem, 1.4vw, 1.125rem); }

/* =========================================== da tablet in giù: una colonna. */

/*
 * **Quattro carte, una sotto l'altra, e basta.** Nessun blocco, nessuna corsa
 * laterale, nessun aggancio, nessuno scorrimento nascosto dentro un riquadro:
 * il flusso verticale della pagina, che su un dito è il movimento che si sa già
 * fare. Un viaggio orizzontale su un tablet costringe a due gesti in
 * contraddizione — si scorre in giù per far muovere qualcosa di traverso — e
 * nasconde tre affermazioni su quattro dietro un movimento che non si vede.
 *
 * La scena qui non è una scena: è un contenitore trasparente. La sezione
 * riprende la propria imbottitura, l'intestazione il proprio margine, e le carte
 * si allineano al contenuto come qualunque altra colonna del sito.
 */
@media (max-width: 1080px) {
	.pms-limits__intro { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

	.pms-limits__track {
		display: grid;
		gap: clamp(1rem, 2.4vw, 1.5rem);

		/*
		 * La stessa misura dell'intestazione: le carte non diventano fasce larghe
		 * quanto lo schermo con due righe di testo in mezzo, e la colonna resta
		 * allineata a ciò che la introduce.
		 */
		max-width: 46rem;
		margin-inline: auto;
		padding-inline: var(--gutter);
	}
}

/* ============================================ da 1081 in su: il viaggio. */

@media (min-width: 1081px) {

	/*
	 * **Una distanza sola, scritta una volta.** Lo stacco fra l'apertura e questo
	 * capitolo era una somma: il ritmo che l'apertura porta sotto di sé più
	 * l'imbottitura che ogni sezione porta sopra. Due valori, e il primo è un
	 * `clamp` sulla larghezza — quaranta pixel da 1334 in su, trentotto e quattro
	 * a 1280 — quindi la distanza cambiava da uno schermo all'altro senza che
	 * nessuno l'avesse deciso. Ottantotto qui, ottantasei là.
	 *
	 * Qui la distanza è una misura, non un risultato. Il ritmo dell'apertura si
	 * azzera — non toccando l'apertura, ma la variabile che l'apertura già legge,
	 * che è il modo in cui il tema lo lascia decidere a chi compone la pagina — e
	 * tutto lo stacco passa dall'imbottitura della sezione, che vale quel numero e
	 * basta. Il numero è quello che la pagina aveva già quasi ovunque: cambia solo
	 * dove era diverso.
	 *
	 * In pixel e non in `rem` per stare con ciò che le sta accanto: l'imbottitura
	 * sotto la sezione è quella condivisa, in pixel, e due unità diverse ai due
	 * capi della stessa sezione si allontanerebbero appena qualcuno cambia il
	 * corpo del testo.
	 */
	.pms-page--owners {
		--pms-stacco-capitolo: 88px;
		--pms-ritmo: 0px;
	}

	.pms-section--limits { padding-top: var(--pms-stacco-capitolo); }

	/*
	 * **La scena ha l'altezza del suo contenuto, e nient'altro.** Aveva l'altezza
	 * della finestra — `100svh` meno la testata — e con quella si centrava da sé:
	 * il risultato era che la distanza fra l'apertura e questo capitolo cresceva
	 * con lo schermo, perché metà del vuoto della scena finiva sopra la targhetta.
	 * Su un monitor alto millecentottanta la sezione cominciava molto più in basso
	 * che su un portatile, pur essendo la stessa sezione con lo stesso contenuto.
	 *
	 * Qui l'altezza è naturale, e nessuno la cambia mai: né il foglio né il
	 * copione. Lo spazio che separa questo capitolo dall'apertura è quello scritto
	 * sopra, e non dipende da quanto è alta la finestra; il vuoto che avanza sotto
	 * la composizione, su uno schermo alto, resta lì — compensarlo spostando il
	 * blocco significa vederlo scendere mentre si scorre.
	 *
	 * Della griglia resta il solo compito che le è proprio: la distanza fra
	 * l'intestazione e la fila delle carte.
	 */
	.pms-limits__scene {
		display: grid;
		row-gap: clamp(1.5rem, 2.4vw, 2.75rem);
	}

	/*
	 * **La finestra arriva al bordo dello schermo.** Se si fermasse al margine del
	 * sito, la carta successiva comparirebbe già tagliata in mezzo alla pagina
	 * invece che entrare dal bordo: il senso di «c'è dell'altro a destra» sta
	 * tutto lì.
	 *
	 * **Senza copione la fila si scorre col dito.** È lo stato di partenza della
	 * marcatura, non un ripiego costruito a parte: chi non esegue script e chi ha
	 * chiesto meno movimento trovano la stessa fila, che si trascina e si aggancia
	 * carta per carta. Il copione, quando c'è, spegne lo scorrimento a mano e
	 * prende il comando.
	 */
	.pms-limits__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.pms-limits__viewport::-webkit-scrollbar { display: none; }

	/*
	 * Quando il copione prende il comando lo scorrimento a mano si spegne: le due
	 * cose insieme si contenderebbero la stessa fila.
	 */
	.pms-limits__viewport.is-driven {
		overflow-x: hidden;
		scroll-snap-type: none;
	}

	/*
	 * **Lo stesso margine ai due capi del viaggio.** Il margine iniziale era
	 * quello del contenuto — mezzo scarto fra la finestra e la larghezza del sito,
	 * più il margine — così la prima carta partiva in asse con il riquadro del
	 * testo. Sotto i 1560 di larghezza quel conto vale quanto il margine e non si
	 * nota; sopra, cresce: a 1920 la prima carta cominciava a 216 mentre a destra
	 * le carte uscivano dal bordo dello schermo. Un vuoto grande da una parte e
	 * niente dall'altra, cioè una composizione senza asse.
	 *
	 * Con lo stesso margine ai due lati il viaggio comincia a `--gutter` dal bordo
	 * sinistro e finisce a `--gutter` da quello destro — la corsa si ricalcola da
	 * sé, perché è misurata sulla geometria vera — e la simmetria è la stessa a
	 * qualunque larghezza, senza un numero per ciascuna.
	 */
	.pms-limits__track {
		display: flex;
		gap: clamp(1.25rem, 2vw, 2rem);
		padding-inline: var(--gutter);
		will-change: transform;
	}

	/*
	 * **Una carta e mezza in vista, non quattro.** La misura è una frazione della
	 * finestra, non un numero fisso: quel che conta è che si veda una carta intera
	 * e un pezzo abbondante della successiva, così è immediato che a destra c'è
	 * dell'altro. Il tetto di trentotto rem esiste perché il testo di una carta è
	 * corto: oltre quella larghezza il riquadro diventa una fascia con due righe
	 * in mezzo.
	 */
	.pms-limits__item {
		flex: 0 0 auto;
		width: clamp(19rem, 44vw, 38rem);
		scroll-snap-align: center;
	}
}

/* ======================================= secondo capitolo: la cerniera. */

/*
 * **Una domanda sola, e niente altro.** Fra i limiti e la risposta serve un
 * respiro: nessuna targhetta, nessun riquadro, nessuno sfondo diverso: il fondo
 * del sito e una riga di testo grande. Tutto ciò che si aggiungesse qui — un
 * filetto, un'icona, un colore — la farebbe leggere come una terza sezione di
 * contenuto invece che come il momento in cui il discorso cambia direzione.
 *
 * **La frase c'è comunque.** Senza copione, con meno movimento richiesto o su un
 * telefono è un paragrafo grande e centrato nel flusso della pagina, leggibile
 * dall'inizio. Le lettere le separa il copione, e solo quando può animarle.
 */
/*
 * Il margine laterale vale a ogni misura: la sezione non ha il contenitore del
 * contenuto — la frase sta da sola in mezzo allo schermo — e senza questo, su un
 * telefono, dove il tetto della misura non arriva a mordere, il testo finisce a
 * toccare i due bordi.
 */
.pms-bridge__scene {
	padding-inline: var(--gutter);
}

.pms-bridge__phrase {
	max-width: 22ch;
	margin: 0 auto;
	text-align: center;
	font-size: clamp(1.75rem, 4.4vw, 4rem);
	line-height: 1.14;
	letter-spacing: -0.025em;
	font-weight: 700;
	color: var(--color-text);

	/*
	 * Le due righe si pareggiano invece di riempirsi: qui non c'è un punto fermo a
	 * decidere dove andare a capo, e una riga lunga con una corta sotto è il modo
	 * peggiore di scrivere una domanda.
	 */
	text-wrap: balance;
}

/*
 * **Il segno finale prende il rosso del sito.** È l'unico colore della sezione, e
 * non è scritto qui: è il token che l'amministrazione alimenta dal campo
 * «Primario», lo stesso che colora la chiamata in testata, il pulsante della
 * ricerca, le targhette e il filetto sotto i titoli di sezione. Il resto della
 * frase resta del colore del testo.
 *
 * **Non `--color-accent`.** Quel campo esiste e si chiama «Accento», ma nel tema
 * vale un quasi-nero indistinguibile dal testo: è il colore delle superfici
 * profonde, non dell'accento visivo. L'accento che si vede sul sito — quello che
 * si riconosce come colore del marchio — è il primario, e questo è il posto in
 * cui il nome tecnico e il nome di ciò che si vede non coincidono.
 */
.pms-bridge__mark {
	color: var(--color-primary);
}

/*
 * **Il sottolineato è un tratto solo, e sottolinea tutta la frase.** Non una
 * riga sotto una parola e non un fregio in mezzo: copre quasi tutta la misura
 * del blocco, perché è la domanda intera a essere sottolineata.
 *
 * Vive dentro il paragrafo, quindi la sua larghezza è una frazione della misura
 * della frase e non della finestra: se la frase si stringe, il segno la segue. E
 * poiché il disegno è centrato sul paragrafo e l'inchiostro è centrato nel
 * disegno, l'asse ottico coincide con quello della frase senza correzioni.
 */
.pms-bridge__underline {
	display: block;

	/*
	 * La misura vera la scrive il copione, accordandola alla riga più lunga: qui
	 * c'è la frazione del blocco che ci va vicino per la frase predefinita, e che
	 * vale dove il copione non gira.
	 */
	width: 66%;
	height: auto;
	margin: clamp(0.75rem, 1.4vw, 1.25rem) auto 0;
	overflow: visible;
}

/*
 * **Lo stesso rosso del punto interrogativo, e per la stessa ragione.** Il
 * token è quello che il pannello alimenta dal campo «Primario»: cambiandolo
 * cambiano insieme la chiamata in testata, il pulsante della ricerca, le
 * targhette, i filetti dei titoli, il segno finale della domanda e questo tratto.
 *
 * Lo spessore lo scrive il copione in unità di disegno, perché dipende da quanto
 * il disegno è scalato: qui c'è la misura che vale dove il copione non gira, ed è
 * quella giusta per un disegno reso attorno alla sua larghezza naturale.
 */
.pms-bridge__stroke {
	stroke: var(--color-primary);
	stroke-width: 10;
}

/*
 * Le lettere sono contenitori vuoti di significato: esistono perché ciascuna
 * possa comparire per conto suo. Quello che si legge — e quello che viene letto
 * ad alta voce — è la copia intera che il copione lascia accanto, nascosta alla
 * vista e non allo screen reader.
 *
 * **Restano in linea, e non è un dettaglio.** Come blocchi in linea ciascuna
 * lettera diventerebbe una scatola a sé, e fra due scatole il browser può andare
 * a capo: la frase si spezzava in mezzo alle parole, e a 1920 finiva su tre
 * righe con una parola troncata. Da elementi in linea gli unici punti di a-capo
 * restano gli spazi, cioè quelli che avrebbe il testo scritto senza di loro.
 */
.pms-bridge__letter {
	will-change: opacity;
}

@media (min-width: 1081px) {
	/*
	 * La scena è alta quanto la finestra sotto la testata, e la frase sta nel suo
	 * centro esatto: è l'unica cosa che c'è, e un solo elemento in mezzo a uno
	 * schermo vuoto è esattamente ciò che deve sembrare.
	 */
	.pms-section--bridge { padding-block: 0; }

	.pms-bridge__scene {
		display: grid;
		place-content: center;
		min-height: calc(100vh - var(--pms-testata-h, 0px));
		min-height: calc(100svh - var(--pms-testata-h, 0px));
	}
}

/* ========================================= terzo capitolo: gli affitti brevi. */

/*
 * **Un punto fermo e un elenco che scorre.** A sinistra l'immagine resta dov'è
 * mentre a destra i benefici passano: chi legge ha sempre davanti la cosa di cui
 * si parla, e l'elenco non diventa una lista da scorrere al buio. È l'opposto
 * del capitolo precedente — lì si muoveva tutto tranne il titolo, qui si muove
 * solo il testo — e serve a far sentire che il discorso è cambiato.
 */
.pms-short__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

/*
 * **Verticale accanto al testo, orizzontale sopra.** In due colonne l'immagine
 * sta di fianco a un elenco alto e regge il confronto solo se è verticale; in
 * una colonna sola quella stessa proporzione diventa una fascia alta più di uno
 * schermo, che si scorre prima di arrivare al primo beneficio.
 *
 * **Una fotografia c'è sempre**, quella del tema o quella caricata dal pannello:
 * la cornice non ha più uno stato vuoto da coprire, e il cerchio chiaro che ne
 * teneva il posto — con le unità di contenimento che gli davano la misura — non
 * ha più niente da tenere.
 */
.pms-short__frame {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-container);
}

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

.pms-short__lead {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.pms-section--short .pms-section__title {
	max-width: 28ch;

	/* Due frasi: si va a capo dove c'è il punto, non dove viene simmetrico. */
	text-wrap: pretty;
}

/* Lo stesso segno delle altre sezioni, allineato al testo invece che al centro. */
.pms-section--short .pms-section__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin: clamp(0.875rem, 1.6vw, 1.25rem) 0 0;
	border-radius: 999px;
	background: var(--color-primary);
}

/* Stesso ruolo e stesso corpo dell'introduzione del primo capitolo. */
.pms-short__text {
	margin-top: clamp(1.125rem, 2vw, 1.625rem);
	max-width: 58ch;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

.pms-short__text > p { margin: 0 0 0.75rem; }
.pms-short__text > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- i benefici. */

.pms-short__benefits {
	display: grid;
	gap: clamp(0.75rem, 1.4vw, 1.125rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * **Riquadri, non righe con un filo in mezzo.** Sono cose che facciamo, non
 * capitoli di un discorso: ciascuna sta per conto suo, e il riquadro è quello
 * che il sito usa già ovunque — stesso fondo, stesso bordo, stesso raggio. Il
 * simbolo a sinistra e il testo a destra, perché il titolo cominci dove comincia
 * il testo che lo spiega.
 */
.pms-short__benefit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.875rem, 1.4vw, 1.25rem);
	align-items: start;
	padding: clamp(1.125rem, 1.8vw, 1.5rem);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-container);
}

/*
 * Il simbolo prende il rosso del sito — lo stesso della chiamata in testata e
 * dei filetti — ed è l'unico colore del riquadro.
 */
.pms-short__icon {
	display: inline-flex;
	color: var(--color-primary);
}

.pms-short__icon .pms-icon {
	display: block;
	width: clamp(24px, 2vw, 28px);
	height: clamp(24px, 2vw, 28px);
}

.pms-short__name {
	margin: 0 0 0.375rem;
	font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

.pms-short__body {
	margin: 0;
	max-width: 52ch;
	font-size: var(--text-meta);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

@media (min-width: 1081px) {
	/*
	 * Quarantacinque e cinquantacinque: l'immagine ha bisogno di presenza, il
	 * testo di misura. `start` perché le due colonne comincino insieme in alto e
	 * finiscano dove finiscono.
	 */
	.pms-short__grid {
		grid-template-columns: 45fr 55fr;
		align-items: start;
		gap: clamp(3rem, 5vw, 5rem);
	}

	/*
	 * **Ferma sotto la testata.** L'immagine resta dov'è mentre i benefici le
	 * passano accanto: è il punto fermo a cui tornare, ed è la ragione per cui
	 * questo capitolo è a due colonne invece che a una. L'altezza della barra è
	 * quella che `sticky.js` misura e pubblica: senza, l'immagine si fermerebbe
	 * sotto di essa. Lo spazio in più è lo stesso respiro che ha ogni sezione.
	 *
	 * **Solo qui dentro**, cioè solo dove le colonne sono due: sotto la soglia la
	 * pagina è una colonna sola, l'immagine sta sopra i benefici e appenderla
	 * significherebbe tenerla sullo schermo mentre si legge tutt'altro.
	 */
	.pms-short__visual {
		position: sticky;
		top: calc(var(--pms-testata-h, 6rem) + clamp(1rem, 2vw, 2rem));
	}

	.pms-short__frame { aspect-ratio: 4 / 5; }
}

/* ========================================= terzo capitolo e mezzo: come funziona. */

/*
 * **Tre schede uguali, e il numero non si scrive.** Dopo i benefici viene il
 * come: una fotografia in alto con lo stesso ritaglio per tutte, poi il numero
 * del passaggio, il titolo e il testo. Il numero è un'etichetta piccola in
 * colore d'accento — non una pastiglia, non un cerchio pieno: qui a comandare è
 * la fotografia, e un numero che gridasse le toglierebbe il posto.
 */
.pms-steps__intro {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.pms-steps__title {
	max-width: 24ch;
	margin: 0 auto;
	text-wrap: pretty;
}

/* Il solito filetto del sito, centrato sotto il titolo. */
.pms-steps__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin: clamp(1rem, 1.8vw, 1.375rem) auto 0;
	border-radius: 999px;
	background: var(--color-primary);
}

/*
 * **Quante ne dichiara chi redige.** Le colonne non sono tre per scritto: sono
 * quante ce ne stanno con una larghezza minima decente, quindi tre passaggi
 * fanno tre colonne, quattro ne fanno quattro e due ne fanno due — senza che
 * nessuno debba tornare qui a cambiare un numero.
 */
.pms-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.5rem, 2.4vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pms-step {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 15px;

	/* La comparsa la pilota lo scorrimento: qui si dice solo che cosa si muove. */
	will-change: opacity, transform;
}

/*
 * Il ritaglio è dichiarato qui e vale per tutte: tre fotografie diverse non
 * possono decidere ciascuna la propria altezza, o la fila si sfalsa.
 */
.pms-step__shot {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--color-surface-soft);
}

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

/*
 * Finché una fotografia non c'è, il suo posto è tenuto da una superficie neutra
 * del tema: né un colore inventato né un'immagine presa altrove.
 */
.pms-step__shot .pms-media__placeholder {
	background: var(--color-surface-soft);
}

.pms-step__body {
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

/*
 * **Il numero è una targhetta, non una cifra sospesa.** Un «01» nudo sopra il
 * titolo si legge come un elemento decorativo e non dice a che cosa serve; qui
 * diventa un'etichetta piccola e piena, con gli angoli addolciti ma non tondi,
 * che dichiara di essere un passaggio di una sequenza.
 *
 * **Il colore è uno solo, in due intensità.** Il testo prende l'accento, il
 * fondo la sua versione tenue — che è un derivato già dichiarato fra i token,
 * l'accento al nove per cento sulla superficie — quindi cambiando la palette dal
 * pannello cambiano insieme, e qui non c'è nessun colore scritto a mano.
 *
 * `inline-flex` perché la targhetta sia larga quanto il suo testo e non quanto
 * la riga: con un blocco il fondo si stenderebbe per tutta la scheda.
 */
.pms-step__number {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0.75rem;
	padding: 5px 11px;
	font-size: var(--step-2);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	background: var(--color-primary-soft);
	border-radius: 10px;
}

/*
 * **Il titolo di una scheda non è un `h3` qualunque.** Qui non aveva una misura
 * propria e cadeva al gradino con cui il foglio veste i sottotitoli dei pannelli:
 * quattordici pixel e mezzo, cioè **meno del paragrafo che gli sta sotto**. Una
 * scheda con la fotografia in cima, il passaggio e due righe di testo si legge
 * dall'alto in basso, e il secondo gradino non può essere più basso del terzo.
 *
 * La misura è quella delle schede con la fotografia del resto del sito — quelle
 * degli alloggi e delle esperienze, in pagina iniziale e nei risultati — perché
 * questa è esattamente la stessa cosa: un'immagine, un titolo, una riga di testo.
 */
.pms-step__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.125rem, 1.3vw, 1.3125rem);
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--color-heading);
}

/*
 * **La riga ha una misura anche quando la scheda non ce l'ha.** Sotto la
 * scrivania le schede diventano una colonna sola larga quanto la pagina, e il
 * paragrafo, che non aveva alcun limite, arrivava a centoquarantacinque caratteri
 * per riga: il triplo di quanto l'occhio segue senza perdere il capo, e il doppio
 * di qualunque altro paragrafo di questa pagina. Il limite è in `ch`, cioè nella
 * misura del carattere, ed è quello con cui si leggono le introduzioni dei
 * capitoli qui sopra; oltre i 1081 non si sente nemmeno, perché la colonna di una
 * scheda ne tiene una cinquantina.
 */
.pms-step__text {
	max-width: 58ch;
	margin: 0;
	font-size: var(--text-meta);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

/*
 * **Sotto la scrivania una scheda per riga.** Tre colonne da trecento pixel
 * stanno nella finestra ma non si leggono: la fotografia diventa una striscia e
 * il testo una colonna stretta. È la stessa soglia del resto della pagina — sotto
 * i 1081 le carte del primo capitolo si impilano e il copione non parte — e qui
 * fa la stessa cosa, per la stessa ragione.
 */
@media (max-width: 1080px) {
	.pms-steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	/*
	 * **Sul telefono la fotografia si fa quadrata.** In colonna unica il tre a due
	 * è una fascia bassa e larga: sopra un elenco di benefici che scorre a lungo
	 * sembra un ritaglio avanzato più che un'immagine. Il quadrato le ridà peso
	 * senza rubare mezzo schermo — restano il ritaglio `cover`, gli angoli e la
	 * fotografia, cambia solo la proporzione della cornice, e solo qui: il quattro
	 * a cinque della scrivania e il tre a due del tablet non sono toccati.
	 */
	.pms-short__frame { aspect-ratio: 1 / 1; }

}

/* ==================================== quarto capitolo: dicono di noi i proprietari. */

/*
 * **Qui non c'è niente da scrivere, ed è il punto.** Le testimonianze dei
 * proprietari sono lo stesso componente della pagina iniziale — sezione,
 * carosello, due righe in senso opposto, scheda — che vive in `cards.css` e non
 * sa su quale pagina si trovi. Cambia soltanto da dove arrivano le recensioni.
 *
 * C'erano qui delle regole che rifacevano la firma con un ritratto tondo: erano
 * una seconda versione dello stesso disegno, destinata a scostarsi dalla prima
 * al primo ritocco. La firma di chi ha affidato un immobile usa ora le stesse
 * classi della firma della risorsa recensita, e quindi le stesse misure.
 */

/* ============================================== la comparsa delle due sezioni. */

/*
 * **Entrano e se ne vanno sfumando, e lo fa lo scorrimento.** Non un'animazione
 * che parte da sé quando la sezione si affaccia: l'opacità segue la posizione
 * della pagina, quindi chi si ferma vede un fotogramma fermo e chi torna
 * indietro ripercorre la stessa strada al contrario.
 *
 * Il foglio non nasconde niente: senza copione, con meno movimento richiesto o
 * sotto la soglia della scrivania le sezioni sono semplicemente visibili. A
 * portarle a zero è il copione, e solo quando si è preso l'incarico di
 * riportarle indietro.
 */
.pms-short__benefit {
	will-change: opacity, transform;
}