/* ==============================================================
   IL PANNELLO DI "DISPONIBILE"

   Colori chiesti da Michele: superfici crema, testo e azioni viola,
   rosa var(--c-rosa) per selezioni e accenti, bordo nero. Sono gli stessi che
   poi si passano a Cal.com, cosi' il calendario non sembra una cosa
   incollata da un altro sito.
   ============================================================== */
/* margin:auto e' quello che mette un <dialog> al centro dello schermo.
   style.css azzera i margini di tutto (*{margin:0}) e il pannello finiva
   incollato in alto a sinistra: misurato x0 y0 su tutte le pagine. */
#dispo-dialog{
  margin:auto;inset:0;
  border:0;padding:0;background:transparent;color:var(--c-viola);
  width:min(100%,780px);max-width:100%;max-height:100dvh;
  overflow:visible;
}
#dispo-dialog::backdrop{background:rgb(25 25 25/.65);backdrop-filter:blur(8px);}
#dispo-dialog .dispo-box{
  background:var(--c-crema);border:4px solid #0a0907;border-radius:26px;
  padding:clamp(22px,4vw,40px);
  display:flex;flex-direction:column;gap:clamp(18px,3vw,28px);
  box-sizing:border-box;
}
.dispo-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.dispo-stato{
  display:inline-flex;align-items:center;gap:9px;
  font:700 12px/1 var(--f-testi);letter-spacing:.12em;text-transform:uppercase;
}
.dispo-stato b{width:9px;height:9px;border-radius:50%;background:#22c55e;display:block;flex-shrink:0;}
.dispo-chiudi{
  font:700 12px/1 var(--f-testi);letter-spacing:.1em;
  background:transparent;color:var(--c-viola);border:2px solid #0a0907;border-radius:40px;
  padding:12px 18px;cursor:pointer;white-space:nowrap;
}
.dispo-chiudi:hover{background:#0a0907;color:var(--c-crema);}
.dispo-titolo{
  font:700 clamp(34px,5.5vw,62px)/.96 var(--f-titoli);
  margin:0;letter-spacing:-.01em;text-wrap:balance;
}
/* due strade, stessa importanza: una griglia, non una principale e una
   di ripiego */
.dispo-scelte{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dispo-btn{
  font:700 13px/1.1 var(--f-testi);letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:62px;padding:16px 20px;box-sizing:border-box;
  background:var(--c-viola);color:var(--c-crema);border:3px solid #0a0907;border-radius:100px;
  cursor:pointer;text-decoration:none;text-align:center;white-space:nowrap;
  transition:background .22s ease,color .22s ease;
}
.dispo-btn:hover{background:var(--c-rosa);color:var(--c-viola);}
#dispo-dialog :focus-visible{outline:3px solid var(--c-viola);outline-offset:4px;}
/* il calendario compare solo dopo il clic: prima questa zona non esiste */
.dispo-cal{min-height:clamp(420px,58vh,620px);}
#dispo-dialog.con-calendario{width:min(100%,1100px);}
#dispo-dialog.con-calendario .dispo-titolo{font-size:clamp(26px,3.4vw,38px);}
.dispo-cal #cal-inline{width:100%;height:clamp(420px,58vh,620px);overflow:auto;
  border:3px solid #0a0907;border-radius:18px;background:var(--c-crema);}
.dispo-attesa,.dispo-riserva{
  font:700 13px/1.6 var(--f-testi);letter-spacing:.06em;
  margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
@media(max-width:650px){
  #dispo-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0;}
  #dispo-dialog .dispo-box{min-height:100dvh;border-radius:0;border-width:0;}
  /* in colonna: affiancati diventerebbero due bersagli stretti */
  .dispo-scelte{grid-template-columns:1fr;}
  .dispo-cal{min-height:0;}
  .dispo-cal #cal-inline{height:62dvh;}
}
@media(prefers-reduced-motion:reduce){
  .dispo-btn,.dispo-chiudi{transition:none;}
}

/* ── IL BUCO FRA 769 E 900px ──
   experience.css nasconde #nav .n-dot sotto i 900px, e il burger compare
   solo sotto i 768: in mezzo — un iPad in verticale e' largo 834 — il
   badge spariva e non c'era nessun altro modo di arrivarci. Quando era
   solo un'etichetta che diceva "Disponibile" non lo notava nessuno; ora
   e' il pulsante che apre i contatti, e deve restare raggiungibile.
   Questo foglio sta dopo experience.css, quindi comanda lui. */
@media (min-width:769px) and (max-width:900px){
  /* Anche il guscio: i "bottoni magnetici" (js/main.js) avvolgono il
     pulsante in uno <span class="mag">, ed experience.css nasconde pure
     quello. Sbloccare solo il figlio non serviva a niente — il pulsante
     c'era, con display inline-flex, e misurava zero. */
  #nav .mag{display:inline-flex;}
  #nav .n-dot{display:inline-flex;}
  /* Qui la navbar e' stretta (experience.css la ricompatta sotto i 900px).
     Riservare lo spazio per l'allungamento la faceva sforare, e il flex
     schiacciava il pulsante a larghezza ZERO: c'era, ma non si vedeva.
     Misurato: display inline-flex, width 0.
     In questa fascia niente allungamento e niente spazio riservato — il
     pulsante resta quello che e' e si vede. */
  #nav .n-dot{margin-left:0;flex:0 0 auto;}
  #nav .n-dot .n-dot-x{display:none;}
  #nav .n-lang{flex:0 0 auto;}
}
/* in nessun caso questi due si lasciano schiacciare dal flex */
#nav .n-dot, #nav .n-lang{flex:0 0 auto;}