/*
 * Il piedistallo: l'invito che galleggia in fondo allo schermo.
 *
 * **Uno solo per pagina, ma non uno solo nel tema.** Sulle pagine che cercano
 * l'invito è «Inizia la ricerca»; su quelle che si prenotano è «Prenota ora».
 * Sono lo stesso oggetto con dentro parole diverse — stesso posto, stessa
 * forma, stesso comportamento davanti al piede di pagina — e quindi sono
 * disegnati qui una volta sola. Chi li rende ci aggiunge il proprio nome di
 * classe per ciò che gli è proprio: il resto non si ripete.
 *
 * **L'invito alla ricerca esiste solo sul telefono e sul tablet.** Sopra la
 * soglia — la stessa a cui la testata rinuncia alla barra di ricerca — la
 * scrivania ha spazio per mostrare la ricerca dov'è.
 *
 * **L'invito a prenotare no: quello serve anche sulla scrivania.** Il modulo
 * sta in cima alla colonna destra e scorre via con la pagina; chi legge la
 * descrizione, i servizi e le recensioni se lo lascia alle spalle dopo pochi
 * secondi, e da lì in poi tornare alle date significa risalire a mano. Per
 * questo l'aspetto del piedistallo è disegnato qui una volta sola, fuori da
 * ogni soglia, e le soglie decidono soltanto chi dei due si vede.
 */

.pms-dock { display: none; }

	/*
	 * **Fisso allo schermo, non al documento.** Resta in basso mentre la pagina
	 * scorre, non occupa spazio nel flusso e quindi non sposta niente di ciò che
	 * gli sta sopra: è l'invito principale della pagina, e un invito che
	 * scompare scorrendo non è un invito.
	 *
	 * **Centrato nel viewport davvero.** Non nello spazio che avanza: il mezzo
	 * dello schermo è il mezzo dello schermo, e chi divide con lui la riga — il
	 * contatto rapido, a destra — non lo sbilancia. Ci si arriva con l'ancoraggio
	 * a metà e la traslazione di mezza larghezza propria, che è l'unico modo di
	 * centrare qualcosa che non conosce la propria misura.
	 *
	 * **Prima del piede di pagina si alza**, con lo stesso meccanismo del contatto
	 * rapido: `sopra-il-piede.js` misura quanto piede è entrato nello schermo e
	 * scrive lo scostamento, che qui si somma alla traslazione — proprietà a sé,
	 * non transizionata, così segue lo scorrimento un pixel per pixel invece di
	 * rincorrerlo.
	 *
	 * **Non intercetta i clic**: preme solo ciò che si vede.
	 */
	.pms-dock {
		position: fixed;
		z-index: 20;
		left: 50%;
		bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
		justify-content: center;
		pointer-events: none;
		translate: -50% calc(-1 * var(--pms-scostamento, 0px));

		/*
		 * **Il limite è simmetrico**, altrimenti centrare non servirebbe a niente:
		 * si tiene da entrambi i lati lo spazio che il contatto rapido occupa da
		 * uno solo. Così l'invito resta al centro esatto e non arriva mai a
		 * toccarlo, nemmeno su uno schermo molto stretto. La misura del cerchio la
		 * dichiara il suo foglio; qui si legge, e se un domani cambia questa riga
		 * resta buona.
		 */
		max-width: calc(100% - 2 * (var(--gutter) + var(--pms-quick-size, 0px) + 14px));
	}

	/*
	 * **Un rettangolo, non una pillola.** Il raggio è quello dei pulsanti del
	 * tema, l'ombra è quella tenue di sistema, il fondo è la superficie: sembra
	 * qualcosa su cui si può premere, che è esattamente ciò che promette. Alto
	 * cinquantadue pixel — un bersaglio comodo — e largo quanto il suo testo, non
	 * quanto lo schermo.
	 */
	.pms-dock__button {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		max-width: 100%;
		padding: 0 20px;
		font-family: var(--font-body);
		font-size: var(--text-meta);
		font-weight: 700;
		line-height: 1.2;
		color: var(--color-heading);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: 15px;
		box-shadow: var(--shadow-popover);
		cursor: pointer;
		pointer-events: auto;
		transition: transform var(--motion-fast) ease;
	}

	.pms-dock__button:active { transform: scale(0.98); }

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

	/* Il simbolo è l'unico colore: dice di che cosa si tratta, e dove premere. */
	.pms-dock__icon {
		display: grid;
		place-items: center;
		flex: 0 0 auto;
		width: 30px;
		height: 30px;
		color: var(--color-on-primary);
		background: var(--color-primary);
		border-radius: 10px;
	}

	.pms-dock__icon svg,
	.pms-dock__icon .pms-icon { display: block; width: 18px; height: 18px; }

	.pms-dock__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	/* --- L'invito a prenotare ---------------------------------------------- */

	/*
	 * **Quando il modulo è sotto gli occhi, l'invito non serve più.** Sparisce
	 * con un velo e sei pixel di discesa, e smette di essere premibile:
	 * `visibility` lo toglie anche dal percorso di tabulazione e dall'albero
	 * letto ad alta voce, e a differenza di `display` lascia che il velo si possa
	 * percorrere. Tornando indietro rifà la stessa strada al contrario — è la
	 * classe a cambiare, non un pezzo di stato.
	 */
	.pms-book__button {
		transition: opacity 190ms ease, transform 190ms ease, visibility 190ms, background-color var(--motion-fast) ease;
	}

	/*
	 * **Due fatti distinti, non uno.** Il copione dice se il modulo è sotto gli
	 * occhi e, quando non lo è, da che parte sta. Servono separati perché la
	 * risposta giusta cambia con la forma della pagina: sul telefono il modulo è
	 * in fondo e superarlo significa averlo scelto e lasciato — riproporlo
	 * sarebbe un invito a tornare indietro; sulla scrivania sta in cima alla
	 * colonna e lo si supera dopo tre righe di descrizione, senza averlo
	 * scelto affatto.
	 */
	/*
	 * **Quando il modulo è sotto gli occhi l'invito non serve, ovunque.** Questa
	 * vale a ogni larghezza: è l'unico caso in cui portare al modulo significa
	 * non andare da nessuna parte.
	 */
	.pms-book.is-visibile .pms-dock__button {
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		pointer-events: none;
	}

