/*
 * Homepage (§18).
 */

/*
 * **L'apertura non abita più qui.** Contenitore, fotografia, velo, occhiello,
 * titolo, sottotitolo e azioni stanno in `hero.css`, senza il nome di una pagina
 * nei selettori: sono un componente, e la pagina dei proprietari lo rende come
 * lo rende questa. Di quell'apertura restano qui le quattro promesse, che
 * appartengono alla pagina iniziale e a nessun'altra.
 */

.pms-hero__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.pms-hero__card {
	padding: 16px 18px;
	background: var(--color-primary-softer);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-container);
}

.pms-hero__card-title { margin: 0 0 4px; font-size: var(--step-5); }
.pms-hero__card-text { margin: 0; font-size: var(--step-3); color: var(--color-muted-strong); }

.pms-home-search { padding: 24px 0 8px; }

.pms-home-search__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

@media (max-width: 640px) {
	.pms-hero__cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * Rifinitura della Home
 *
 * Tutto ciò che segue vive in questo foglio, che WordPress accoda **solo sulla
 * pagina iniziale**: le schede, i risultati di ricerca e le pagine interne non
 * ne sono toccati. Era la condizione per lavorare sulla Home senza rimettere
 * mano a componenti già verificati altrove.
 * ========================================================================== */

/* --- Ritmo verticale ------------------------------------------------------
 *
 * **Una misura sola, e la metà di prima.** Le sezioni si susseguivano con
 * spaziature decise una per una — settantadue pixel di norma, cento sotto il
 * mazzo — e fra un blocco e l'altro se ne sommavano fino a centosettanta: la
 * Home si leggeva come una pila di riquadri separati da fasce bianche, e per
 * arrivare agli alloggi bisognava scorrere del vuoto.
 *
 * Il ritmo è **quello già approvato fra l'apertura e il mazzo**: quaranta pixel
 * per parte, ottanta fra due sezioni. Ogni sezione porta lo stesso valore sopra
 * e sotto, quindi la distanza è identica ovunque per costruzione — non c'è un
 * secondo numero da tenere allineato al primo.
 */
.home { --pms-ritmo: clamp(1.5rem, 2.8vw, 2.75rem); }

.home .pms-section { padding-block: var(--pms-ritmo); }

.home .pms-section__header {
	align-items: baseline;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

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

/*
 * «Visualizza tutti» era un collegamento sottolineato in rosso, con lo stesso
 * peso del titolo accanto: attirava più dell'elenco che introduce. Resta
 * riconoscibile come collegamento, ma smette di competere.
 */
.home .pms-section__more {
	font-size: var(--step-3);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.home .pms-section__more:hover,
.home .pms-section__more:focus-visible { border-bottom-color: transparent; }


/* --- Griglie --------------------------------------------------------------
 *
 * Quattro colonne su schermo largo lasciavano card strette e alte; tre le
 * riportano a una larghezza in cui titolo e dati stanno su poche righe.
 */
.home .pms-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* --- Tablet e mobile ------------------------------------------------------ */

/*
 * **Impilata, l'apertura non è più una griglia**: le distanze fra i suoi blocchi
 * sono margini dichiarati in `hero.css`, dove vive la disposizione. Uno spazio
 * fra gli elementi della fila si aggiungerebbe anche fra le righe del testo, che
 * i propri margini ce li hanno già.
 */

@media (max-width: 640px) {
	/*
	 * Il ritmo non ha più un'eccezione qui: `--pms-ritmo` scende da solo con la
	 * finestra e si ferma a ventiquattro pixel, che è meno dei trentadue che
	 * questa regola imponeva. Tenerla avrebbe reso lo schermo stretto più arioso
	 * di quello largo.
	 */

	/* Su schermo stretto il titolo e il collegamento stanno su due righe. */
	.home .pms-section__header {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.home .pms-hero__actions .pms-button { flex: 1 1 auto; justify-content: center; }
}

/* --- Sezioni senza contenuto ----------------------------------------------
 *
 * «Dove andare» e «Chi è già stato ospite» occupavano trecento pixel ciascuna
 * per dire che non c'era niente da mostrare: un riquadro grande quanto una
 * griglia di card, con dentro una riga di testo. Il messaggio resta — nascondere
 * la sezione avrebbe tolto anche il titolo, e chi amministra non capirebbe
 * perché quella parte della pagina è sparita — ma occupa lo spazio di ciò che
 * dice.
 */
.home .pms-state--empty {
	padding: clamp(1rem, 2vw, 1.5rem);
	text-align: center;
	color: var(--color-muted-strong);
	background: var(--color-surface-soft);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-container);
}

.home .pms-state--empty .pms-state__message { font-size: var(--text-body); }

/*
 * **Il blocco dell'apertura sta in `hero.css`.** Contenitore, fotografia,
 * velo, grana, occhiello, titolo, sottotitolo e azioni erano qui, legati al
 * corpo `.home`: nessun'altra pagina poteva averli senza riscriverli. Ora sono
 * un componente senza il nome di una pagina addosso, e questa lo rende come lo
 * rende quella dei proprietari. Qui restano le quattro promesse.
 */

.home .pms-hero__cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

.home .pms-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1.125rem, 1.9vw, 1.6rem);
	color: var(--hero-chiaro);

	/*
	 * **Vetro scuro, non vetro chiaro.** Con un fondo trasparente le schede che
	 * cadono sull'arco luminoso perdevano contrasto e il testo si sbiadiva: una
	 * base scura le rende leggibili sia sul buio sia sulla luce, senza smettere
	 * di lasciar passare ciò che hanno dietro.
	 */
	background: rgb(22 14 16 / 0.42);
	border: 1px solid rgb(253 247 244 / 0.16);
	border-radius: 16px;
	backdrop-filter: blur(14px) saturate(1.1);
	transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.home .pms-hero__card:hover {
	background: rgb(22 14 16 / 0.52);
	transform: translateY(-2px);
}

.home .pms-hero__card-title {
	/*
	 * Il titolo sale con la descrizione, e solo quanto basta. La richiesta era di
	 * dare più presenza ai testi **senza che competano con i titoli**: alzando
	 * solo la descrizione sarebbe diventata il testo più grande della scheda, e
	 * la gerarchia si sarebbe invertita invece di rafforzarsi.
	 */
	font-size: clamp(0.9375rem, 1vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--hero-chiaro);
}

.home .pms-hero__card-text {
	/*
	 * Da 11 px a 13-15 px: alla misura di prima erano didascalie, e una garanzia
	 * che non si legge non garantisce niente. Restano sotto il titolo per corpo,
	 * peso e luminosità — tre segnali concordi, non uno solo.
	 */
	font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
	line-height: 1.5;
	color: var(--hero-tenue);
}

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

@media (max-width: 1080px) {
	.home .pms-hero__inner {
		padding-top: clamp(2rem, 5vw, 3.5rem);
	}

	.home .pms-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.home .pms-hero__inner {
		/*
		 * **Su schermo stretto il ritaglio cadeva sul cielo.** Con `cover` e una
		 * verticale al 62% la fotografia mostrava foschia e basta: la città —
		 * cioè il soggetto — restava fuori. L'inquadratura scende sui tetti.
		 */
		background-position: 56% 78%;
	}

	/*
	 * Su schermo stretto le promesse scorrono in orizzontale invece di
	 * allungare la Hero di quattro riquadri: la ricerca deve restare
	 * raggiungibile senza scorrere mezza pagina.
	 */
	.home .pms-hero__cards {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(210px, 1fr);
		gap: 0.625rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--hero-passo) * -1);
		padding-inline: var(--hero-passo);
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;

		/*
		 * **Lo scatto ignora il riempimento, e se lo mangiava.** La fascia sborda
		 * di proposito fino ai bordi dell'apertura e si rientra con il proprio
		 * riempimento, così la prima promessa comincia sull'asse del titolo. Ma
		 * `scroll-snap` allinea la scheda al bordo dello scorrevole, non al suo
		 * contenuto: al caricamento la fascia risultava già spostata di quei
		 * sedici pixel — `scrollLeft` partiva a sedici — e la prima scheda finiva
		 * appiccicata al bordo dello schermo, sedici pixel più a sinistra del
		 * titolo e dei due pulsanti. È lo scatto che va rientrato, non il
		 * contenuto: la stessa misura del riempimento, dichiarata una volta sola.
		 */
		scroll-padding-inline: var(--hero-passo);
	}

	.home .pms-hero__card { scroll-snap-align: start; }

	.home .pms-hero__actions .pms-button { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.home .pms-hero__actions .pms-button,
	.home .pms-hero__card { transition: none; }

	.home .pms-hero__actions .pms-button:hover,
	.home .pms-hero__card:hover { transform: none; }
}

/* ==========================================================================
 * Il visual della Hero
 *
 * Il peso visivo lo porta la fotografia. Al tema resta un gesto solo — le
 * promesse sfalsate invece che allineate in un rettangolo — e le regole di
 * quando il fondo era costruito con i gradienti non sopravvivono qui: l'arco di
 * luce e i filetti sono stati rimossi, e con loro i due blocchi adattivi che
 * continuavano a spostare uno pseudo-elemento che non esiste più.
 * ========================================================================== */

/* --- Le promesse, sfalsate ------------------------------------------------
 *
 * Erano un rettangolo di quattro celle uguali: ordinato e inerte. Sfalsate di
 * mezzo passo si leggono come una composizione, e la colonna destra scende più
 * in basso della sinistra — è così che sparisce la fascia vuota sotto le CTA,
 * riempita da qualcosa che c'era già invece che da contenuto nuovo.
 */
.home .pms-hero__cards {
	align-self: center;
	padding-block: clamp(1rem, 3vw, 2.5rem);
}

/*
 * **La prima scheda si misura sul proprio testo, non su quello accanto.**
 * Le celle di una riga sono alte quanto la più alta, e la scheda di destra ne
 * ha una in più: la prima veniva stirata fino a quell'altezza e il vuoto in
 * fondo — venti pixel — sembrava imbottitura sbagliata. Non lo era: era la
 * griglia. Ridurne l'imbottitura non avrebbe cambiato nulla, perché a imporre
 * l'altezza era la riga; qui la si lascia crescere per conto suo, e torna alta
 * quanto la scheda della riga sotto, che ha lo stesso testo.
 *
 * Vale per questa sola cella. Le altre restano stirate, perché in una riga di
 * due la seconda è quella che detta la misura e stirarla non produce alcun
 * vuoto.
 */
.home .pms-hero__cards > :nth-child(1) { align-self: start; }

.home .pms-hero__cards > :nth-child(odd) { transform: translateY(clamp(-2rem, -2.5vw, -1rem)); }
.home .pms-hero__cards > :nth-child(even) { transform: translateY(clamp(1rem, 2.5vw, 2rem)); }

.home .pms-hero__cards > :nth-child(odd):hover { transform: translateY(calc(clamp(-2rem, -2.5vw, -1rem) - 2px)); }
.home .pms-hero__cards > :nth-child(even):hover { transform: translateY(calc(clamp(1rem, 2.5vw, 2rem) - 2px)); }

/* --- Il testo, ancorato --------------------------------------------------- */

.home .pms-hero__content { align-self: center; }

/* --- Adattamento del visual ---------------------------------------------- */

@media (max-width: 1080px) {
	.home .pms-hero__cards > :nth-child(odd),
	.home .pms-hero__cards > :nth-child(even) { transform: none; }

	.home .pms-hero__cards > :nth-child(odd):hover,
	.home .pms-hero__cards > :nth-child(even):hover { transform: translateY(-2px); }

	/*
	 * **E la prima scheda torna alta come le altre.** Il vuoto da correggere
	 * esisteva nella composizione sfalsata della scrivania; qui le schede stanno
	 * in fila o in colonna e lasciarne una più bassa delle vicine produrrebbe il
	 * difetto opposto — un bordo inferiore frastagliato.
	 */
	.home .pms-hero__cards > :nth-child(1) { align-self: stretch; }

	/*
	 * **La composizione sfalsata era della scrivania, e con lei il suo
	 * allineamento.** Impilata, l'apertura non è più una griglia a due colonne ma
	 * una fila verticale, e un blocco centrato in una fila si stringe sul proprio
	 * contenuto: le quattro promesse affiancate misurano novecento pixel e
	 * uscivano dallo schermo. Qui la fascia occupa la larghezza che ha, e i
	 * riquadri tornano a scorrere dentro di essa come prima.
	 */
	.home .pms-hero__cards { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.home .pms-hero__cards > :nth-child(odd):hover,
	.home .pms-hero__cards > :nth-child(even):hover { transform: none; }
}


/* ==========================================================================
 * Perché affidarsi a noi
 *
 * **Era una tabella di servizi.** Cinque riquadri grigi su una fascia grigia, in
 * fondo alla pagina, con icone piccole come segnaposto: la forma che hanno le
 * sezioni «i nostri punti di forza» di qualunque sito aziendale, e che chi legge
 * scorre senza fermarsi perché sa già che non dirà niente.
 *
 * Qui non c'è più niente da contenere. Nessuna fascia, nessun riquadro, nessun
 * bordo: **solo quattro colonne di testo su carta bianca**, con un simbolo grande
 * in cima e molto vuoto intorno. È lo spazio a dire che vale la pena leggere —
 * un'informazione stretta in una scatola vale quanto la scatola, la stessa
 * informazione con del bianco attorno vale quanto le si è dato.
 * ========================================================================== */

/*
 * Nessun fondo dedicato. La sezione respira sulla stessa carta di tutto il
 * resto, e prende invece più aria sopra e sotto: è quella, non il grigio, a
 * separarla da ciò che la precede e la segue.
 */
/*
 * Nessun riempimento proprio: questa sezione aveva cento pixel sotto contro i
 * quaranta sopra, e quello scarto era ciò che allontanava gli alloggi dal mazzo
 * più di quanto il mazzo fosse lontano dall'apertura. Ora segue il ritmo comune,
 * che è poi la distanza già approvata fra apertura e mazzo.
 */
.home .pms-section--trust {
	background: none;

	/*
	 * **Il ritaglio sta qui, non intorno al mazzo.**
	 *
	 * Era sulla pila, larga quanto le carte più ventisei pixel: la carta che
	 * usciva — spinta dalla freccia o trascinata con il dito — incontrava quel
	 * bordo dopo un dito di corsa e veniva **tagliata di netto**, con la pagina
	 * bianca visibile subito oltre. Si vedeva mezza carta con un lato dritto, che
	 * è esattamente ciò che un mazzo non fa.
	 *
	 * Il ritaglio serve, ma serve dove la pagina finisce: la sezione non ha
	 * riempimento laterale, quindi il suo bordo è il bordo dello schermo. La carta
	 * esce di scena invece di essere affettata, e la pagina continua a non
	 * scorrere in orizzontale.
	 *
	 * `clip` invece di `hidden` perché non crea un contenitore di scorrimento e
	 * lascia l'asse verticale intatto: le ombre delle carte non vengono toccate.
	 */
	overflow-x: clip;
}

/* Dove `clip` non esiste, il ritaglio resta al bordo dello schermo lo stesso. */
@supports not (overflow-x: clip) {
	.home .pms-section--trust { overflow: hidden; }
}

/* --- Il titolo, al centro -------------------------------------------------
 *
 * Le altre sezioni hanno il titolo a sinistra e un collegamento a destra: sono
 * elenchi da sfogliare. Questa non porta da nessuna parte — è una dichiarazione,
 * e una dichiarazione sta al centro.
 */

.home .pms-section--trust .pms-section__header {
	display: block;
	text-align: center;
	margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.home .pms-section--trust .pms-section__title {
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	letter-spacing: -0.02em;
}

/*
 * **Un segno, non una riga di separazione.** Una linea da un capo all'altro
 * dividerebbe la sezione in due; questa è larga quanto una parola, sta sotto il
 * titolo e porta l'unico tocco di colore della composizione — quello scelto nel
 * pannello.
 *
 * Il segno è dichiarato una volta per le due sezioni che lo portano; cambia solo
 * dove si allinea, e quella differenza è l'unica cosa scritta due volte.
 */
.home .pms-section--trust .pms-section__title::after,
.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .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);
}

/* Sotto il centro del titolo, che lì è centrato. */
.home .pms-section--trust .pms-section__title::after { margin-inline: auto; }


/* --- Il mazzo -------------------------------------------------------------
 *
 * **Quattro colonne dicono tutto insieme e non fanno guardare niente.** Il mazzo
 * ne mostra una alla volta, grande, e lascia intravedere che ce ne sono altre:
 * chi arriva vede una scheda sola — quindi la legge — e capisce in un colpo
 * d'occhio che il componente si muove, senza che nessuna scritta glielo dica.
 *
 * Le carte dietro non sono ruotate come un mazzo da gioco: scendono di diciotto
 * pixel, rimpiccioliscono di poco più del tre per cento e ruotano di mezzo grado.
 * È la profondità di una risma di carta, non di una mano di poker.
 */

.home .pms-deck {
	--pms-deck-passo: 20px;   /* quanto scende ogni carta dietro */
	--pms-deck-aria: 26px;    /* spazio laterale per l'ombra dentro il ritaglio */

	/*
	 * L'altezza è tarata sul contenuto più lungo — tre righe di testo e un titolo
	 * su due — con l'aria che serve e non di più: alla misura di prima la carta
	 * era per un terzo vuota e sembrava un riquadro in attesa di qualcosa.
	 */
	--pms-deck-h: clamp(18rem, 22vw, 21rem);

	max-width: 40rem;
	margin-inline: auto;
}

/*
 * **Senza JavaScript il mazzo non esiste**, e le quattro schede restano quattro
 * blocchi in colonna: leggibili, uno sotto l'altro, senza che nessuna copra le
 * altre. La classe la mette lo script solo dopo aver trovato GSAP.
 */
.home .pms-deck:not(.is-ready) .pms-deck__card + .pms-deck__card { margin-top: 1rem; }
.home .pms-deck:not(.is-ready) .pms-deck__nav { display: none; }

/* --- La pila -------------------------------------------------------------- */

.home .pms-deck.is-ready .pms-deck__stack {
	position: relative;

	/*
	 * **Qui non si ritaglia niente.** La carta in uscita deve poter attraversare
	 * lo spazio bianco ai lati del mazzo: a ritagliarla a ventisei pixel dal
	 * proprio bordo se ne vedeva la sezione, dritta, in mezzo alla pagina. Il
	 * ritaglio che impedisce lo scorrimento orizzontale è sulla sezione.
	 */
	overflow: visible;
	height: calc(var(--pms-deck-h) + var(--pms-deck-passo) * 3 + 2rem);
	touch-action: pan-y;
}

.home .pms-deck.is-ready .pms-deck__card {
	position: absolute;
	top: 4px;
	left: var(--pms-deck-aria);
	right: var(--pms-deck-aria);
	height: var(--pms-deck-h);
	margin: 0;

	/* Il puntatore dice che si può prendere. Lo cambia poi Draggable. */
	cursor: grab;
	will-change: transform;
}

/* --- I comandi ------------------------------------------------------------ */

.home .pms-deck__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.25rem, 2.4vw, 2rem);
}

