/* Book a room — Figma "Frame 15643" (1324:94), 2004×1378, navy. Absolute layout
   at exact Figma coords scaled by --px inside a 2004-wide centred frame. */
.bar {
  position: relative;
  height: calc(1375.5 * var(--px));   /* 1378 - 2.5 (section-spacing standard) */
  background: #253b5b;
  overflow: hidden;
  color: #fff;
}
.bar__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(-2.5 * var(--px)); transform: translateX(-50%);
  width: calc(2004 * var(--px)); height: 100%;
}
.bar__frame > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}
/* width/height helpers from vars */
.bar-desc, .bar-rule, .bar-nearby, .bar-nearby-txt { width: calc(var(--w) * var(--px)); }
.bar-btn, .bar-map, .bar-illus, .bar-nearby        { height: calc(var(--h) * var(--px)); }
.bar-btn, .bar-map, .bar-waicon, .bar-illus        { width: calc(var(--w) * var(--px)); box-sizing: border-box; }
.bar-phoneicon                                     { width: calc(var(--w) * var(--px)); height: auto; }

/* ---- header ---- */
.bar-heading { font-family: var(--font-display); font-weight: 700; font-size: calc(60 * var(--px)); transform: translateY(-50%); white-space: nowrap; }
.bar-rule    { height: 1px; background: rgba(255,255,255,.8); }

