/*
 * 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;
}

/* Caption panel colors. GLightbox's "clean" skin paints the panel white but
   only sets a text color on the title, so on a dark theme the caption inherits
   the theme's light body color and lands on white (or, with a dark panel, the
   hard-coded black title lands on dark). Both colors are custom properties so a
   theme can set its own; the defaults below follow the usual dark-mode signals:
   a `dark` class or `data-theme="dark"` on <html>, and the OS preference when
   the theme sets no explicit light/dark choice of its own. */
.glightbox-clean .gslide-description {
    background: var(--lightbox-desc-bg, #fff);
    color: var(--lightbox-desc-color, #000);
}

.glightbox-clean .gslide-title {
    color: var(--lightbox-desc-color, #000);
}

:root.dark,
:root[data-theme="dark"],
body.dark {
    --lightbox-desc-bg: #1d1f25;
    --lightbox-desc-color: #f2f2f3;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]):not(.light):not(.dark) {
        --lightbox-desc-bg: #1d1f25;
        --lightbox-desc-color: #f2f2f3;
    }
}