/* Ktoor — menu page. Mobile first; tablet ≥768, desktop ≥1200. */

/* ---------- hero ---------- */
.mhero__in { display: grid; gap: 28px; padding-block: 64px 56px; }
.mhero .t-hero { color: var(--cream); margin-top: 4px; }
.mhero .t-lead { color: var(--cream); max-width: 460px; }
.mhero__btns { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-top: 28px; }
.br-d { display: none; }
@media (max-width: 767px) { .mhero__btns .btn { flex: 1 1 100%; } }
@media (min-width: 768px) { .mhero__in { padding-block: 88px 72px; } }
@media (min-width: 1200px) {
  .br-d { display: inline; }
  .mhero__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 64px; align-items: end; padding-block: 96px 88px; }
}

/* ---------- sticky chip bar ---------- */
.menu-body { position: relative; }
.menu-nav__sentinel { display: block; height: 1px; margin-bottom: -1px; }
.menu-nav { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: var(--bw) solid var(--ink); padding-block: 14px 6px; transition: box-shadow .2s; }
.menu-nav.is-stuck { box-shadow: 0 8px 0 rgba(21, 25, 27, .08); }
.menu-nav__chips { padding-inline: var(--margin); scroll-padding-inline: var(--margin); scroll-snap-type: x proximity; }
.menu-nav__chips .chip { scroll-snap-align: start; min-height: 44px; }
@media (min-width: 1200px) { .menu-nav__chips { flex-wrap: wrap; row-gap: 12px; overflow: visible; } .menu-nav { padding-block: 18px 12px; } }

/* ---------- groups ---------- */
.menu-groups { padding-block: 56px var(--section-pad); }
.menu-status { text-align: center; padding-block: 48px; }
.menu-status a { color: var(--red); font-weight: 700; }
.mgroup { scroll-margin-top: calc(var(--nav-h, 70px) + 16px); }
.mgroup + .mgroup { margin-top: 72px; }
.mgroup__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; border-bottom: var(--bw) solid var(--ink); }
.mgroup__sub { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.mgroup__rows { display: grid; column-gap: 56px; }
.mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-block: 16px; border-bottom: 2px dotted rgba(21, 25, 27, .45); }
.mrow__img { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--ink); background: var(--paper); }
.mrow__img--none { display: block; background: var(--paper) url("../assets/img/logo-ktoor-stamp.svg") center / 70% auto no-repeat; }
.mrow__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mrow__text .t-name { overflow-wrap: anywhere; }
.mrow__w { font-size: 12px; }
.mrow__price { font-size: 13px; padding: 7px 9px; align-self: center; }
@media (min-width: 768px) {
  .mgroup + .mgroup { margin-top: 96px; }
  .mrow { gap: 20px; padding-block: 18px; }
  .mrow__img { width: 88px; height: 88px; }
  .mrow__price { font-size: 15px; padding: 8px 12px; }
}
@media (min-width: 1200px) {
  .menu-groups { padding-top: 72px; }
  .mgroup__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
  .mgroup__head .t-label { flex-basis: 100%; }
  .mgroup__rows { grid-template-columns: 1fr 1fr; }
}

/* ---------- CTA ---------- */
.mcta__in { display: grid; gap: 32px; padding-block: 72px; }
.mcta .t-h2 { color: var(--cream); }
.mcta__btns { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.mcta .btn:not(.btn--brass) { box-shadow: 6px 6px 0 var(--orange); }
@media (max-width: 767px) { .mcta__btns .btn { flex: 1 1 100%; } }
@media (min-width: 1200px) { .mcta__in { grid-template-columns: 1fr auto; align-items: end; padding-block: 88px; } }
.mcta .btn:not(.btn--brass):hover { box-shadow: 8px 8px 0 var(--orange); }