/* Venue hero — Figma "Frame 15650" (Soho 1369:7) / "Frame 15651" (Mayfair 1369:66).
   Maroon hero at EXACT Figma coords scaled by --px inside a 1998-wide centred
   frame. --vh sets the per-venue frame height. */
.vhero {
  position: relative;
  height: calc(var(--vh) * var(--px));
  background: #6f1145;
  overflow: hidden;
  color: #fff;
}
.vhero__frame {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: calc(1998 * var(--px)); height: 100%;
}
/* .v-actions / .v-collage are transparent on desktop (display:contents), so their
   children still position against the frame exactly as before. */
.v-actions, .v-collage { display: contents; }
.vhero__frame > *,
.v-actions > *, .v-collage > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}

/* ---- text ---- */
.v-title { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 600; font-size: calc(84.913 * var(--px)); white-space: nowrap; }
.v-addr  { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 400; font-size: calc(60.808 * var(--px)); white-space: nowrap; }
/* nowrap + condense so the intro stays on one line (Playfair runs wider than the Figma font) */
.v-intro { transform: translate(-50%, -50%) scaleX(0.85); white-space: nowrap; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: calc(27.989 * var(--px)); letter-spacing: calc(0.84 * var(--px)); }
.v-rule  { width: calc(var(--w) * var(--px)); height: 1px; background: rgba(255,255,255,.85); }
.v-since { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 600; font-size: calc(37.939 * var(--px)); white-space: nowrap; }
/* the "Mayfair" heading above "Since 2001" is larger (Figma 60px) */
.v-mname { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 600; font-size: calc(60 * var(--px)); white-space: nowrap; }
.v-desc  { transform: translate(-50%, -50%); width: calc(var(--w) * var(--px)); text-align: center; text-wrap: balance; font-family: var(--font-display); font-weight: 400; font-size: calc(24.042 * var(--px)); letter-spacing: calc(0.72 * var(--px)); line-height: 1.35; }
/* keep multi-word highlighted names on one line (no "Hugh / Grant" splits) */
.v-hl-g, .v-hl-gi, .v-hl-o { white-space: nowrap; }
.v-hl-g  { color: #7fefad; }
.v-hl-gi { color: #7fefad; font-style: italic; }
.v-hl-o  { color: #ffc300; font-style: italic; }

/* ---- links + book button ---- */
.v-link  { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 600; font-size: calc(23.425 * var(--px)); color: #fff; text-decoration: underline; white-space: nowrap; }
.v-book  {
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: calc(189 * var(--px)); height: calc(61 * var(--px));
  border: calc(2 * var(--px)) solid #fff; background: #6f1145; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: calc(23.425 * var(--px));
  text-decoration: none; white-space: nowrap;
}

/* ---- mic ---- */
.v-mic { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); object-fit: contain; object-position: bottom; }

/* ---- collage: storefront (with hand-drawn white border) + polaroids ---- */
.v-shopb { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
.v-shopb img { width: 100%; height: 100%; display: block; }
.v-shop  { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); border-radius: calc(5 * var(--px)); overflow: hidden; }
.v-shop img { position: absolute; left: 0; top: -8.64%; width: 100%; height: 120.42%; max-width: none; object-fit: cover; display: block; }
.v-shop--cover img { position: static; top: auto; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

/* Polaroid = a white frame (tilted) with the photo nested inside, so both rotate
   together. --rot is the Figma rotation; --ix/--iy are the photo's offset inside
   the frame. */
.v-pola {
  width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px));
  background: #fff;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 calc(4 * var(--px)) calc(7 * var(--px)) rgba(0,0,0,.2);
}
.v-pola img {
  position: absolute;
  left: calc(var(--ix) * var(--px)); top: calc(var(--iy) * var(--px));
  width: calc(var(--iw) * var(--px)); height: calc(var(--ih) * var(--px));
  border-radius: calc(4 * var(--px)); object-fit: cover; display: block;
}

/* ---- MOBILE / small screens: reflow instead of shrinking ----
   The desktop 1998-wide composition is too wide for a phone (shrinking it whole
   makes the text microscopic). Below 820px we drop the absolute frame and stack
   everything in normal flow at readable sizes, then place the photo collage —
   lifted out as one cluster and scaled to fit — beneath the text. Same content,
   same photos; just a layout that fits and stays legible. */
@media (max-width: 820px) {
  .vhero { height: auto; padding: 34px 22px 44px; }
  .vhero__frame {
    position: static; left: auto; top: auto; transform: none;
    width: 100%; height: auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  /* undo the absolute Figma placement for the flowed elements */
  .v-title, .v-addr, .v-intro, .v-rule, .v-mname, .v-since, .v-desc,
  .v-actions, .v-collage {
    position: static; left: auto; top: auto; transform: none;
  }
  .v-mic { display: none; }   /* decorative hanging mic — dropped on small screens */

  .v-title { font-size: clamp(30px, 8vw, 40px); line-height: 1.05; margin-bottom: 4px; }
  .v-addr  { font-size: clamp(18px, 5vw, 24px); white-space: normal; margin-bottom: 18px; }
  .v-intro { font-size: 15px; white-space: normal; max-width: 32ch; line-height: 1.4; margin-bottom: 22px; }
  .v-rule  { width: min(66%, 260px); margin: 0 auto 22px; }
  .v-mname { font-size: clamp(26px, 7vw, 34px); line-height: 1.05; margin-bottom: 4px; }
  .v-since { font-size: clamp(19px, 5.4vw, 24px); white-space: normal; margin-bottom: 12px; }
  .v-desc  { font-size: 15.5px; width: min(100%, 40ch); line-height: 1.55; margin-bottom: 24px; }

  /* actions: What's on / Book a room / Menu on one line, button dead-centre.
     display:flex undoes the desktop display:contents; children drop their
     absolute Figma placement. See below for the equal-flex centring. */
  .v-actions {
    display: flex; align-items: center;
    align-self: stretch;   /* full frame width — defeats the column's align-items:center shrink */
  }
  .v-actions > * { position: static; left: auto; top: auto; transform: none; }   /* drop the desktop translate(-50%,-50%) that shifted them left */
  /* Both side links get EQUAL flex (basis 0), so the button in the middle is
     dead-centre regardless of the links' differing widths; text-align pulls each
     link in toward the button. */
  .v-actions > :first-child { flex: 1 1 0; min-width: 0; text-align: right; padding-right: 16px; }  /* What's on */
  .v-actions > :last-child  { flex: 1 1 0; min-width: 0; text-align: left;  padding-left: 16px; }   /* Menu */
  .v-link { font-size: 15px; }
  .v-book {
    flex: 0 0 auto;
    width: auto; height: auto; padding: 9px 20px; border-width: 2px; font-size: 15px;
    white-space: nowrap;
  }

  /* collage: the whole cluster, scaled to fit and centred under the text.
     --cx0/--cy0 (cluster origin) and --cw/--ch (cluster size) come from the PHP;
     rebinding --px here scales the storefront + polaroids together. */
  .v-collage {
    display: block;   /* undo desktop display:contents so this becomes the sized, positioned cluster box */
    position: relative;
    --px: calc(min(100vw - 60px, 380px) / var(--cw));
    width: calc(var(--cw) * var(--px));
    height: calc(var(--ch) * var(--px));
    margin: 32px auto 0;   /* breathing room between the actions row and the photos */
  }
  .v-collage > * {
    left: calc((var(--x) - var(--cx0)) * var(--px));
    top:  calc((var(--y) - var(--cy0)) * var(--px));
  }
}

/* Newsletter band on the venue pages ---------------------------------------
   The band markup is shared with the landing page, but its MOBILE treatment
   lives in pages/landing/css/mobile.css, which this page does not load. Left
   with only the desktop rules it stacked hard against the left edge, because
   .nl-top__inner cancels the .container gutter with padding-inline: 0.
   Put the gutter back and keep the copy/button on one row as on desktop.
   Mobile only - the desktop band is untouched. */
@media (max-width: 600px) {
  #newsletter-top .nl-top__inner {
    padding-inline: var(--gutter);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(14 * var(--mpx));
    min-height: 0;
    padding-block: calc(20 * var(--mpx));
  }
  #newsletter-top .nl-top__copy   { flex: 1 1 auto; min-width: 0; text-align: left; }
  #newsletter-top .nl-top__action { 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)); }
}

/* The newsletter form revealed by the Sign-up pill (newsletter.js). The venue
   pages do not load landing/css/mobile.css, and the desktop form rules are written
   in --px, which on a 390px screen renders the fields about 14px tall. Restate
   them in --mpx, mirroring landing/css/mobile.css so the two pages agree.
   These rules only reach inside .nl-top__panel, so the collapsed band above is
   untouched. Mobile only - desktop is untouched. */
@media (max-width: 600px) {
  #newsletter-top .nl-top__panel-row { padding-bottom: calc(18 * var(--mpx)); }
  #newsletter-top .nl-top__form {
    flex-direction: column;
    width: 100%;
    gap: calc(12.833 * var(--mpx));
  }
  #newsletter-top .nl-top__panel .nl-pill {
    flex: 0 0 auto;
    width: 100%;
    height: calc(51.334 * var(--mpx));
    font-size: calc(17.111 * var(--mpx));
    text-align: center;
    padding-inline: calc(17.111 * var(--mpx));
    border-radius: calc(25.667 * var(--mpx));
    border-width: calc(1.604 * var(--mpx));
  }
  #newsletter-top .nl-top__panel .nl-top__submit {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    align-self: stretch;
    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));
  }
  #newsletter-top .nl-message {
    font-size: calc(13 * var(--mpx));
    padding: calc(8 * var(--mpx)) calc(12 * var(--mpx));
  }
}