/* ═══════════════════════════════════════════════════════════════
   responsive.css — layout fixes for phones, tablets and small laptops.

   Load this LAST on every page (after style.css and the page's own
   CSS) so it can refine those rules without editing them:

     <link rel="stylesheet" href="responsive.css">

   Each block below says what it fixes and why. Nothing here changes
   the desktop (1300px+) design.
   ═══════════════════════════════════════════════════════════════ */


/* ── 0. SAFETY NET ─────────────────────────────────────────────
   If any element ever pokes past the screen edge, don't let it make
   the whole page scroll sideways (or make phones zoom out to fit it).
   `clip` (unlike `hidden`) keeps position:sticky headers working. */
body { overflow-x: clip; }
img, svg, video { max-width: 100%; }


/* ── 1. HOME PAGE MENU TABS (overflowed 769px – 1110px) ───────
   .menu-tabs is width:fit-content and never wrapped above 768px, so
   with 9 tabs the row grew wider than the screen and dragged the
   whole page sideways (iPad portrait/landscape, small laptops).
   Above 768px the tabs now wrap onto a second row; on phones the
   existing swipe-scroll behaviour is kept. */
.menu-tabs { max-width: 100%; }
.tab-btn { flex-shrink: 0; }
@media (min-width: 769px) {
  .menu-tabs, .ld-tabs { flex-wrap: wrap; row-gap: .4rem; }
}


/* ── 2. CAROUSEL CARDS SIZED BY THEIR PHOTOS ──────────────────
   The home menu carousel and specials row are horizontal scrollers,
   but their cards had no width — each card grew to the natural pixel
   width of its photo (600–1200px), so on tablets you got one giant
   card and on phones a card wider than the screen. Give them a
   proper width. */
@media (max-width: 768px) {
  .menu-grid > .menu-card {
    flex: 0 0 clamp(240px, 42vw, 300px);
    width: clamp(240px, 42vw, 300px);
    min-width: 0;
  }
  .specials-row > .special-card {
    flex: 0 0 clamp(250px, 44vw, 320px);
    width: clamp(250px, 44vw, 320px);
  }
}
@media (max-width: 520px) {
  .menu-grid > .menu-card { flex-basis: 78vw; width: 78vw; max-width: 320px; }
  /* on phones the specials row stacks as a column (existing rule) */
  .specials-row > .special-card { flex-basis: auto; width: 100%; }
}


/* ── 3. MENU PAGE DISH GRID OVERFLOW (~520px – 560px) ─────────
   style.css gives every .menu-card min-width:260px (meant for the
   home carousel). The menu page's 2-column dish grid uses the same
   class, so two 260px cards can't fit and the grid burst out of the
   screen. Dish cards must be allowed to shrink to their column. */
.dish-grid > .menu-card, .dish-card { min-width: 0; }


/* ── 4. "SWIPE TO EXPLORE" BADGE COVERED CARD CONTENT ─────────
   The hint floated over the bottom of the cards, hiding prices and
   sitting on top of corner tags. Rows that actually scroll now get a
   small strip of their own under the cards, and the hint sits there.
   (The class is added by the site's script only when a row scrolls,
   so rows that don't scroll gain no extra space.) */
@media (max-width: 768px) {
  .swipe-scroller.is-scrollable:not(.slim) { padding-bottom: 2.9rem; }
}


/* ── 5. HOME HERO HEADLINE GAP ────────────────────────────────
   "Know No" is display:block, so the <br> that follows it added an
   extra empty line before "Borders". */
.hero-h1 em + br { display: none; }


/* ── 6. HAMBURGER BUTTON TAP TARGET ───────────────────────────
   The three-line icon is only 24×16px — too small for a thumb.
   Padding adds an invisible 44×44px hit area; the negative margin
   keeps the header layout exactly as it was. */
.nav-burger { padding: 14px 10px; margin: -14px -10px; box-sizing: content-box; }

/* In the open mobile menu, the whole row is tappable — not just the
   16px-tall text. */
