Add Get to Know Slovenia and Macedonia sections with Welcome articles

Launch the two country sections as a cultural bridge, following the
approved Phase A spec and reusing the Events & Projects structure.

Hubs (6 pages, EN/SI/MK each):
- get-to-know-slovenia and get-to-know-macedonia
- Section header + newsletter form, 6-category filter (Places & Nature,
  Culture & Traditions, Food & Flavours, History & Heritage,
  People & Identity), 6 launch cards, empty state, client-side pagination.
- Five cards per hub link to articles that arrive in later batches.

Articles (6 pages, EN/SI/MK each):
- Welcome to Slovenia and Welcome to Macedonia, full text with the
  auto-generated table of contents and sticky mobile header.
- Real, sourced images with attribution captions (place, photographer,
  source link). Wikimedia photos also link the CC BY-SA licence and note
  that the image was cropped. Images center-cropped to a uniform 3:2 and
  downscaled. Each article's hero image is reused on its hub card.

Site-wide:
- Wire the For Students menu links (desktop and mobile) to the new hubs on
  every page and in the header templates; rename the menu label from
  North Macedonia to Macedonia (formal name kept in body content).
- Placeholder styles for images and cards still awaiting a sourced photo.
- Add caption styling for the hero image and give the article table of
  contents clear separation from the footer.

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

css/pages/_article.css

@@ -32,15 +32,15 @@
     display: flex;
     max-width: 1280px;
     margin: 0 auto;
-    padding: 0 32px;
+    padding: 0 32px 72px;
     gap: 64px;
-    align-items: flex-start; 
+    align-items: flex-start;
 }
 
 .article-container {
     flex-grow: 1;
     min-width: 0;
-    padding: 96px 0;
+    padding: 96px 0 24px;
 }
 
 /* ==========================================================================
@@ -269,6 +269,10 @@
     margin: 0 auto;
 }
 
+.article-main-image figcaption {
+    margin-top: 16px;
+}
+
 .article-inline-image {
     margin: 16px 0;
     display: flex;
@@ -281,10 +285,24 @@
     border-radius: 16px;
 }
 
+/* Shared caption style for hero and inline images */
+.article-main-image figcaption,
 .article-inline-image figcaption {
+    font-family: 'Inter', sans-serif;
     font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
     color: #667085;
     text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Attribution link inside image captions */
+.article-main-image figcaption a,
+.article-inline-image figcaption a {
+    color: #2D738C;
+    text-decoration: underline;
 }
 
 /* NOVO: Stili za odziven vdelan video */
@@ -609,4 +627,89 @@
     .newsletter-cta .privacy-note {
         text-align: center;
     }
+}
+
+/* ==========================================================================
+   Image placeholders (used until a sourced, licensed photo is added)
+   ========================================================================== */
+
+/* Article hero / inline placeholder */
+.image-placeholder .image-placeholder-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 10px;
+    padding: 32px 24px;
+    min-height: 220px;
+    background: #F9FAFB;
+    border: 2px dashed #D0D5DD;
+    border-radius: 12px;
+    color: #667085;
+}
+
+.image-placeholder .image-placeholder-box .ph-icon {
+    font-size: 32px;
+    color: #98A2B3;
+}
+
+.image-placeholder .ph-label {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #FA7850;
+}
+
+.image-placeholder .ph-desc {
+    font-size: 16px;
+    font-weight: 600;
+    color: #344054;
+    max-width: 620px;
+    margin: 0;
+}
+
+.image-placeholder .ph-meta {
+    font-size: 13px;
+    line-height: 1.5;
+    color: #667085;
+    max-width: 620px;
+    margin: 0;
+}
+
+.image-placeholder .ph-meta code {
+    background: #EEF2F6;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+/* Listing card image placeholder */
+.post-image-placeholder {
+    width: 100%;
+    height: 240px;
+    border-radius: 8px;
+    margin-bottom: 32px;
+    background: #F9FAFB;
+    border: 2px dashed #D0D5DD;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #98A2B3;
+    box-sizing: border-box;
+    padding: 16px;
+    text-align: center;
+}
+
+.post-image-placeholder i {
+    font-size: 28px;
+}
+
+.post-image-placeholder span {
+    font-size: 12px;
+    font-weight: 600;
+    color: #667085;
 }