/* assets/css/menu.css */
/* ============================================================
   BOBO & WILD — SECTION 05, Menu
   Cream again, after two dark sections. A menu is a reading
   surface before it is a design.
   ============================================================ */

.menu{
  position:relative;z-index:2;
  background:var(--cream);color:var(--green-deep);
  padding:clamp(84px,12vh,156px) var(--pad) clamp(76px,11vh,140px);
}
.menu__inner{max-width:1320px;margin:0 auto}

.menu__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,72px);align-items:end;
  margin-bottom:clamp(34px,4.4vw,58px);
}
.menu__eyebrow{margin-bottom:clamp(16px,2vw,26px)}
.menu__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(36px,5.4vw,84px);line-height:.98;letter-spacing:-.02em;
}
.menu__title .l{display:block;overflow:hidden;padding-bottom:.04em}
.menu__title .l span{display:block}
.menu__lead{
  font-size:clamp(15px,1.3vw,18px);line-height:1.7;font-weight:300;
  color:rgba(51,75,70,.76);max-width:46ch;
}

/* ---------- site chips ---------- */
.menu__sites{
  display:flex;gap:7px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.schip{
  display:inline-flex;align-items:center;min-height:44px;
  padding:9px 17px;border-radius:100px;
  border:1px solid rgba(51,75,70,.18);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(51,75,70,.66);
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.schip:hover{border-color:rgba(51,75,70,.4);color:var(--green-deep)}
.schip.is-on{background:var(--terracotta-ink);border-color:var(--terracotta-ink);color:var(--cream)}

/* ---------- tabs ---------- */
.menu__tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  border-top:1px solid rgba(51,75,70,.16);
  padding-top:clamp(20px,2.4vw,30px);
  margin-bottom:clamp(26px,3.2vw,42px);
}
.mtab{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 22px 15px;border-radius:3px;
  border:1px solid transparent;text-align:left;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.mtab span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(51,75,70,.78)}
.mtab em{font-style:normal;font-size:11px;color:rgba(51,75,70,.44)}
.mtab:hover{border-color:rgba(51,75,70,.2)}
.mtab.is-on{background:var(--green-deep);border-color:var(--green-deep)}
.mtab.is-on span{color:var(--cream)}
.mtab.is-on em{color:var(--cream-52)}

/* ---------- panels ---------- */
.mpanel[hidden]{display:none}
.mpanel__where{
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracotta-ink);margin-bottom:clamp(20px,2.4vw,30px);
}
.mpanel__where i{width:22px;height:1px;background:var(--terracotta);display:block;flex:none}

.dishes{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(32px,5vw,84px);
}
.dish{
  break-inside:avoid;
  display:grid;grid-template-columns:1fr auto;
  gap:4px clamp(14px,2vw,28px);
  padding:14px 0 16px;
  border-bottom:1px solid rgba(51,75,70,.12);
}
.dish__n{
  grid-column:1;font-size:clamp(15px,1.35vw,18px);line-height:1.3;
  color:var(--green-deep);
}
.dish__only{
  font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(51,75,70,.42);margin-left:8px;white-space:nowrap;
}
.dish__t{
  font-style:normal;font-size:9px;letter-spacing:.14em;
  color:var(--terracotta);border:1px solid rgba(184,82,44,.4);
  border-radius:100px;padding:2px 6px;margin-left:8px;vertical-align:2px;
}
.dish__p{
  grid-column:2;grid-row:1;
  font-size:13px;color:rgba(51,75,70,.62);white-space:nowrap;
}
.dish__d{
  grid-column:1;grid-row:2;
  font-size:12.5px;line-height:1.55;font-weight:300;
  color:rgba(51,75,70,.58);max-width:52ch;
}
.mpanel__pricenote{
  margin-top:clamp(18px,2.2vw,28px);
  font-size:11px;letter-spacing:.02em;color:rgba(51,75,70,.44);
}

/* ---------- foot: cocktails + milks ---------- */
.menu__foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,54px);
  margin-top:clamp(44px,5.5vw,84px);
  padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(51,75,70,.16);
}
.menu__cocktails h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(21px,2.4vw,34px);line-height:1;letter-spacing:-.01em;
  margin-bottom:16px;
}
.menu__cocktails ul{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-wrap:wrap;gap:7px;
}
.menu__cocktails li{
  font-size:12px;letter-spacing:.02em;
  color:rgba(51,75,70,.74);
  border:1px solid rgba(51,75,70,.18);border-radius:100px;
  padding:7px 14px;
}
.menu__cocktails p{font-size:12px;color:rgba(51,75,70,.5);line-height:1.6}
.menu__milks{font-size:12.5px;line-height:1.7;color:rgba(51,75,70,.58);font-weight:300}
.menu__note{
  margin-top:0;font-size:11px;line-height:1.6;
  color:rgba(51,75,70,.42);
}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .menu__head{grid-template-columns:1fr;align-items:start;gap:clamp(18px,2.6vw,28px)}
  .menu__lead{max-width:60ch}
  .menu__foot{grid-template-columns:1fr;gap:clamp(24px,3vw,34px)}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .dishes{columns:1}
  .menu__sites{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding-left:var(--pad);padding-right:var(--pad);
  }
  .menu__sites::-webkit-scrollbar{display:none}
  .schip{flex:none}
  .menu__tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding-left:var(--pad);padding-right:var(--pad);
  }
  .menu__tabs::-webkit-scrollbar{display:none}
  .mtab{flex:none;padding:12px 18px 13px}
  .dish__d{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .pill4,.mtab{transition:none}
}