/* Holy Puzzle: home page (templates/holypuzzle/home.html) */

/* ---------- Masonry gallery ---------- */
.masonry {
  column-count: 2;
  column-gap: .75rem;
}
@media (min-width: 768px)  { .masonry { column-count: 3; column-gap: 1rem; } }
@media (min-width: 1200px) { .masonry { column-count: 4; } }

/* each photo is a card: picture on top, Jigsaw / Tile buttons below it, then the title */
.masonry-item {
  display: block;
  width: 100%;
  margin-bottom: .75rem;
  break-inside: avoid;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  background: var(--bs-body-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 768px) { .masonry-item { margin-bottom: 1rem; } }
.masonry-item:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
  transform: translateY(-2px);
}

.masonry-item .thumb {
  display: block;
  overflow: hidden;
  background: var(--bs-secondary-bg);
}
.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0;
}
.masonry-item img.loaded { opacity: 1; }
.masonry-item:hover img,
.masonry-item:focus-within img {
  transform: scale(1.04);
}

.masonry-item .title {
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}