.home .pms-deck__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.home .pms-deck__arrow .pms-icon { width: 22px; height: 22px; }

.home .pms-deck__arrow:hover {
	background: var(--color-surface-hover);
	border-color: var(--color-text);
}

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

/* Quattro punti: dicono quante sono e a che punto si è, e nient'altro. */
.home .pms-deck__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home .pms-deck__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-text) 18%, transparent);
	transition: background-color var(--motion-base) ease, transform var(--motion-base) ease;
}

.home .pms-deck__dot.is-current {
	background: var(--color-primary);
	transform: scale(1.5);
}

/* Il fuoco da tastiera sulla pila è visibile quanto quello sui pulsanti. */
.home .pms-deck__stack:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 6px;
	border-radius: var(--radius-container);
}

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

@media (max-width: 1080px) {
	.home .pms-deck { max-width: 34rem; }
}

@media (max-width: 640px) {
	.home .pms-deck {
		--pms-deck-passo: 14px;
		--pms-deck-aria: 16px;
		--pms-deck-h: clamp(20rem, 78vw, 23rem);
	}
}

/*
 * Chi ha chiesto meno movimento tiene il mazzo: cambiano le carte, non la scena.
 * Lo script azzera le durate; qui restano le transizioni dei comandi.
 */
@media (prefers-reduced-motion: reduce) {
	.home .pms-deck__arrow,
	.home .pms-deck__dot { transition: none; }

	.home .pms-deck__dot.is-current { transform: none; }
}

