/*
 * Schede di alloggio ed esperienza.
 */

.pms-single { padding: 24px 0 64px; }

.pms-single__header-inner,
.pms-single__body,
.pms-gallery {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.pms-single__title { margin: 0 0 8px; font-size: calc(var(--step-8) * 1.3); }

.pms-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 10px;
	font-size: var(--step-4);
	color: var(--color-muted-strong);
}

.pms-single__places { display: flex; flex-wrap: wrap; gap: 8px; }
.pms-single__places a { font-size: var(--step-3); text-decoration: none; }

.pms-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 8px;
	margin-top: 18px;
	margin-bottom: 28px;
}

.pms-gallery__item { margin: 0; border-radius: var(--radius-control); overflow: hidden; aspect-ratio: 4 / 3; }
.pms-gallery__item--lead { grid-row: span 2; aspect-ratio: 16 / 11; }

.pms-single__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
}

.pms-single__content,
.pms-single__aside { min-width: 0; }

.pms-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	padding: 16px 0 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}

.pms-facts__value { display: block; font-size: var(--step-7); font-weight: 800; color: var(--color-heading); }
.pms-facts__label { display: block; font-size: var(--step-3); color: var(--color-muted); }

.pms-single__section-title { margin: 28px 0 12px; }

.pms-amenities { display: flex; flex-wrap: wrap; gap: 8px; }

.pms-amenities li a {
	display: inline-block;
	padding: 5px 12px;
	font-size: var(--step-3);
	text-decoration: none;
	color: var(--color-text);
	background: var(--color-surface-soft);
	border: 1px solid var(--color-border);
	border-radius: 999px;
}

/* --------------------------------------------------------------- pannello. */

.pms-single__aside { position: sticky; top: 92px; }

.pms-single__panel {
	padding: 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-container);
	box-shadow: var(--shadow-soft);
}

.pms-single__price { margin: 0 0 16px; }
.pms-single__amount { font-size: calc(var(--step-8) * 1.1); font-weight: 800; color: var(--color-heading); }
.pms-single__price-note { display: block; font-size: var(--step-3); color: var(--color-muted); }

/* -------------------------------------------------------------- calendario. */

.pms-calendar { margin-top: 32px; }

.pms-calendar__months {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 20px;
}

.pms-calendar__month { width: 100%; border-collapse: collapse; }
.pms-calendar__caption { text-align: left; font-weight: 800; font-size: var(--step-5); padding-bottom: 6px; }

.pms-calendar__day {
	padding: 6px 0;
	text-align: center;
	font-size: var(--step-3);
	border-radius: var(--radius-check);
}

.pms-calendar__day.is-busy {
	color: var(--color-disabled);
	text-decoration: line-through;
	background: var(--color-disabled-surface);
}

.pms-calendar__day.is-free { color: var(--color-text); }

.pms-calendar__note,
.pms-calendar__freshness {
	margin: 12px 0 0;
	font-size: var(--step-3);
	color: var(--color-muted);
}

@media (max-width: 1080px) {
	.pms-single__body { grid-template-columns: 1fr; }
	.pms-single__aside { position: static; }
	.pms-gallery { grid-template-columns: 1fr 1fr; }
	.pms-gallery__item--lead { grid-column: span 2; grid-row: auto; }
}

/* ==========================================================================
 * LA SCHEDA DI UN ALLOGGIO
 *
 * **Poche superfici, molta aria.** Nessun riquadro attorno al titolo, nessun
 * bordo decorativo, nessuna pastiglia: le sezioni si separano con lo spazio e
 * un filetto, come nel resto del sito. L'unica superficie disegnata è il
 * riquadro della prenotazione, perché è l'unica cosa che si preme.
 * ========================================================================== */

.pms-stay { padding: 24px 0 72px; }

