/* ==========================================================================
   Rang Mitra Painting — Gallery grids (gallery.css)
   Masonry-like responsive grid for the dedicated Gallery / Projects pages.
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,18,31,.78), transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-4);
  opacity: 0; transition: opacity var(--transition);
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__title { color: #fff; font-weight: 700; }
.gallery-item__tag { color: #d9d4f5; font-size: 0.8rem; }

/* hide items filtered out by JS */
.gallery-item.is-hidden { display: none; }

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}