/* ==========================================================================
 * I nostri alloggi
 *
 * **La fotografia è la scheda.** Prima era un riquadro bianco con dentro
 * un'immagine in tre a due, un titolo, tre dati e un prezzo: la forma di un
 * portale immobiliare, dove la foto documenta e il testo vende. In ospitalità è
 * il contrario — si sceglie un posto perché lo si è visto — quindi l'immagine
 * prende una proporzione verticale, occupa i tre quarti della scheda, e il resto
 * le sta sotto **senza contenitore**: niente fondo, niente bordo, niente ombra
 * attorno al testo. Una scatola bianca su una pagina bianca non separa nulla,
 * aggiunge solo un contorno da guardare.
 * ========================================================================== */

/*
 * Titolo a sinistra con il suo segno, invito a destra, sulla stessa riga.
 *
 * Le recensioni non sono più in questo elenco: la loro intestazione appartiene
 * al componente — vive anche fuori di qui — e sta in `cards.css` con il resto.
 */
.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .pms-section__header {
	margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
}

/*
 * **Un invito, non un pulsante.** Il riquadro pieno pesava quanto una delle
 * quattro schede e chiedeva di andare altrove prima di aver mostrato qualcosa.
 * Qui è testo nel colore scelto dal pannello, con la freccia che dice la
 * direzione: nessun bordo, nessun fondo, nessuna sottolineatura — quella la
 * porta già il titolo accanto, e due segni sulla stessa riga sono uno di troppo.
 */
