/* ===========================================
   GALLERY COMPONENT
   Image grid layouts
   =========================================== */

/* The generator (library/html_formatting.py) ALWAYS interposes a layout child
   — .gallery-grid for grids, .gallery-track for carousels — so the wrapper must
   stay a plain block. As display:grid it became a 280px-track grid and squeezed
   its single child into ONE track, collapsing the images to 1 column. */
.block-gallery {
  display: block;
  margin: 40px 0;
}

/* Grid layout — deterministic column count.
   The generator writes grid-template-columns inline on .gallery-grid
   (auto-fill, minmax(300px,1fr)), which only beats a stylesheet rule; at the
   current 1136px container that happens to yield 3, but silently becomes 4 past
   1260px. !important is the only way to pin it from CSS while the inline style
   stands. */
.block-gallery-grid > .gallery-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 900px) {
  .block-gallery-grid > .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .block-gallery-grid > .gallery-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Masonry-style (requires JS for true masonry) */
.block-gallery-masonry {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
}

/* Fixed columns */
.block-gallery-2col { grid-template-columns: repeat(2, 1fr); }
.block-gallery-3col { grid-template-columns: repeat(3, 1fr); }
.block-gallery-4col { grid-template-columns: repeat(4, 1fr); }

/* Gallery items */
.block-gallery .gallery-item {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 4px;
}

.block-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.block-gallery .gallery-item:hover img {
  transform: scale(1.03);
  opacity: 0.95;
}

/* Caption overlay */
.block-gallery .gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block-gallery .gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* Gap variants */
.block-gallery.gallery-gap-none { gap: 0; }
.block-gallery.gallery-gap-sm { gap: 10px; }
.block-gallery.gallery-gap-md { gap: 20px; }
.block-gallery.gallery-gap-lg { gap: 30px; }

/* Responsive */
@media (max-width: 992px) {
  .block-gallery-4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .block-gallery {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .block-gallery-2col,
  .block-gallery-3col,
  .block-gallery-4col {
    grid-template-columns: 1fr;
  }
}