@media (max-width: 1300px) {
  .nav-links li a { display: block; padding: .3rem 0; }

  /* On a phone held sideways the open menu (~490px) is taller than the
     screen (~390px) and couldn't scroll, so the last items and the
     Order button were unreachable. Cap its height to the screen and let
     it scroll. */
  .nav-links {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 768px) {
  .nav-links { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
}


/* ── 7. BANNER TEXT TOUCHING THE BOTTOM EDGE ──────────────────
   Page banners have padding-top (to clear the fixed header) but none
   at the bottom, so on tablets/phones — where the text is taller
   than the banner's minimum height — the last line sat right on the
   orange strip. */
@media (max-width: 1024px) {
  #hs-hero .hs-hero-content,
  #specials-hero .sh-content,
  #gallery-hero .gh-content { padding-bottom: 2.6rem; }
}


/* ── 8. FLOATING CHAT / CART BUTTONS ON PHONES ────────────────
   Slightly smaller so they cover less, and the footer gets extra
   room at the bottom so the last lines of text aren't hidden. */
@media (max-width: 520px) {
  #float-order { width: 46px; height: 46px; font-size: 1.05rem; bottom: 1rem; right: .9rem; }
  .reach-us { bottom: 4.9rem; right: .9rem; }
  .reach-toggle { width: 46px; height: 46px; }
  .reach-btn { width: 40px; height: 40px; }
}
@media (max-width: 768px) {
  footer { padding-bottom: 5.5rem; }
}


/* ── 9. FOOTER LINKS: TAP SIZE + LENGTH ───────────────────────
   Footer links were 16px tall and packed close together — hard to
   hit. They now have a comfortable tap height, and the two link
   columns sit side by side on phones so the footer isn't twice as
   long. */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .footer-grid > :first-child,
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-col ul { gap: .1rem; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 36px; }
}


/* ── 10. TEXT THAT WAS TOO SMALL TO READ ON PHONES ────────────
   A lot of badges, tags and labels were 9–10.9px. Raised to ~11px.
   (!important is deliberate: several of these are styled by longer
   selectors like ".rc-price .per" that would otherwise win.) */
@media (max-width: 768px) {
  .menu-badge, .rc-badge, .rc-amenity-tag, .dish-alt, .per, .size-chip,
  .img-tag, .cc-count, .puser, .dt-theme, .dp-theme-tag, .lbl,
  .spc-day-badge, .season-badge, .special-badge-overlay, .status-badge,
  .badge-label, .hh-days, .tcc-label, .rcr-label, .pm-copy,
  .cc-info a, .highlight-info a, .bk-cal-weekdays span,
  .field label, .bk-field label { font-size: .7rem !important; }
}

/* The small "HOTEL & RESTAURANT" line under the logo: a touch larger
   where there is room, and dropped on very small screens where it
   was squeezing the Hotels/Restaurant switch against the menu button. */
@media (min-width: 420px) and (max-width: 768px) {
  .logo-sub { font-size: .69rem; letter-spacing: .1em; }
}
@media (max-width: 340px) {
  .logo-sub { display: none; }
}


/* ── 11. LINKS AND BUTTONS TOO SMALL TO TAP ───────────────────
   Text links inside cards ("View Collection →", "Fire it up →",
   contact-card links) were only 14px tall, and the cart's close ×
   was 20×28. Padding gives them a fingertip-sized target without
   moving anything (margins are pulled in to compensate). */
@media (max-width: 768px) {
  .cc-info a, .highlight-info a, .bk-contact-card a {
    display: inline-block; padding: .55rem 0; margin-top: .1rem;
  }
}
.close-panel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
}


/* ── 12. FOOTER LANGUAGE MENU POKING OFF THE SCREEN (≤ 340px) ──
   style.css nudges every language menu 40px past its button
   (right:-40px) — right for the header, where the button sits near the
   left of the bar, but in the footer (now next to the theme switch) the
   open menu ended up 2px beyond the edge of a 320px phone. In the
   footer, line the menu's right edge up with its button instead. */
@media (max-width: 768px) {
  .footer-controls .lang-switcher-menu,
  .footer-bottom .lang-switcher-menu { right: 0; }
}


