Add category filter and functional pagination to projects listing

Add a Proxify-style category filter and real client-side pagination to
the Events & Projects listing across all three languages (EN/SI/MK).

- Filter: a pill nav (All / Events / Student Life / Projects / Webinars)
  plus a contextual sub-chip row for Events (Sports / Cultural /
  Entertainment / Educational). Buttons carry stable data-filter /
  data-subfilter keys and cards carry data-category / data-subcategory,
  so a single language-agnostic handler drives all three locales.
- Pagination: replaces the hardcoded dead 1..10 links with real
  client-side paging (9 per page). Shows a single page today and grows
  automatically as content is added, with windowed page numbers,
  enabled/disabled Prev/Next, and smooth scroll-to-top. Integrates with
  the filter (resets to page 1, repaginates, hides when no matches).
- Show a localized empty-state message when a filter has no results.
- Nudge the filter block up and add space below it for even spacing.
- Drop the duplicate News pill (News has its own top-nav section) and
  retag the placeholder card from announcements to projects so it stays
  reachable.

Verified with jsdom across EN/SI/MK: filtering, sub-filtering, empty
state, single/multi-page navigation, and filter/pagination interaction.

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

css/pages/_projects.css

@@ -93,6 +93,114 @@
     font-weight: 500;
 }
 
+/* 1b. Filter kategorij (pill navigacija + podfiltri) */
+
+.filter-section {
+    padding: 0 24px 44px;
+    margin-top: -40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+/* Zunanja "pill" navigacija (glavne kategorije) */
+.filter-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    padding: 6px;
+    background: #F9FAFB;
+    border-radius: 999px;
+    box-shadow: 0px 8px 30px rgba(16, 24, 40, 0.06);
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+.filter-nav::-webkit-scrollbar { display: none; }
+
+.filter-pill {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0 20px;
+    border: none;
+    background: transparent;
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    color: #344054;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.filter-pill:hover {
+    color: #2D738C;
+}
+
+.filter-pill.active {
+    color: #2D738C;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
+}
+
+/* Notranja vrstica s podfiltri (npr. vrste dogodkov) */
+.filter-subnav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+.filter-subnav[hidden] { display: none; }
+
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    height: 38px;
+    padding: 0 18px;
+    border: 1px solid #D0D5DD;
+    background: #FFFFFF;
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    color: #344054;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.filter-chip:hover {
+    border-color: #2D738C;
+    color: #2D738C;
+}
+
+.filter-chip.active {
+    background: #101828;
+    border-color: #101828;
+    color: #FFFFFF;
+}
+
+/* Sporočilo, ko noben zadetek ne ustreza filtru */
+.filter-empty {
+    width: 100%;
+    text-align: center;
+    color: #667085;
+    font-size: 16px;
+    padding: 32px 0;
+}
+.filter-empty[hidden] { display: none; }
+
+/* Skrite kartice pri filtriranju */
+.post-card[hidden] { display: none; }
+
 /* 2. Sekcija z vsemi objavami */
 
 .all-posts-section {
@@ -131,6 +239,8 @@
     border-top: 1px solid #EAECF0;
 }
 
+.pagination[hidden] { display: none; }
+
 .pagination-arrow {
     display: flex;
     align-items: center;
@@ -139,6 +249,16 @@
     font-weight: 500;
     color: #667085;
     text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease, opacity 0.2s ease;
+}
+
+.pagination-arrow:hover { color: #101828; }
+
+.pagination-arrow.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: default;
 }
 
 .pagination-numbers {
@@ -157,8 +277,12 @@
     font-size: 14px;
     font-weight: 500;
     color: #667085;
+    cursor: pointer;
+    transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+.page-number:hover { background-color: rgba(102, 112, 133, 0.08); }
+
 .page-number.active {
     background-color: rgba(102, 112, 133, 0.16);
     color: #2D738C;
@@ -207,6 +331,30 @@
         width: 100%;
     }
 
+    .filter-section {
+        padding: 0 16px 28px;
+        margin-top: -24px;
+        align-items: stretch;
+        gap: 16px;
+    }
+
+    /* Na mobilnem se glavna navigacija vodoravno pomika */
+    .filter-nav {
+        justify-content: flex-start;
+        border-radius: 12px;
+    }
+
+    .filter-subnav {
+        justify-content: flex-start;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        scrollbar-width: none;
+        padding-bottom: 4px;
+    }
+    .filter-subnav::-webkit-scrollbar { display: none; }
+
+    .filter-chip { flex: 0 0 auto; }
+
     .all-posts-section {
         padding: 48px 24px;
     }