/* Landing-page mobile layout (Figma 862:16). */
@media (max-width: 600px) {
  /* ---------- Hero (862:497) — tall, centered lockup + stacked title ---------- */
  .hero { aspect-ratio: auto; height: auto; min-height: 660px; max-height: none; }
  .hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: 24px;
  }
  .hero__lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 18px;
  }
  .hero__lockup img { display: none; }   /* logo icon hidden on mobile (brand text kept) */
  .hero__brand { font-family: var(--font-sans); font-weight: 700; font-size: 30px; letter-spacing: .04em; color: #fff; }
  .hero__since { font-family: var(--font-display); font-size: 20px; color: #fff; }
  .hero__welcome { display: none; }
  .hero__the { display: inline; }
  .hero__title { position: static; transform: none; width: auto; }
  .hero__line { font-size: 50px; line-height: .98; }
  .hero__arrow { display: none; }
  .hero__dots { display: none; }
  .hero__book {
    position: static;
    transform: none;
    height: auto;
    margin-top: 36px;
    /* Match Figma mobile BOOK (node 1313:496, 175.18x47.66): Inter BOLD 26.066,
       3.376 border, and padding that (with the border + line-box) lands the
       button on the Figma size — measured 175.2x47.7 design units. */
    font-size: calc(26.066 * var(--mpx));
    font-weight: 700;   /* Figma: Inter Bold (desktop stays 400) */
    line-height: 1.23;
    padding: calc(4.82 * var(--mpx)) calc(33.5 * var(--mpx));
    border-width: calc(3.376 * var(--mpx));
  }

  /* BOTH newsletter bands are dusty rose #c38aa6 on mobile — Figma
     newsletter-cta-top (1313:488) and newsletter-cta-bottom (1313:306) — not the
     pale pink the desktop top band uses. */
  #newsletter-top, #newsletter-bottom { background: #c38aa6; }

  /* ---------- Newsletter (862:440) — stacked, full-width inputs ---------- */
  .nl-top__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(21.389 * var(--mpx));
    min-height: 0;
    padding: calc(25.667 * var(--mpx));
  }
  .nl-top__copy { text-align: center; width: 100%; }
  .nl-top__title { font-size: calc(25.667 * var(--mpx)); }
  .nl-top__sub { font-size: calc(17.111 * var(--mpx)); }
  .nl-top__action { width: 100%; align-items: center; }
  .nl-top__form { flex-direction: column; width: 100%; gap: calc(12.833 * var(--mpx)); }
  .nl-pill {
    flex: 0 0 auto;            /* cancel the desktop flex-grow that ballooned Email */
    width: 100%;
    height: calc(51.334 * var(--mpx));
    font-size: calc(17.111 * var(--mpx));
    text-align: center;        /* Name/Email text + placeholder sit centred */
    padding-inline: calc(17.111 * var(--mpx));
    border-radius: calc(25.667 * var(--mpx));
    border-width: calc(1.604 * var(--mpx));
  }
  .nl-pill--email { flex: 0 0 auto; width: 100%; }
  .nl-pill::placeholder { text-align: center; }
  .nl-top__submit {
    width: auto; align-self: center; min-width: 0; height: auto;
    padding: calc(12.833 * var(--mpx)) calc(25.667 * var(--mpx));
    font-size: calc(14.972 * var(--mpx));
    letter-spacing: calc(1.647 * var(--mpx));
    border-radius: calc(32.083 * var(--mpx));
  }
  /* Bottom band (the one with the form): the Sign-up button spans the same
     width as the Name/Email pills. (The top band's small inline button keeps
     its own size via the #newsletter-top overrides below.) */
  #newsletter-bottom .nl-top__submit { width: 100%; align-self: stretch; box-sizing: border-box; text-align: center; }

  /* Top band only (by id): keep the heading + button on ONE row (copy = its 2
     lines, button beside it) instead of stacking; text + button shrunk to fit.
     The bottom form band still stacks (rules above). Sizes are a starting point. */
  #newsletter-top .nl-top__inner {
    flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;
    text-align: left; gap: calc(14 * var(--mpx)); padding: calc(18 * var(--mpx));
  }
  #newsletter-top .nl-top__copy   { width: auto; text-align: left; flex: 1 1 auto; min-width: 0; }
  #newsletter-top .nl-top__action { width: auto; flex: 0 0 auto; }
  #newsletter-top .nl-top__title  { font-size: calc(16 * var(--mpx)); }
  #newsletter-top .nl-top__sub    { font-size: calc(11 * var(--mpx)); }
  #newsletter-top .nl-top__submit {
    padding: calc(8 * var(--mpx)) calc(16 * var(--mpx));
    font-size: calc(12 * var(--mpx)); letter-spacing: calc(1 * var(--mpx));
  }

  /* ---------- Rooms (862:18) — stacked full-width cards ---------- */
  .rooms { overflow: hidden; }
  .venue {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "since" "desc" "cta" "contact" "map";
    row-gap: 0;
    padding-block: 26px;
    overflow: hidden;                          /* clip the illustration to the card */
  }
  .venue + .venue { margin-top: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .venue__title {
    grid-area: title;
    font-size: calc(38.862 * var(--mpx));
    padding-right: calc(110 * var(--mpx));      /* leave room for the top-right illustration */
    margin-bottom: calc(14 * var(--mpx));
  }
  /* mobile map: rounded banner (Figma img 375: h161.92, radius100.85) + OPEN MAP pill */
  .venue__map {
    display: block;
    grid-area: map;
    width: 100%;
    height: calc(161.923 * var(--mpx));
    margin-top: calc(22 * var(--mpx));
    border-radius: calc(100.851 * var(--mpx));
    border: 1px solid rgba(255,255,255,.45);
  }
  .venue__map-btn {
    border-width: 1.5px;
    height: calc(41.021 * var(--mpx));
    padding: 0 calc(26 * var(--mpx));
    font-size: calc(15.113 * var(--mpx));
    letter-spacing: 0.25em;
    border-radius: calc(32.385 * var(--mpx));
  }
  .venue__nearby { display: none; }             /* the "Are you nearby?" card stays desktop-only */
  .venue__body { grid-area: desc; max-width: none; display: contents; }
  .venue__since {
    grid-area: since;
    align-self: start;
    justify-self: start;
    background: rgba(255,255,255,.14);
    color: #fcd276;                 /* golden, per Figma 862:18 */
    border-radius: calc(4.318 * var(--mpx));
    padding: calc(4.3 * var(--mpx)) calc(8.6 * var(--mpx));
    margin-bottom: calc(14 * var(--mpx));
    font-size: calc(12.954 * var(--mpx));
  }
  .venue__desc { grid-area: desc; font-size: calc(16.192 * var(--mpx)); margin-bottom: calc(18 * var(--mpx)); padding-right: calc(70 * var(--mpx)); }
  .venue__cta { grid-area: cta; margin-top: 0; margin-bottom: calc(18 * var(--mpx)); gap: calc(16 * var(--mpx)); }
  .venue__book, .venue__whatson {
    height: calc(41.021 * var(--mpx));
    padding: 0 calc(24 * var(--mpx));
    font-size: calc(15.113 * var(--mpx));
    letter-spacing: 0.25em;
    border-radius: calc(32.385 * var(--mpx));
    border-width: calc(2.5 * var(--mpx));
  }
  /* contact: large leading phone + WhatsApp icons, two-line text beside them (Figma 862:18) */
  .venue__contact {
    grid-area: contact;
    margin-top: 0;
    font-size: calc(15.113 * var(--mpx));
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: calc(16 * var(--mpx));
  }
  .venue__contact-lead { display: inline-flex; align-items: center; gap: calc(12 * var(--mpx)); flex: 0 0 auto; }
  .venue__ic-lead { display: block; height: auto; }
  .venue__ic-lead--phone { width: calc(27.459 * var(--mpx)); }   /* np_telephone 27.46 */
  .venue__ic-lead--wa { width: calc(35.703 * var(--mpx)); }      /* image 401 35.7 */
  .venue__ic { display: none; }    /* drop the small trailing inline icons on mobile */
  /* venue illustration top-right of each card (Figma sizes: chandelier 244, record 169, mic 285@-30deg) */
  .venue__illus { display: block; left: auto; right: calc(-8 * var(--mpx)); top: 6px; transform: none; opacity: 1; }
  .venue__illus.is-chandelier { height: calc(243.924 * var(--mpx)); top: calc(-60 * var(--mpx)); right: calc(-58 * var(--mpx)); }
  .venue__illus.is-record { height: calc(215 * var(--mpx)); top: calc(98 * var(--mpx)); right: calc(-8 * var(--mpx)); }   /* bigger + one line lower, beside the description */
  .venue__illus.is-mic { height: calc(225 * var(--mpx)); transform: rotate(-30deg); top: calc(1 * var(--mpx)); right: calc(-36 * var(--mpx)); }   /* 10% smaller, bottom kept in place */
  /* keep the description clear of the record player so text isn't hidden under it */
  .venue:has(.is-record) .venue__desc { padding-right: calc(150 * var(--mpx)); }

  /* ---------- Gallery ---------- */
  /* "Our rooms" collapse/expand viewer now shows on mobile too (its responsive
     sizing lives in pages/landing/css/gallery.css). */

  /* ---------- Marquees ---------- */
  .marquee { height: 64px; }
  .f-lobster { font-size: 26px; } .f-comfortaa { font-size: 18px; } .f-mono { font-size: 22px; }
  .f-climate, .f-shade, .f-outline, .f-bold, .f-plain { font-size: 16px; }
  .f-serif-it { font-size: 20px; } .f-lead { font-size: 24px; }

  /* ---------- What to expect (Figma 862:78) ---------- */
  /* Figma mobile: title 40.934px, 18 items flow into TWO balanced columns at 16.192px. */
  .expect { min-height: 0; }
  .expect__title { font-size: calc(40.934 * var(--mpx)); margin-bottom: calc(30 * var(--mpx)); }
  .expect__cols {
    display: block;
    columns: 2;
    column-gap: calc(28 * var(--mpx));
    margin-left: 0;
    text-align: left;
  }
  .expect__list { font-size: calc(16.192 * var(--mpx)); font-weight: 400; line-height: normal; }
  .expect__list li { padding-left: calc(15.11 * var(--mpx)); margin-bottom: calc(13 * var(--mpx)); break-inside: avoid; }
  .expect__list li::before { width: calc(4.318 * var(--mpx)); height: calc(4.318 * var(--mpx)); left: 0; top: 0.5em; }
  /* mobile illustrations: singer (left) + cocktail (right) at the bottom (Figma 862:137/138).
     The desktop DJ is hidden here. */
  .expect { position: relative; z-index: 2; overflow: visible; padding-bottom: calc(330 * var(--mpx)); }
  .expect__illus { display: none; }
  .expect__illus-m { display: block; position: absolute; pointer-events: none; z-index: 3; }
  .expect__illus-m--singer { left: calc(-6 * var(--mpx)); bottom: 0; width: calc(227 * var(--mpx)); height: calc(307 * var(--mpx)); object-fit: cover; object-position: center top; }
  .expect__illus-m--cocktail { left: calc(215 * var(--mpx)); bottom: calc(-72 * var(--mpx)); width: calc(261 * var(--mpx)); height: calc(379 * var(--mpx)); object-fit: contain; object-position: bottom; }

  /* ---------- Walk-ins (Figma 862:162): centred; copy = "Nearby?" + "Visit, call…" ---------- */
  .walkins { background: #2f255b; }
  .walkins__inner { flex-direction: column; align-items: center; text-align: center; gap: calc(30 * var(--mpx)); }
  .walkins__badge {
    font-size: calc(40.646 * var(--mpx));
    padding: calc(26 * var(--mpx)) calc(16 * var(--mpx));
    border-width: 3px;
    border-radius: calc(63.809 * var(--mpx));
  }
  .walkins__body { text-align: center; width: 100%; }
  .walkins__lead { font-size: calc(15.685 * var(--mpx)); line-height: 1.45; max-width: calc(316 * var(--mpx)); margin-inline: auto; }
  .walkins__extra { display: none; }   /* drop the two desktop-only sentences on mobile */
  .walkins__locs { flex-direction: column; align-items: center; gap: calc(10 * var(--mpx)); margin-top: calc(20 * var(--mpx)); }
  .walkins__loc { font-size: calc(11.547 * var(--mpx)); line-height: 1.49; text-align: center; }

  /* ---------- Food & drink ---------- */
  .food__grid { grid-template-columns: 1fr; max-width: 320px; gap: 36px; }

  /* ---------- Something for everyone ---------- */
  .sfe__collage { width: 100%; }   /* absolute figures scale proportionally */
  .sfe__intro-more { display: none; }   /* mobile intro is just the lead line (Figma 862:16) */

  /* ---------- Run riot ---------- */
  .riot__bubble { font-size: 20px; padding: 26px 30px; }
  .riot__graffiti { width: 200px; }

  /* ---------- Testimonials ---------- */
  .tm__grid { grid-template-columns: 1fr; gap: 18px; padding-right: 0; }
  .tm__quote--lg blockquote { font-size: 22px; }

  /* ---------- FAQ (Figma mobile "FAQ" 1313:257) ---------- */
  /* Navy on mobile, not the desktop ochre. The category labels and the question
     text inside each white pill are both centred, with the chevrons pinned to the
     right edge so they keep their hit area. */
  .faq { background: #253b5b; }
  .faq__inner { max-width: none; padding-inline: 16px; }
  /* readable sizes on a phone (the inherited --px desktop-frame sizes shrink to
     ~12px here): title / category / question / answer all bumped up */
  .faq__title { font-size: 30px; margin-bottom: 16px; }
  /* label + chevron travel together as one centred unit (the whole summary is the
     click target, so the chevron doesn't need to sit out at the edge) */
  .faq__cat { justify-content: center; text-align: center; gap: 8px; font-size: 18px; }
  .faq__cat-chev { font-size: 13px; }
  .faq__cat-chev svg { width: 12px; }
  /* rounded rectangles rather than full pills */
  .faq__row,
  .faq__row[open] { border-radius: 10px; }
  .faq__row summary {
    position: relative;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    padding: 13px 30px;   /* room for the chevron without wrapping the question */
  }
  .faq__chev { position: absolute; right: 14px; }
  /* the answer inherits a --px (desktop-frame) size, which is ~4px here — reset it */
  .faq__answer { text-align: center; font-size: 14px; line-height: 1.5; padding: 0 22px 14px; }


  /* ---- "What's new?" strip (marquee B) — hidden on mobile.
     The section is deliberately LEFT IN PLACE in pages/landing/page.php
     ('whats-new:b.m'); deleting this one rule brings it straight back.
     B only ever renders on mobile (the desktop slot is marquee D, "!TRENDING!"),
     so the desktop view is untouched by this. */
  .marquee--b.marquee--mobile-only { display: none; }

}