/* =========================================================================
   menu.css — §6, the interactive core, plus the Wolt bundles.
   Split out of sections.css, which crossed the ~400-line mark once §3–§5
   landed. §6 is a self-contained concern: grid, filters, empty state.
   ========================================================================= */

.section--menu { background: var(--cream); }

.menu__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: clamp(var(--s-8), 4vw, var(--s-16));
}
.menu__title { color: var(--teal-deep); }
.menu__lead {
  font-size: var(--fs-small);
  color: var(--cocoa);
  margin-top: var(--s-2);
}

.menu__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ---- Grid ---------------------------------------------------------------
   auto-fill keeps the row honest at every width without media queries. */
.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(var(--s-4), 2vw, var(--s-8));
}

/* Cards filtered out are removed from flow; Flip animates the survivors
   into their new positions. */
.card.is-filtered-out { display: none; }

/* ---- Entrance gate ------------------------------------------------------
   Container-level so no per-card !important is ever needed. The reveal is
   a PLAIN OPACITY FADE with no transform: a transform here would fight
   Flip's invert and cards would jump or vanish mid-filter.
   Gated on html.js and off under .no-gsap, so a missing GSAP means the
   cards are simply visible. */
html.js:not(.no-gsap) .cards-gate:not(.is-revealed) .card { opacity: 0; }

/* The "nothing here" panel is .empty-state, shared with the cart, the
   account and the menu search — see css/shop.css. */

/* =========================================================================
   BUNDLES — already live on Wolt; surfaced to raise basket size.
   ========================================================================= */
.bundles {
  margin-top: clamp(var(--s-12), 6vw, var(--s-24));
  display: grid;
  gap: clamp(var(--s-4), 2vw, var(--s-6));
}
.bundle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr auto;
  align-items: center;
  gap: clamp(var(--s-4), 2.4vw, var(--s-8));
  padding: var(--s-4);
  background: var(--mint);
  border-radius: var(--r-lg);
  translate: 0 0;
  transition: translate var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.bundle:hover,
.bundle:focus-visible { translate: 0 -6px; box-shadow: var(--shadow-lift); }

.bundle__media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand);
  isolation: isolate;
  -webkit-mask-image: radial-gradient(#fff, #fff);
          mask-image: radial-gradient(#fff, #fff);
}
.bundle__media img { width: 100%; height: 100%; object-fit: cover; }

/* The card is an <a>, so these are spans. Without blockifying them the
   description runs inline straight off the end of the heading and the
   margin-top is inert — which is exactly what shipped. */
.bundle__text { display: block; min-width: 0; }
.bundle__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--teal-deep);
  font-variation-settings: var(--wonk-sub);
  text-wrap: balance;
}
.bundle__desc {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--cocoa);
  margin-top: var(--s-3);
  max-width: 46ch;
}
.bundle__badge {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);      /* 6.07:1 on hot pink */
  background: var(--hot-pink);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.bundle__right {
  display: grid;
  justify-items: end;
  gap: var(--s-3);
  padding-right: var(--s-4);
}
.bundle__price {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 38px);
  color: var(--ink);
  white-space: nowrap;
  font-variation-settings: var(--wonk-sub);
}
.bundle__price small {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  margin-left: 3px;
}

@media (max-width: 860px) {
  .bundle {
    grid-template-columns: 1fr;
    justify-items: start;
    padding-bottom: var(--s-5);
  }
  .bundle__media { width: 100%; }
  .bundle__right { justify-items: start; padding-right: 0; }
}