.pms-stay__head,
.pms-stay__body,
.pms-stage {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.pms-stay__head { margin-bottom: 18px; }

/*
 * **Un solo clamp per tutta la scala.** Il titolo di una scheda non è l'insegna
 * della home: nomina una casa, e sopra di esso c'è già la testata a dire dove si
 * è. Trentadue pixel sul desktop, ventotto al tablet, ventisei sul telefono —
 * resta il testo più grande della pagina, ma la galleria e ciò che si legge
 * vengono prima di lui.
 *
 * Una dichiarazione sola invece di una regola e la sua eccezione: la parte in
 * `vw` porta da una misura all'altra senza scatti, e i due estremi chiudono la
 * scala dove non deve andare oltre.
 */
.pms-stay__title {
	margin: 0 0 6px;
	font-size: clamp(26px, 1vw + 17.6px, 32px);
	line-height: 1.15;
}

.pms-stay__where {
	margin: 0;
	font-size: var(--text-meta);
	color: var(--color-muted-strong);
}

/* --- La galleria editoriale ----------------------------------------------
 *
 * Una fotografia grande a sinistra e le altre in due colonne accanto: è la
 * proporzione con cui si guarda una casa. Con meno fotografie la griglia si
 * accorcia da sé — nessuna viene ripetuta per riempire un riquadro.
 *
 * **L'altezza è un tetto, non una proporzione.** Con il rapporto due a uno la
 * griglia cresceva insieme alla pagina: su uno schermo largo occupava quasi
 * tutta la prima schermata, e sotto non restava niente da leggere. Ora si misura
 * sulla finestra e si ferma: le celle mantengono da sole una proporzione di
 * circa tre a due, che è quella con cui una fotografia di architettura si
 * guarda, e a qualunque larghezza sotto la galleria comincia già il testo.
 */

.pms-stage { position: relative; margin-bottom: 28px; }

.pms-stage__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;

	/*
	 * **Le righe si dividono l'altezza, non la chiedono alle fotografie.** Con
	 * `1fr` puro il minimo di ciascuna resta la misura naturale dell'immagine, e
	 * una fotografia più alta del previsto sfondava il tetto invece di essere
	 * ritagliata: il minimo esplicito a zero è ciò che rende il tetto un tetto.
	 */
	grid-auto-rows: minmax(0, 1fr);
	gap: 8px;
	height: min(30vw, 440px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pms-stage__cell { margin: 0; min-width: 0; min-height: 0; }

.pms-stage__cell--lead { grid-row: span 2; }

/*
 * **Nessuna casella resta vuota, a nessun numero di fotografie.** Con due, la
 * grande non si allunga su due righe — la seconda riga non avrebbe nulla da
 * ospitare; con quattro, l'ultima occupa entrambe le colonne di destra. Il buco
 * in fondo a una griglia si nota più di una fotografia in meno.
 */
.pms-stage--2 .pms-stage__grid,
.pms-stage--3 .pms-stage__grid { grid-template-columns: 2fr 1fr; }

.pms-stage--2 .pms-stage__cell--lead { grid-row: auto; }

.pms-stage--4 .pms-stage__cell:last-child { grid-column: span 2; }

.pms-stage--1 .pms-stage__grid { grid-template-columns: 1fr; }

.pms-stage__shot {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: var(--color-surface-soft);
	border: 0;
	border-radius: var(--radius-container);
	cursor: pointer;
}

.pms-stage__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/*
 * Il comando galleggia sull'ultima fotografia, come su ogni sito di ospitalità:
 * è lì che l'occhio arriva quando ha finito di guardare.
 */
.pms-stage__all {
	position: absolute;
	right: calc(var(--gutter) + 14px);
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	font: inherit;
	font-size: var(--step-2);
	font-weight: 600;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	cursor: pointer;
}

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

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

.pms-stage__all .pms-icon { width: 18px; height: 18px; }

.pms-stage__dots { display: none; }

/* --- Corpo: contenuti e prenotazione -------------------------------------- */

.pms-stay__body {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.pms-stay__main { min-width: 0; }

/*
 * La colonna è alta quanto il riquadro che contiene: allungarla serviva a dare
 * strada a un riquadro appiccicato, e non c'è più niente da far scorrere dentro.
 */
.pms-stay__aside { min-width: 0; }

.pms-stay__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0 0 4px;
	padding: 0 0 20px;
	list-style: none;
	font-size: var(--text-meta);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

.pms-stay__facts li { display: flex; align-items: center; gap: 8px; }
.pms-stay__facts .pms-icon { width: 22px; height: 22px; color: var(--color-muted-strong); }

.pms-stay__section {
	padding: 26px 0;
	border-bottom: 1px solid var(--color-border);
}

.pms-stay__section:last-child { border-bottom: 0; }

.pms-stay__section-title {
	margin: 0 0 14px;
	font-size: var(--text-section);
	font-weight: 700;
}

/* --- Descrizione: si chiude con una dissolvenza, non con un taglio --------
 *
 * Il testo nel documento è **uno solo e intero**. Chiuso, il blocco è alto
 * quanto la soglia e l'ultima riga svanisce: si capisce che continua. Aperto,
 * l'altezza sparisce e con essa la sfumatura. Nessuna ellissi, nessuna seconda
 * copia, nessun troncamento del testo.
 */

.pms-prose {
	position: relative;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
	color: var(--color-text);
}

.pms-prose p { margin: 0 0 1em; }
.pms-prose p:last-child { margin-bottom: 0; }

/*
 * **L'altezza chiusa sta sotto ciò che la soglia lascia passare.** Il modello
 * decide con i caratteri — seicento — e questa misura deve garantire che a
 * seicento caratteri ci sia davvero qualcosa da scoprire, a qualunque larghezza:
 * sulla colonna più larga del sito seicento caratteri sono circa sei righe, e
 * cinque righe e mezzo restano sempre di meno. Su una colonna stretta le righe
 * sono di più, e il taglio è ancora più netto. Un'altezza generosa avrebbe
 * lasciato il comando accanto a un testo interamente visibile.
 */
.pms-prose.is-clamped {
	max-height: 9.5em;
	overflow: hidden;
}

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

/*
 * Il comando che apre — «Visualizza altro» — vive in `base.css`: lo usano la
 * descrizione e i servizi di questa scheda, e anche le recensioni, che compaiono
 * su pagine dove questo foglio non arriva.
 */

/* --- Servizi: dieci, poi il resto ---------------------------------------- */

.pms-services { position: relative; }

.pms-services__group + .pms-services__group { margin-top: 18px; }

.pms-services__name {
	margin: 0 0 8px;
	font-size: var(--step-5);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.pms-services__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pms-services__item {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	gap: 12px;
	min-height: 38px;
	font-size: var(--text-body);
}

.pms-services__item .pms-icon { width: 22px; height: 22px; color: var(--color-muted-strong); }

/*
 * Chiusi, i servizi oltre il decimo non esistono per il documento: non è un
 * ritaglio ottico ma la stessa marcatura che smette di occupare spazio, così
 * sotto non resta una fascia vuota da coprire.
 */
.pms-services.is-clamped .pms-services__item.is-extra { display: none; }

/* Un titolo di categoria sopra un elenco vuoto annuncia qualcosa che non c'è. */
.pms-services.is-clamped .pms-services__group.is-extra { display: none; }

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

/* --- Orari e regole -------------------------------------------------------
 *
 * **Due colonne strette, non due righe distese.** Le voci sono poche e corte:
 * distribuite su tutta la larghezza lasciavano il check-in a un capo e il
 * check-out all'altro, con in mezzo un vuoto che non voleva dire nulla. Gli
 * orari prendono una colonna fissa, le regole quella che resta, e un filetto
 * verticale le divide — nessun riquadro attorno alle singole voci, che non sono
 * cose da premere.
 */

.pms-stay__info {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 22px 36px;
	align-items: start;
}

/* Con un solo blocco la colonna stretta lo comprimerebbe: prende tutta la riga. */
.pms-stay__info > :only-child { grid-column: 1 / -1; }

.pms-stay__info-block--rules {
	padding-left: 36px;
	border-left: 1px solid var(--color-border);
}

.pms-stay__info > .pms-stay__info-block--rules:only-child {
	padding-left: 0;
	border-left: 0;
}

.pms-stay__info-title {
	margin: 0 0 10px;
	font-size: var(--step-5);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.pms-hours,
.pms-rules {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pms-hours li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0 12px;
	align-items: center;
}

.pms-hours .pms-icon,
.pms-rules .pms-icon { width: 22px; height: 22px; color: var(--color-muted-strong); }

.pms-hours__label {
	font-size: var(--step-5);
	font-weight: 700;
	color: var(--color-muted-strong);
}

.pms-hours__value {
	grid-column: 2;
	font-size: var(--text-body);
}

/*
 * **La riga non è una griglia a colonne fisse.** Lo era, e la prima colonna
 * valeva ventidue pixel: quando un'icona non veniva resa — un nome non presente
 * nel repertorio non produce nulla — il testo prendeva il posto dell'icona e si
 * incolonnava una parola per riga, «30,00 / € a / persona». Una fila elastica
 * non ha un posto da lasciare vuoto: senza icona il testo comincia da sinistra,
 * con l'icona le resta accanto.
 */
.pms-rules li {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: var(--text-body);
}

.pms-rules .pms-icon { flex: none; }

/*
 * **I codici sono una targa, e si leggono come una targa.** Nome a sinistra,
 * numero a destra, uno per riga: l'occhio scende sulla colonna dei numeri e
 * confronta, invece di rileggere ogni volta a quale codice appartenga la
 * sequenza che sta guardando.
 *
 * Il numero non va a capo — spezzato in due righe non è più un codice — e usa le
 * cifre a larghezza fissa, così due codici della stessa lunghezza si incolonnano
 * anche nella cifra.
 */
.pms-codes {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 32rem;
}

.pms-codes__row {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--text-body);
}

.pms-codes__label {
	font-size: var(--step-5);
	font-weight: 700;
	color: var(--color-muted-strong);
}

.pms-codes__value {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Un elemento elastico non scende sotto il proprio contenuto se non glielo si concede. */
.pms-rules li > span { min-width: 0; }

/*
 * **Le parti di una fascia stanno insieme finché c'è spazio.** Nome, età e
 * tariffa sono una frase sola: vanno a capo fra un pezzo e l'altro, mai dentro
 * un importo, e il punto medio resta alla fine della riga che continua invece di
 * aprire quella dopo.
 */
.pms-rules__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	row-gap: 2px;
}

.pms-rules__part { white-space: nowrap; }

.pms-rules__part:not(:last-child)::after {
	content: " ·";
	color: var(--color-muted);
}

.pms-rules__label { font-weight: 600; }

/* --- Regolamento: un comando, e una finestra sopra la pagina --------------
 *
 * **Un pulsante che si vede, sotto le regole.** Il regolamento è un testo che
 * qualcuno deve poter trovare prima di prenotare: sta in fondo alle
 * informazioni, con il bordo e il simbolo dei comandi che aprono qualcosa, non
 * con il tratto sottile di un «Vedi altro».
 *
 * **Senza copioni è un riquadro che si apre sotto il comando**, con il testo
 * dentro; con i copioni lo stesso comando apre la finestra. Il pulsante ha lo
 * stesso aspetto nei due casi, perché è la stessa cosa.
 */

.pms-rulebook { margin-top: 20px; }

.pms-stay__section-title + .pms-rulebook { margin-top: 0; }

.pms-rulebook__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	font: inherit;
	font-size: var(--step-6);
	font-weight: 600;
	color: var(--color-text);
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	cursor: pointer;
}

.pms-rulebook__open::-webkit-details-marker { display: none; }

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

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

.pms-rulebook__open .pms-icon { width: 18px; height: 18px; color: var(--color-muted-strong); }

.pms-rulebook__details[open] .pms-rulebook__text { margin-top: 16px; }

.pms-rulebook__text {
	font-size: var(--text-body);
	line-height: var(--line-height-text);
}

.pms-rulebook__text p { margin: 0 0 0.9em; }

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

/*
 * Gli elenchi e i collegamenti che chi amministra può scrivere. Colore e
 * dimensione del carattere, quando scelti, arrivano già scritti nel testo.
 */
.pms-rulebook__text ul,
.pms-rulebook__text ol { margin: 0 0 0.9em; padding-left: 1.4em; }

.pms-rulebook__text li + li { margin-top: 0.3em; }

.pms-rulebook__text a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }

/*
 * **La finestra occupa lo schermo con un velo leggero.** Il velo è l'elemento
 * stesso e non il suo `::backdrop`, che nei browser meno recenti non eredita le
 * variabili del tema e resterebbe trasparente: così il colore viene sempre dai
 * token, e premere fuori dal pannello è premere sulla finestra — il gesto con
 * cui la si chiude. Il pannello sta al centro e scorre al suo interno, mai la
 * pagina sotto.
 */
.pms-dialog-open { overflow: hidden; }

.pms-dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 24px;
	color: var(--color-text);
	background: var(--color-overlay-soft);
	border: 0;
}

.pms-dialog[open] {
	display: grid;
	place-items: center;
}

.pms-dialog::backdrop { background: transparent; }

.pms-dialog__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(640px, 100%);
	max-height: min(80vh, 760px);
	overflow: hidden;
	background: var(--color-surface);
	border-radius: var(--radius-container);
	box-shadow: var(--shadow-popover);
}

