/* ============================================================
   RESPONSIVE — adattamenti mobile/tablet trasversali.
   Caricato per ultimo: contiene solo override di breakpoint,
   nessuna regola desktop. Breakpoint allineati al resto del
   progetto: 1023px (tablet), 767px (mobile), 480px (small).
   ============================================================ */

/* Nessun overflow orizzontale su nessuna pagina.
   `clip` e non `hidden`: hidden trasformerebbe il body in scroll container
   e romperebbe i position:sticky (colonna mappa dell'itinerario, header
   di tabella). Fallback a hidden per i browser senza `clip`. */
body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

/* Media e tabelle non sfondano mai il viewport */
img, video, iframe, canvas, svg {
  max-width: 100%;
}

/* ---------- NAVBAR ---------- */

/* Su desktop il selettore lingua sta nella barra, non nel menu */
.navbar__links-lang { display: none; }

/* Il menu esteso non ci sta sotto i 1024px: a 768px logo + link + azioni
   sommavano ~787px e il bottone "Accedi" finiva fuori dal viewport.
   Da qui in giu' si passa a hamburger + pannello a tendina. */
@media (max-width: 1023px) {
  .navbar__container { position: relative; flex-wrap: nowrap; gap: 12px; }

  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; flex-shrink: 0; }

  .navbar__links.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: #273348;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 20px 44px rgba(27,40,66,.28);
  }
  body.nav-light .navbar__links.is-open {
    background: #fff;
    box-shadow: 0 20px 44px rgba(27,40,66,.16);
  }
  .navbar__links.is-open .navbar__link {
    width: 100%;
    padding: 10px 0;
    font-size: 1rem;
  }

  /* Il selettore lingua si sposta dentro il pannello: nella barra ruberebbe
     lo spazio che serve al bottone utente. */
  .navbar__actions-lang { display: none; }
  .navbar__links-lang {
    display: block;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  body.nav-light .navbar__links-lang { border-top-color: rgba(27,40,66,.12); }
  /* Sul portale principale anonimo il menu contiene solo la lingua:
     senza voci sopra, il filetto di separazione non ha senso. */
  .navbar__links-lang:first-child { border-top: 0; padding-top: 0; }

  .navbar__actions { margin-left: auto; min-width: 0; gap: 0.5rem; }
  .navbar__logo { min-width: 0; }
  .navbar__btn { white-space: nowrap; }
}

@media (max-width: 767px) {
  .navbar__logo-img { height: 26px; max-width: 42vw; object-fit: contain; }
}

@media (max-width: 480px) {
  .navbar__logo-img { height: 22px; max-width: 38vw; }
  .navbar__btn { padding: 10px 14px; }
}

/* ---------- ASSISTENTE AI (widget flottante) ---------- */

/* Su mobile la barra del browser fa variare 100vh: con dvh il pannello
   resta dentro l'area realmente visibile e la riga di input non finisce
   sotto la toolbar. */
@supports (height: 100dvh) {
  .oai-panel { max-height: calc(100dvh - 110px); }
  @media (max-width: 480px) {
    .oai-panel { height: calc(100dvh - 92px); }
  }
}

@media (max-width: 767px) {
  /* Il fumetto proattivo copre il contenuto: larghezza contenuta e
     chiusura con target touch pieno (si auto-ritira via JS dopo 7s). */
  .oai-teaser__close { width: 32px; height: 32px; top: 4px; right: 4px; }
}

/* ---------- PLAYER AUDIO FLOTTANTE ---------- */

@media (max-width: 767px) {
  /* A 375px titolo e barra di avanzamento restavano schiacciati a ~64px
     l'uno. Il titolo passa su una riga propria, i controlli sotto. */
  .audio-player--floating {
    flex-wrap: wrap;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    gap: 0.5rem 0.75rem;
  }
  .audio-player--floating .audio-player__info {
    order: -1;
    flex: 1 1 100%;
  }
  .audio-player--floating .audio-player__title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
  }
  .audio-player--floating .audio-player__progress { flex: 1 1 auto; min-width: 0; }
  .audio-player--floating .audio-player__time { flex: none; font-size: 0.78rem; }
}

/* Con il player aperto l'orb dell'assistente finiva sopra la barra:
   lo alziamo quanto basta. */
body:has(.audio-player--floating.is-visible) .oai { bottom: 104px; }
@media (max-width: 480px) {
  body:has(.audio-player--floating.is-visible) .oai { bottom: 96px; }
}

/* ---------- HERO SEARCH (landing tenant) ---------- */

@media (max-width: 480px) {
  /* Le due tab stavano su tre righe sotto i 360px: testo piu' compatto
     e icona piu' vicina, restano su una riga sola. */
  .og-search__tabs { gap: 2px; padding: 8px 8px 0; }
  .og-search__tab { font-size: 14px; padding: 12px 8px; gap: 6px; white-space: nowrap; }
  .og-search__tab svg { width: 16px; height: 16px; }
  .og-search__field { margin: 12px 8px 0; }
}