/* Panel-managed dynamic gallery — masonry layout.
   Fixed-width columns, variable height: every image keeps its native aspect
   ratio (constant column width, height follows the image). Items flow with
   CSS multi-column, so any number of images works. Lightbox styling is
   inherited from style.css (.carousel-overlay etc.); script.js drives it off
   the .gallery-item hook and reads each tile's <img> source. */

.gallery {
  column-count: 3;
  column-gap: 12px;
  max-width: 1100px;
  margin: 14vh auto;
  padding: 0 12px;
}

@media (max-width: 900px) {
  .gallery { column-count: 2; }
}

@media (max-width: 560px) {
  .gallery { column-count: 1; }
}

.gallery-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px;
  cursor: pointer;
  display: block;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.gallery-item:hover img {
  filter: brightness(1.08);
}