.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .pms-section__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-bottom: 0;
	color: var(--color-primary);
	border-bottom: 0;
}

.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .pms-section__more .pms-icon {
	width: 16px;
	height: 16px;
	transition: transform var(--motion-fast) ease;
}

.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .pms-section__more:hover .pms-icon { transform: translateX(3px); }

/*
 * Quattro colonne dichiarate. `auto-fill` è giusto per una griglia che non sa
 * quante schede riceverà — la ricerca — ma qui le schede sono quattro e la
 * composizione è una riga sola: che diventino tre o cinque a seconda della
 * finestra non è adattamento, è casualità.
 */
.home :is(.pms-section--properties, .pms-section--experiences) .pms-grid--cards {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.4vw, 2.25rem);
}


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

@media (max-width: 1080px) {
	.home :is(.pms-section--properties, .pms-section--experiences) .pms-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.home :is(.pms-section--properties, .pms-section--experiences) .pms-grid--cards {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/*
	 * A colonna singola la fotografia si allarga per tutta la finestra: il
	 * rapporto resta quello, e a 343 px di larghezza sono 257 di altezza —
	 * abbastanza per essere la prima cosa che si guarda, non tanto da costringere
	 * a scorrere per leggere il prezzo.
	 */
}

/* Le schede non si muovono più: resta da fermare la freccia dell'invito. */
@media (prefers-reduced-motion: reduce) {
	.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .pms-section__more .pms-icon { transition: none; }
	.home :is(.pms-section--properties, .pms-section--experiences, .pms-section--places) .pms-section__more:hover .pms-icon { transform: none; }
}


/* ==========================================================================
 * LA PROSSIMA TAPPA
 *
 * **Solo fotografia.** Le due sezioni sopra sono elenchi da confrontare: hanno
 * dati, prezzi, un corpo di testo sotto l'immagine. Questa non si confronta —
 * si sceglie. Un nome e un luogo, e la decisione è presa: qualunque altra cosa
 * scritta in un riquadro di destinazione è informazione che nessuno sta
 * cercando in quel momento.
 *
 * **Verticale, per non essere una terza fila uguale.** Con lo stesso quattro a
 * tre delle schede, la homepage avrebbe mostrato tre file identiche di
 * rettangoli: il ritratto le distingue a colpo d'occhio, dà alla fotografia lo
 * spazio che le altre due dedicano al testo, e resta nello stesso contenitore e
 * nello stesso ritmo.
 * ========================================================================== */

.home .pms-grid--places {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.4vw, 2.25rem);
}

