/* ========================================
   MUSEALYTICS - Responsive Styles
   Media queries and accessibility
   ======================================== */

/* ----------------------------------------
   Responsive
   ---------------------------------------- */
@media (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .main {
    padding: var(--space-4);
  }
  
  .header {
    padding: var(--space-8) var(--space-4);
  }
  
  .logo {
    font-size: var(--font-2xl);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
  
  .skip-stats {
    grid-template-columns: 1fr;
  }
  
  .skip-lists {
    grid-template-columns: 1fr;
  }
  
  .section-nav {
    padding: var(--space-2);
  }
  
  .nav-link span {
    display: none;
  }
  
  .footer-inner {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
  
  .theme-toggle {
    bottom: var(--space-4);
    left: var(--space-4);
    width: 40px;
    height: 40px;
  }
  
  .lang-selector {
    top: var(--space-4);
    right: var(--space-4);
  }
  
  .share-actions {
    flex-direction: column;
  }
  
  .share-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .heatmap-grid {
    grid-auto-columns: 10px;
  }
  
  .heatmap-cell {
    width: 8px;
    height: 8px;
  }
}

/* ----------------------------------------
   Accessibility
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------
   Print
   ---------------------------------------- */
@media print {
  .theme-toggle,
  .lang-selector,
  .section-nav,
  .btn-spotify,
  .share-actions,
  #uploadSection,
  #connectSection {
    display: none !important;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
}