.pms-dialog__head {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px 16px 24px;
	border-bottom: 1px solid var(--color-border);
}

.pms-dialog__title {
	margin: 0;
	font-size: var(--text-section);
	font-weight: 700;
}

.pms-dialog__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--color-text);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

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

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

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

.pms-dialog__body {
	padding: 20px 24px 44px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * **Dove si può scorrere, e lo si dice senza parole.** Quando il testo è più
 * lungo della finestra, in basso compare una freccia piccola che va su e giù:
 * punta in giù finché sotto c'è altro, e arrivati in fondo si gira in su, a dire
 * che si può risalire. Con un testo corto non compare. Non è un comando ma un
 * segnale, e non si mette fra chi legge e il testo: il tocco la attraversa, e
 * il corpo ha in fondo lo spazio per lei, così l'ultima riga non le sta sotto.
 */
.pms-dialog__more {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	color: var(--color-muted-strong);
	pointer-events: none;
}

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

.pms-dialog__more .pms-icon { width: 24px; height: 24px; }

.pms-dialog__more.is-su .pms-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
	.pms-dialog[open] { animation: pms-dialog-velo 180ms ease-out; }

	.pms-dialog[open] .pms-dialog__panel { animation: pms-dialog-pannello 220ms ease-out; }

	.pms-dialog__more { animation: pms-dialog-altro 1.4s ease-in-out infinite; }

	.pms-dialog__more .pms-icon { transition: transform 200ms ease; }
}

