/* Ob Uan — responsive overrides.
   Media queries cannot live in an inline style attribute, so the breakpoint
   behaviour sits here. Selectors hook onto explicit data-r tokens in the markup
   rather than inventing a class system: every rule below overrides one inline
   declaration at one breakpoint, and nothing here introduces new styling. */

/* ---------- 900px: laptop → tablet ---------- */
@media (max-width: 900px) {
  [data-r~="cols-3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r~="cols-4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Below the 3×3 matrix the flavour axes carry no meaning, so both descriptors go
     and the nine cards flatten into one two-column flow: leaving the rows intact
     would break each three into 2 + 1 and read as three ragged groups. The subgrid
     row alignment drops too, since the parent's explicit row count no longer holds. */
  [data-r~="xaxis"] { display: none !important; }
  [data-r~="axis-row"] { display: contents !important; }
  [data-r~="axis-row"] > span { display: none !important; }
  [data-r~="axis-line"] { display: none !important; }
  [data-r~="drinks"] { display: contents !important; }
  [data-r~="drinks"] > * { grid-row: auto !important; grid-template-rows: none !important; }
  [data-r~="drinks-wrap"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 20px !important;
  }

  [data-r~="split"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="split"] > * { order: 0 !important; }
  [data-r~="card"] { min-height: 0 !important; }
  [data-r~="card-media"] { aspect-ratio: 4 / 3 !important; align-self: stretch !important; }
  [data-r~="card-body"] { border-right: 0 !important; }
}

/* ---------- 820px: the header row's own limit ----------
   The desktop row needs 817px (logo 153 + nav 396 + cta 148 + gaps + padding).
   Below that it must stack, or the Reservations link spills past the right edge:
   the nav links are nowrap, so nothing reflows on its own. */
@media (max-width: 820px) {
  [data-r~="hdr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 15px !important;
    column-gap: 15px !important;
    padding: 12px 20px !important;
  }
  [data-r~="hdr-nav"] {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  [data-r~="hdr-cta"] { justify-self: start !important; padding: 9px 14px !important; }
  /* Measured header is 116px while the nav holds one line. */
  [data-r~="hdr-pad"] { height: 126px !important; }
}

/* ---------- 760px: tablet → large phone ---------- */
@media (max-width: 760px) {
  [data-r~="cols-2"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="jump"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }

  /* The footer stops being a fixed reveal panel and simply ends the page. */
  [data-r~="foot"] {
    position: static !important;
    height: auto !important;
    padding: 45px 20px 26px !important;
    gap: 45px !important;
  }
  [data-r~="foot-cols"] {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 30px !important;
    overflow: visible !important;
  }
  [data-r~="foot-mark"] { max-height: 120px !important; }
  [data-r~="foot-meta"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-right: 0 !important;
  }
  [data-r~="foot-pad"] { display: none !important; }

  [data-r~="pad"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r~="pad-y"] { padding-top: 45px !important; padding-bottom: 70px !important; }

  [data-r~="card-body"] { padding: 30px 20px !important; }

  /* Tables stay scrollable rather than collapsing: an allergen grid loses its
     meaning if the columns wrap. */
  [data-r~="pad"] { max-width: 100% !important; }

  [data-r~="hero"] { height: auto !important; min-height: 78vh !important; }
  [data-r~="top"] { right: 20px !important; bottom: 20px !important; }
}

/* ---------- 520px: phone ---------- */
@media (max-width: 520px) {
  [data-r~="cols-3"],
  [data-r~="cols-4"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="drinks-wrap"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-r~="hdr-nav"] { gap: 12px !important; }
  [data-r~="lunch"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- 380px: the nav wraps to three lines ---------- */
@media (max-width: 380px) {
  [data-r~="hdr-pad"] { height: 159px !important; }
}

/* Section-level prices ride MenuSection's baseline-aligned secondary span (the only
   slot the component offers beside the title). That span is typed for Thai, so the
   numerals are put back into the mono voice the design system specifies for prices. */
[data-ou-section-price] header > div > span:last-child {
  font-family: var(--font-mono) !important;
  letter-spacing: .14em !important;
}