/* ============================================
   Responsive — Mobile First Breakpoints
   Mobile(<640) → Tablet(640-1024) → Desktop(>1024)
   ★ Pinterest traffic = 70%+ mobile → mobile first!
   ============================================ */

/* --- Tablet (640px+) --- */
@media (min-width: 640px) {
  .container { padding: 0 var(--space-lg); }

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

  .masonry-grid { column-count: 2; }

  .hero__cta-group {
    flex-direction: row;
    justify-content: center;
  }

  .social-proof__inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2xl);
  }

  .newsletter__form {
    flex-direction: row;
  }

  .newsletter__input { flex: 1; }

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

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .container { padding: 0 var(--space-xl); }

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

  .masonry-grid { column-count: 3; }

  /* Show desktop nav, hide hamburger */
  .header__nav {
    display: flex;
  }

  .header__menu-btn {
    display: none;
  }

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

  .hero {
    min-height: 80vh;
  }
}

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

  .masonry-grid { column-count: 4; }
}

/* --- Touch-friendly overrides --- */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .product-card:hover {
    transform: none;
    box-shadow: none;
  }

  .btn-primary:hover {
    transform: none;
  }

  /* Larger touch targets */
  .filter-btn {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }
}

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

  html { scroll-behavior: auto; }
}

/* --- Print --- */
@media print {
  .header, .footer, .scroll-top, .newsletter,
  .mobile-menu, .search-overlay { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}