/* ==========================================================================
   ACCELFLOWSYSTEMS DESIGN SYSTEM - RESPONSIVE STYLES
   ========================================================================== */

/* 1280px Desktop refinement */
@media (max-width: 1280px) {
  .footer-top {
    grid-template-columns: 2fr repeat(2, 1fr);
    row-gap: var(--space-8);
  }
}

/* 1024px Tablet Landscape */
@media (max-width: 1024px) {
  .nav-links, .header-cta-group {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .demo-app-layout {
    grid-template-columns: 1fr;
  }

  .demo-sidebar {
    display: none; /* Accessible via mobile tabs */
  }

  .col-8, .col-7, .col-6, .col-5, .col-4 {
    grid-column: span 12;
  }

  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* 768px Tablet Portrait */
@media (max-width: 768px) {
  .site-header {
    height: 64px;
  }

  .mobile-menu {
    top: 64px;
  }

  .grid {
    column-gap: var(--space-4);
    row-gap: var(--space-6);
  }

  .col-12, .col-10, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2 {
    grid-column: span 12;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .drawer {
    width: 100%;
    max-width: 100%;
  }

  .graph-container {
    height: 420px;
  }
}

/* 480px Mobile */
@media (max-width: 480px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .btn {
    width: 100%;
  }

  .header-container {
    padding: 0;
  }

  .card {
    padding: var(--space-4);
  }

  .scenario-panel {
    padding: var(--space-5);
  }

  .graph-container {
    height: 360px;
  }

  .graph-legend {
    display: none; /* Save space on compact mobile */
  }
}

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

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}