/*
 * Lightbox Gallery — gallery grid layout
 *
 * The [lightbox-gallery] wrapper accepts a `class` (e.g. "grid grid-cols-4
 * gap-4"). Those utility classes are not part of every theme — the default
 * Grav themes (Quark 2, Typhoon) ship Pico CSS, which defines only a bare
 * `.grid` (auto-fit, and a single column below 768px) and none of the
 * `grid-cols-*` / `gap-*` helpers. Without them the documented example fell
 * back to a single vertical column.
 *
 * This file provides those helpers itself, scoped so it works on any theme
 * without fighting the theme's own `.grid` usage elsewhere on the page. It is
 * loaded after the theme CSS so the column count wins over Pico's auto-fit.
 */

/* Ensure the wrapper is a grid even on themes that don't define `.grid`
   (matches both Tailwind's and Pico's `.grid` — display only, no columns). */
.lightbox-gallery.grid {
    display: grid;
}

/* Markdown wraps the assembled anchors in a <p>. Make that wrapper transparent
   to the grid so the anchors themselves become the grid items (otherwise the
   whole gallery is a single grid cell and the columns do nothing). */
.lightbox-gallery.grid > p {
    display: contents;
}

/* Fixed column counts (Tailwind-compatible). Scoped to the gallery wrapper so
   a theme's own `.grid-cols-*` classes elsewhere are never touched. */
.lightbox-gallery.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lightbox-gallery.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lightbox-gallery.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lightbox-gallery.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lightbox-gallery.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lightbox-gallery.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Gap helpers (Tailwind scale: 1 unit = 0.25rem). */
.lightbox-gallery.gap-0 { gap: 0; }
.lightbox-gallery.gap-1 { gap: 0.25rem; }
.lightbox-gallery.gap-2 { gap: 0.5rem; }
.lightbox-gallery.gap-3 { gap: 0.75rem; }
.lightbox-gallery.gap-4 { gap: 1rem; }
.lightbox-gallery.gap-6 { gap: 1.5rem; }
.lightbox-gallery.gap-8 { gap: 2rem; }

/* Sensible default gap when the wrapper is a grid but no gap-* was given. */
.lightbox-gallery.grid:not([class*="gap-"]) { gap: 1rem; }

/* On narrow viewports, collapse dense galleries so thumbnails stay tappable. */
@media (max-width: 640px) {
    .lightbox-gallery.grid-cols-3,
    .lightbox-gallery.grid-cols-4,
    .lightbox-gallery.grid-cols-5,
    .lightbox-gallery.grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Make the thumbnails fill their grid cell. Scoped to gallery anchors only,
   so standalone [lightbox] images the author styles themselves are untouched.
   Descendant (not direct-child) because markdown may nest anchors in a <p>. */
.lightbox-gallery.grid a.glightbox {
    display: block;
    overflow: hidden;
}

.lightbox-gallery.grid a.glightbox img {
    display: block;
    width: 100%;
    height: auto;
}