/* Menu page — Figma 80DGJEV8CNGCJqMSOZWv8Q: Desktop 93:187 · Tablet 93:166 · Mobile 93:3 */

/* ---------- 01 Header ---------- */
.mn-head {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 136px 0 calc(56px - 4px);            /* 4px = .tabs padding-bottom */
}
.mn-head__bg { position: absolute; inset: 0; z-index: -2; opacity: .2; }
.mn-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.mn-head::before { /* vignette */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(62% 75% at 50% 45%, rgba(22,21,20,0) 0%, rgba(22,21,20,.55) 60%, var(--bg-base) 100%);
}
.mn-head::after { /* bottom fade */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,21,20,0), var(--bg-base));
}
.mn-head__inner { display: flex; flex-direction: column; align-items: center; }
.mn-head__lead { max-width: 342px; margin-top: 24px; text-align: center; }
.mn-tabs { margin-top: 40px; align-self: stretch; }
.mn-tabs .tab { display: block; }

/* ---------- 02 Chef's picks ---------- */
.mn-picks__track {
  display: flex; gap: 16px; margin-top: var(--head-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scroll-padding-inline: var(--margin);
  padding-bottom: 64px; margin-bottom: -64px;   /* room for the card shadow inside the scroller */
}
.mn-picks__track::-webkit-scrollbar { display: none; }
.mn-picks__track .dish-card { flex: 0 0 280px; scroll-snap-align: start; }
.mn-picks .dish-card { padding-bottom: 18px; }   /* Figma: "View +" 18px above the card edge */
.mn-picks .dish-card__foot { margin-top: 20px; }  /* Figma: line 20px under the meta */
.dish-card__foot { display: block; }
@media (max-width: 1199px) { /* Figma Card / Dish Compact: 180 index · 198 name · 222 meta · 254 line */
  .mn-picks .dish-card__index { margin-bottom: 4px; }
  .mn-picks .dish-card__meta { margin-top: 3px; }
  .mn-picks .dish-card__foot { margin-top: 16px; }
}
.dish-card__foot::after { content: ""; position: absolute; inset: 0; } /* whole card is the tap target */
.dish-card__foot:hover { color: var(--text-secondary); }

/* ---------- 03 Categories ---------- */
.mn-cats { padding-block: var(--section-pad); }
.mn-cat { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); scroll-margin-top: 32px; }
.mn-cat + .mn-cat { margin-top: var(--section-pad); }
.mn-cat > * { grid-column: 1 / -1; min-width: 0; }
.mn-cat__head .t-h2 { white-space: nowrap; }
.mn-cat__media { margin-top: 32px; display: flex; justify-content: center; }
.mn-cat__dish { width: auto; height: auto; max-width: 260px; max-height: 260px; }
.mn-cat__framed { width: 260px; aspect-ratio: 260 / 204; }
.mn-cat__rows { margin-top: 24px; }
.mn-cat--photo .mn-cat__rows, .mn-cat--noimg .mn-cat__rows { margin-top: 32px; }

/* menu rows: Figma row = 60px, text block centred (name H4 / description Body, 22px lines) */
.mn-cat .menu-row { min-height: 60px; padding: 4px 0; }
.mn-cat .menu-row h3 { line-height: 22px; }
.mn-cat .menu-row__add { font-size: 13px; line-height: 18px; font-weight: 400; cursor: default; }

/* ---------- 04 Delivery ---------- */
.mn-delivery { padding-bottom: var(--section-pad); }
.mn-delivery__panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 28px; }
.mn-delivery__text { display: flex; flex-direction: column; gap: 12px; }
.mn-delivery__btn { margin-top: 32px; width: 100%; }

/* ================= tablet ================= */
@media (min-width: 768px) {
  .mn-head { padding: 184px 0 calc(96px - 4px); }
  .mn-head::after { height: 160px; }
  .mn-head::before { display: none; }   /* tablet frame has no vignette */
  .mn-head__lead { max-width: 440px; margin-top: 20px; }
  .mn-tabs { margin-top: 48px; }

  .mn-picks__track { gap: 24px; }

  .mn-cats { padding-top: 0; }
  .mn-cat { align-items: center; }
  .mn-cat__head { grid-column: 1 / 5; grid-row: 1; }
  .mn-cat__media { grid-column: 5 / 9; grid-row: 1; margin-top: 0; height: 260px; }
  .mn-cat--flip .mn-cat__head { grid-column: 5 / 9; }
  .mn-cat--flip .mn-cat__media { grid-column: 1 / 5; }
  .mn-cat__dish { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
  .mn-cat--photo .mn-cat__media { height: 240px; }
  .mn-cat__framed { width: 100%; height: 100%; aspect-ratio: auto; }
  .mn-cat--photo .framed__bar { display: none; }   /* tablet: plain photo */
  .mn-cat--photo .framed img { height: 100%; }
  .mn-cat__rows, .mn-cat--photo .mn-cat__rows { grid-column: 1 / -1; grid-row: 2; margin-top: 40px; }
  .mn-cat--noimg .mn-cat__head { grid-column: 1 / -1; }
  .mn-cat--noimg .mn-cat__rows { margin-top: 40px; }

  .mn-delivery__panel { padding: 64px 32px; }
  .mn-delivery__text { gap: 16px; }
  .mn-delivery__btn { width: auto; }
}

/* ================= desktop ================= */
@media (min-width: 1200px) {
  .mn-head { padding: 208px 0 calc(128px - 4px); }
  .mn-head::before { display: block; }
  .mn-head__lead { max-width: 528px; margin-top: 24px; }

  .mn-picks__track {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px;
    overflow: visible; margin-inline: 0; padding: 0; margin-bottom: 0;
  }
  .mn-picks__track .dish-card { flex: none; }

  .mn-cats { padding-top: var(--section-pad); }
  .mn-cat { align-items: start; }
  .mn-cat__head { grid-column: 1 / 5; grid-row: 1; }
  .mn-cat__media { grid-column: 1 / 5; grid-row: 2; margin-top: 40px; height: 300px; }
  .mn-cat__rows, .mn-cat--photo .mn-cat__rows { grid-column: 6 / 13; grid-row: 1 / span 2; margin-top: 0; }
  .mn-cat--flip .mn-cat__head, .mn-cat--flip .mn-cat__media { grid-column: 9 / 13; }
  .mn-cat--flip .mn-cat__rows { grid-column: 1 / 8; }
  .mn-cat--noimg .mn-cat__head { grid-column: 9 / 13; }
  .mn-cat--noimg .mn-cat__rows { margin-top: 0; grid-row: 1; }
  .mn-cat--photo .mn-cat__media { height: 280px; }
  .mn-cat--photo .framed__bar { display: flex; }
  .mn-cat--photo .framed img { height: calc(100% - 22px); }

  .mn-delivery__panel { flex-direction: row; justify-content: space-between; text-align: left; align-items: center; padding: 56px 92px; }
  .mn-delivery__text { gap: 12px; }
  .mn-delivery__btn { margin-top: 0; }
}