/**
 * AquaFlow — Mobile-first responsive breakpoints
 */

/* sm: 640px */
@media (min-width: 640px) {
  .af-sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .af-sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .af-sm-flex { display: flex; }
  .af-product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* md: 768px */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .af-md-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .af-md-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .af-md-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .af-dash-grid { grid-template-columns: repeat(4, 1fr); }
  .logo-mark { width: 40px; height: 40px; }
  .nav-row { padding: 12px 0; }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .af-lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .af-lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .af-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Mobile-only overrides */
@media (max-width: 767px) {
  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    flex-direction: column;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .nav-links.open { display: flex; }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    padding: 6px;
    font-size: 22px;
    color: var(--ink);
    cursor: pointer;
  }

  .af-table th,
  .af-table td { padding: 10px 12px; font-size: var(--text-xs); }

  .af-kit-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .af-kit-mobile-nav a {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink);
  }

  .af-kit-mobile-nav.open { display: flex; }
  .af-kit-mobile-nav { display: none; }
}

@media (max-width: 479px) {
  .af-grid-2,
  .af-dash-grid,
  .af-product-grid {
    grid-template-columns: 1fr;
  }

  .btn-lg, .af-btn-lg {
    width: 100%;
  }
}

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