Merge branch 'fix/lightbox-mobile-layout' into develop-kristijan

css/components/_lightbox.css

@@ -73,16 +73,33 @@
 .lightbox-project:hover { background: #D9752E; transform: translateX(-50%) translateY(-1px); }
 .lightbox-project[hidden] { display: none; }
 
+/* While the viewer is open, hide the floating "Ask MSOS" pill so it can't
+   overlap the caption / "Read the story" button. */
+body.lightbox-open .msa-root { display: none !important; }
+
 @media (max-width: 700px) {
     .event-gallery { margin: 36px 0 8px; }
     .event-gallery-title { font-size: 19px; margin: 0 0 12px; }
     .event-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
 }
 @media (max-width: 600px) {
-    .lightbox { padding: 12px; }
-    .lightbox-img { max-width: 96vw; max-height: 80vh; }
+    /* Stack image -> "Read the story" -> caption in a centred column so the
+       button and caption sit directly under the photo instead of pinned to the
+       screen bottom (where they were cramped and clashed with the pill). The
+       reduced image height guarantees room below even for tall/portrait photos. */
+    .lightbox { padding: 12px; flex-direction: column; justify-content: center; gap: 14px; }
+    .lightbox-img { max-width: 96vw; max-height: 62vh; }
     .lightbox-prev { left: 8px; }
     .lightbox-next { right: 8px; }
     .lightbox-close { top: 12px; right: 12px; }
-    .lightbox-caption { font-size: 12.5px; bottom: 12px; }
+    .lightbox-project {
+        position: static; transform: none; left: auto; bottom: auto;
+        margin: 0; flex: 0 0 auto;
+    }
+    .lightbox-project:hover { transform: none; }
+    .lightbox-caption {
+        position: static; left: auto; right: auto; bottom: auto;
+        flex: 0 0 auto; max-width: 92vw; margin: 0 auto;
+        font-size: 12.5px;
+    }
 }