/* ============================================================================
 * sb-gallery.css — styling for the StratusBuilder Image Gallery widget
 * (sb-gallery.js). Self-contained and theme-agnostic (no project CSS vars), so
 * any Stratus project that loads the shard gets a working grid + lightbox.
 *
 * Provider-specific chrome (e.g. SmugMug album browser / carousel) is styled by
 * the owning project, not here.
 * ========================================================================== */

/* Responsive column counts (shared with other grid widgets in most projects;
   defined here too so the gallery shard works standalone). */
.vs-grid-2 { grid-template-columns: repeat(2, 1fr); }
.vs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.vs-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Manual / provider grid */
.vs-gallery-grid { display: grid; gap: 8px; }
.vs-gallery-item img { width: 100%; display: block; border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
.vs-gallery-lightbox { cursor: pointer; }
.vs-gallery-lightbox img { transition: filter 0.15s, transform 0.15s; }
.vs-gallery-lightbox:hover img { filter: brightness(1.06); }

/* Lightbox overlay */
.vs-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: vs-fade-in 0.18s ease-out;
}
.vs-lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.vs-lightbox-close {
  position: absolute; top: 20px; right: 24px;
  background: transparent; border: none; color: #fff;
  font-size: 2.2rem; cursor: pointer; line-height: 1;
}
@keyframes vs-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 720px) {
  .vs-grid-3, .vs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}