/* ==================================================
   SIPHYRA - Responsive Breakpoints
   Desktop-first overrides down to tablet, then mobile
   hands off to mobile-app.css for the app-style shell.
   ================================================== */

@media (max-width: 1024px) {
  .hero h1 { font-size: 36px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { min-height: 220px; order: -1; }
}

/* Below 768px, the mobile app shell (mobile-app.css) takes over:
   top bar + bottom nav replace the desktop header/footer chrome. */
@media (max-width: 768px) {
  .site-header { display: none; }
  .site-footer { display: none; }
  .hero { display: none; } /* replaced by mobile promo card */

  .section { padding: 26px 0; }
  .container { padding: 0 16px; }

  .section-heading { align-items: center; margin-bottom: 16px; }
  .section-heading h2 { font-size: 19px; }

  .category-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .category-grid::-webkit-scrollbar { display: none; }
  .category-card { min-width: 92px; scroll-snap-align: start; padding: 16px 10px; }

  .product-grid.scroll-row {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .product-grid.scroll-row .product-card { min-width: 68vw; scroll-snap-align: start; }

  .product-grid.two-col { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .auth-card { margin: 24px 16px; padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr; }

  body { padding-bottom: var(--bottom-nav-height); }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 30px; }
  .product-grid.two-col { gap: 10px; }
}