/* ===== GALLERY SECTION ===== */
#gallery {
  position: relative;
  overflow: hidden;
  padding: 60px 30px 60px;
}

/* ===== GALLERY TITLE (OPȚIONAL) ===== */
.gallery-title {
  text-align: center;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
  text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* ===== GALLERY CONTAINER ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 350px;
  grid-auto-flow: dense;
  gap: 1.5rem;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
  position: relative;
}
.gallery-item {
  position: relative;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  animation: fadeInUp 0.3s ease-out forwards;
  will-change: transform, opacity;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Folosim translate3d pentru performanță și rezolvare conflict */
.gallery-item:hover {
  transform: translate3d(0, -8px, 0);
}

/* Dublu orizontal (700x350) => 2 coloane */
.gallery-item.wide {
  grid-column: span 2;
}

/* Dublu vertical (350x700) => 2 rânduri */
.gallery-item.tall {
  grid-row: span 2;
}

/* ===== FADE-IN ANIMATION ===== */
/* Ajustare fadeInUp pentru a evita suprascrierea transformării hover după animație */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ===== STAGGERED ANIMATION DELAYS ===== */
.gallery-item:nth-child(1)  { animation-delay: 0.05s; }
.gallery-item:nth-child(2)  { animation-delay: 0.1s; }
.gallery-item:nth-child(3)  { animation-delay: 0.15s; }
.gallery-item:nth-child(4)  { animation-delay: 0.2s; }
.gallery-item:nth-child(5)  { animation-delay: 0.25s; }
.gallery-item:nth-child(6)  { animation-delay: 0.3s; }
.gallery-item:nth-child(7)  { animation-delay: 0.35s; }
.gallery-item:nth-child(8)  { animation-delay: 0.4s; }
.gallery-item:nth-child(9)  { animation-delay: 0.45s; }
.gallery-item:nth-child(10) { animation-delay: 0.5s; }
.gallery-item:nth-child(11) { animation-delay: 0.55s; }
.gallery-item:nth-child(12) { animation-delay: 0.6s; }
.gallery-item:nth-child(13) { animation-delay: 0.65s; }
.gallery-item:nth-child(14) { animation-delay: 0.7s; }

/* ===== PLACEHOLDER ===== */
.placeholder {
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 12px;
}

/* ===== OVERLAY ===== */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0; 
  right: 0;
  display: flex;
  justify-content: center; 
  align-items: center;
  padding: 0.6rem 1rem;
  background: rgba(29, 185, 84, 0.8);
  backdrop-filter: blur(6px);
  border-radius: 0 0 12px 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}

/* ===== HOVER OVERLAY ===== */
.gallery-item:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}

/* ===== TEXT DIN OVERLAY ===== */
.overlay-text {
  color: #fff;
  font-size: 0.95rem;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .gallery-item {
      animation: none;
      opacity: 1;
      transform: none;
  }
  
  .gallery-item:hover {
      transform: none;
  }
  
  .overlay {
      transition: none;
  }
  .gallery-item:hover .overlay {
      transform: none;
      opacity: 1;
  }
}

/* ===== MOBILE RESPONSIVE STYLE ===== */
@media (max-width: 768px) {
  .gallery {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
      gap: 1rem;
      padding: 1rem;
  }

  .gallery-item,
  .gallery-item.wide,
  .gallery-item.tall {
      grid-column: span 1;
      grid-row: span 1;
      height: auto;
  }

  .placeholder,
  .gallery-item img {
      height: auto;
      width: 100%;
      object-fit: contain;
      display: block;
      aspect-ratio: auto;
  }

  .gallery-item img {
      border-radius: 12px;
  }

  .gallery-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  /* Dezactivăm efectul hover translate pe mobil (opțional) */
  .gallery-item:hover {
      transform: none;
  }
}