content: add real photos + captions to all Student Welcome Guide pages

Replace the "Image placeholder" boxes on all 30 guide subpages + the guide
landing hero with real, optimized photos and captions, EN/MK/SI (93 figures).

- 31 source photos (up to 18 MB) optimized to WebP (<=1400px, all <500 KB)
  as images/guide-<slug>.webp.
- Captions follow the Get-to-Know style: description + "Photo:/Фото:/Foto:"
  + linked source (or MSOS for own event photos). Photographer credits kept.
  MK/SI descriptions are translated (proofread welcome).
- CSS: move the banner crop from the figure onto the <img> so the caption
  shows below it (was clipped by the figure's fixed height + overflow).

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

css/pages/_guide.css

@@ -291,20 +291,33 @@
     max-width: 960px;
     margin: 28px auto 24px;
     width: 100%;
-    aspect-ratio: 3 / 1;
-    border-radius: 14px;
-    overflow: hidden;
 }
+/* Banner crop lives on the image so the caption can show below it. */
 .guide-hero-image img {
     width: 100%;
-    height: 100%;
+    aspect-ratio: 3 / 1;
     object-fit: cover;
     display: block;
+    border-radius: 14px;
+}
+.guide-hero-image figcaption {
+    margin-top: 8px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #667085;
+    text-align: center;
+}
+.guide-hero-image figcaption a {
+    color: inherit;
+    text-decoration: underline;
 }
 .guide-hero-image--placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
+    aspect-ratio: 3 / 1;
+    border-radius: 14px;
+    overflow: hidden;
     background: #F2F4F7;
     border: 2px dashed #D0D5DD;
     color: #667085;
@@ -869,7 +882,7 @@
 @media (max-width: 768px) {
     .guide-landing-hero { padding: 92px 20px 44px; }
     .guide-landing-hero h1 { font-size: 32px; }
-    .guide-hero-image { aspect-ratio: 2 / 1; }
+    .guide-hero-image img { aspect-ratio: 2 / 1; }
     .guide-route { margin-top: 24px; padding: 22px; border-radius: 16px; }
     .guide-route-actions .btn { width: 100%; text-align: center; }
 }