/* =========================================================================
   DRAWER — il form di prenotazione che scende dall'alto
   ------------------------------------------------------------------------
   Il form non sta più nella pagina: vive qui dentro, una sola istanza.
   Ogni CTA .js-book apre QUESTO pannello, quindi i dati già scritti e lo
   step raggiunto restano identici da qualunque bottone si riapra.

   Perché scende dall'alto e non è un popup centrato: la CTA promette
   un'azione, non un'interruzione. Un pannello che cala dal bordo superiore
   legge come "il modulo si apre", un riquadro che compare al centro legge
   come "un annuncio ti blocca". Sul primo la gente compila, sul secondo
   cerca la X.
   ========================================================================= */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;                 /* sopra header (100) e sticky CTA (90) */
  display: block;
}
.drawer[hidden] { display: none; }

/* --- velo scuro -------------------------------------------------------- */
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 13, 2, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.42s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

/* --- pannello ----------------------------------------------------------- */
.drawer__panel {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(820px, 100%);
  /* Mai a tutto schermo: la striscia di pagina che resta sotto è ciò che
     racconta "questo pannello è sceso sopra al sito", e dà un punto dove
     toccare per richiudere. A schermo pieno sembrerebbe un'altra pagina. */
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 28px 70px rgba(20, 13, 2, 0.4);
  /* stato chiuso: appena sopra il bordo dello schermo */
  transform: translate(-50%, -101%);
  transition: transform 0.55s var(--ease);
  outline: none;
}
.drawer.is-open .drawer__panel { transform: translate(-50%, 0); }

/* Il pannello È la scheda: niente riquadro dentro il riquadro. */
.drawer .booking__card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* --- barra del titolo (resta ferma mentre il corpo scorre) -------------- */
.drawer__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.05rem, 2.6vw, 1.5rem) clamp(1.1rem, 3vw, 2rem) clamp(0.85rem, 2vw, 1.05rem);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.drawer__titles { flex: 1 1 auto; min-width: 0; }
.drawer__titles h2 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--brown);
  margin: 0 0 0.28rem;
}
.drawer__titles p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 300;
}

.drawer__close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--brown-soft);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer__close:hover {
  background: var(--cream-2);
  border-color: var(--brown-soft);
  color: var(--brown);
  transform: rotate(90deg);
}
.drawer__close:focus-visible { outline: 2px solid var(--cypress); outline-offset: 2px; }

/* --- corpo scorrevole ---------------------------------------------------- */
.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* lo scroll non "sfonda" sulla pagina sotto quando arrivo a fine lista */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.1rem, 2.8vw, 1.6rem) clamp(1.1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.2rem);
}

/* --- pagina sotto: congelata mentre il pannello è aperto -----------------
   `position: fixed` + `top` negativo (lo mette il JS) è l'unico modo che
   regge anche su iOS Safari, dove `overflow: hidden` sul body viene ignorato
   e la pagina continua a scorrere dietro al pannello.                      */
body.is-drawer-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
body.is-drawer-open .sticky-cta { transform: translateY(160%); }

/* --- CTA che ha preso il posto del form nella sezione #book --------------
   Senza più la scheda in mezzo, titolo e bottone si stringono: il respiro
   che serviva a separare due blocchi grossi qui diventa solo vuoto.        */
.booking .booking__head { margin-bottom: clamp(1.1rem, 2.2vw, 1.5rem); }
.booking__cta { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
/* La fascia era alta quanto la scheda: senza, l'aria in fondo va rimessa in scala. */
.section.booking { padding-bottom: clamp(2.2rem, 4vw, 3.2rem); }

/* --- schermi piccoli ----------------------------------------------------- */
@media (max-width: 720px) {
  .drawer__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: 0 0 18px 18px;
  }
  .drawer__body { padding-bottom: 2.4rem; }
}

/* Schermi bassi (o tastiera aperta): il pannello non deve superare lo schermo. */
@media (max-height: 560px) {
  .drawer__bar { padding-top: 0.8rem; padding-bottom: 0.7rem; }
  .drawer__titles p { display: none; }
}