Fix PhotoSwipe captions with official dynamic caption plugin

Root Cause:
- PhotoSwipe v5 removed built-in caption support from v4
- Custom captionContent callback (lines 223-232) doesn't exist in v5 API
- Captions silently failed because option was ignored

Solution:
- Install official photoswipe-dynamic-caption-plugin@1.2.7
- Replace broken callback with plugin initialization
- Plugin uses v5's ui.registerElement() API internally
- Type 'auto' = aside on desktop, below on mobile

Technical Changes:
- Import plugin + CSS (lines 193-195)
- Remove broken captionContent callback
- Add plugin init before lightbox.init() (lines 230-236)
- Update CSS to target .pswp__dynamic-caption class
- Egyptian design system colors applied (!important for plugin override)

Testing:
- Click any photo in /portfolio/statsbomb gallery
- Caption should display with TODO text
- Verify dark semi-transparent background
- Check mobile (caption below) vs desktop (caption aside)

Next Step: Replace 13 TODO captions with personal context from
docs/plans/statsbomb-photo-captions-context-needed.md

Story Points: 3 (library-first solution, reversible)

Author: saadshahd

bun.lock

@@ -34,6 +34,7 @@
     "headroom.js": "^0.12.0",
     "motion": "^12.23.24",
     "photoswipe": "^5.4.4",
+    "photoswipe-dynamic-caption-plugin": "^1.2.7",
     "shiki": "^3.13.0",
     "zod": "^4.1.12"
   }

package.json

@@ -174,23 +174,28 @@ try {
     }
   }
 
-  /* PhotoSwipe Caption Styling */
-  :global(.pswp__caption-content) {
-    padding: var(--spacing-md);
-    background: rgba(15, 23, 42, 0.9); /* text-text with alpha */
-    color: var(--color-background);
-    font-size: 14px;
-    line-height: 1.5;
-    text-align: center;
-    font-style: italic;
-    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  /* PhotoSwipe Dynamic Caption Plugin - Egyptian Design System Override */
+  :global(.pswp__dynamic-caption) {
+    background: rgba(15, 23, 42, 0.9) !important; /* text-text with alpha */
+    color: var(--color-background) !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+    padding: var(--spacing-md) !important;
+    font-style: italic !important;
+  }
+
+  /* Ensure caption text is readable */
+  :global(.pswp__dynamic-caption a) {
+    color: var(--color-primary) !important;
   }
 </style>
 
 <script>
   import PhotoSwipeLightbox from "photoswipe/lightbox";
   import PhotoSwipe from "photoswipe";
+  import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin';
   import "photoswipe/style.css";
+  import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css';
 
   // Check for reduced motion preference
   function prefersReducedMotion(): boolean {
@@ -217,18 +222,6 @@ try {
         children: "a",
         pswpModule: PhotoSwipe,
 
-        // Enable captions from data-pswp-caption attribute
-        captionContent: (slide) => {
-          const caption = slide.data.element?.getAttribute('data-pswp-caption');
-          if (!caption) return '';
-
-          // Create caption element with proper styling
-          const captionEl = document.createElement('div');
-          captionEl.className = 'pswp__caption-content';
-          captionEl.textContent = caption;
-          return captionEl;
-        },
-
         // Animation durations (will be overridden by CSS if reduced motion)
         showAnimationDuration: prefersReducedMotion() ? 0 : 400,
         hideAnimationDuration: prefersReducedMotion() ? 0 : 400,
@@ -237,6 +230,14 @@ try {
         closeOnVerticalDrag: true,
       });
 
+      // Initialize official caption plugin
+      const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
+        type: 'auto', // 'auto' = aside on desktop, below on mobile
+        captionContent: (slide) => {
+          return slide.data.element?.getAttribute('data-pswp-caption') || '';
+        },
+      });
+
       lightbox.init();
       console.log("[PhotoGallery] Lightbox initialized for:", galleryId);
     });