/* ============================================================
   gallery.css — auto-discovered photo collage (masonry)
   ============================================================ */

.gallery { margin-top: 2.5rem; }

.gallery__status {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 2rem 0;
}
.gallery__status.is-hidden { display: none; }

/* Masonry via CSS columns */
.collage {
  column-gap: 14px;
  column-count: 4;
}
@media (max-width: 1100px) { .collage { column-count: 3; } }
@media (max-width: 760px)  { .collage { column-count: 2; } }
@media (max-width: 420px)  { .collage { column-count: 1; } }

.collage__item {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  background: #e9e6e1;
  box-shadow: 0 10px 30px -18px rgba(44, 51, 42, 0.5);
  cursor: zoom-in;
  position: relative;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.collage__item.is-in { opacity: 1; transform: none; }
.collage__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.collage__item:hover img { transform: scale(1.05); filter: saturate(1.08); }

/* tiny place caption on hover */
.collage__item::after {
  content: attr(data-place);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 0.9rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.collage__item:hover::after { opacity: 1; }

.gallery__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
}
.gallery__empty i { color: var(--primary); }