﻿



/* Galleria centrata sotto il contenuto */
.collection-gallery1 {
  width: 100%;
  margin-top:2vh; /* Aggiunge uno spazio sopra per separare dalla parte superiore */
  padding: 0 2rem; /* Distanza ai bordi laterali per evitare che tocchi i bordi dello schermo */
  display: flex;
  justify-content: center; /* Centra la galleria orizzontalmente */
  align-items: center;
  overflow: hidden;
}

/* Galleria Track */
.gallery-track {


display: flex;

gap: 1vh;

overflow: hidden;

height: 15vh;

width: 95%; /* Limita la larghezza al 80% per mantenerla più centrata */

cursor: grab;

touch-action: pan-y;

user-select: none;
}

.gallery-item {
  position: relative;
  flex: 0 0 auto;
  margin-top: 0vh;
  width:12%;
  height: 15vh;  /* Mantiene le immagini alte per adattarsi allo spazio disponibile */
  overflow: hidden;
  display: flex;
  align-items: center;  /* Centra verticalmente le immagini */
  justify-content: center;
  background-color: #fff;
  text-decoration: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;  /* Imposta l'altezza al 100% per occupare tutta l'altezza del contenitore */
  object-fit: contain;
  transition: transform 0.4s ease;
  -webkit-user-drag: none;
  user-drag: none;
}
/* Overlay scuro */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.35s ease;!important;
}

/* Hover */
.gallery-item:hover img {
  transform: scale(1.03);
}

.gallery-item:hover::after {
  opacity: 1;
}

/* Capzione sopra le immagini */
.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.5vw;
  font-weight: 300;
  letter-spacing: 0px;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.35s ease;
  text-align: center;
  white-space: nowrap;
}

.gallery-item:hover .caption {
  opacity: 1;
}

/* Galleria mobile - per schermi più piccoli */
@media (max-width: 900px) {
  .collection-gallery1 {
    margin-top: 10vh; /* Distanza superiore ridotta per dispositivi più piccoli */
  }

  .gallery-track {
    width: 100%; /* La galleria occuperà tutta la larghezza dello schermo */
    gap: 14px; /* Aumenta lo spazio tra le immagini */
  }

  .gallery-item {
    height: 30vh;  /* Riduce l'altezza delle immagini per adattarle meglio agli schermi piccoli */
  }
}



/* =========================================================
   ROTATE MESSAGE — IDENTICA A INDEX / SERVICES / MATERIALS
========================================================= */

.rotate-message {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  color: #555;
  font-size: 6vw; /* IDENTICO ALLE ALTRE PAGINE */
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;

  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;

  z-index: 999999;
}

/* MOSTRA solo in PORTRAIT */
@media screen and (max-width: 900px) and (orientation: portrait) {
  .rotate-message {
    display: flex !important;
  }

  body > *:not(.rotate-message) {
    display: none !important;
  }
}

/* NASCONDE in LANDSCAPE */
@media screen and (max-width: 900px) and (orientation: landscape) {
  .rotate-message {
    display: none !important;
  }
}