@keyframes pms-dialog-altro {
	0%,
	100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

@keyframes pms-dialog-velo {
	from { opacity: 0; }
}

@keyframes pms-dialog-pannello {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

/* --- Recensioni ----------------------------------------------------------- */

/*
 * **Due alla volta, e le altre si vanno a prendere.** Le recensioni erano una
 * griglia che andava a capo: con cinque, la scheda diventava una colonna di
 * riquadri alta quanto mezza pagina, e la sezione più lunga dell'alloggio che
 * descrive. Ora sono una striscia che scorre — due schede su schermo largo, una
 * su schermo stretto — e la sezione occupa sempre la stessa altezza, comunque
 * vadano le recensioni.
 *
 * **Scorre chi legge, non la pagina da sé.** Nessun giro automatico e nessuna
 * copia: il carosello della pagina iniziale gira perché lì le recensioni sono
 * un'impressione di passaggio, qui sono una delle ragioni per cui si decide di
 * prenotare e si leggono parola per parola. Una scheda che si sposta mentre la
 * si legge è un difetto, non un'animazione. L'aggancio è quello nativo: il dito
 * la muove con l'inerzia del sistema e nessuno script si mette in mezzo.
 *
 * **La barra di scorrimento resta visibile**, al contrario delle gallerie di
 * fotografie che la nascondono perché finirebbe sopra l'immagine. Qui sotto non
 * c'è niente da coprire, ed è il solo segno che dice che oltre il bordo c'è
 * dell'altro.
 */
.pms-reviews {
	--pms-recensioni-scarto: 18px;

	/* Quanto della scheda seguente si affaccia dal bordo destro. */
	--pms-recensioni-sbirciata: 42px;

	display: flex;
	gap: var(--pms-recensioni-scarto);
	margin: 0;

	/*
	 * **La striscia non può essere più larga di dove sta.** Senza una misura
	 * dichiarata la larghezza è «automatica», e basta un motore che la calcoli
	 * sul contenuto invece che sul contenitore perché le schede spingano la
	 * pagina e la si possa trascinare di lato. È la stessa misura che porta la
	 * striscia della galleria a tutto schermo, per la stessa ragione.
	 */
	width: 100%;
	max-width: 100%;
	min-width: 0;

	/* Spazio per la barra, così non si siede sul bordo delle schede. */
	padding: 0 0 10px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;

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

/*
 * **Una scheda per volta, anche qui.** Le schede della striscia si stiravano
 * all'altezza della più alta: aprendo una recensione con «Visualizza altro»
 * crescevano anche le vicine, che non era stato chiesto a nessuna di loro.
 * Lasciate alla propria altezza si aprono una alla volta, e a riposo restano
 * vicine perché l'estratto le porta quasi tutte alla stessa misura.
 */
.pms-reviews { align-items: flex-start; }

.pms-reviews > li {
	display: flex;
	flex: 0 0 calc( ( 100% - var( --pms-recensioni-scarto ) ) / 2 );
	scroll-snap-align: start;
}

/*
 * **Chi legge deve sapere che ce n'è un'altra.** Due schede che riempiono la
 * riga fino ai bordi non dicono niente su ciò che sta oltre: la sezione sembra
 * finita lì, e la terza recensione non la trova nessuno. Si toglie quindi una
 * fetta alla larghezza e la si lascia alla scheda successiva, che si affaccia
 * dal bordo: è il solo modo di dirlo che non aggiunge un comando, non chiede uno
 * script e non mente sul numero — la terza si vede *perché c'è*, non perché
 * qualcuno l'ha annunciata.
 *
 * **Solo quando ce n'è davvero un'altra.** La condizione è sull'esistenza della
 * terza scheda, non sulla larghezza: con due sole recensioni la riga si riempie
 * per intero, senza uno spazio vuoto sul bordo che si leggerebbe come un difetto
 * di impaginazione. Su schermo stretto la soglia scende alla seconda, che è
 * dove là si smette di vedere.
 */
.pms-reviews:has( > li:nth-child( 3 ) ) > li {
	flex-basis: calc( ( 100% - var( --pms-recensioni-scarto ) - var( --pms-recensioni-sbirciata ) ) / 2 );
}

/* Tutte alte uguale: la striscia le allinea, la scheda riempie ciò che le tocca. */
.pms-reviews > li > .pms-review { width: 100%; }

/*
 * **La scheda deve ancorare ciò che contiene, o la pagina si trascina di lato.**
 * Dentro la valutazione c'è la sua versione a parole — «Valutazione: 5 su 5» —
 * che si legge solo con un lettore di schermo, e WordPress la toglie dalla vista
 * posizionandola **in assoluto**. Un elemento posizionato così si ancora al primo
 * antenato posizionato: se non ce n'è, si ancora al documento, e da lì
 * `overflow` non lo ritaglia più — perché non è più contenuto in ciò che
 * scorre. Con quattro recensioni, la quarta di quelle etichette finiva a
 * millecento pixel dal bordo sinistro della pagina e la pagina diventava larga
 * altrettanto: su un telefono la si trascinava di lato, e ciò che si vedeva era
 * tutta la scheda spostata, senza alcun modo di capire perché.
 *
 * Basta che la scheda sia essa stessa un'ancora. Non cambia nulla di come si
 * vede — `relative` senza scostamenti non muove niente — e riporta l'etichetta
 * dentro la striscia, dove il ritaglio la raggiunge. Misurato: la larghezza del
 * documento torna esatta a quella della finestra.
 */
.pms-reviews .pms-review {
	position: relative;
}

/*
 * **Una sola recensione occupa la riga, non metà.** La misura da due serve a
 * far vedere che ce n'è un'altra accanto; con una sola non c'è nessun'altra, e
 * mezza riga vuota si legge come un difetto di impaginazione.
 */
.pms-reviews:has( > li:only-child ) > li {
	flex-basis: 100%;
}

/*
 * **La stessa recensione, letta in due posti diversi.** Nel carosello della home
 * scorre accanto ad altre e vale come impressione; qui è una delle ragioni per
 * cui si decide di prenotare, e si legge parola per parola. Il corpo cresce
 * soltanto dentro la scheda — la card della home resta quella approvata — e chi
 * l'ha scritta resta un dato di contorno.
 */
.pms-stay .pms-review__body { font-size: var(--text-body); line-height: var(--line-height-text); }
.pms-stay .pms-review__author { font-size: var(--text-meta); }

/* --- Posizione ------------------------------------------------------------ */

.pms-where {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
}

.pms-where__lines { display: grid; gap: 2px; }

/*
 * **La località e la via, in quest'ordine e su due righe.** Sono informazioni di
 * scala diversa: prima si capisce in che città si va, poi in quale strada. Su
 * una riga sola con un separatore si leggevano come un dato unico, che non sono.
 */
.pms-where__place {
	font-size: var(--text-body);
	font-weight: 700;
	line-height: 1.25;
}

.pms-where__street { font-size: var(--text-meta); color: var(--color-muted-strong); }

.pms-where .pms-icon { width: 22px; height: 22px; margin-top: 3px; color: var(--color-muted-strong); }

/*
 * **Qui la mappa non cerca nulla.** È generosa perché serve a capire dove si è,
 * e non ha bordo perché nel resto del sito non ne ha nessuna superficie.
 */
/*
 * **La mappa è un mondo a sé, e deve restarci.** Leaflet impila i propri pezzi
 * con numeri alti — i riquadri a 200, i marcatori a 600, i comandi di zoom a
 * 1000 — e li dichiara sul proprio contenitore, che però non apre alcun contesto
 * di impilamento: quei numeri finivano a confrontarsi con quelli della pagina, e
 * mille batte la testata. Arrivando in fondo, i comandi della mappa passavano
 * sopra la barra in alto.
 *
 * `z-index` esplicito sul contenitore — che Leaflet posiziona già — chiude quel
 * mondo dentro di sé: **all'interno nulla cambia**, riquadri, marcatori, fumetti
 * e comandi conservano l'ordine che avevano; all'esterno la mappa vale zero, e
 * la testata le passa sopra. Non è toccato alcun numero di Leaflet, e la mappa
 * della pagina dei risultati non c'entra: quella ha un contesto proprio.
 */
.pms-where__map {
	position: relative;
	z-index: 0;
	height: clamp(280px, 38vw, 420px);
	overflow: hidden;
	background: var(--color-surface-soft);
	border-radius: var(--radius-container);
}

/* --- Il riquadro della prenotazione ---------------------------------------
 *
 * **Scorre con la pagina, come tutto il resto.** Restava appiccicato sotto la
 * testata: ora sta nel flusso normale, in cima alla colonna destra, e quando si
 * scorre se ne va insieme al contenuto che gli sta accanto. Nessuna posizione
 * calcolata, nessuno scostamento legato all'altezza della testata — che il
 * copione continua a misurare per la pagina dei risultati, dove serve ancora.
 */

.pms-stay__panel {
	padding: 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-container);
	box-shadow: var(--shadow-soft);
}

.pms-stay__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 14px;
}

.pms-stay__amount { font-size: var(--step-8); font-weight: 700; color: var(--color-heading); }
.pms-stay__note { font-size: var(--text-meta); color: var(--color-muted-strong); }

/* --- Le fotografie a schermo intero --------------------------------------- */

.pms-lightbox-open { overflow: hidden; }

.pms-lightbox {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(0 0 0 / 0.92);
}

.pms-lightbox__bar {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	color: #fff;
}

.pms-lightbox__count { margin: 0; font-size: var(--step-3); }

.pms-lightbox__close,
.pms-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	background: rgb(255 255 255 / 0.12);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.pms-lightbox__close:hover,
.pms-lightbox__nav:hover { background: rgb(255 255 255 / 0.24); }

.pms-lightbox__close:focus-visible,
.pms-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pms-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
}

