/* ============================================================
   Homepage "Signature Dishes" (Menu preview) section, restyled to
   match a client-supplied reference image. Scoped under .zaika-menu
   with its own palette/type tokens, mirroring the same approach used
   for the About Zaika / Meet the Chef sections (css/about-zaika.css)
   so all three premium sections read as one consistent system.
   ============================================================ */
.zaika-menu {
  --zm-cream: #f7eedc;
  --zm-green: #123524;
  --zm-gold: #b8892f;
  --zm-gold-2: #d8ad52;
  --zm-ink: #171817;
  --zm-maroon: #7b1824;
  --zm-serif: "Cormorant Garamond", Georgia, serif;
  --zm-sans: "DM Sans", Arial, sans-serif;
  --zm-script: "Dancing Script", cursive;
  position: relative;
  overflow: hidden;
  background-color: var(--zm-cream);
  /* Two copies of the same image, one pinned to the top and one to the
     bottom, each scaled to the section's full width. A single
     background-size:cover layer crops hard from the sides on this
     section (it's much taller than the source image, unlike the
     shorter About/Chef sections), which pushed the corner artwork
     out of frame at normal viewport heights. Layering keeps both the
     top corner decoration and the bottom corner decoration in view
     regardless of how tall the section grows with content. */
  background-image:
    url('../images/backgrounds/signature-dishes-bg.jpg'),
    url('../images/backgrounds/signature-dishes-bg.jpg');
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  padding: clamp(64px, 7vw, 110px) 0;
  font-family: var(--zm-sans);
}
/* The Meet the Chef section above ends on its own slightly different
   cream tone - fading this section's top edge in from that measured
   tone (instead of its own cream) hides the hard seam between the two
   independently generated background images. */
.zaika-menu::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:52px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgb(242,228,193) 0%, rgba(242,228,193,0) 100%);
}
@supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
  .zaika-menu{
    background-image:
      url('../images/backgrounds/signature-dishes-bg.webp'),
      url('../images/backgrounds/signature-dishes-bg.webp');
  }
}
/* Below 900px the grid stacks to one column, so this section runs to
   several thousand px tall - the two top/bottom layers above (sized to
   the section's width) only cover a small strip at each end, leaving
   a huge flat, textureless gap in between. cover keeps a single scaled
   copy of the image filling the entire section height instead - it
   crops the side decoration at this extreme a height:width ratio
   either way, but the paper-grain texture now runs the full scroll
   instead of just flashing at the very top and bottom. */
@media (max-width: 900px) {
  .zaika-menu {
    background-image: url('../images/backgrounds/signature-dishes-bg.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  @supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
    .zaika-menu{background-image:url('../images/backgrounds/signature-dishes-bg.webp')}
  }
}
.zaika-menu .zaika-menu-wrap{width:min(1360px,calc(100% - 64px));margin:auto;position:relative;z-index:2}

.zaika-menu .zm-eyebrow{
  text-align:center;margin:0 0 8px;color:var(--zm-gold);font-family:var(--zm-sans);
  font-weight:600;font-size:clamp(14px,0.9vw,16px);letter-spacing:3px;text-transform:uppercase;
}
.zaika-menu .zm-title{
  text-align:center;margin:0;color:var(--zm-green);font-family:var(--zm-serif);font-weight:700;
  font-size:clamp(2.4rem,4.6vw,3.6rem);letter-spacing:-0.5px;
}
.zaika-menu .zm-swoosh{display:block;margin:10px auto 18px;width:120px;height:14px;color:var(--zm-gold)}
.zaika-menu .zm-subtitle{
  max-width:640px;margin:0 auto 44px;text-align:center;color:#3f3a34;
  font-size:clamp(15px,1vw,17px);line-height:1.6;
}

.zm-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:640px){ .zm-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .zm-grid{grid-template-columns:repeat(3,1fr)} }

.zm-card{
  background:#fbf6ea;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(18,53,36,.14);
}
.zm-card-photo{position:relative;aspect-ratio:4/3;overflow:hidden;
  clip-path:polygon(0% 0%, 100% 0%, 100.0% 91.32%, 95.45% 95.52%, 90.91% 95.08%, 86.36% 93.83%, 81.82% 91.73%, 77.27% 96.34%, 72.73% 96.46%, 68.18% 94.1%, 63.64% 94.04%, 59.09% 91.89%, 54.55% 90.03%, 50.0% 92.97%, 45.45% 94.68%, 40.91% 90.55%, 36.36% 96.35%, 31.82% 91.86%, 27.27% 91.86%, 22.73% 90.34%, 18.18% 97.98%, 13.64% 95.91%, 9.09% 97.0%, 4.55% 94.93%, 0.0% 90.27%);
}
.zm-card-photo img{display:block;width:100%;height:100%;object-fit:cover}
.zm-card-body{padding:20px 22px 24px;position:relative}
.zm-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.zm-card-name{font-family:var(--zm-serif);font-weight:700;color:var(--zm-green);font-size:clamp(1.3rem,1.6vw,1.55rem);margin:0}
.zm-card-icon{flex:none;width:22px;height:22px;color:var(--zm-gold);margin-top:4px}
.zm-card-price{font-family:var(--zm-sans);font-weight:700;color:var(--zm-gold);font-size:15px;margin:4px 0 0}
.zm-card-tag{font-family:var(--zm-sans);font-size:13px;color:#7a756c;margin:2px 0 0}

.zm-cta{text-align:center;margin-top:48px}
.zm-cta-row{display:flex;align-items:center;justify-content:center;gap:16px}
.zm-cta-leaf{width:20px;height:20px;color:var(--zm-gold)}
.zaika-menu .btn.zm-btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--zm-green);color:var(--zm-cream);
  font-family:var(--zm-sans);font-weight:600;font-size:16px;padding:15px 32px;border-radius:999px;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;
}
.zaika-menu .btn.zm-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,53,36,.3)}
.zm-cta-swoosh{display:block;margin:12px auto 0;width:130px;height:12px;color:var(--zm-gold)}
.zm-caption{
  text-align:center;margin:22px 0 0;font-family:var(--zm-sans);font-size:12.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--zm-green);opacity:.75;
}

@media (max-width:640px){
  .zaika-menu .zm-title{font-size:2.1rem}
  .zm-card-body{padding:16px 18px 20px}
}