/* =========================================================
   TRIBE D6 — RESPONSIVE RULES
   Mobile-first base lives in style.css.
   This file scales the layout up for tablet + desktop.
   ========================================================= */

/* ---- Small phones: tighten spacing slightly ---- */
@media (max-width: 380px) {
  :root { --space-md: 1.4rem; }
  .hero-meta { gap: var(--space-md); }
}

/* ---- Tablet and up (768px) ---- */
@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .about-list { grid-template-columns: repeat(4, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .location-grid { grid-template-columns: 1fr 1fr; }

  .hero-art { aspect-ratio: 16 / 10; }
}

/* ---- Desktop (1024px) ---- */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .hamburger, .mobile-cta-bar { display: none; }
  .site-footer { padding-bottom: var(--space-lg); }

  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; }
  .about-grid.reverse { direction: rtl; }
  .about-grid.reverse > * { direction: ltr; }

  .category-grid { grid-template-columns: repeat(6, 1fr); }
  .category-card { min-height: 240px; }

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

  .menu-items { grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); }
  .menu-item { grid-template-columns: 1fr auto; }

  body { padding-bottom: 0; }
}

/* ---- Large desktop (1280px) ---- */
@media (min-width: 1280px) {
  .hero-copy p.lede { font-size: 1.25rem; }
}

/* ---- Body padding for mobile sticky CTA bar ---- */
@media (max-width: 1023px) {
  body { padding-bottom: 4.75rem; }
}

/* ---- Category nav sticky offset matches header height ---- */
@media (min-width: 1024px) {
  .category-nav-wrap { top: 73px; }
}