/* =========================================================
   GALLERIA
========================================================= */

.collection-gallery {
  width: 92%;
  height: 84vh;
  display: flex;
  justify-content: center;
  margin: 8vh auto 0 auto;
  position: relative;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  gap: 20px;
  width: max-content;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.gallery-track:active {
  cursor: grabbing;
}

/* Singolo elemento */
.gallery-item {
  flex: 0 0 auto;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Immagini */
.gallery-item img {
  height: 50%;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* Overlay */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.gallery-item:hover::after {
  opacity: 0.6;
}

/* Caption */
.gallery-item .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 300;
  font-size: 3vw;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.35s ease;
  white-space: nowrap;
  pointer-events: none;
}

.gallery-item:hover .caption {
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.03);
}

/* =========================================================
   ROTATE MESSAGE — STANDARDIZZATO
========================================================= */

.rotate-message {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  color: #555;
  font-size: 6vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  z-index: 999999;
}

/* SOLO PORTRAIT */
@media (pointer: coarse) and (orientation: portrait) {
  .rotate-message {
    display: flex;
  }

  body > *:not(.rotate-message) {
    visibility: hidden;
  }
}

/* LANDSCAPE */
@media (orientation: landscape) {
  .rotate-message {
    display: none;
  }

  body > * {
    visibility: visible;
  }
}

/* =========================================================
   RESPONSIVE — BREAKPOINT CONSOLIDATI
========================================================= */
/* Desktop medio */
@media (max-width: 1368px) {
  .collection-gallery {
     width: 100%;
    height: 100vh;
    margin-top: 0vh;
  }

  .gallery-item img {
    height: 50%;
  }
}

/* Desktop medio */
@media (max-width: 1280px) {
  .collection-gallery {
    height: 90vh;
    margin-top: 4vh;
  }

  .gallery-item img {
    height: 52%;
  }
}

/* Desktop piccolo / Tablet */
@media (max-width: 1024px) {
  .collection-gallery {
     width: 100%;
    height: 100vh;
    margin-top: 0vh;
  }

  .gallery-track {
    gap: 14px;
  }

  .gallery-item img {
    height: 55%;
  }

  .gallery-item .caption {
    font-size: 4vw;
  }
}

/* Tablet */
@media (max-width: 896px) {
  .collection-gallery {
    height: 86vh;
  }

  .gallery-item img {
    height: 58%;
  }
}

/* Mobile grande */
@media (max-width: 720px) {
  .collection-gallery {
    height: 84vh;
  }

  .gallery-item img {
    height: 60%;
  }

  .gallery-item .caption {
    font-size: 5vw;
  }
}

/* Mobile medio */
@media (max-width: 667px) {
  .collection-gallery {
    height: 82vh;
  }

  .gallery-item img {
    height: 62%;
  }
}

/* Mobile piccolo */
@media (max-width: 480px) {
  .collection-gallery {
    height: 80vh;
  }

  .gallery-track {
    gap: 12px;
  }

  .gallery-item img {
    height: 65%;
  }

  .gallery-item .caption {
    font-size: 6vw;
  }
}