/* ============================================
   GALLERY — Section 5
   Masonry-like grid, full-bleed, no lateral padding
   ============================================ */

.gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-primary-dark);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, 1fr);
  gap: var(--space-1);
  width: 100%;
}

/* Varied sizes for masonry effect */
.gallery__item {
  position: relative;
  overflow: hidden;
}

.gallery__item:nth-child(1) {
  grid-column: span 1;
  grid-row: span 2;
}

.gallery__item:nth-child(2) {
  grid-column: span 1;
  grid-row: span 1;
}

.gallery__item:nth-child(3) {
  grid-column: span 1;
  grid-row: span 1;
}

.gallery__item:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
}

.gallery__item:nth-child(5) {
  grid-column: span 2;
  grid-row: span 1;
}

.gallery__item:nth-child(6) {
  grid-column: span 1;
  grid-row: span 1;
}

.gallery__item:nth-child(7) {
  grid-column: span 1;
  grid-row: span 1;
}

.gallery__item:nth-child(8) {
  grid-column: span 2;
  grid-row: span 1;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__item--placeholder {
  min-height: 200px;
  transition: transform 0.6s var(--ease-out);
}

.gallery__item--placeholder:hover {
  transform: scale(1.02);
}

/* Overlay on hover */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--color-primary-rgb), 0.2);
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
  pointer-events: none;
}

.gallery__item:hover::after {
  opacity: 1;
}

/* Reveal animation */
.gallery__item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.gallery.is-visible .gallery__item {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the reveal */
.gallery.is-visible .gallery__item:nth-child(1) { transition-delay: 0s; }
.gallery.is-visible .gallery__item:nth-child(2) { transition-delay: 0.08s; }
.gallery.is-visible .gallery__item:nth-child(3) { transition-delay: 0.16s; }
.gallery.is-visible .gallery__item:nth-child(4) { transition-delay: 0.24s; }
.gallery.is-visible .gallery__item:nth-child(5) { transition-delay: 0.32s; }
.gallery.is-visible .gallery__item:nth-child(6) { transition-delay: 0.4s; }
.gallery.is-visible .gallery__item:nth-child(7) { transition-delay: 0.48s; }
.gallery.is-visible .gallery__item:nth-child(8) { transition-delay: 0.56s; }

/* Responsive */
@media (max-width: 768px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, 1fr);
  }

  .gallery__item:nth-child(1) {
    grid-column: span 1;
    grid-row: span 2;
  }

  .gallery__item:nth-child(2) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery__item:nth-child(3) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery__item:nth-child(4) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery__item:nth-child(5) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gallery__item:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery__item:nth-child(7) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery__item:nth-child(8) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(120px, 1fr);
  }
}