/*!
 * Nova Peak Kitchens -- Responsive breakpoints.
 * Breakpoints: >=1280 desktop (default in style.css), 1024, 768, 480.
 * Mobile-first overrides are intentionally avoided in favor of a
 * desktop-default system that narrows down, matching style.css.
 */

/* ---------- Laptop / small desktop (<=1180px) ---------- */
@media (max-width: 1180px) {
  .container { padding: 0 var(--space-5); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .category-card { flex-basis: calc(33.333% - var(--space-6) * 2 / 3); max-width: calc(33.333% - var(--space-6) * 2 / 3); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-col.footer-contact-col { grid-column: 1 / -1; }
  .product-detail-grid { gap: var(--space-6); }
}

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px) {
  :root { --header-height: 76px; }
  .main-nav { display: none; }
  .hamburger { display: inline-flex; }
  /* Search + theme toggle move into the mobile nav panel; free up header space for the full company name. */
  .header-actions .search-toggle,
  .header-actions .theme-toggle { display: none; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid .gallery-item:nth-child(4n + 1) { grid-row: span 1; }
  .timeline-step { flex-basis: calc(33.333% - var(--space-5) * 2 / 3); max-width: calc(33.333% - var(--space-5) * 2 / 3); }
  .timeline { row-gap: var(--space-7); }
  .timeline::before,
  .timeline::after { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .product-detail-grid { grid-template-columns: 1fr; }
  .about-story-grid,
  .about-story-grid.reverse { grid-template-columns: 1fr; direction: ltr; }
  /* .reverse swaps image/text sides for desktop's 2-column layout via DOM order + rtl;
     once stacked to 1 column that puts an image right after the previous section's
     image with no text between them. Force text-before-image everywhere on mobile. */
  .about-story-grid.reverse .about-image-frame { order: 2; }
  .contact-info-grid,
  .contact-form-grid { grid-template-columns: 1fr; }
  section { padding: var(--space-8) 0; }
}

/* ---------- Small header (<=520px) ---------- */
@media (max-width: 520px) {
  .brand-logo { height: 1.6em; }
}

/* ---------- Tablet / large mobile (<=860px) ---------- */
@media (max-width: 860px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card { flex-basis: calc(50% - var(--space-6) / 2); max-width: calc(50% - var(--space-6) / 2); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ---------- Mobile (<=640px) ---------- */
@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
  .header-inner { gap: var(--space-3); }
  section { padding: var(--space-7) 0; }
  .hero { min-height: 100vh; }
  .hero-actions,
  .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn,
  .cta-actions .btn { width: 100%; }
  .category-grid { gap: var(--space-4); }
  .category-card { flex-basis: calc(50% - var(--space-4) / 2); max-width: calc(50% - var(--space-4) / 2); }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .product-card-body { padding: var(--space-4); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .features-grid { grid-template-columns: 1fr; }
  .timeline-step { flex-basis: calc(50% - var(--space-5) / 2); max-width: calc(50% - var(--space-5) / 2); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-box { flex: 1 1 auto; max-width: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-7); text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  .product-info-list { grid-template-columns: 1fr; }
  .cookie-notice { left: var(--space-3); right: var(--space-3); max-width: none; }
  .floating-actions { right: var(--space-4); bottom: var(--space-4); }
  .fab-whatsapp { width: 56px; height: 56px; font-size: 1.4rem; }
  .fab-tooltip { display: none; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox img { max-width: 94vw; max-height: 74vh; }
}

/* ---------- Small mobile (<=400px) ---------- */
@media (max-width: 400px) {
  .product-grid,
  .stat-grid { grid-template-columns: 1fr; }
  .category-card,
  .timeline-step { flex-basis: 100%; max-width: 100%; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2rem; }
  .btn { width: 100%; }
  .hero-content .btn { width: auto; }
  .mobile-nav { width: 100%; }
}