fix(pej): use YouTube thumbnails and local infographics

YouTube iframes blocked by CSP, pej.pl blocks hotlinking.
Videos now show as clickable thumbnail cards with play button.
Infographics downloaded to static/images/pej/.

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

templates/pej/index.html

@@ -112,16 +112,30 @@
 
     .pej-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
     @media (max-width: 768px) { .pej-media-grid { grid-template-columns: 1fr; } }
-    .pej-video-wrap {
+    .pej-video-card {
-        position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
+        display: block; text-decoration: none; border-radius: var(--radius);
-        border-radius: var(--radius); border: 1px solid var(--border);
+        border: 1px solid var(--border); overflow: hidden; transition: var(--transition);
     }
-    .pej-video-wrap iframe {
+    .pej-video-card:hover { border-color: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,0.1); }
-        position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
+    .pej-video-thumb {
+        position: relative; padding-bottom: 56.25%; background: #000;
+    }
+    .pej-video-thumb img {
+        position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
+    }
+    .pej-video-play {
+        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+        width: 60px; height: 60px; background: rgba(124,58,237,0.9); border-radius: 50%;
+        display: flex; align-items: center; justify-content: center;
+    }
+    .pej-video-play::after {
+        content: ''; width: 0; height: 0;
+        border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
+        margin-left: 4px;
     }
     .pej-video-title {
-        font-size: var(--font-size-sm); font-weight: 500; margin-top: var(--spacing-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
-        color: var(--text-primary);
+        font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary);
     }
     .pej-infographic {
         border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
@@ -228,29 +242,35 @@
     <div class="pej-section-title">Multimedia</div>
     <div class="pej-media-grid">
         <div>
-            <div class="pej-video-wrap">
+            <a href="https://www.youtube.com/watch?v=Ne7Nwo3sGSg" target="_blank" rel="noopener" class="pej-video-card">
-                <iframe src="https://www.youtube.com/embed/Ne7Nwo3sGSg" allowfullscreen loading="lazy" title="Wirtualny spacer po elektrowni jądrowej"></iframe>
+                <div class="pej-video-thumb">
-            </div>
+                    <img src="https://img.youtube.com/vi/Ne7Nwo3sGSg/hqdefault.jpg" alt="Wirtualny spacer po elektrowni jądrowej" loading="lazy">
-            <div class="pej-video-title">Wirtualny spacer po elektrowni jądrowej z perspektywy dozoru</div>
+                    <div class="pej-video-play"></div>
+                </div>
+                <div class="pej-video-title">Wirtualny spacer po elektrowni jądrowej z perspektywy dozoru</div>
+            </a>
         </div>
         <div>
-            <div class="pej-video-wrap">
+            <a href="https://www.youtube.com/watch?v=VnNmsntBHsg" target="_blank" rel="noopener" class="pej-video-card">
-                <iframe src="https://www.youtube.com/embed/VnNmsntBHsg" allowfullscreen loading="lazy" title="Elektrownia jądrowa Lubiatowo-Kopalino"></iframe>
+                <div class="pej-video-thumb">
-            </div>
+                    <img src="https://img.youtube.com/vi/VnNmsntBHsg/hqdefault.jpg" alt="Elektrownia jądrowa Lubiatowo-Kopalino" loading="lazy">
-            <div class="pej-video-title">Elektrownia jądrowa Lubiatowo-Kopalino</div>
+                    <div class="pej-video-play"></div>
+                </div>
+                <div class="pej-video-title">Elektrownia jądrowa Lubiatowo-Kopalino</div>
+            </a>
         </div>
         <div>
             <div class="pej-infographic">
-                <a href="https://pej.pl/wp-content/uploads/2025/06/Elementy-bloku-EJ-PL-1024x669.png" target="_blank" rel="noopener">
+                <a href="{{ url_for('static', filename='images/pej/elementy-bloku-ej.png') }}" target="_blank" rel="noopener">
-                    <img src="https://pej.pl/wp-content/uploads/2025/06/Elementy-bloku-EJ-PL-1024x669.png" alt="Elementy bloku elektrowni jądrowej" loading="lazy">
+                    <img src="{{ url_for('static', filename='images/pej/elementy-bloku-ej.png') }}" alt="Elementy bloku elektrowni jądrowej" loading="lazy">
                 </a>
                 <div class="pej-infographic-caption">Elementy bloku elektrowni jądrowej AP1000</div>
             </div>
         </div>
         <div>
             <div class="pej-infographic">
-                <a href="https://pej.pl/wp-content/uploads/2026/02/harmonogram_PL_18022026.png" target="_blank" rel="noopener">
+                <a href="{{ url_for('static', filename='images/pej/harmonogram-budowy.png') }}" target="_blank" rel="noopener">
-                    <img src="https://pej.pl/wp-content/uploads/2026/02/harmonogram_PL_18022026.png" alt="Harmonogram budowy elektrowni jądrowej" loading="lazy">
+                    <img src="{{ url_for('static', filename='images/pej/harmonogram-budowy.png') }}" alt="Harmonogram budowy elektrowni jądrowej" loading="lazy">
                 </a>
                 <div class="pej-infographic-caption">Harmonogram budowy elektrowni jądrowej (luty 2026)</div>
             </div>