In-post event gallery block + lightbox; mobile polish

- Reusable "Photos from the event" grid (shows 5 thumbnails + "+N more") that
  opens a full-screen lightbox (arrows / keyboard / swipe / Esc); added to the
  Meet Student Slovenia 2024 post as the pattern
- New css/components/_lightbox.css + setupLightbox() in main.js (injects one
  shared overlay, wires any .js-lightbox grid)
- Mobile polish: gallery albums go single-column on phones, two on tablets;
  event-gallery grid 3-up on mobile; lightbox sizing/controls tuned for small
  screens

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_gallery.css

@@ -86,10 +86,17 @@
 .album-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #D0D5DD; }
 .album-meta .read-link { color: #2D738C; font-weight: 600; }
 
-@media (max-width: 600px) {
-    .gallery-albums { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 24px 16px 72px; }
-    .album-cover { height: 150px; }
-    .album-info { padding: 12px 12px 14px; }
-    .album-info h3 { font-size: 15px; }
-    .cover-more-badge { font-size: 17px; }
+/* Tablets / large phones: two clear columns */
+@media (max-width: 768px) and (min-width: 561px) {
+    .gallery-albums { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
+    .album-cover { height: 185px; }
+}
+/* Phones: one full-width column so each album reads clearly */
+@media (max-width: 560px) {
+    .gallery-hero { padding: 44px 20px 32px; }
+    .gallery-albums { grid-template-columns: 1fr; gap: 22px; padding: 22px 16px 64px; }
+    .album-cover { height: 210px; }
+    .album-info { padding: 13px 14px 15px; }
+    .album-info h3 { font-size: 16px; }
+    .cover-more-badge { font-size: 20px; }
 }