Add navigation buttons for program modal and enhance keyboard controls

index.html

@@ -33,6 +33,8 @@
         </div>
         
         <div id="program-modal" class="modal">
+            <button class="modal-nav modal-prev" aria-label="Previous program">←</button>
+            <button class="modal-nav modal-next" aria-label="Next program">→</button>
             <div class="modal-content card">
                 <button class="modal-close" aria-label="Close modal">&times;</button>
                 <div class="modal-header">

script.js

@@ -83,7 +83,29 @@ function createProgramCard(program) {
     `;
 }
 
+let currentProgramIndex = 0;
+let visiblePrograms = [];
+
+function updateVisiblePrograms() {
+    visiblePrograms = Array.from(document.querySelectorAll('.program-card'))
+        .filter(card => !card.classList.contains('hidden-by-filter') && 
+                       !card.classList.contains('hidden-by-search'))
+        .map(card => JSON.parse(decodeURIComponent(card.dataset.program)));
+}
+
+function navigateModal(direction) {
+    updateVisiblePrograms();
+    
+    if (visiblePrograms.length === 0) return;
+    
+    currentProgramIndex = (currentProgramIndex + direction + visiblePrograms.length) % visiblePrograms.length;
+    openModal(visiblePrograms[currentProgramIndex]);
+}
+
 function openModal(program) {
+    updateVisiblePrograms();
+    currentProgramIndex = visiblePrograms.findIndex(p => p.name === program.name);
+    
     const modal = document.getElementById('program-modal');
     const body = document.body;
     
@@ -309,6 +331,21 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') closeModal();
+        if (!document.getElementById('program-modal').classList.contains('active')) return;
+        
+        switch(e.key) {
+            case 'Escape':
+                closeModal();
+                break;
+            case 'ArrowLeft':
+                navigateModal(-1);
+                break;
+            case 'ArrowRight':
+                navigateModal(1);
+                break;
+        }
     });
+
+    document.querySelector('.modal-prev').addEventListener('click', () => navigateModal(-1));
+    document.querySelector('.modal-next').addEventListener('click', () => navigateModal(1));
 });

styles.css

@@ -859,6 +859,58 @@ body.modal-open {
     overflow: hidden;
 }
 
+.modal-nav {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--elevated);
+    border: 1px solid var(--border);
+    color: var(--text);
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-card);
+    font-size: var(--font-4);
+    z-index: 1001;
+    opacity: 0.8;
+}
+
+.modal-nav:hover {
+    background: var(--primary);
+    color: var(--white);
+    transform: translateY(-50%) scale(1.1);
+    opacity: 1;
+}
+
+.modal-prev {
+    left: var(--spacing-4);
+}
+
+.modal-next {
+    right: var(--spacing-4);
+}
+
+@media (max-width: 768px) {
+    .modal-nav {
+        width: 48px;
+        height: 48px;
+        font-size: var(--font-3);
+    }
+    
+    .modal-prev {
+        left: var(--spacing-2);
+    }
+    
+    .modal-next {
+        right: var(--spacing-2);
+    }
+}
+
 @media screen and (min-width: 32em) {
   .ultratitle {
     font-size: var(--font-5);