/**
 * responsive.css
 * -----------------------------------------------------------------------
 * Desktop/tablet overrides on top of the mobile-first baseline in
 * style.css. Loaded last (see index.html load order comment), so every
 * rule here only needs to override, never duplicate, the mobile rule.
 *
 * Two breakpoints, matching the locked layout decisions:
 *   - tablet:  min-width: 768px  (dish grid 1 -> 2 col; matches the
 *              768px check animations.js already uses for modal
 *              open/close mode, so "desktop-ish" behavior stays in sync
 *              between CSS and JS)
 *   - desktop: min-width: 1024px (dish grid 2 -> 3 col; floating nav
 *              moves from fixed bottom bar to sticky top bar; hero/
 *              section type scale steps up)
 *
 * Logical properties throughout, per the RTL-readiness rule.
 * -----------------------------------------------------------------------
 */

/* ============================================================
   TABLET — 768px+
   ============================================================ */
@media (min-width: 768px) {
  /* ---------- Type scale step-up ---------- */
  :root {
    --font-size-hero: 3.25rem;
    --font-size-section: 2rem;
  }

  /* ---------- Dish grid: 1 -> 2 columns ---------- */
  .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---------- Hero content gets more breathing room ---------- */
  #hero-content {
    padding-inline: var(--space-6);
    padding-block-end: var(--space-8);
  }

  #hero-tagline {
    max-inline-size: 42ch;
  }

  .modal-overlay {
    align-items: center;
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
  }

  /* ---------- Modal: centered dialog instead of bottom sheet
       with a little more width on larger screens ---------- */
  .modal-dialog {
    inline-size: min(720px, calc(100vw - (var(--space-6) * 2)));
    block-size: min(89vh, 960px);
    max-block-size: min(89vh, 960px);
    border-radius: calc(var(--radius-lg) + 4px);
  }

  .modal-image {
    block-size: clamp(220px, 28vw, 320px);
  }

  .modal-header {
    padding: var(--space-4);
  }

  .modal-content {
    padding: 0 var(--space-4) var(--space-5);
  }
}

/* ============================================================
   DESKTOP — 1024px+
   ============================================================ */
@media (min-width: 1024px) {
  /* ---------- Dish grid: 2 -> 3 columns ---------- */
  .dish-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* ---------- Floating nav: bottom app-bar -> sticky top bar ----------
     Mobile baseline (style.css) is a fixed pill anchored to the bottom
     for thumb reach. Desktop/tablet-large repositions it as a sticky
     top bar per the locked layout decision, and switches its internal
     axis from column to row (categories + search side by side) since
     there's no thumb-reach constraint and horizontal space is cheap. */
  #floating-nav {
    position: sticky;
    inset-block-start: var(--header-height);
    inset-block-end: auto;
    inset-inline: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-inline: auto;
    max-inline-size: var(--content-max-width);
    border-radius: var(--radius-md);
  }

  #nav-categories {
    flex: 1;
  }

  #search-bar {
    flex-shrink: 0;
    padding-inline: 0;
  }

  /* Search is always visible on desktop, not a collapse/expand icon —
     override the mobile collapsed-width baseline outright. */
  #search-toggle {
    display: none;
  }

  #search-input {
    inline-size: 220px;
    min-inline-size: 220px;
    opacity: 1;
    padding-inline: var(--space-3);
  }

  /* ---------- Menu container: no longer needs to clear a fixed
       bottom bar now that nav is sticky-top ---------- */
  #menu-container {
    padding-block-end: var(--space-6);
  }

  #app-footer {
    padding-block-end: var(--space-6);
  }

  /* ---------- WhatsApp FAB: reposition now that there's no bottom
       nav bar to clear ---------- */
  #whatsapp-fab {
    inset-block-end: var(--space-4);
  }

  /* Section heading step-up: no override needed here — style.css's
     .menu-category-heading rule references var(--font-size-section)
     directly, so the tablet breakpoint's root-level reassignment above
     already cascades through without a duplicate selector. */
}