/* Mobile First - All base styles are already mobile-optimized */

/* Tablet and up */
@media (min-width: 768px) {
  body {
    font-size: 1rem;
  }

  .container {
    padding: 0 var(--spacing-xl);
  }

  .section-header-title {
    font-size: 2rem;
  }

  .hero-text h1 {
    font-size: 2.125rem;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .header-container {
    padding: var(--spacing-lg) var(--spacing-2xl);
  }

  .container {
    padding: 0 var(--spacing-2xl);
  }

  .section-header-title {
    font-size: 2.25rem;
  }

  .hero-text h1 {
    font-size: 2.375rem;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* Large desktop and up */
@media (min-width: 1280px) {
  body {
    font-size: 1.0625rem;
  }

  .section-header-title {
    font-size: 2.5rem;
  }

  .hero-text h1 {
    font-size: 2.625rem;
  }
}

/* Print styles */
@media print {
  header,
  footer,
  .demo-banner {
    display: none;
  }

  body {
    background: white;
  }

  .card {
    page-break-inside: avoid;
  }
}

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