/* =====================================================================
   MOMO 365 & BAR — MENU PAGE (8848 printed-menu style)
   Royal blue #22418d · coral red #de1e3e · lemon #ffffff · loaded on /menu
   ===================================================================== */
.mz{ --navy:#22418d; --coral:#de1e3e; --lemon:#ffffff; }

/* ---- a "spread" = one menu section, alternating light / navy ---- */
.mz-spread{ position:relative; overflow:hidden; background:#fbfbfe; color:#22303a;
  padding:clamp(48px,6vw,86px) 0; }
.mz-spread::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(135deg, rgba(34,65,141,.045) 0 1px, transparent 1px 30px); }
.mz-spread > .container{ position:relative; z-index:1; }
.mz-spread--navy{ background:linear-gradient(180deg,#22418d 0%,#16285e 100%); color:#eaf0ff; }
.mz-spread--navy::before{ background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px); }

/* ---- red ribbon banner ---- */
.mz-bannerwrap{ text-align:center; margin-bottom:14px; }
.mz-banner{ display:inline-block; background:var(--coral); color:#fff;
  font-family:"Bebas Neue",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.7rem,3.6vw,3rem); line-height:1; padding:16px clamp(34px,5vw,64px);
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%,22px 50%);
  box-shadow:0 18px 34px -20px rgba(222,30,62,.6); }
.mz-sub{ text-align:center; font-family:"Bebas Neue",sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); font-size:clamp(1rem,1.7vw,1.35rem); margin:0 auto clamp(34px,4vw,52px); }
.mz-spread--navy .mz-sub{ color:#bcd0ff; }

/* ---- photo feature cards ---- */
.mz-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,4vw,60px) clamp(28px,4vw,56px); }
.mz-feature{ display:flex; flex-direction:column; }
.mz-feature__media{ position:relative; }
.mz-feature__media img{ width:100%; height:auto; display:block; border-radius:18px;
  box-shadow:0 30px 46px -26px rgba(16,30,60,.45); }
.mz-spread--navy .mz-feature__media img{ box-shadow:0 30px 46px -22px rgba(0,0,0,.55); }
.mz-feature__body{ padding:18px 4px 0; }
.mz-feature__name{ font-family:"Poppins",sans-serif; font-weight:700; line-height:1.2;
  font-size:clamp(1.15rem,1.9vw,1.45rem); color:var(--navy); margin-bottom:8px; }
.mz-feature:nth-child(even) .mz-feature__name{ color:#de1e3e; }   /* alternate red (AA-safe) */
.mz-spread--navy .mz-feature__name{ color:#fff; }
.mz-spread--navy .mz-feature:nth-child(even) .mz-feature__name{ color:var(--lemon); }
.mz-pcs{ font-family:"Poppins",sans-serif; font-weight:600; font-size:.82rem; color:#de1e3e; white-space:nowrap; }
.mz-spread--navy .mz-pcs{ color:var(--lemon); }
.mz-feature__desc{ color:#566873; line-height:1.6; font-size:.95rem; margin-bottom:12px; max-width:34rem; }
.mz-spread--navy .mz-feature__desc{ color:#c3d2f2; }
.mz-feature__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mz-price{ font-family:"Bebas Neue",sans-serif; letter-spacing:.03em; font-size:1.5rem; color:var(--navy); }
.mz-spread--navy .mz-price{ color:#fff; }
.mz-badge{ display:inline-block; background:#de1e3e; color:#fff; font-size:.74rem; font-weight:600;
  letter-spacing:.02em; padding:4px 11px; border-radius:6px; }
.mz-badge--ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.4px rgba(34,65,141,.4); }
.mz-spread--navy .mz-badge--ghost{ color:#dce6ff; box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.4); }

/* ---- priced list (drinks / no-photo items) ---- */
.mz-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px clamp(36px,5vw,72px); margin-top:8px; }
.mz-row{ display:flex; align-items:baseline; gap:8px; padding:9px 0; border-bottom:1px dashed rgba(34,65,141,.18); }
.mz-spread--navy .mz-row{ border-bottom-color:rgba(255,255,255,.18); }
.mz-row__name{ font-weight:600; color:#22303a; }
.mz-row__name small{ display:block; font-weight:400; color:#5b6b73; font-size:.84rem; }
.mz-spread--navy .mz-row__name{ color:#eaf0ff; } .mz-spread--navy .mz-row__name small{ color:#a9bbe6; }
.mz-row__dots{ flex:1; border-bottom:1px dotted rgba(34,65,141,.35); transform:translateY(-4px); }
.mz-spread--navy .mz-row__dots{ border-bottom-color:rgba(255,255,255,.3); }
.mz-row__price{ font-family:"Bebas Neue",sans-serif; font-size:1.2rem; color:#de1e3e; }
.mz-spread--navy .mz-row__price{ color:var(--lemon); }
.mz-list--full{ grid-template-columns:1fr; }

/* when a section has only a priced list, wrap it in a subtle card */
.mz-listcard{ background:#fff; border-radius:18px; padding:clamp(22px,3vw,38px); box-shadow:0 26px 50px -30px rgba(16,30,60,.4); }
.mz-spread--navy .mz-listcard{ background:rgba(255,255,255,.06); box-shadow:none; border:1px solid rgba(255,255,255,.14); }

/* ---- scroll animation: the plate "approaches" the viewer (premium, minimal) ---- */
.mz-feature__media img{ transform:scale(1); transform-origin:center 58%;
  transition:transform .75s cubic-bezier(.2,.72,.24,1), box-shadow .45s ease; will-change:transform; }
.mz-feature.reveal{ transform:translateY(22px); }            /* card eases up… */
.mz-feature.reveal.in{ transform:none; }
.mz-feature.reveal:not(.in) .mz-feature__media img{ transform:scale(.9); }   /* …plate sits back & smaller */
.mz-feature:hover .mz-feature__media img{ transform:scale(1.04); }           /* …then leans in on hover */
.mz-feature:hover .mz-feature__media img{ box-shadow:0 42px 62px -24px rgba(16,30,60,.5); }
.mz-spread--navy .mz-feature:hover .mz-feature__media img{ box-shadow:0 42px 60px -22px rgba(0,0,0,.62); }
/* gentle corporate stagger so the right-hand plate follows the left */
.mz-feature:nth-child(2n).reveal{ transition-delay:.1s; }
.mz-feature:nth-child(2n).reveal:not(.in) .mz-feature__media img{ transition-delay:.1s; }
/* honour reduced-motion (menu.css loads last, so this wins over the offsets above) */
@media (prefers-reduced-motion: reduce){
  .mz-feature.reveal{ transform:none !important; }
  .mz-feature.reveal:not(.in) .mz-feature__media img,
  .mz-feature:hover .mz-feature__media img{ transform:none !important; transition:none !important; }
}

/* ---- responsive ---- */
@media (max-width:760px){
  .mz-features{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .mz-list{ grid-template-columns:1fr; }
}