improve: calendar cards view - left-aligned, 12 items, filters, green external

- Left-align grid (max-width 900px)
- Show 12 events instead of 8
- Add filter buttons (Wszystkie / Norda Biznes / Zewnętrzne)
- Green gradient for external events matching homepage style

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

templates/calendar/index.html

@@ -555,6 +555,47 @@
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: var(--spacing-md);
+        max-width: 900px;
+    }
+
+    .cards-filter {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+        margin-bottom: var(--spacing-md);
+    }
+
+    .cards-filter-label {
+        font-size: var(--font-size-sm);
+        color: var(--text-muted);
+        font-weight: 500;
+    }
+
+    .cards-filter-btn {
+        padding: var(--spacing-xs) var(--spacing-md);
+        border-radius: var(--radius-btn);
+        border: 1.5px solid #cbd5e1;
+        background: white;
+        color: var(--text-secondary);
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        cursor: pointer;
+        transition: var(--transition);
+    }
+
+    .cards-filter-btn:hover {
+        border-color: var(--primary);
+        color: var(--primary);
+    }
+
+    .cards-filter-btn.active {
+        background: var(--primary);
+        color: white;
+        border-color: var(--primary);
+    }
+
+    .card-banner.hidden-by-filter {
+        display: none;
     }
 
     .card-banner {
@@ -590,7 +631,15 @@
     }
 
     .card-banner.external {
-        background: linear-gradient(135deg, #334155 0%, #475569 100%);
+        background: linear-gradient(135deg, #1a3a2a 0%, #2d5a3e 100%);
+    }
+
+    .card-banner.external:hover {
+        box-shadow: 0 10px 30px rgba(45, 90, 62, 0.25);
+    }
+
+    .card-banner.external .btn-card {
+        color: #2d5a3e;
     }
 
     .card-banner-title {
@@ -827,9 +876,16 @@
     <h2>Nadchodzące wydarzenia</h2>
 
     {% if upcoming_events %}
-    <div class="cards-grid">
-        {% for event in upcoming_events[:8] %}
-        <a href="{{ url_for('calendar.calendar_event', event_id=event.id) }}" class="card-banner{% if event.is_external %} external{% endif %}">
+    <div class="cards-filter">
+        <span class="cards-filter-label">Pokaż:</span>
+        <button class="cards-filter-btn active" onclick="filterCards('all', this)">Wszystkie</button>
+        <button class="cards-filter-btn" onclick="filterCards('norda', this)">🏢 Norda Biznes</button>
+        <button class="cards-filter-btn" onclick="filterCards('external', this)">🌐 Zewnętrzne</button>
+    </div>
+
+    <div class="cards-grid" id="cardsGrid">
+        {% for event in upcoming_events[:12] %}
+        <a href="{{ url_for('calendar.calendar_event', event_id=event.id) }}" class="card-banner{% if event.is_external %} external{% endif %}" data-event-type="{{ 'external' if event.is_external else 'norda' }}">
             <div class="card-banner-title">
                 {{ event.title }} →
                 {% if event.is_external and event.external_source %}
@@ -862,8 +918,8 @@
         {% endfor %}
     </div>
 
-    {% if upcoming_events|length > 8 %}
-    <div style="text-align: center; margin-top: var(--spacing-lg);">
+    {% if upcoming_events|length > 12 %}
+    <div style="margin-top: var(--spacing-lg);">
         <a href="?view=list" class="btn btn-outline">Zobacz wszystkie ({{ upcoming_events|length }}) →</a>
     </div>
     {% endif %}
@@ -983,6 +1039,18 @@
 
 {% block extra_js %}
 var csrfToken = '{{ csrf_token() }}';
+
+function filterCards(type, btn) {
+    document.querySelectorAll('.cards-filter-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    document.querySelectorAll('#cardsGrid .card-banner').forEach(card => {
+        if (type === 'all' || card.dataset.eventType === type) {
+            card.classList.remove('hidden-by-filter');
+        } else {
+            card.classList.add('hidden-by-filter');
+        }
+    });
+}
 async function toggleListRSVP(btn) {
     var eventId = btn.dataset.eventId;
     var isExt = btn.dataset.external === 'true';