/* ==========================================================================
   OZE'S RESTAURANT — menu.css
   The page block for menu.html, and nothing else.

   Load order is fixed:  tokens.css  →  main.css  →  menu.css

   This file consumes the shared layer (main.css §00–09) and adds only what
   the menu page needs on top of it:
     .leader / .leader__name / .leader__rule / .leader__price  — main.css §07
     .container / .layout / .section__title / .u-eyebrow--arch — main.css §02–03
     the whole reveal system (rise / stagger / arch / leaders) — main.css §09
   Nothing above is redefined here. No hex values, no literal durations, no
   arbitrary margins: every value below is a token.

   CONTENTS
     M1  Masthead
     M2  Sticky category rail
     M3  Menu sections
     M4  Menu items (leader rows, descriptions, tags)
     M5  Motion — the two extra leader children the shared layer cannot know about
   ========================================================================== */


/* ==========================================================================
   M1. MASTHEAD
   Deepest ground, same as the home hero, so the two pages open on the same
   note. One arch image only — menu-card, the single image this page is
   allowed (AD §5.6 crop, object-position: 55% 50%).
   ========================================================================== */
.masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-9));
  padding-bottom: var(--sp-section);
  background: var(--c-bg-deep);
}

.masthead .layout { align-items: center; }

.masthead__copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

.masthead__lead {
  font-family: var(--ff-ui);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
  max-width: var(--measure-tight);
  text-wrap: pretty;
}

.masthead__media {
  grid-column: 1 / -1;
  width: 100%;
  max-width: min(300px, 62vw);
  margin-inline: auto;
  aspect-ratio: 4 / 5;          /* .u-arch needs height >= width/2 */
  box-shadow: var(--shadow-deep);
}
.masthead__media > picture { display: block; height: 100%; }
.masthead__media img { object-position: 55% 50%; }

@media (min-width: 768px) {
  /* Wide enough to hang the arch off the same left edge as the copy. */
  .masthead__media { max-width: 340px; margin-inline: 0; }
}

@media (min-width: 1200px) {
  .masthead__copy  { grid-column: 1 / span 7; }
  .masthead__media {
    grid-column: 9 / span 4;
    max-width: none;
    margin-inline: 0;
  }
}


/* ==========================================================================
   M2. STICKY CATEGORY RAIL
   A real <nav> with an accessible name, split into the data's own two groups.
   It parks directly under the condensed header. Its anchors are ordinary
   in-page links, so motion.js §6 gives them the shared eased smooth-scroll
   and the shared focus handling for free; the inline script in menu.html only
   marks which one is current.
   The rail is the page's only horizontal scroll container. The page itself
   never scrolls sideways.
   ========================================================================== */
.cat-rail {
  position: sticky;
  top: var(--header-h-slim);
  z-index: var(--z-raised);
  background-color: var(--c-veil-strong);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}

.cat-rail__track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;          /* the active chip auto-centres instead */
  -ms-overflow-style: none;
}
.cat-rail__track::-webkit-scrollbar { display: none; }

@media (max-width: 767px) {
  .cat-rail__track { scroll-snap-type: x mandatory; }
}

/* width:max-content lets the row overflow and scroll; min-width:100% makes it
   fill the track when it does fit, so justify-content can centre it. When it
   overflows, max-content wins and centring is a no-op — the first chip stays
   reachable. */
.cat-rail__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  width: max-content;
  min-width: 100%;
  padding: var(--sp-3) var(--gutter);
}

.cat-rail__group {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.cat-rail__label {
  flex: none;
  color: var(--c-accent);
  scroll-snap-align: start;
}

.cat-rail__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.cat-rail__sep {
  flex: none;
  width: var(--hairline);
  height: 1.25rem;
  background-image: var(--grad-foil);
  opacity: 0.55;
}

/* The chip. Same underline behaviour as .site-nav__link, so the rail reads as
   a second row of the same navigation rather than a new component. */
.cat-link {
  --chip-px: var(--sp-3);
  position: relative;
  display: inline-block;
  padding: var(--sp-2) var(--chip-px);
  font-family: var(--ff-ui);
  font-weight: var(--fw-book);
  font-size: var(--fs-nav);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color var(--dur-base) var(--ease-brand);
}
.cat-link::after {
  content: "";
  position: absolute;
  left: var(--chip-px);
  right: var(--chip-px);
  bottom: 2px;
  height: var(--hairline);
  background-image: var(--grad-foil);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-brand);
}
.cat-link:hover,
.cat-link:focus-visible { color: var(--c-accent-hover); }
.cat-link:hover::after,
.cat-link:focus-visible::after { transform: scaleX(1); }

