/* Gallery container */
.gallery {
  position: relative;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  /* fixed spacing: keep gap and side padding constant across devices */
  padding: 8px;           /* top/bottom and left/right 8px */
  opacity: 0;
  min-height: 400px;      /* Prevent CLS while JS calculates height - ridotto per FCP migliore */
  will-change: height;    /* Optimize for height changes */
  overflow: hidden;       /* Taglia le ultime foto per creare un bordo lineare */
  content-visibility: auto; /* Modern browsers: migliora rendering */
}

@media (min-width: 768px) {
  .gallery {
    /* DESKTOP: Padding laterale (modifica questo valore per controllare la larghezza della gallery) */
    /* Valori consigliati: 200px = gallery larga, 300px = gallery media, 400px = gallery stretta */
    padding: 8px 150px;
  }
}

/* items: posizione assoluta, verranno posizionati da JS */
.gallery .g-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 24px; /* arrotondamento degli angoli */
  corner-shape: squircle;
}

/* immagine dentro l'item */
.gallery .g-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit; /* mantiene lo stesso raggio del wrapper */
  corner-shape: squircle;
  /* Ottimizza rendering immagini */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0); /* Force GPU acceleration */
  will-change: transform;
}

/* Prima immagine: sempre visibile */
.gallery .g-item:first-child {
  opacity: 1;
}

/* gap */
:root {
  --gallery-gap: 8; /* px, fixed gap value per mobile */
}

@media (min-width: 768px) {
  :root {
    --gallery-gap: 16; /* px, gap aumentato per desktop */
  }
}

.gallery.is-ready {
    opacity: 1;
}

.gallery.is-ready .g-item {
    animation: galleryFadeIn 0.45s ease forwards;
}

@keyframes galleryFadeIn {
    to {
        opacity: 1;
    }
}

/* Stagger leggero */
.gallery.is-ready .g-item:nth-child(2)  { animation-delay: 0.10s; }
.gallery.is-ready .g-item:nth-child(3)  { animation-delay: 0.15s; }
.gallery.is-ready .g-item:nth-child(4)  { animation-delay: 0.20s; }
.gallery.is-ready .g-item:nth-child(5)  { animation-delay: 0.25s; }
.gallery.is-ready .g-item:nth-child(6)  { animation-delay: 0.30s; }
.gallery.is-ready .g-item:nth-child(7)  { animation-delay: 0.35s; }
.gallery.is-ready .g-item:nth-child(8)  { animation-delay: 0.40s; }
.gallery.is-ready .g-item:nth-child(9)  { animation-delay: 0.45s; }
.gallery.is-ready .g-item:nth-child(10) { animation-delay: 0.50s; }
.gallery.is-ready .g-item:nth-child(11) { animation-delay: 0.55s; }
.gallery.is-ready .g-item:nth-child(12) { animation-delay: 0.60s; }
.gallery.is-ready .g-item:nth-child(13) { animation-delay: 0.65s; }
.gallery.is-ready .g-item:nth-child(14) { animation-delay: 0.70s; }
.gallery.is-ready .g-item:nth-child(15) { animation-delay: 0.75s; }
.gallery.is-ready .g-item:nth-child(16) { animation-delay: 0.80s; }
.gallery.is-ready .g-item:nth-child(17) { animation-delay: 0.85s; }
.gallery.is-ready .g-item:nth-child(18) { animation-delay: 0.90s; }
.gallery.is-ready .g-item:nth-child(19) { animation-delay: 0.95s; }
.gallery.is-ready .g-item:nth-child(20) { animation-delay: 1.00s; }
/* puoi fermarti alla prima “riga visiva” */

