/* =====================================================================
   UTOPIA — Menu page (extends styles.css + pages.css)
   ===================================================================== */

/* hero photo with the shared legibility wash */
.mn-hero {
  background-color: #03060d;
  background-image:
    radial-gradient(95% 85% at 50% 40%, rgba(3,8,18,0.26), transparent 72%),
    linear-gradient(180deg, rgba(3,8,18,0.52) 0%, rgba(3,8,18,0.34) 42%, rgba(3,6,13,0.94) 100%),
    url("../foto/oldtown-trio.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- cocktail grid (mn-drink: avoids the preloader's .drink class) ---------- */
.mn-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  max-width: 940px; margin: 0 auto;
}
.mn-drink {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1.35rem, 3vw, 1.9rem);
  border: 1px solid rgba(220,227,234,0.12); border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,26,46,0.5), rgba(5,16,33,0.26));
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* sheen across the top edge, lit on hover */
.mn-drink::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(220,227,234,0.5), transparent);
  opacity: 0; transition: opacity .5s var(--ease);
}
.mn-drink:hover {
  transform: translateY(-5px); border-color: rgba(220,227,234,0.28);
  box-shadow: 0 36px 84px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mn-drink:hover::before { opacity: 1; }
/* a soft liquid glow rises from the foot of the card, like a slow pour */
.mn-drink::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -55%; height: 95%; z-index: -1;
  background: radial-gradient(58% 100% at 50% 100%,
    rgba(47,169,164,0.2), rgba(120,160,220,0.12) 46%, transparent 74%);
  opacity: 0; transform: translateY(28%);
  transition: opacity 0.6s var(--ease), transform 1s var(--ease);
  pointer-events: none;
}
.mn-drink:hover::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mn-drink::after { transition: none; }
}
.mn-drink__head { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; }
.mn-drink__name {
  margin: 0; font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.16rem, 2.6vw, 1.42rem); letter-spacing: 0.01em; color: var(--cream);
}
/* price as a small brushed-platinum pill */
.mn-drink__price {
  flex: none; font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.84rem; letter-spacing: 0.04em;
  color: #14181c; padding: 0.3rem 0.78rem; border-radius: 999px;
  background: linear-gradient(135deg, #eef2f6, #b6c0c9);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
/* classic menu leader — a row of platinum dots between name and price */
.mn-lead {
  flex: 1; min-width: 1.6rem; height: 0.85em; align-self: flex-end; margin: 0 0.15rem 0.2em 0.4rem;
  background-image: radial-gradient(circle, rgba(220,227,234,0.38) 1.1px, transparent 1.5px);
  background-size: 9px 3px; background-position: left bottom; background-repeat: repeat-x;
}
/* small platinum chip marking the in-house infusions */
.mn-chip {
  display: inline-flex; align-items: center; gap: 0.42rem;
  margin: 0.8rem 0 0; padding: 0.3rem 0.72rem;
  border: 1px solid rgba(220,227,234,0.2); border-radius: 999px;
  font-family: 'ABC Arizona Flare', 'Marcellus', serif; font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-soft);
  background: linear-gradient(120deg, rgba(120,160,220,0.14), rgba(120,200,195,0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.mn-chip svg { width: 11px; height: 11px; flex: none; fill: currentColor; filter: drop-shadow(0 0 4px rgba(220,231,244,0.55)); }
.mn-chip + .mn-drink__ing { margin-top: 0.6rem; }
.mn-drink__ing {
  margin: 0.75rem 0 0; font-style: italic; font-size: 0.98rem; line-height: 1.55;
  color: rgba(239,232,216,0.66);
}

/* closing note under the grid */
.mn-note {
  max-width: 40rem; margin: clamp(2rem, 5vw, 3rem) auto 0;
  text-align: center; font-style: italic; font-size: 1rem; color: rgba(239,232,216,0.6);
}

@media (max-width: 680px) {
  .mn-grid { grid-template-columns: 1fr; max-width: 30rem; }
}

/* photo band closing CTA */
.mn-band__actions { margin-top: 1.4rem; }