.pms-lightbox__nav--prev { left: 18px; }
.pms-lightbox__nav--next { right: 18px; }

/* La striscia scorre col dito e si aggancia: è lo stesso meccanismo delle schede. */
.pms-lightbox__strip {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	list-style: none;
	scrollbar-width: none;
}

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

.pms-lightbox__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 18px;
	scroll-snap-align: start;
}

.pms-lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
	.pms-stay__body { gap: 32px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
	.pms-services__list { grid-template-columns: minmax(0, 1fr); }

	/* La colonna dei contenuti si stringe: gli orari lasciano spazio alle regole. */
	.pms-stay__info { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px 28px; }
	.pms-stay__info-block--rules { padding-left: 28px; }
}

/*
 * Sotto i 900 px le due colonne diventano una: la colonna della prenotazione
 * sarebbe più stretta dei propri campi.
 */
@media (max-width: 900px) {
	.pms-stay__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }

	/*
	 * La galleria diventa una striscia che si sfoglia: cinque riquadri su un
	 * telefono sarebbero cinque francobolli.
	 */
	.pms-stage__grid {
		display: flex;
		height: auto;
		aspect-ratio: 3 / 2;
		overflow-x: auto;
		gap: 6px;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

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

	.pms-stage__cell { flex: 0 0 100%; scroll-snap-align: start; }
	.pms-stage__cell--lead { grid-row: auto; }
	.pms-stage--4 .pms-stage__cell:last-child { grid-column: auto; }

	/*
	 * In colonna il filetto verticale non separa più nulla: diventa orizzontale,
	 * fra un blocco e l'altro.
	 */
	.pms-stay__info { grid-template-columns: minmax(0, 1fr); gap: 20px; }

	.pms-stay__info-block--rules {
		padding: 20px 0 0;
		border-top: 1px solid var(--color-border);
		border-left: 0;
	}

	.pms-stay__info > .pms-stay__info-block--rules:only-child {
		padding-top: 0;
		border-top: 0;
	}

	.pms-stage__dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin: 10px 0 0;
		padding: 0;
		list-style: none;
	}

	.pms-stage__dot {
		width: 6px;
		height: 6px;
		background: var(--color-border-strong);
		border-radius: 50%;
	}

	.pms-stage__dot.is-current { width: 18px; border-radius: 999px; background: var(--color-text); }

	.pms-stage__all { right: calc(var(--gutter) + 10px); bottom: 46px; }
}

