/* Mobile first - base styles in other files */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .products__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .features__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero__title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Large screens (1280px+) */
@media (min-width: 1280px) {
  :root {
    --container-padding: 2rem;
  }
}

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

  html {
    scroll-behavior: auto;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}