/*
 * **Bianco, non il colore di contrasto dell'accento.** Il nome sta sopra una
 * fotografia scurita, non sopra l'accento: il token di contrasto diventa nero
 * quando chi amministra sceglie un accento chiaro, e un nome nero su un velo
 * scuro non si legge. Qui il fondo lo decide il velo, che è sempre scuro.
 */
.home .pms-place__link { color: #fff; }

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

/*
 * **La fotografia si avvicina, il riquadro sta fermo.** Sollevare la tessera
 * avrebbe rifatto l'errore già corretto sulle schede: quattro immagini
 * affiancate che si muovono chiamano l'occhio su quella sbagliata. Qui a
 * muoversi è ciò che si sta guardando, dentro un contorno che non cambia.
 */
.home .pms-place__media img {
	transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}

.home .pms-place__link:hover .pms-place__media img { transform: scale(1.04); }

/*
 * Il velo parte da più in alto delle altre gradazioni del sito: il nome è
 * grande e bianco, e sotto ci può capitare un cielo chiaro come una facciata
 * scura. Serve che sia leggibile su entrambi senza diventare una fascia nera.
 */
.home .pms-place__overlay {
	background: linear-gradient(to top, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 28%) 34%, transparent 68%);
}

.home .pms-place__body {
	left: clamp(0.875rem, 1.6vw, 1.25rem);
	right: clamp(0.875rem, 1.6vw, 1.25rem);
	bottom: clamp(0.75rem, 1.4vw, 1.125rem);
}