@media (max-width: 640px) {
	.pms-stay__facts { gap: 6px 16px; }

	/*
	 * **Una per volta.** Due schede di testo affiancate sotto i seicentoquaranta
	 * pixel diventano due colonne strette da tre parole per riga: si leggono
	 * peggio di come si leggerebbe una sola. È la stessa soglia a cui la griglia
	 * di prima andava a capo, e il comportamento visibile non cambia.
	 */
	.pms-reviews > li { flex-basis: 100%; }

	/*
	 * Qui si vede una scheda per volta, quindi la soglia è la seconda: se c'è,
	 * si affaccia dal bordo.
	 */
	.pms-reviews:has( > li:nth-child( 2 ) ) > li {
		flex-basis: calc( 100% - var( --pms-recensioni-sbirciata ) );
	}
	.pms-lightbox__nav { display: none; }
	.pms-lightbox__slide { padding: 56px 10px; }

	/* Sul telefono il pannello del regolamento prende quasi tutto lo schermo. */
	.pms-dialog { padding: 12px; }

	.pms-dialog__panel { max-height: 88vh; }

	.pms-dialog__head { padding: 12px 10px 12px 18px; }

	.pms-dialog__body { padding: 16px 18px 40px; }
}

/* ── I recapiti, quando non si prenota dal sito ───────────────────────────── */