/* ============================================
   DESKTOP (min-width: 1025px)
   ============================================ */
@media (min-width: 1025px) {
  body {
    overflow: hidden;
  }

  html, body {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100vh !important;
    position: relative;
  }

  /* Nascondi completamente il tasto back in modalita' desktop */
  .text-box-back {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .footer-menu {
    bottom: 20%;
    left: 6%;
    flex-direction: column;
    gap: 0.8vh;
    font-size: 2vh;
    width: auto;
    padding: 0;
    margin: 0;
    align-items: flex-start;
  }

  .footer-title {
    bottom: 14%;
    left: 3%;
    font-size: 5.5vh;
    text-align: left;
    padding: 0;
    margin: 0;
  }

  .footer-subtitle {
    bottom: 14%;
    left: 6%;
    font-size: 2.7vh;
    text-align: left;
    margin: 0;
  }

  .text-box, .personal-works-box {
    left: 17vw;
    width: 30vw;
  }

  .text-box-content, .personal-works-content {
    padding-right: 2vw;
    overflow-x: visible;
  }

  /* Aumenta l'altezza e aggiusta la posizione SOLO per il pannello about me su desktop */
  #about-textbox {
    max-height: 75vh !important;
    bottom: 15% !important;
  }

  #about-textbox .text-box-content {
    max-height: 75vh !important;
    padding-bottom: 10vh;
  }

  .text-box p, .personal-works-box p {
    margin-left: 0;
    font-size: 1.8vh;
  }

  .text-box h2, .personal-works-box h2 {
    font-size: 3.2vh;
  }

  #gallery-textbox .text-box-back {
    display: none !important;
  }

  /* ============================================
     FIX: GALLERY TEXTBOX VISIBILITÀ IN DESKTOP
     ============================================ */
  #gallery-textbox {
    bottom: 20% !important;           /* allineato al footer-menu (era 22.3%) */
    left: 17vw !important;
    width: 30vw !important;
    max-height: 60vh !important;
    display: none;
    opacity: 0;
    background: transparent !important;
    z-index: 100 !important;
    overflow: visible !important;
    pointer-events: none;
  }

  #gallery-textbox.active,
  #gallery-textbox.fixed,
  #gallery-textbox.active.fixed {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #gallery-textbox .personal-works-content {
    display: block !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding-right: 2vw !important;
  }

  #gallery-textbox .personal-work-item {
    margin-bottom: 0.7em !important;
    display: block !important;
  }

  #gallery-textbox .work-link {
    display: inline-block !important;
    pointer-events: auto !important;
  }

  #contacts-textbox {
    bottom: 18vh;
    top: auto;
    position: fixed;
  }

  .project-gallery-close-btn {
    display: none !important;
  }

  /* ============================================
     FIX: #gallery-textbox sopra qualsiasi elemento
     ============================================ */
  #gallery-textbox.active,
  #gallery-textbox.fixed,
  #gallery-textbox.active.fixed {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  #gallery-textbox {
    bottom: 20% !important;           /* allineato al footer-menu (era 22.3%) */
    left: 17vw !important;
    width: 30vw !important;
    max-height: 60vh !important;
    height: auto !important;
    min-height: 20vh !important;
    overflow: visible !important;
  }

  #gallery-textbox .personal-works-content {
    display: block !important;
    height: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding-right: 2vw !important;
    padding-bottom: 2vh !important;
  }

  #gallery-textbox .personal-work-item {
    display: block !important;
    height: auto !important;
    /* opacity, transform e filter sono ora pilotati via JS
       da personal-works.js (updateListEffects) */
  }

  #gallery-textbox .work-link {
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
 /* ============================================
   DESKTOP — allineamento pannelli con footer menu
   ============================================ */

/* About panel: il suo bordo inferiore tocca il bottone "about me"
   (bottom: 20% del footer-menu) */
#about-textbox {
  bottom: 32% !important;      /* era 20% → alzato di ~6% */
  top: auto !important;
  max-height: 75vh !important;
}

#about-textbox .text-box-content {
  max-height: 75vh !important;
  padding-bottom: 0 !important; /* rimuove padding extra sotto il link */
}

/* Il link download non deve avere margini extra che lo spingono giù */
#about-textbox .cv-download-link {
  position: static !important;  /* assicura che sia inline */
  margin-top: 1vh !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

/* Works panel: il suo bordo inferiore tocca il bottone "personal works"
   (bottom: 20% + gap ~2.8vh) */
#works-textbox {
  bottom: calc(20% + 3.5vh) !important;
  left: 17vw !important;
  width: 42vw !important;
  max-height: 60vh !important;
}

#works-textbox .personal-works-content {
  max-height: 60vh !important;
}

/* Il primo item non deve avere margine extra in desktop */
#works-textbox .personal-works-content .personal-work-item:first-child {
  margin-top: 0 !important;
}

.home-profile-box {
  position: fixed;
  left: 4%;
  top: 12vh;
  width: 22vh;
  height: 22vh;
  z-index: 50;
  display: none;
  opacity: 0;
  pointer-events: none;
}

.home-profile-box.active {
  display: block;
  opacity: 1;
}

.home-profile-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

}

.footer-title,
.footer-menu,
.footer-subtitle {
  position: fixed !important;
}

/* ============================================
   HOVER: NONE (TOUCH DEVICES)
   ============================================ */
@media (hover: none) {
  .gallery-nav-arrow:hover,
  .nav-arrow:hover {
    background: transparent !important;
  }

  .gallery-nav-arrow:active,
  .nav-arrow:active {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

  /* ============================================
     GALLERY TEXTBOX — SPAZIATURA CORRETTA
     ============================================ */
  #gallery-textbox .personal-works-content {
    /* Rimuove qualsiasi effetto di mascheramento o scroll-snap */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: none !important;
  }

  #gallery-textbox .personal-work-item {
    display: block !important;
    margin-bottom: 0.7em !important;
    min-height: auto !important;
    height: auto !important;
    /* opacity, transform e filter sono ora pilotati via JS
       da personal-works.js (updateListEffects) */
  }

  #gallery-textbox .personal-work-item:first-child {
    margin-top: 0 !important;
  }

  #gallery-textbox .personal-work-item:last-child {
    margin-bottom: 0 !important;
  }

  #gallery-textbox .work-link {
    display: inline-block !important;
    line-height: 1.2 !important;
    padding: 0.05em 0.2vw !important;
  }

  /* ============================================
   SMALL DESKTOP (1025px – 1240px)
   Sposta i pannelli più a destra per evitare
   la sovrapposizione con il footer-menu/title.
   ============================================ */
@media (min-width: 1025px) and (max-width: 1240px) {

  /* Pannelli generici (about, contacts) */
  .text-box,
  .personal-works-box {
    left: 22vw !important;
    width: 32vw !important;
  }

  /* Gallery menu (categorie) */
  #gallery-textbox,
  #gallery-textbox.active,
  #gallery-textbox.fixed,
  #gallery-textbox.active.fixed {
    left: 22vw !important;
    width: 32vw !important;
  }

  /* Personal works (lista progetti con thumbnail) */
  #works-textbox {
    left: 22vw !important;
    width: 42vw !important;
  }
}