/* ============================================================
   gallery.css — Masonry Grid · Lightbox
   ============================================================ */

.gallery-page { padding: var(--sp-7) 0; }

/* Gallery grid */
.gallery-masonry {
  columns: 4 280px;
  column-gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-img);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.06); }

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(59,91,219,0.85) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-2);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay span {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
}

.gallery-cta-wrap { text-align: center; }

@media (max-width: 600px) {
  .gallery-masonry { columns: 2 150px; }
}