/* =========================================================
   prenotazioni-mobile.css — MOBILE PRO (<=768px)
   - NO hamburger
   - Header pulito + logo centrato
   - Hero: testo sx / foto dx
   - Calendario: vista mensile centrata
   ========================================================= */

@media (max-width: 768px){

  :root{
    --bg: #ffffff;
    --text: #111111;
    --muted: #4b5563;

    --line: rgba(17,17,17,.12);
    --shadow: 0 14px 30px rgba(0,0,0,.12);
    --radius: 18px;
  }

  /* -------------------------
     Base
     ------------------------- */
  html, body{ background: var(--bg) !important; }
  body{
    margin: 0;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    -webkit-text-size-adjust: 100%;
  }

  img{ max-width: 100%; display:block; }
  a{ text-decoration:none; }

  /* Desktop nav nascosta su mobile */
  .nav-links{ display:none !important; }

  /* -------------------------
     HEADER — pulito, centrato
     (nessuna foto in alto a sinistra)
     ------------------------- */
  .main-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background:#fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
  }

  .navbar{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 12px 14px;
  }

  /* se in passato avevi aggiunto una foto col ::before, la spengo */
  .navbar::before{
    content:none !important;
    display:none !important;
  }

  .logo{
    width:100%;
    text-align:center;
    font-weight:900;
    font-size:16px;
    line-height:1.1;
  }

  /* -------------------------
     Layout pagina
     ------------------------- */
  .page{ padding: 12px !important; }

  /* -------------------------
     HERO — testo sx / foto dx
     ------------------------- */
  .intro-section{ margin-top: 10px; }

  .hero-row{
    display:grid !important;
    grid-template-columns: 1fr 120px !important; /* testo | foto */
    align-items:center !important;
    gap: 14px !important;

    /* stile professionale: card pulita */
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;

    padding: 14px !important;
  }

  .hero-text{ order:1 !important; }
  .hero-photo{ order:2 !important; }

  .hero-text h1{
    margin: 0 0 10px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align:left !important;
  }

  /* richiesto: elimina paragrafo sotto titolo */
  .hero-text > p{ display:none !important; }

  .visit-type label{
    display:block;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 800;
    text-align:left;
  }

  #tipoVisita{
    width:100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background:#fff;
    color: var(--text);
    font-weight: 900;
    outline: none;
  }

  .hero-photo{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .hero-photo img{
    width: 112px !important;
    height: 112px !important;
    border-radius: 22px !important;
    object-fit: cover !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
  }

  /* -------------------------
     Bottoni (stile coerente)
     i colori li prende dal CSS principale
     ------------------------- */
  .btn{
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-weight: 900 !important;
  }

  /* -------------------------
     CALENDARIO — mensile, centrato, più largo
     ------------------------- */
  .calendar-bg{
    margin-top: 14px;
    background: transparent !important;
  }

  .calendar-card{
    width:100% !important;
    max-width:none !important;

    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;

    padding: 14px !important;
  }

  .calendar-header{
    display:flex;
    flex-direction: column;
    gap: 10px;
    border-bottom:none !important;
    box-shadow:none !important;
  }

  /* titolo e testo centrati */
  .calendar-header > div{ text-align:center !important; }

  .calendar-header h2{
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align:center !important;
  }

  /* evita “emoji sopra” (se era pseudo o immagine) */
  .calendar-header h2::before,
  .calendar-header h2::after,
  .calendar-header h2 img{
    content:none !important;
    display:none !important;
  }

  .calendar-header p{
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    text-align:center;
  }

  /* CTA centrata (prenota/già prenotato) */
  .calendar-cta{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap: 10px !important;
    flex-wrap:wrap !important;
    margin-top: 10px !important;
  }

  .calendar-cta .btn{
    min-width: 165px;
    text-align:center;
  }

  /* ✅ mensile: mostra monthCard, nasconde weekBoard */
  #monthCard{ display:block !important; width:100% !important; }
  #weekBoard{ display:none !important; }

  .month-head{
    display:grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items:center !important;
    gap:10px !important;
    margin: 10px 0 8px !important;
  }

  .month-title{
    font-weight: 900;
    font-size: 12px;
    color: var(--muted);
    text-align:center;
  }

  .month-nav{
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background:#fff;
    color: var(--text);
    font-size: 18px;
  }

  .month-legend{
    display:flex;
    flex-wrap:wrap;
    gap: 10px 14px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background:#fff;
    color: var(--muted);
    font-size: 12px;
  }

  .dot{
    width:10px;
    height:10px;
    border-radius:999px;
    display:inline-block;
    margin-right:6px;
  }

  .month-help{
    margin: 10px 0 10px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    text-align:center;
  }

  /* Griglia mese più “ampia” e pulita */
  #monthGrid{
    display:grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px !important;
  }

  .m-day{
    border-radius: 16px;
    border: 1px solid var(--line);
    background:#fff;
    padding: 8px 6px 10px;
    min-height: 62px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .m-day.is-out{ opacity: .45; }

  .m-day__num{
    font-weight: 900;
    font-size: 12px;
    color: var(--text);
  }

  /* Pallini centrati */
  .m-day__marks{
    display:flex;
    justify-content:center;
    gap: 6px;
    align-items:center;
  }

  .m-mark{
    width: 9px;
    height: 9px;
    border-radius: 999px;
  }

  /* nascondo la legenda “vecchia” sotto */
  .calendar-legend{ display:none !important; }

  /* -------------------------
     CTA video
     ------------------------- */
  .intro-video-cta{
    margin-top: 14px !important;
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    padding: 14px !important;
  }

  .intro-video-cta h2{
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 900;
    text-align:left;
  }

  .intro-video-cta p{
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
  }

  /* Footer: NON modifico */
}
@media (max-width: 768px){

  /* HERO: immagine a SINISTRA, testo a DESTRA */
  .hero-row{
    grid-template-columns: 120px 1fr !important; /* foto | testo */
  }

  .hero-photo{ order: 1 !important; }
  .hero-text{ order: 2 !important; }

  /* allineo meglio il blocco testo */
  .hero-text{
    text-align: left !important;
  }

  /* titolo e label puliti */
  .hero-text h1{
    text-align: left !important;
  }

  .visit-type label{
    text-align: left !important;
  }

  /* SELECT più leggibile: prende tutta la colonna testo */
  #tipoVisita{
    width: 100% !important;
    max-width: none !important;   /* toglie il limite che lo tagliava */
  }
}