/*
 * **Chi si vede, e dove.** Sul telefono e sul tablet entrambi gli inviti; sulla
 * scrivania soltanto quello a prenotare.
 */

@media (max-width: 900px) {
	.pms-dock { display: flex; }

	/*
	 * **Sul telefono, superare il modulo lo mette a tacere.** Lì il modulo è in
	 * fondo alla pagina: arrivarci oltre significa averlo visto e scelto di
	 * lasciarlo, e riproporlo sarebbe un invito a tornare indietro.
	 *
	 * Sulla scrivania questa regola non c'è, ed è la differenza che serviva: il
	 * modulo sta in cima alla colonna destra e lo si supera dopo tre righe di
	 * descrizione, senza averlo scelto. Da lì in poi l'invito resta, e riporta su.
	 */
	.pms-book.is-oltre .pms-dock__button {
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		pointer-events: none;
	}
}

@media (min-width: 901px) {
	.pms-book { display: flex; }

	/*
	 * **Finché si guarda la facciata, l'invito tace.** Il primo schermo è la
	 * fotografia grande: chi è appena arrivato sta ancora decidendo se il posto
	 * gli piace, e chiedergli di prenotare lì è chiedere prima della domanda.
	 * Più giù, quando il modulo è stato superato, l'invito torna e riporta su.
	 */
	.pms-book.is-facciata .pms-dock__button {
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Compare e sparisce, senza percorrere né il velo né i sei pixel. */
	.pms-dock__button,
	.pms-book__button { transition: none; }

	.pms-book.is-visibile .pms-dock__button,
	.pms-book.is-facciata .pms-dock__button,
	.pms-book.is-oltre .pms-dock__button { transform: none; }
}