/* Pulsante chiusura lightbox */
.lightbox-close {
  position: fixed;
  /* MOBILE: posizione verticale del bottone di chiusura */
  top: 3rem;
  /* MOBILE: spaziatura destra - modifica questo valore per allinearlo alla foto */
  right: 8px;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.1s, transform 0.25s, background 0.3s;
  opacity: 1;
  transform: rotate(0deg);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.lightbox-close i {
  font-size: 1.5rem;
  color: var(--black-color, #000);
  line-height: 1;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 1);
}

.lightbox-close:active,
.lightbox-close.closing {
  opacity: 0.7;
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .lightbox-close {
    /* DESKTOP: posizione verticale */
    top: 2rem;
    /* DESKTOP: spaziatura destra */
    right: 2rem;
    width: 3rem;
    height: 3rem;
  }
  
  .lightbox-close i {
    font-size: 1.75rem;
  }
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;      
  display: flex;          /* sempre flex */
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;             /* invisibile inizialmente */
  pointer-events: none;   /* non cliccabile quando invisibile */
  transition: opacity 0.3s ease;
}

.lightbox.show {
  opacity: 1;
  pointer-events: auto;   /* cliccabile quando visibile */
}

.lightbox img {
  max-width: 96%;
  max-height: 90%;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightbox.show img {
  transform: scale(1);
}

/* Frecce di navigazione */
.lightbox-arrow {
  position: absolute;
  /* DESKTOP: Posizione verticale - 50% = centro verticale */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 10000;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  /* Padding per aumentare l'area cliccabile */
  padding: 20px;
}

.lightbox-arrow i {
  color: #7e7e7e;
  /* DESKTOP: Dimensione icona freccia */
  font-size: 48px;
  pointer-events: none;
  display: block;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.lightbox-arrow:hover {
  opacity: 0.7;
}

.lightbox-arrow:active {
  transform: translateY(-50%) scale(0.9);
}

.lightbox-arrow-left {
  /* DESKTOP: Distanza dal bordo sinistro */
  left: 40px;
}

.lightbox-arrow-right {
  /* DESKTOP: Distanza dal bordo destro */
  right: 40px;
}

/* Mobile: frecce più al centro e più in alto */
@media (max-width: 1023px) {
  .lightbox-arrow {
    /* MOBILE: Posizione verticale calcolata dal basso - valori: 40px = più in basso, 80px = più in alto */
    top: auto;
    bottom: 20px;
    transform: none;
    /* MOBILE: Padding aumentato per area cliccabile più grande */
    padding: 25px;
  }
  
  .lightbox-arrow i {
    /* MOBILE: Dimensione icona freccia ridotta (era 56px) */
    font-size: 40px;
  }
  
  .lightbox-arrow-left {
    /* MOBILE: Posizione orizzontale freccia sinistra - 50% = centro, poi spostata a sinistra di 80px */
    left: 50%;
    transform: translateX(-80px);
  }
  
  .lightbox-arrow-right {
    /* MOBILE: Posizione orizzontale freccia destra - 50% = centro, poi spostata a destra di 80px */
    right: 50%;
    transform: translateX(80px);
  }
  
  .lightbox-arrow-left:active {
    transform: translateX(-80px) scale(0.95);
    opacity: 0.6;
  }
  
  .lightbox-arrow-right:active {
    transform: translateX(80px) scale(0.95);
    opacity: 0.6;
  }
}

/* Previene lo scroll della pagina quando il lightbox è aperto */
body.lightbox-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  /* top viene impostato dinamicamente da JavaScript per mantenere la posizione di scroll */
}

/* Animazioni transizione lightbox mobile */
@keyframes slideOutUp {
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

@keyframes slideOutDown {
  to {
    opacity: 0;
    transform: translateY(100px);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lightbox img.slide-out-up {
  animation: slideOutUp 0.3s ease forwards;
}

.lightbox img.slide-out-down {
  animation: slideOutDown 0.3s ease forwards;
}

.lightbox img.slide-in-up {
  animation: slideInUp 0.3s ease forwards;
}

.lightbox img.slide-in-down {
  animation: slideInDown 0.3s ease forwards;
}