/* =====================================================================
   menu.html — page-specific styles
   Layout glue only. All visual tokens/components live in css/main.css.
   ===================================================================== */

/* Two-column: sticky filter rail + results (single column on mobile) */
.menu-layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 960px) {
  .menu-layout { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: var(--space-10); }
}

/* Filter panel */
.menu-filters { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 960px) {
  .menu-filters { position: sticky; top: calc(var(--nav-h) + var(--space-4)); }
}
.menu-filters__group { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-filters__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-subtle);
}
.menu-filters__note {
  display: flex; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-base);
}
.menu-filters__note .icon { flex: none; color: var(--color-primary); margin-top: 1px; }

/* Allergen exclusion — compact check-cards */
.menu-allergens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.menu-allergens .check-card { padding: var(--space-3) var(--space-4); }

/* Results column */
.menu-results { min-width: 0; }
.menu-results__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.menu-count { font-size: var(--fs-sm); color: var(--color-text-muted); }
.menu-count strong { color: var(--color-text); font-weight: var(--fw-semibold); }

/* Dish grid — compact cards, a little denser than the shared grid--auto */
.menu-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* Dish modal media + sections */
.dish-modal__media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.dish-modal__section-label { display: block; margin-bottom: var(--space-3); }
.dish-modal__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Closing CTA centering */
.menu-cta__actions { justify-content: center; }
.menu-cta__trust { justify-content: center; margin-top: var(--space-6); }