/* IL PRENOTA DEL SITO (24 ottobre 2026, `docs/piani/prenota-dal-sito.md`): sopra `stile.css`, solo nelle
   case che lo accendono (`STRUTTURA.prenotaDalSito`). I colori, i caratteri, i bottoni e il modulo sono quelli
   del sito; qui la pagina `prenota/` e il tasto «Prenota» nelle schede delle camere. */

/* Nella pagina principale: il tasto sotto «Vedi le foto» della camera. */
.prenota-tipo { margin-top: 18px; }

/* ---------- La ricerca ---------- */
.pagina-prenota main { padding-top: calc(var(--alto-testata) + 56px); }
.pr-cerca-sezione { padding: 0 var(--gutter) 64px; text-align: center; }
.pr-cerca-sezione h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.pr-cerca { margin-top: 40px; }
.pr-eta { display: grid; gap: 24px 28px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pr-eta:empty { display: none; }
.pr-errore { margin: 0; color: var(--errore); text-align: center; }
.pr-cerca .invio { margin-top: 0; }
.pr-cerca[aria-busy="true"] .bottone { opacity: .6; cursor: progress; }

/* ---------- Le camere libere ---------- */
/* larghe come il modulo della ricerca, coi bordi in fila (il `designer`, 24 ottobre) */
.pr-risultati { max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 96px; }
.pr-risultati h2 { text-align: center; font-size: clamp(2rem, 4.4vw, 3rem); scroll-margin-top: 40px; }
.pr-risultati h2:focus { outline: 0; }
/* sopra le camere, quando la porta ha detto di no: la camera presa, il prezzo cambiato */
.pr-detto { max-width: 640px; margin: 20px auto 0; padding: 14px 20px; background: var(--bianco);
  border-top: 1px solid var(--mare); text-align: center; }
.pr-avviso { max-width: 640px; margin: 24px auto 0; padding: 20px 24px; background: var(--bianco);
  border-top: 1px solid var(--mare); text-align: left; }
.pr-avviso p { margin: 0; }
.pr-avviso .bottone { margin-top: 16px; }
.pr-offerte { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 32px; }
.pr-offerta { display: grid; background: var(--bianco); }
.pr-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--carta-2); }
.pr-foto img { width: 100%; height: 100%; object-fit: cover; }
.pr-testo { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px 26px; min-width: 0; }
.pr-testo h3 { margin-bottom: .15em; font-size: clamp(1.9rem, 3.4vw, 2.4rem); }
.pr-testo .persone { margin-bottom: 14px; font-size: .85rem; }
.pr-prezzo { margin: 4px 0 6px; }
/* i numeri dritti: con quelli antichi del carattere dei titoli «1.180» si leggeva «I.I80» */
.pr-cifra { display: block; font: 300 2.3rem/1.1 var(--titoli); color: var(--inchiostro);
  font-variant-numeric: lining-nums tabular-nums; }
.pr-per { display: block; color: var(--grigio); font-size: .95rem; }
.pr-testo .nota { margin: 0; font-size: .95rem; color: var(--inchiostro); }
.pr-testo .bottone { margin-top: 20px; align-self: stretch; }
/* al computer la foto a sinistra riempie l'altezza della carta, senza strisce sopra e sotto. Il 760 e il 360 li
   legge anche `sites/costruisci.py` (SIZES, `offerta-foto`): qui si cambiano, la' no */
@media (min-width: 760px) {
  .pr-offerta { grid-template-columns: 360px minmax(0, 1fr); }
  .pr-testo .bottone { align-self: auto; }
  .pr-foto { position: relative; aspect-ratio: auto; min-height: 270px; }
  .pr-foto img { position: absolute; inset: 0; }
  .pr-testo { justify-content: center; padding: 26px 36px; }
}

/* ---------- Sopra il «Chiedi» compilato dal tasto della camera ---------- */
.pr-nel-modulo { max-width: 860px; margin: 40px auto -24px; padding: 16px 24px; background: var(--carta);
  border-top: 1px solid var(--mare); text-align: left; }

/* ---------- La prenotazione (la tappa 4): il riepilogo, i dati, le tre righe sopra il tasto, la ricevuta ---------- */
.pr-prenota { max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 96px; }
.pr-prenota h2 { text-align: center; font-size: clamp(2rem, 4.4vw, 3rem); scroll-margin-top: 40px; }
.pr-prenota h2:focus, .pr-fatto:focus { outline: 0; }
.pr-scelta { text-align: center; }
.pr-scelta p { margin: 0; }
.pr-scelta .persone { font-size: .85rem; }
.pr-scelta .pr-date { margin-top: 10px; font-size: 1.1rem; color: var(--inchiostro); }
.pr-scelta .pr-prezzo { margin: 14px 0 6px; }
.pr-scelta .nota { font-size: .95rem; color: var(--inchiostro); }
.pr-modulo { margin-top: 44px; }
/* i campi stanno nella griglia del modulo come i suoi */
.pr-campi { display: contents; }
.pr-a-tavola { margin-top: -16px; }
/* il campo trappola: fuori dallo schermo con una classe (uno style= chiederebbe 'unsafe-hashes' alla CSP) */
.pr-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* le tre righe subito sopra il tasto: si leggono prima di premere */
.pr-condizioni { padding-top: 22px; border-top: 1px solid var(--riga); font-size: .95rem; line-height: 1.6; }
.pr-condizioni p { margin: 0 0 10px; }
.pr-condizioni p:last-child { margin-bottom: 0; }
.pr-non-andata { padding: 16px 20px; background: var(--bianco); border-top: 1px solid var(--errore); }
.pr-non-andata p { margin: 0; color: var(--errore); }
.pr-non-andata .bottone { margin-top: 12px; }
.pr-modulo[aria-busy="true"] .bottone { opacity: .6; cursor: progress; }
/* al telefono il tasto va su due righe: lunghe uguali, non «NOW» da solo */
#pr-tieni { text-wrap: balance; }
.pr-altra { margin: 28px 0 0; text-align: center; }
.pr-fatto { max-width: 640px; margin: 36px auto 0; }
.pr-fatto p { margin: 0; overflow-wrap: anywhere; }   /* una mail lunga non esce dal telefono */