.cat-link[aria-current] { color: var(--c-heading); }
.cat-link[aria-current]::after { transform: scaleX(1); }

/* At desktop widths all thirteen categories fit without scrolling if the
   chips tighten up. Below 1200 the rail scrolls, which is the point of it. */
@media (min-width: 1200px) {
  .cat-rail__inner { gap: var(--sp-4); }
  .cat-rail__list  { gap: 0; }
  .cat-link        { --chip-px: var(--sp-2); }
}


/* ==========================================================================
   M3. MENU SECTIONS
   ========================================================================== */
.menu-body {
  background: var(--c-bg);
  padding-bottom: var(--sp-section);
}

.menu-section {
  /* The rail's own height. Sections clear it twice over: as padding, so a
     JS smooth-scroll (which lands the section box just under the header)
     still puts the title in the open; and as scroll-margin, for the native
     jump used with no JS and under prefers-reduced-motion. */
  --rail-h: 4rem;
  padding-top: calc(var(--rail-h) + var(--sp-6));
  padding-bottom: var(--sp-8);
  scroll-margin-top: calc(var(--header-h-slim) + var(--rail-h) + var(--sp-4));
}
.menu-section + .menu-section { border-top: var(--rule); }

.menu-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

.menu-section__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-book);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--c-heading);
  text-wrap: balance;
}

.menu-section__note {
  font-family: var(--ff-ui);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}


/* ==========================================================================
   M4. MENU ITEMS
   The row itself is the shared .leader from main.css §07, untouched. Only the
   description, the tags and the two-column packing live here.
   ========================================================================== */
.menu-items {
  /* 88 rows: the shared 90ms leader interval would make a long section take
     most of two seconds to land. Halved for this page only — the token is
     read inside calc() in main.css §09, so re-pointing it here is enough. */
  --stagger-leader: 45ms;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .menu-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--sp-7), 5vw, var(--sp-9));
  }
}

.menu-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.menu-item .leader { min-width: 0; }
.menu-item .leader__name { min-width: 0; }

.menu-item__desc {
  font-family: var(--ff-ui);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  max-width: var(--measure-tight);
  text-wrap: pretty;
}

/* Hairline-outlined pills. Gold stays a line, never a fill. */
.menu-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.tag {
  display: inline-block;
  padding: 0.15em var(--sp-3);
  font-family: var(--ff-ui);
  font-weight: var(--fw-book);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  color: var(--c-accent);
  border: var(--rule-strong);
  border-radius: var(--r-pill);
}


/* ==========================================================================
   M5. MOTION
   Reveal #8 (leader draw) and #4 (stagger rise) are inherited whole from
   main.css §09. The shared layer animates .leader__name / __rule / __price;
   a menu row has two more children it cannot know about, so they join the
   same cadence here.

   --i is authored on each <li class="menu-item"> so it reaches every child by
   inheritance; motion.js independently sets the identical index on the
   .leader inside it, and the two agree by construction.
   ========================================================================== */
.js [data-reveal="leaders"] .menu-item__desc,
.js [data-reveal="leaders"] .menu-item__tags {
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-brand)
              calc(var(--stagger-leader) * var(--i, 0) + var(--dur-slower) * 0.35);
}
.js [data-reveal="leaders"].is-revealed .menu-item__desc,
.js [data-reveal="leaders"].is-revealed .menu-item__tags { opacity: 1; }


/* ==========================================================================
   M6. DISH PHOTOGRAPHY
   Only the eight rows data/gallery.js links to an exact menu item get a
   photograph. Gozleme and Pide are deliberately unlinked there — those
   sections carry several fillings and the picture does not say which one, so
   a photograph would land beside the wrong price. Nothing is guessed.

   The frame is the shared .oz-plate (components.css C2): the same lit window
   as everywhere else, at ~108px, which is far under the CSS box any of these
   files can carry. It sits beside the row like an illuminated initial — it is
   NOT a card, it has no box, no fill and no nesting (CRAFT-FLOOR §F).
   ========================================================================== */
.menu-item--shot {
  display: grid;
  grid-template-columns: var(--shot-w, 108px) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 480px) {
  .menu-item--shot { --shot-w: 124px; }
}

.menu-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.menu-items .menu-item__shot { width: 100%; }

/* The photograph joins the leader cadence rather than sitting there fully lit
   while the row it belongs to is still arriving. Opacity only — the page's
   authored moment is the leader dots, and nothing here competes with them. */
.js [data-reveal="leaders"] .menu-item__shot {
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-brand)
              calc(var(--stagger-leader) * var(--i, 0));
}
.js [data-reveal="leaders"].is-revealed .menu-item__shot { opacity: 1; }