Add lightbox for image gallery

style.css

@@ -52,9 +52,161 @@ div.luxtools-plugin .luxtools-empty {
 /* Image gallery spacing. */
 div.luxtools-gallery {
     padding-bottom: 0.5em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35em;
 }
 
-div.luxtools-gallery a.media {
+div.luxtools-gallery a.media.luxtools-gallery-item {
     display: inline-block;
-    margin: 0 0.35em 0.35em 0;
+    position: relative;
+    border: 1px solid @ini_border;
+    background-color: @ini_background_alt;
+    overflow: hidden;
+    line-height: 0;
+    text-decoration: none;
+}
+
+div.luxtools-gallery a.media.luxtools-gallery-item:hover,
+div.luxtools-gallery a.media.luxtools-gallery-item:focus {
+    border-color: @ini_text;
+}
+
+div.luxtools-gallery img.luxtools-thumb {
+    display: block;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+}
+
+/* Filename overlay (single line, muted). */
+div.luxtools-gallery .luxtools-gallery-caption {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 0.75em;
+    line-height: 1.3;
+    padding: 0.25em 0.4em;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.35);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+}
+
+/* Disable background scrolling while the lightbox is open. */
+html.luxtools-noscroll,
+html.luxtools-noscroll body {
+    overflow: hidden !important;
+}
+
+/* Fullscreen lightbox viewer (client-side). */
+.luxtools-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: none;
+}
+
+.luxtools-lightbox.is-open {
+    display: block;
+}
+
+.luxtools-lightbox .luxtools-lightbox-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
+}
+
+.luxtools-lightbox .luxtools-lightbox-stage {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.8em;
+}
+
+.luxtools-lightbox img.luxtools-lightbox-img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.luxtools-lightbox .luxtools-lightbox-caption {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0.6em 1em;
+    color: #fff;
+    opacity: 0.9;
+    background: rgba(0, 0, 0, 0.35);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
+/* Top-left "open in new tab" button. */
+.luxtools-lightbox button.luxtools-lightbox-opennew {
+    left: 0.6em;
+    top: 0.6em;
+    bottom: auto;
+    width: 2.4em;
+    height: 2.4em;
+    background: transparent;
+    border: none;
+    border-radius: 0.2em;
+    z-index: 2;
+}
+
+
+.luxtools-lightbox button.luxtools-lightbox-btn {
+    position: absolute;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+
+/* Navigation: transparent left/right tap zones (default everywhere). */
+.luxtools-lightbox button.luxtools-lightbox-prev,
+.luxtools-lightbox button.luxtools-lightbox-next {
+    top: 0;
+    bottom: 0;
+    width: 30%;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-size: 2em;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.luxtools-lightbox button.luxtools-lightbox-prev {
+    left: 0;
+}
+
+.luxtools-lightbox button.luxtools-lightbox-next {
+    right: 0;
+}
+
+/* Close button overlays content. */
+.luxtools-lightbox button.luxtools-lightbox-close {
+    top: 0.6em;
+    right: 0.6em;
+    width: 2.2em;
+    height: 2.2em;
+    background: transparent;
+    border: none;
+    z-index: 2;
+}
+
+@media (max-width: 600px) {
+    .luxtools-lightbox button.luxtools-lightbox-prev,
+    .luxtools-lightbox button.luxtools-lightbox-next {
+        font-size: 1.6em;
+    }
 }