/* ============================================
   TABLET (481px - 1024px)
   ============================================ */
@media (min-width: 481px) and (max-width: 1024px) {
  .cv-download-link {
    display: inline-block !important;
    position: relative !important;
    z-index: 9999 !important;
    margin-top: 3vh !important;
    margin-bottom: 10vh !important;
  }

  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }

  .text-box::before,
  .personal-works-box::before {
    display: none !important;
  }

  /* Titolo in alto a sinistra */
  .footer-title {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 2vh) !important;
    left: 6vw !important;
    bottom: auto !important;
    right: auto !important;
    font-size: 4vh !important;
    line-height: 1.1 !important;
    z-index: 100 !important;
    margin: 0 !important;
  }

  .footer-subtitle {
    display: none !important;
  }

  /* Footer menu subito SOTTO il titolo, incolonnato e a inizio pagina */
  .footer-menu {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 7.5vh) !important;
    left: 6vw !important;
    bottom: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.8vh !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-menu a {
    font-size: 1.8vh !important;
    padding: 0.25em 0.7em !important;
    width: fit-content !important;
  }

  /* Crediti: bottom-center come desktop */
  .site-credit-wrapper {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 1vh !important;
    top: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    z-index: 100 !important;
  }

  /* Anche con un pannello aperto, il credit resta in basso al centro. */
  body.panel-open .site-credit-wrapper,
  body.gallery-menu-open .site-credit-wrapper {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 1vh !important;
    transform: translateX(-50%) !important;
    padding-left: 0 !important;
  }

  /* ============================================
     PANNELLI GENERICI (About, Contacts)
     Allineati a DESTRA per non sovrapporsi al footer
     ============================================ */
  .text-box,
  .personal-works-box:not(#gallery-textbox):not(#works-textbox) {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 25vh) !important;
    left: 6vw !important;
    right: auto !important;
    bottom: auto !important;
    width: 55vw !important;
    max-width: 55vw !important;
    max-height: 60vh !important;
    z-index: 200 !important;
    background: var(--bg-dark) !important;
  }

  /* ============================================
     PERSONAL WORKS — TABLET (Orizzontale)
     Posizionato in alto a destra, ma testi allineati a SINISTRA
     ============================================ */
   body #works-textbox,
  body #works-textbox.active,
  body #works-textbox.fixed,
  html body #works-textbox {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) - 6.5vh) !important; 
    right: auto !important; 
    left: 18vw !important;
    bottom: auto !important;
    
    /* RIDOTTA LA LARGHEZZA: meno spazio vuoto a destra */
    width: 28vw !important; 
    max-width: 28vw !important;
    
    max-height: 85vh !important; 
    background: transparent !important;
    z-index: 5 !important;
  }

  #works-textbox .personal-works-content {
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    
    /* ALLINEAMENTO A SINISTRA */
    text-align: left !important; 
    
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10vh, black 70vh, transparent 85vh) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10vh, black 70vh, transparent 85vh) !important;
    -webkit-mask-size: 100% 85vh !important;
    mask-size: 100% 85vh !important;
  }

  /* Il contenitore del singolo progetto */
  #works-textbox .personal-work-item {
    text-align: left !important; 
    transform-origin: left center !important;
    
    /* Torna a display block per permettere alle categorie di stare in riga */
    display: block !important; 
    
    margin-bottom: 15px !important; 
  }

  /* Il titolo del progetto - forzato a blocco per andare a capo */
  #works-textbox .personal-work-item .work-link {
    text-align: left !important;
    display: block !important; 
    margin-bottom: 5px !important; /* Spazio tra il titolo e le categorie */
  }

  #works-textbox .personal-work-item .work-link::before {
    left: 0 !important;
    right: auto !important;
  }

  /* Le categorie (pillole) */
  #works-textbox .personal-work-item p {
    /* Forziamo inline-block per sovrascrivere il block globale 
       e farle stare in riga tra loro */
    display: inline-block !important; 
    margin: 0 6px 0 0 !important; /* Margine a destra per distanziarle */
    padding: 0.15em 0.6em !important;
    vertical-align: middle !important;
  }

   /* ============================================
     GALLERY MENU (gallery-textbox) — absolute (scorre col contenuto)
     Allineato a SINISTRA (come #works-textbox)
     ============================================ */
  body.gallery-menu-open #gallery-textbox {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 7.5vh) !important; /* Stesso top di #works-textbox */
    
    /* Posizionato a sinistra di fianco al footer-menu */
    right: auto !important; 
    left: 20vw !important;
    
    width: 28vw !important; 
    max-width: 28vw !important;
    
    max-height: 85vh !important; /* Stessa altezza max di #works-textbox */
    background: transparent !important;
    z-index: 200 !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.gallery-menu-open #gallery-textbox .personal-work-item .work-link,
  body #works-textbox .personal-work-item .work-link {
    font-size: 1.8vh !important;
  }

  body.gallery-menu-open #gallery-textbox .personal-works-content {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
    
    /* ALLINEAMENTO A SINISTRA */
    text-align: left !important; 
    
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.gallery-menu-open #gallery-textbox .personal-work-item {
    text-align: left !important;
    transform-origin: left center !important;
  }

  /* ============================================
     TABLET — NESSUN BACK BUTTON
     ============================================ */
  .text-box-back,
  #worksBackButton,
  .project-gallery-close-btn,
  .gallery-back-button,
  .project-back-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.gallery-menu-open.category-active {
    overflow-y: auto !important;
    height: auto !important;
  }

  /* ============================================
     ABOUT & CONTACTS — OVERLAY SU TABLET
     Sopra il gallery-container, che perde opacità.
     Allineati a DESTRA.
     ============================================ */
  #about-textbox.active,
  #contacts-textbox.active {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 25vh) !important;
    left: 6vw !important;
    right: auto !important;
    bottom: auto !important;
    width: 60vw !important;
    max-width: 60vw !important;
    max-height: 65vh !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    z-index: 300 !important;
    box-shadow: none !important;
  }

  #about-textbox.active .text-box-content,
  #contacts-textbox.active .text-box-content {
    max-height: 65vh !important;
    overflow-y: auto !important;
    padding-right: 1.5vw !important;
  }

  /* Il gallery-container perde opacità quando about/contacts sono aperti. */
  body.panel-open:has(#about-textbox.active) .gallery-container,
  body.panel-open:has(#contacts-textbox.active) .gallery-container {
    opacity: 0.2 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
  }

  /* ============================================
     HEADER BLUR BAND — TABLET
     ============================================ */
  .header-blur-band {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(env(safe-area-inset-top) + 9vh) !important;
    background: linear-gradient(
      to bottom,
      rgba(234, 234, 234, 0.98) 0%,
      rgba(234, 234, 234, 0.75) 55%,
      rgba(234, 234, 234, 0) 100%
    );
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%) !important;
    z-index: 90 !important;
    pointer-events: none !important;
  }

  .footer-title {
    z-index: 100 !important;
  }

  .footer-menu {
    z-index: 100 !important;
  }

  /* Su tablet il pannello About NON mostra la foto profilo. */
  .home-profile-box {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ============================================
     WORKS SCROLLBAR — Posizionata a SINISTRA
     ============================================ */
    .works-scrollbar {
    position: fixed;
    width: 5px;
    /* height e top rimossi: li gestisce il JS */
    border-radius: 3px;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 950;
  }
  
  /* Rendiamo il thumb un po' più visibile */
  .works-scrollbar-thumb {
    background: rgba(46, 38, 29, 0.3) !important; 
  }

}