/* ---- venue text ---- */
.bar-title { font-family: var(--font-display); font-size: calc(58.215 * var(--px)); transform: translateY(-50%); white-space: nowrap; }
.bar-title strong { font-weight: 700; }
.bar-title span   { font-weight: 400; }
.bar-desc { font-family: var(--font-sans); font-weight: 400; font-size: calc(18.21 * var(--px)); line-height: 1.35; }
.bar-lead { font-family: var(--font-sans); font-size: calc(16.203 * var(--px)); white-space: nowrap; }
.bar-hl-r { color: #fb1c1c; font-weight: 700; text-decoration: none; }
.bar-hl-y { color: #fcd276; font-weight: 700; text-decoration: none; }
.bar-hl-g { color: #0ca652; font-weight: 700; text-decoration: none; }

/* ---- buttons ---- */
.bar-btn { display: flex; align-items: center; justify-content: center; border: calc(2.188 * var(--px)) solid #fff; border-radius: 999px; font-family: var(--font-ui); font-size: calc(14.585 * var(--px)); letter-spacing: 0.25em; color: #fff; text-decoration: none; white-space: nowrap; }
.bar-btn--book { background: #f22233; font-weight: 500; }
.bar-btn--call { background: #e36b08; }
.bar-btn--wa   { background: #0e5f33; letter-spacing: 0.22em; }
.bar-waicon img { width: 100%; height: 100%; display: block; }

/* ---- phone ---- */
.bar-phone { font-family: var(--font-display); font-weight: 700; font-size: calc(28.431 * var(--px)); color: #fff; text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }

/* ---- feature lists ---- */
.bar-feat { font-family: var(--font-sans); font-weight: 400; font-size: calc(13.058 * var(--px)); line-height: 1.5; list-style: disc; padding-left: calc(16 * var(--px)); }
.bar-feat li { white-space: nowrap; }

/* ---- open + illustrations ---- */
.bar-open  { font-family: var(--font-sans); font-weight: 700; font-size: calc(18.764 * var(--px)); white-space: nowrap; }
.bar-illus { object-fit: contain; }
.bar-map     { border: calc(1.388 * var(--px)) solid #000; border-radius: calc(69.389 * var(--px)); overflow: hidden; display: block; }
.bar-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- "Are you nearby?" card ---- */
.bar-nearby      { border: calc(1.617 * var(--px)) solid #fff; border-radius: calc(40.427 * var(--px)); background: transparent; }
.bar-nearby__t   { font-family: var(--font-sans); font-weight: 700; }
.bar-nearby__b   { font-family: var(--font-sans); font-weight: 400; line-height: 1.35; margin-top: calc(8 * var(--px)); }
.bar-nearby__j   { font-family: var(--font-sans); font-weight: 400; }
.bar-nearby__j .bar-hl-y { font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — Figma "venue-card-Soho" (1313:108), 421-wide navy card, at EXACT
   Figma coords scaled by --mpx. Rendered in the same section slot as the
   desktop .bar, which is hidden below 600 so it never shows twice. */
.bar-m { display: none; }

@media (max-width: 600px) {
  .bar { display: none; }                  /* hide the desktop layout on phones */

  .bar-m { display: block; background: #253b5b; color: #fff; }
  /* each venue card is its own relative box; the frame inside is absolute */
  .bar-m__card { position: relative; overflow: hidden; }
  .bar-m__card--soho    { height: calc(825 * var(--mpx)); border-bottom: 1px solid #3f58b7; }
  .bar-m__card--mayfair { height: calc(670 * var(--mpx)); }
  .bar-m__frame {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(421 * var(--mpx)); height: 100%;
  }
  .bar-m__frame > * {
    position: absolute;
    left: calc(var(--x) * var(--mpx));
    top:  calc(var(--y) * var(--mpx));
    margin: 0;
  }

  .bm-title   { font-family: var(--font-display); font-weight: 500; font-size: calc(30 * var(--mpx)); white-space: nowrap; }
  /* condense so wide Playfair matches the narrow Domaine width and clears the mic */
  .bm-heading { font-family: var(--font-display); font-weight: 400; font-size: calc(38.862 * var(--mpx)); white-space: nowrap; transform: scaleX(.85); transform-origin: left center; }
  .bm-heading strong { font-weight: 700; }

  .bm-badge {
    width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx));
    display: flex; align-items: center; padding-left: calc(8.64 * var(--mpx));
    background: rgba(255,255,255,.1); border-radius: calc(4.318 * var(--mpx));
    font-family: var(--font-sans); font-weight: 700; font-size: calc(12.954 * var(--mpx)); color: #fcd276;
  }

  .bm-desc { width: calc(var(--w) * var(--mpx)); font-family: var(--font-sans); font-weight: 400; font-size: calc(16.192 * var(--mpx)); line-height: 1.6; color: rgba(255,255,255,.8); }

  /* pill buttons (BOOK red / MAP green / WHAT'S ON blue) */
  .bm-btn {
    width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border: calc(2.159 * var(--mpx)) solid #fff; border-radius: 999px;
    font-family: var(--font-sans); font-weight: 700; font-size: calc(15.113 * var(--mpx));
    letter-spacing: calc(3.778 * var(--mpx)); text-transform: uppercase;
    color: #fff; text-decoration: none; white-space: nowrap;
  }
  .bm-btn--book    { background: #f22233; }
  .bm-btn--map     { background: #438542; }
  .bm-btn--whatson { background: #3756aa; }

  .bm-phone { font-family: var(--font-display); font-weight: 400; font-size: calc(27 * var(--mpx)); color: #fff; text-decoration: none; white-space: nowrap; transform: translateY(-50%); }

  .bm-open { width: calc(var(--w) * var(--mpx)); font-family: var(--font-sans); font-size: calc(13 * var(--mpx)); color: #fff; white-space: nowrap; }
  .bm-open strong { font-weight: 700; }
  /* Now a real link down to this venue's hours in the footer (#hours-soho /
     #hours-mayfair, the same anchors the desktop cards jump to), so it has to
     read as one rather than as greyed-out text. */
  .bm-open__link { color: rgba(255,255,255,.8); text-decoration: underline; }

  .bm-note { font-family: var(--font-sans); font-weight: 400; font-size: calc(15.113 * var(--mpx)); line-height: 1.25; color: #fff; }
  .bm-hl-wa { color: #3fdb4c; font-weight: 700; text-decoration: underline; }
  .bm-note .bar-hl-y { text-decoration: underline; }

  .bm-phoneicon { width: calc(var(--w) * var(--mpx)); height: auto; }
  .bm-waicon    { width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); }
  .bm-waicon img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* mic runs the full height of the card down to the divider; z-index keeps its
     stem BEHIND the room photo where the two cross */
  .bm-mic { height: calc(var(--h) * var(--mpx)); width: auto; pointer-events: none; z-index: 0; }
  .bm-shot { z-index: 1; }
  .bm-chandelier { width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); object-fit: contain; object-position: top; pointer-events: none; }

  /* random room photo + gallery caption (both link to the gallery page) */
  .bm-shot {
    width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx));
    display: block; border-radius: calc(12 * var(--mpx)); overflow: hidden;
    box-shadow: 0 calc(4 * var(--mpx)) calc(12 * var(--mpx)) rgba(0,0,0,.3);
  }
  .bm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bm-gallery { font-family: var(--font-sans); font-weight: 400; font-size: calc(13 * var(--mpx)); color: rgba(255,255,255,.8); text-decoration: none; white-space: nowrap; transform: translateX(-50%); }
  .bm-gallery:hover { text-decoration: underline; }
}

/* WhatsApp hidden for now - not in use. Covers the desktop WHATSAPP pill and its
   green icon, plus the mobile venue-card icon. Markup stays in
   pages/landing/partials/book-a-room.php; delete these rules to bring it back. */
.bar-btn--wa,
.bar-waicon,
.bm-waicon { display: none !important; }