.home .pms-place__name {
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}

/* Il contorno da tastiera sta fuori dal riquadro, che ha i suoi angoli tondi. */
.home .pms-place__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

@media (max-width: 1080px) {
	.home .pms-grid--places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	/*
	 * Una per riga, e il ritratto si abbassa: a tutta larghezza un quattro a
	 * cinque sarebbe alto quattrocento pixel, e per vedere la quarta destinazione
	 * bisognerebbe scorrere quattro schermate.
	 */
	.home .pms-grid--places { grid-template-columns: 1fr; gap: 1.25rem; }
	.home .pms-place__media { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
	.home .pms-place__media img { transition: none; }
	.home .pms-place__link:hover .pms-place__media img { transform: none; }
}


/* ==========================================================================
 * DICONO DI NOI
 *
 * **Il disegno della sezione non abita più qui.** Riquadro, tipografie,
 * miniatura e comportamento delle due righe stavano sotto `.home`, ma sono il
 * componente «recensione» e il componente «carosello»: la pagina dei proprietari
 * ha ora un proprio insieme di recensioni con lo stesso linguaggio visivo, e
 * riscriverne i valori accanto sarebbe stato lo stesso disegno scritto due
 * volte. Vivono in `cards.css`, dove già vive la carta del mazzo, e da lì
 * servono chiunque li renda.
 *
 * Qui non resta niente perché non c'era niente di proprio della pagina
 * iniziale: la sezione usava il componente e basta.
 * ========================================================================== */