/* =============================================================
   Food and Drink: page-scoped rules (food-and-drink.html)
   Loaded after css/style.css. Shared tokens only.
   Candidates for promotion to style.css: .menu-cols, .menu-heading.
   ============================================================= */

/* Seaside Cuisine: three dish figures under the intro. Each is a cropped
   .frame with its caption outside the box (a figcaption inside .frame is
   clipped by its aspect-ratio and overflow), and opens the shared lightbox. */
.dishes { margin-top: clamp(32px, 4vw, 56px); }
.dish[data-lightbox] { cursor: zoom-in; }
.dish .frame img { transition: transform .6s var(--ease); }
.dish:hover .frame img { transform: scale(1.02); }

/* Menu column headings: the same grid as .menu__item, so the (empty) price
   column is present and aligned. Sits between the tab list and the panels
   because the panels are re-rendered from data/menus.json. */
.menu-cols {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 16fr) minmax(4em, 6em);
  gap: 4px 20px; max-width: 900px;
  margin-top: clamp(24px, 3vw, 40px);
  color: var(--ink-soft);
}
/* The label size sits on the spans, not the grid, so the em-based price
   column resolves to the same width as in .menu__item. */
.menu-cols span { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.menu-cols span:last-child { text-align: right; }
.menu-cols ~ .tabs__panel { padding-top: 12px; }
/* The tab row and its rule stop where the menu grid stops (.menu is 900px). */
#menus .tabs__list { max-width: 900px; }

/* Opening a tab from the hash (or the Bar Menu link): js/main.js scrolls the
   tabs group into view after load or on hashchange, landing at this margin,
   clear of the sticky nav with the tab row in view. */
#menus .tabs { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Without JS the tab buttons cannot switch panels, so the three static
   panels stack as full menus, dishes and prices, each under its own name
   (.menu-heading). The tab row and the column labels hide. With JS the
   names hide, and until js/main.js has wired the tabs (it sets tabindex on
   every tab) only the first panel shows, so the stack never flashes. */
.menu-heading { font-size: var(--t-h3); margin-bottom: 16px; }
.js .menu-heading { display: none; }
html:not(.js) #menus .tabs__list,
html:not(.js) #menus .menu-cols { display: none; }
html:not(.js) #menus .tabs__panel { padding-top: 0; }
html:not(.js) #menus .tabs__panel + .tabs__panel { margin-top: clamp(48px, 6vw, 72px); }
.js #menus .tabs:not(:has([role="tab"][tabindex])) .tabs__panel ~ .tabs__panel { display: none; }

/* Close: a wide frame, then a centred heading and button row */
.close__body { margin-top: clamp(32px, 4vw, 56px); }
.close__actions { justify-content: center; margin-top: 8px; }

@media (max-width: 560px) {
  .menu-cols { display: none; }
  .menu-cols ~ .tabs__panel { padding-top: clamp(24px, 3vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .dish:hover .frame img { transform: none; }
}