/* ── 13. SOUP / PROTEIN DROPDOWNS ZOOMING IN + TOO SMALL TO TAP ──
   Two separate mobile bugs on .dish-soup-select / .dish-protein-select
   (the "choose your soup" / "choose your protein" dropdowns added to
   the dish cards):

   1. iOS Safari auto-zooms the whole page when you focus any form
      control (<select> included) whose computed font-size is under
      16px. picadilly-menu.css sets these to .76rem (~12px), so
      tapping the dropdown on an iPhone yanked the viewport in — it
      looked "broken"/unresponsive rather than just opening a list.
      Bumping to 16px on the control itself removes the trigger; the
      visible size barely changes since browsers already render
      dropdown lists in their own native font regardless of this
      value.
   2. At .76rem + the existing padding the control was ~36px tall,
      under the ~44px minimum tap target used elsewhere on the site
      (see #11 above). Extra vertical padding on phones brings it up
      to a proper thumb-sized target without changing anything on
      desktop. */
@media (max-width: 768px) {
  .dish-soup-select, .dish-protein-select, .dish-extra-select {
    font-size: 16px;
    padding-top: .85rem; padding-bottom: .85rem;
  }
}

/* ── 14. REVIEWS — Hotel Reviews (rooms), Reviews Snapshot (menu),
      Guest Stories (about) and the "Leave a review" form ──────────
   Shared classes, so one block fixes all three pages. What was wrong:

   a) `hidden` was being ignored. .reviews-summary, .review-slider-arrow
      and .review-slider-dots all set their own `display`, which beats
      the browser's built-in [hidden] rule — so the rating box showed an
      empty "—" before reviews loaded, and the arrows/dots stayed on
      screen when there was only one review to slide between.
   b) The summary grid's `1fr` column could be stretched by the slider
      inside it (grid items won't shrink below their content unless told
      they may). minmax(0,1fr) + min-width:0 stops that.
   c) On tablets the single review card stretched the full page width
      (900px+ of italic text per line). Capped and centred.
   d) On phones the round arrows sat on top of the review text. They now
      flank the dots underneath instead.
   e) Hovering a card lifted it 4px, but the slider clips overflow, so
      the top border got sliced off. No lift inside the slider.
   f) Form: inputs under 16px make iOS zoom the page when focused (same
      bug as #13), and the star buttons were ~26px wide — too small to
      tap accurately.                                                   */

/* a) */
.reviews-summary[hidden],
.review-slider-arrow[hidden],
.review-slider-dots[hidden] { display: none; }

/* b) */
.reviews-summary {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.reviews-summary > *, .review-slider { min-width: 0; }

/* e) + long unbroken words can't push a card wider than the slide */
.reviews-cards .testi-card { min-width: 0; overflow-wrap: break-word; }
.reviews-cards .testi-card:hover { transform: none; }

/* bigger tap area for the dots, without changing how they look */
.rs-dot { position: relative; }
.rs-dot::after { content: ''; position: absolute; inset: -14px -4px; }

/* c) — style.css's own 1024px rule is re-stated here because this block
      comes later and would otherwise override it */
@media (max-width: 1024px) {
  .reviews-summary { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .reviews-summary .review-slider { width: 100%; max-width: 760px; margin: 0 auto; }
  /* the About page's loading placeholder matches the slider's shape */
  #about-testi-grid-skeleton { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  #about-testi-grid-skeleton .sk-card:nth-child(n+2) { display: none; }
}

/* d) + f) phones and small tablets */
@media (max-width: 768px) {
  .review-field input, .review-field textarea { font-size: 16px; }
  .star-rating { gap: .1rem; }
  .star-btn { min-width: 44px; min-height: 44px; padding: .3rem .45rem; font-size: 2.2rem; }
}
@media (max-width: 640px) {
  .reviews-cards .testi-card { padding: 1.5rem 1.3rem; }
  .testi-text { font-size: .92rem; margin-bottom: 1.1rem; }

  .review-slider-arrow { top: auto; bottom: 0; transform: none; width: 40px; height: 40px; }
  .review-slider-arrow.prev { left: 0; }
  .review-slider-arrow.next { right: 0; }
  .review-slider-dots { align-items: center; min-height: 40px; margin-top: 1rem; padding: 0 3.2rem; }

  .review-form .btn-primary { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .rating-big { padding: 2rem 1.4rem; border-radius: 16px; }
  .rating-num { font-size: 4rem; }
  .rating-bars { margin-top: 1.4rem; }
}
@media (max-width: 380px) {
  .review-cta { padding: 1.3rem 1.1rem; }
  .reviews-cards .testi-card { padding: 1.3rem 1.1rem; }
}