/* ==========================================================================
   KARTIK CATERERS — Responsive Rules
   Breakpoints: 480 / 600 / 768 / 1024 / 1280 / 1440
   ========================================================================== */

/* Header WhatsApp/Call icons are redundant with the always-visible floating
   action buttons and the mobile nav drawer's own buttons — hide them below
   600px so the brand, "Get a Quote" button and hamburger always fit on one
   line without forcing horizontal scroll on narrow phones. */
@media (max-width: 599px) {
  .header-actions .icon-btn { display: none; }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn-primary { padding-inline: 0.85rem; font-size: 0.72rem; }
}

/* ---- Small phones (default styles above are mobile-first: 320-479) ---- */
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.card-grid { grid-template-columns: 1fr; }
.menu-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.split { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.form-row-2 { grid-template-columns: 1fr; }
.form-row-3 { grid-template-columns: 1fr; }
.moment-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

/* ---- 480px and up ---- */
@media (min-width: 480px) {
  .masonry { column-count: 2; }
}

/* ---- 600px and up ---- */
@media (min-width: 600px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 768px and up (tablet) ---- */
@media (min-width: 768px) {
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
  .stat-item { border-bottom: none; }
  .stat-item:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.1); }
  .stat-item:last-child { border-right: none; }
  .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .masonry { column-count: 3; }
  .moment-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .form-row-3 { grid-template-columns: repeat(3, 1fr); }
  .split-media .frame-accent { display: block; }
}

/* ---- 1024px and up (desktop nav appears) ---- */
@media (min-width: 1024px) {
  .main-nav { display: block; }
  .hamburger, .mobile-nav { display: none; }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse .split-media { order: 2; }
  .split.reverse .split-copy { order: 1; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---- 1280px and up ---- */
@media (min-width: 1280px) {
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
  .masonry { column-count: 4; }
}

/* ---- 1440px and up ---- */
@media (min-width: 1440px) {
  .container { padding-inline: var(--space-lg); }
}

/* ---- Reduce section padding on small screens ---- */
@media (max-width: 767px) {
  section { padding-block: var(--space-xl); }
  .hero, .page-header { min-height: 88vh; }
  .hero-meta { gap: 1rem; }
}