/* =============================================================================
   Liora — pages/menu.css

   Ported from 02_design-update_2026-08-27/menu.html's <style> block. Loads after
   shell.css. Split mechanically: rules already in shell.css dropped, rules whose
   selector names a class no page's markup uses dropped, the rest verbatim.

   menu.html carries the largest pile of dead CSS of the five — 77 rules. The
   whole `.dish-card` / `.dishes` grid and the `.culinary-*` panel are round-1
   layouts that the food strip replaced; neither appears in any page's markup.

   `.closing` here overrides the shell.css component's padding, and
   `.closing-title` and `.closing-sub` its margin and measure. The delta table in
   shell.css lists all four pages'.
   ============================================================================= */

/* ======================================================================
   PAGE-SPECIFIC SECTIONS — "Menu" inner page.
   Section-name-prefix + descriptive-suffix, per handover §3.
   Structure mirrors Elementor nesting: section > *-container > *-column > widgets.
   ====================================================================== */

/* ---------- 2. Culinary Point of View — contained image (left) + contained dark panel (right), on bone ----------
   Not the full-bleed feature-split: both the photo and the ink panel are contained blocks
   with bone framing them (contained-image-with-whitespace motif). */
.culinary{ background:var(--bone); padding:64px 48px; }

/* ---------- 5. Full Menu & Closing CTA — dark, centred (matches Our Story / The Space close) ---------- */

.closing{ padding:64px 48px; }

.closing-title{ margin:16px 0 24px; }  /* shell.css also sets: margin-bottom */

.closing-sub{ max-width:48ch; }

/* ---------- Responsive — single 900px breakpoint (matches homepage / siblings), plus a
     narrow-grid helper at 620px so 4-up dish grid steps down cleanly ---------- */

@media (max-width: 900px){
  .culinary{ padding:44px 24px; }

.closing{ padding:48px 24px; }
}

/* ---------- Menu write-up (round 2) ---------- */
.menu-intro{ background:var(--bone); padding:120px 48px 96px; }
.menu-intro-inner{ max-width:760px; margin:0 auto; text-align:center; }
.menu-lede{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(22px,2.6vw,32px);
  line-height:1.35; color:var(--ink); margin-bottom:28px; }
.menu-body{ font-size:16px; font-weight:300; line-height:1.8; color:var(--ink-soft); margin-bottom:40px; }
.menu-btn-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ---------- Food gallery — auto-scrolling, swipeable (round 2) ---------- */
.foodstrip{ background:var(--bone); padding:20px 0 130px; overflow:hidden; }
.foodstrip-head{ max-width:1360px; margin:0 auto 48px; padding:0 48px; text-align:center; }
.foodstrip-title{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,4vw,54px); line-height:1.05; margin-top:16px; }
.foodstrip-rows{ display:flex; flex-direction:column; gap:18px; }
.foodstrip-row{
  display:flex; gap:18px; padding:0 18px;
  overflow-x:auto; scroll-behavior:auto;              /* JS drives scrollLeft directly */
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; cursor:grab;
}
.foodstrip-row::-webkit-scrollbar{ display:none; }
.foodstrip-item{
  flex:0 0 auto; width:clamp(190px,19vw,280px); aspect-ratio:3/4;
  overflow:hidden; background:var(--bone-deep);
}
.foodstrip-item img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.foodstrip-item:hover img{ transform:scale(1.05); }

@media (max-width:760px){
  .menu-intro{ padding:84px 24px 64px; }
  .foodstrip{ padding:12px 0 90px; }
  .foodstrip-head{ padding:0 24px; margin-bottom:34px; }
  .foodstrip-item{ width:clamp(160px,52vw,220px); }
}

/* gallery drag affordance (round 3) */
.foodstrip-row{ cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-x; }
.foodstrip-row.is-dragging{ cursor:grabbing; }
.foodstrip-item img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }