/* ==========================================================================
   RESPONSIVE — media queries for tablet and mobile breakpoints (960px,
   860px, 640px, 560px, 480px), grouped by the section/component they
   affect. Component/section files hold the desktop-first styles;
   overrides for smaller screens live here.
   ========================================================================== */

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    background: var(--color-ink);
    padding: var(--space-6);
    border-bottom: 1px solid rgba(246, 239, 230, 0.12);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base);
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav ul { flex-direction: column; gap: var(--space-4); }
  .nav .btn { width: 100%; }
}

@media (max-width: 960px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .value-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 640px) {
  .hero { min-height: 480px; }
  .seal--hero { display: none; }
}

@media (max-width: 960px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .menu-grid { grid-template-columns: 1fr; }
  .filter-bar { gap: var(--space-2); }
  .filter-bar button { padding: var(--space-2) var(--space-4); font-size: var(--fs-small); }
}

@media (max-width: 860px) {
  .zones__inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  #catering { min-height: 400px; }
}