/* ============================================
   FIX DEFINITIVO SCROLL GRID VIEW (ANTI-CHAINING)
   ============================================ */
html.grid-active {
  overflow: auto !important;
}

body.grid-active {
  overflow: auto !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overscroll-behavior: none !important;
  touch-action: auto !important;
  background-color: var(--bg-dark) !important;
}

/* Nasconde fisicamente tutti i pannelli e i testi di background quando la griglia è aperta */
body.grid-active .footer-menu,
body.grid-active .footer-title,
body.grid-active .footer-subtitle,
body.grid-active .header-blur-band,
body.grid-active .text-box,
body.grid-active .personal-works-box,
body.grid-active .gallery-container,
body.grid-active .text-box-back,
body.grid-active .mobile-menu-toggle,
body.grid-active #mobileMenuToggle,
body.grid-active .home-profile-box,
body.grid-active #urban\ volumes-textbox,
body.grid-active #urban\ surfaces-textbox,
body.grid-active #inhabitants-textbox,
body.grid-active #product-textbox,
body.grid-active #miscellaneous-textbox {
  display: none !important;
}

/* Sblocca lo scroll (touch) sullo spazio della galleria quando un progetto è aperto */
body.panel-open.project-gallery-active .gallery-container {
  touch-action: auto !important;
}