/* Core mosaic layout driven by CSS variables on the container */
.gx-mosaic-pg {
  column-width: var(--gx-minw, 220px);
  column-gap: var(--gx-gap, 12px);
}
.gx-mosaic-pg__item {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--gx-gap, 12px);
  break-inside: avoid;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 10px;
}
.gx-mosaic-pg__img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0);
  will-change: transform;
  transition: transform .25s ease;
}
.gx-mosaic-pg__item:hover .gx-mosaic-pg__img { transform: scale(1.02); }

.gx-mosaic-pg__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  font-size: .95rem;
  line-height: 1.3;
  background: var(--gx-overlay-bg, rgba(0,0,0,.45));
  color: var(--gx-overlay-txt, #fff);
  opacity: 1;
  transition: opacity .2s ease;
}

/* Caption behavior */
.gx-mosaic-pg[data-caption-mode="hover"] .gx-mosaic-pg__caption { opacity: 0; }
.gx-mosaic-pg[data-caption-mode="hover"] .gx-mosaic-pg__item:hover .gx-mosaic-pg__caption { opacity: 1; }
.gx-mosaic-pg[data-caption-mode="hidden"] .gx-mosaic-pg__caption { display: none; }

/* Lightbox */
.gx-mosaic-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
}
.gx-mosaic-lightbox.is-open { display: flex; }
.gx-mosaic-lightbox__imgwrap { max-width: 95vw; max-height: 90vh; }
.gx-mosaic-lightbox__imgwrap img { max-width: 100%; max-height: 100%; display: block; }

.gx-mosaic-lightbox__close,
.gx-mosaic-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.6);
  color: #fff; border: none; cursor: pointer;
  padding: 10px 14px; font-size: 16px; border-radius: 8px;
}
.gx-mosaic-lightbox__close { top: 20px; right: 20px; transform: none; font-size: 18px; }
.gx-mosaic-lightbox__nav--prev { left: 20px; }
.gx-mosaic-lightbox__nav--next { right: 20px; }
.gx-mosaic-lightbox__caption { position: absolute; bottom: 16px; left: 20px; right: 20px; color: #fff; text-align: center; font-size: 15px; opacity: .9; }

@media (max-width: 600px) {
  .gx-mosaic-pg { column-width: max(140px, calc(var(--gx-minw, 220px) - 40px)); }
}
