/* Stop-the-bleed mobile responsive override.
 *
 * The design uses inline JSX styles, which can't carry media queries.
 * This file matches against the rendered inline-style attribute via [style*=…]
 * selectors and overrides with !important under a single mobile breakpoint.
 *
 * Throwaway when the Astro migration lands and components get real CSS.
 */

@media (max-width: 768px) {

  /* ── Multi-column grids collapse to one column ─────────────────────── */
  *[style*="repeat(3, 1fr)"],
  *[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  *[style*="1fr 1.4fr"],
  *[style*="1.4fr 1fr"],
  *[style*="1.1fr 1fr"],
  *[style*="1.2fr 1fr"],
  *[style*="1fr 280px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Generous outer padding tightens ───────────────────────────────── */
  /* Reduce both axes so vertical space doesn't stay 80–120px on mobile. */
  *[style*="padding: 120px 32px"] { padding: 56px 16px !important; }
  *[style*="padding: 96px 32px"]  { padding: 48px 16px !important; }
  *[style*="padding: 80px 32px"]  { padding: 40px 16px !important; }
  *[style*="padding: 64px 32px"]  { padding: 32px 16px !important; }
  *[style*="padding: 56px 32px"]  { padding: 28px 16px !important; }
  *[style*="padding: 48px 32px"]  { padding: 24px 16px !important; }
  *[style*="padding: 24px 32px"]  { padding: 16px 16px !important; }
  *[style*="padding: 32px 32px"]  { padding: 20px 16px !important; }

  /* ── Hero SEARCH buttons: oversized on phones ─────────────────────── */
  /* The "What's the Occasion?" search button (16px 32px) and the compact
     hero search bar (14px 28px) end up dominating once the input field
     shrinks. Shrink the buttons to a more balanced tappable size. */
  *[style*="padding: 16px 32px"] { padding: 10px 18px !important; }
  *[style*="padding: 14px 28px"] { padding: 10px 16px !important; }

  /* ── Home: trim the canon rail to 3 cards on phones ──────────────── */
  /* 6 full-size cards = ~2880px of vertical scroll for one section on a
     phone. Show the first 3; "All recipes →" leads to the full library. */
  .mbs-canon-rail > *:nth-child(n+4) { display: none !important; }

  /* ── Home: shrink AppCta iPhone mockup ───────────────────────────── */
  /* The 280×560 mockup is bigger than the actual viewport on a phone.
     Drop to 200×400, which keeps the 9:19 aspect roughly intact. */
  *[style*="width: 280px"][style*="height: 560px"] {
    width: 200px !important;
    height: 400px !important;
  }

  /* ── Recipe card image height ───────────────────────────────────── */
  /* 360px on mobile makes each card half the viewport. 220 is still
     photographic but lets multiple cards land in a single screen.
     Targeted via class so the Shop bottle cards (also height:360) keep
     their 312px Photo intact. The Photo wrapper inside (also height:360
     inline) gets shrunk in tandem — but ONLY that one child, not every
     div, since the text container and spirit pill are also direct
     children and would clip horribly if forced to 220. */
  .mbs-recipe-card-photo,
  .mbs-recipe-card-photo > div[style*="height: 360px"] { height: 220px !important; }

  /* Compound paddings used for "below-other-content" sections. Keep enough
     vertical room that section dividers still read, but not so much that
     mobile feels like blank canvas. */
  *[style*="padding: 120px 32px 96px"] { padding: 56px 16px 40px !important; }
  *[style*="padding: 64px 32px 32px"]  { padding: 32px 16px 24px !important; }
  *[style*="padding: 64px 32px 40px"]  { padding: 32px 16px 24px !important; }
  *[style*="padding: 40px 32px 80px"]  { padding: 24px 16px 40px !important; }
  *[style*="padding: 56px 32px 80px"]  { padding: 32px 16px 40px !important; }
  *[style*="padding: 24px 32px 96px"]  { padding: 16px 16px 40px !important; }
  *[style*="padding: 0 32px 120px"]    { padding: 0 16px 56px !important; }
  *[style*="padding: 96px 32px 0"]     { padding: 48px 16px 0 !important; }
  *[style*="padding: 120px 32px 0"]    { padding: 56px 16px 0 !important; }

  /* ── Grid / flex gaps shrink ───────────────────────────────────────── */
  /* When grids collapse to single column, the column-gap becomes the row-gap
     between stacked sections. 80px between Ingredients ↘ Method on a phone
     reads as a void; tighten. */
  *[style*="gap: 80px"]  { gap: 32px !important; }
  *[style*="gap: 64px"]  { gap: 28px !important; }
  *[style*="gap: 56px"]  { gap: 24px !important; }
  *[style*="rowGap: 56px"], *[style*="row-gap: 56px"] { row-gap: 24px !important; }

  /* ── Recipe method step: number column over-wide for mobile font ──── */
  /* Step number font is 56→30 on mobile but its column stays 64px wide,
     leaving ~30px of dead horizontal space per row. paddingTop:14 on the
     adjacent text was a baseline correction for the 56px number; with the
     smaller mobile number it pushes text awkwardly low. Trim both. */
  *[style*="min-width: 64px"] { min-width: 36px !important; }
  *[style*="padding-top: 14px"] { padding-top: 4px !important; }
  /* And the editorial rule-rows under method ("From the Bartender",
     RatingBlock) — 56px above each is editorial breathing room on desktop,
     too much on a phone. */
  *[style*="margin-top: 56px"] { margin-top: 28px !important; }

  /* ── Inner card paddings ───────────────────────────────────────────── */
  *[style*="padding: 96px 56px"],
  *[style*="padding: 56px 48px 48px"],
  *[style*="padding: 56px 48px"],
  *[style*="padding: 48px 40px 40px"],
  *[style*="padding: 48px 40px"],
  *[style*="padding: 48px 36px"] {
    padding: 28px 18px !important;
  }

  /* ── Display headlines scale down ──────────────────────────────────── */
  *[style*="font-size: 184px"] { font-size: 56px !important; line-height: 1 !important; }
  *[style*="font-size: 116px"] { font-size: 44px !important; line-height: 1 !important; }
  *[style*="font-size: 88px"]  { font-size: 40px !important; line-height: 1 !important; }
  *[style*="font-size: 64px"]  { font-size: 32px !important; }
  *[style*="font-size: 56px"]  { font-size: 30px !important; }
  *[style*="font-size: 48px"]  { font-size: 26px !important; }
  *[style*="font-size: 44px"]  { font-size: 26px !important; }
  *[style*="font-size: 40px"]  { font-size: 24px !important; }
  *[style*="font-size: 36px"]  { font-size: 22px !important; }
  *[style*="font-size: 32px"]  { font-size: 22px !important; }

  /* ── Body copy size eases ──────────────────────────────────────────── */
  *[style*="font-size: 22px"]  { font-size: 16px !important; }
  *[style*="font-size: 21px"]  { font-size: 16px !important; }
  *[style*="font-size: 19px"]  { font-size: 15px !important; }
  *[style*="font-size: 18px"]  { font-size: 15px !important; }
  *[style*="font-size: 17px"]  { font-size: 14px !important; }

  /* ── clamp() display headlines: minimum is still too big on phones ──── */
  /* clamp(80px, 12vw, 184px) renders at 80px on a 375px screen — way too
     pushy. Rebind those clamp callsites to a phone-sized clamp. */
  *[style*="font-size: clamp(80px"], *[style*="font-size:clamp(80px"]  { font-size: clamp(40px, 9vw, 56px) !important; line-height: 1 !important; }
  *[style*="font-size: clamp(60px"], *[style*="font-size:clamp(60px"]  { font-size: clamp(36px, 8vw, 48px) !important; line-height: 1 !important; }
  *[style*="font-size: clamp(56px"], *[style*="font-size:clamp(56px"]  { font-size: clamp(34px, 8vw, 44px) !important; line-height: 1 !important; }
  *[style*="font-size: clamp(52px"], *[style*="font-size:clamp(52px"]  { font-size: clamp(32px, 8vw, 40px) !important; line-height: 1 !important; }
  *[style*="font-size: clamp(48px"], *[style*="font-size:clamp(48px"]  { font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.05 !important; }
  *[style*="font-size: clamp(40px"], *[style*="font-size:clamp(40px"]  { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.05 !important; }

  /* ── Hero block heights relax ──────────────────────────────────────── */
  *[style*="min-height: 480px"] { min-height: 0 !important; }
  *[style*="min-height: 880px"] { min-height: 0 !important; }
  *[style*="height: 880px"] { height: 520px !important; }
  *[style*="height: 720px"] { height: 480px !important; }
  *[style*="height: 620px"] { height: 360px !important; }
  *[style*="height: 560px"] { height: 360px !important; }
  *[style*="height: 540px"] { height: 360px !important; }
  *[style*="height: 460px"] { height: 360px !important; }

  /* ── Top nav: scroll horizontally instead of clipping ──────────────── */
  .mbs-navcenter {
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mbs-navcenter::-webkit-scrollbar { display: none; }

  /* ── Right-side nav bits: keep optional/long copy out of the way ───── */
  .mbs-navright-tagline { display: none !important; }

  /* ── Modal max-widths leave breathing room on tiny phones ──────────── */
  *[style*="max-width: 880px"][style*="max-height"] { max-width: 100% !important; }
  *[style*="max-width: 540px"][style*="max-height"] { max-width: 100% !important; }
}

/* Even tighter on very small phones */
@media (max-width: 420px) {
  *[style*="padding: 32px 16px"],
  *[style*="padding: 28px 18px"] {
    padding: 24px 14px !important;
  }
}