/* ============================================================
   MOBILE — adattamenti per schermi stretti (<=760px).
   La sidebar diventa una barra in alto con un pulsante hamburger;
   toccandolo si apre un menu a tendina con, in ordine:
   1) lingua, 2) progetti, 3) contatti.
   ============================================================ */

@media (max-width:760px){
  :root{ --sidebar-w:100%; }

  .sidebar{
    position:fixed; width:100%; height:auto; bottom:auto;
    flex-direction:row; align-items:center;
    padding:14px 18px;
    box-shadow:0 10px 24px -14px rgba(0,0,0,.8);
  }
  .brand, .sidebar-foot{ display:none; }
  /* logo a sinistra, hamburger a destra: il pollice della mano
     destra (la più usata) raggiunge il menu senza spostare la presa */
  .seal{ width:22px; height:22px; order:1; margin:0; }
  .seal::before{ font-size:.48rem; }

  /* hamburger: quadrato oro, sfondo nero, tre linee rosse */
  .mobile-bar{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px;
    width:38px; height:38px;
    background:var(--sumi);
    border:1.5px solid var(--gold-bright);
    order:2; margin-left:auto; margin-right:0;
    padding:0;
  }
  .mobile-bar .bar{
    display:block;
    width:16px; height:2px;
    background:var(--red-bright);
  }

  /* menu a tendina: chiuso di default, mostrato con .sidebar.open */
  .mobile-menu{ display:none; }
  .sidebar.open .mobile-menu{
    display:flex; flex-direction:column; gap:26px;
    position:fixed; top:52px; left:0; right:0; bottom:0;
    background:var(--sumi-2);
    padding:26px 22px;
    margin:0; z-index:25;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; touch-action:pan-y;
  }

  /* 1) lingua */
  .lang-switch{
    position:static; display:flex; gap:10px;
  }
  .lang-btn{
    font-size:.68rem; padding:7px 12px;
    border:1px solid var(--line);
  }
  .lang-btn.active{ border-color:var(--gold-deep); }

  /* 2) progetti */
  nav.projects{ display:flex; margin-bottom:0; }

  /* 3) contatti */
  .nav-secondary{
    display:flex; flex-direction:column;
    margin-top:0; padding-top:22px;
    border-top:1px solid var(--line);
  }

  main{ margin-left:0; margin-top:52px; padding:36px 18px 70px; }
  .view-head{ flex-wrap:wrap; }
  .view-tag{ display:none; }
  .photo{ height:200px; }
  .lightbox{ padding:80px 16px 24px; }
  .lb-next{ right:8px; }
  .lb-prev{ left:8px; }
}

/* ---------- modalità focus ----------
   telefono ruotato in orizzontale: si nasconde la didascalia e la
   foto occupa tutto lo spazio verticale disponibile. pointer:coarse
   limita la regola ai dispositivi touch, non alle finestre desktop
   strette. */
@media (orientation:landscape) and (pointer:coarse){
  .lightbox{ padding:14px 64px; }
  .lb-caption{ display:none; }
}