/* ============================================================
   Wonder Spark — Venue rental (Lemur Lulu)
   ------------------------------------------------------------
   Loaded from the page body by venue_css(), NOT from head.php, so the
   homepage never pays for it.

   DESIGN RULE FOR THIS FILE
   The venue page is not a separate product. Wherever the homepage already has a
   component, the venue markup uses that component's own classes and this file
   adds NOTHING:
     · priced offer cards  → .ws-program / .ws-programs__grid   (wonderspark.css)
     · action buttons      → .ws-program__cta                    (wonderspark.css)
     · photo strip         → .ws-marquee                         (wonderspark.css)
   What is left here is only what the homepage has no equivalent for: the hero
   layout, the feature grid, the enquiry form, the location block and the promo
   pill.

   COLOUR RULE
   Every value below resolves to a --ws-* token. The single literal is #88DDEE,
   which wonderspark.css itself hardcodes for the sky card, so copying it keeps
   the two in step. There is deliberately NO new colour token in this file — an
   earlier version invented `--ws-blue: #5FA7DB`, which put a colour on the page
   that exists nowhere else on the site.
   ============================================================ */

/* ── Section backgrounds ─────────────────────────────────────
   .ws-venue-bg-surface now lives in wonderspark.css, NOT here. venue_bg_class()
   can return it for the homepage teaser too, and the homepage deliberately never
   loads this file — so defining it here meant one admin change of the teaser's
   Background to "Off-white" would emit a class with no rule anywhere and the
   section would lose its background entirely. */
/* No .ws-venue-bg-cream here on purpose. Cream sections go through
   venue_bg_class('cream') → .ws-section--cream → --ws-cream (#F3E3CC), the same
   value .ws-header paints. A local cream class bound to --ws-cream-soft used to
   live here and put a visible seam under the sticky header on the first screen. */

/* ── Curved section dividers ─────────────────────────────────────────────────
   The homepage never butts two colours together with a straight line; it bends
   the boundary. Same vocabulary reused here, same SVG paths, same clamp heights
   — nothing new is invented.

   Two shapes, copied verbatim from wonderspark.css:
     HILL    (∩) region UNDER an arc     — .ws-entertainment::before
     HAMMOCK (∪) region UNDER a sag      — .ws-hero__split / .ws-decorations::after
     SAG     (∪) region ABOVE a sag      — .ws-booking::after

   Three rules that keep this from going wrong:
   1. The divider is painted in the colour of the section it BELONGS to, and it
      is placed OUTSIDE that section's box (bottom:100% or top:100%), overlapping
      the neighbour. Paint it in the neighbour's colour instead and you get a hard
      band rather than a blend.
   2. Because every divider sits outside its owner's box, it can never cover that
      section's own content — no padding juggling, no z-index fights.
   3. .ws-section is already position:relative, so each owner is a containing
      block already. pointer-events:none so nothing becomes unclickable.

   Boundaries WITHOUT a divider are deliberate: rental→packages is off-white to
   off-white, packages→offer and form→faq are #FAF8F5 vs #FFFFFF (≈1.03 contrast).
   A curve between two colours nobody can tell apart is just noise.

   Reading down the page the shapes alternate: hammock, hill, sag, hill.          */

/* 1 ── hero (cream) → rental (off-white). The same transition, and the same
        hammock, that the homepage uses under its own hero. */
.ws-venue-rental::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(34px, 4.5vw, 72px);
  background: var(--ws-sec-bg, var(--ws-surface));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 C 460 92 980 92 1440 0 L1440 100 L0 100 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 C 460 92 980 92 1440 0 L1440 100 L0 100 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  pointer-events: none; z-index: 0;
}

/* 2 ── offer (white) → gallery (sky): the sky bulges UP as a hill. */
.ws-venue-gallery::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(28px, 4vw, 56px);
  background: var(--ws-sec-bg, var(--ws-sky));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
  pointer-events: none; z-index: 0;
}

/* 3 ── gallery (sky) → form (white): the sky sags DOWN over the form's top. Owned
        by the gallery, not the form, so it can never sit over the enquiry fields. */
.ws-venue-gallery::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: clamp(40px, 5vw, 80px);
  background: var(--ws-sec-bg, var(--ws-sky));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 H1440 V8 C 980 92 460 92 0 8 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 H1440 V8 C 980 92 460 92 0 8 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  pointer-events: none; z-index: 1;
}

/* 4 ── faq (off-white) → closing CTA (sky): hill again, closing the page the way
        the homepage closes into its own sky block. */
.ws-venue-cta::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(28px, 4vw, 56px);
  background: var(--ws-sec-bg, var(--ws-sky));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
  pointer-events: none; z-index: 0;
}

/* 5 ── the LAST boundary on the page: the closing CTA into the plum footer. It
        was the one transition still meeting at a hard line, and it is the one the
        visitor scrolls to last. A gradient rather than a curve, because that is
        what the homepage does at exactly this boundary (.ws-booking::before melts
        its final section down into var(--ws-plum)). Ends in the footer's own
        token, so there is no seam where the two meet. */
.ws-venue-cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(40px, 5vw, 80px);
  background: linear-gradient(180deg, rgba(64, 0, 40, 0) 0%, rgba(64, 0, 40, .38) 58%, var(--ws-plum) 100%);
  pointer-events: none; z-index: 0;
}
/* Keep the CTA's text and buttons above the melt. */
.ws-venue-cta > .ws-container { position: relative; z-index: 1; }

/* The hero clips its X axis for the peek card; the divider below it belongs to
   .ws-venue-rental, so it is not clipped. Nothing to do here — noted because it
   is the first thing to suspect if divider 1 ever disappears. */

/* ── Shared section head ─────────────────────────────────── */
.ws-venue-head { text-align: center; max-width: 780px; margin: 0 auto clamp(28px, 4vw, 44px); }
.ws-venue-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ws-plum); margin: 10px 0 0; line-height: 1.12; }
.ws-venue-head__strap {
  display: inline-block; margin: 14px 0 0; padding: 6px 18px;
  background: var(--ws-yellow); color: var(--ws-plum);
  border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm);
}
.ws-venue-head__lead { margin: 14px 0 0; font-family: var(--font-body); color: var(--ws-plum); font-size: var(--fs-lg); line-height: 1.65; }

/* ── Promo pill ──────────────────────────────────────────── */
.ws-venue-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
/* The row is a flex container, so text-align on an ancestor does NOT move it —
   it needs justify-content of its own. Centre it in every centred context:
   .ws-venue-head (packages, form) and .ws-venue-cta__inner (the closing CTA,
   which is text-align:center yet was leaving the pill hard left on desktop).
   The hero is deliberately NOT in this list — that column is left-aligned. */
.ws-venue-head .ws-venue-promo,
.ws-venue-cta__inner .ws-venue-promo { justify-content: center; text-align: center; }
.ws-venue-promo__pill {
  display: inline-block; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--ws-orange); color: var(--ws-white);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm);
  border: 1.5px solid var(--ws-plum);
  box-shadow: 0 2px 0 0 var(--ws-plum);
}
.ws-venue-promo__note { font-family: var(--font-body); color: var(--ws-plum); font-size: var(--fs-sm); }

/* ── Additions to the shared .ws-program card ────────────────────────────────
   The homepage programs have a single price; venue packages can be discounted,
   so the struck original and the saving sit inside .ws-program__price. */
.ws-venue-was {
  font-family: var(--font-ui); font-weight: 500;
  font-size: .5em; color: var(--ws-plum); opacity: .55;
  margin-right: .25em; text-decoration-thickness: 2px;
}
.ws-venue-off {
  display: inline-block; vertical-align: middle; margin-left: .3em;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--ws-orange); color: var(--ws-white);
  border: 1.5px solid var(--ws-plum);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
}
/* "Also includes" — small checked-off extras under the main list. */
.ws-venue-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.ws-venue-also__label { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ws-plum); margin-right: 2px; }
.ws-venue-also__chip {
  padding: 5px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  border: 1.5px solid var(--ws-line);
  font-family: var(--font-ui); font-size: 15px; color: var(--ws-plum);
}
.ws-venue-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* Sky-filled variant of the site's candy pill — the exact fill the header CTA
   uses. Used for secondary actions beside a white primary, and for the form's
   submit button, where sky reads as the page's strongest action. */
.ws-program__cta--soft { background: #88DDEE; }
.ws-program__cta--soft:hover { background: var(--ws-sky-dark); }

/* ── Hero ────────────────────────────────────────────────── */
/* The peek card is deliberately offset outside its parent; `clip` stops that
   decorative overhang from giving the whole page a horizontal scrollbar without
   creating a scroll container the way `hidden` would. */
.ws-venue-hero { overflow-x: hidden; overflow-x: clip; }
.ws-venue-hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
.ws-venue-hero__title {
  font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.05;
  color: var(--ws-plum); margin: 10px 0 0; letter-spacing: -0.01em;
}
.ws-venue-hero__accent {
  font-family: var(--font-ui); font-weight: 500; color: var(--ws-orange);
  font-size: var(--fs-h3); margin: 6px 0 0;
}
.ws-venue-hero__lead { margin: 18px 0 0; font-family: var(--font-body); font-size: var(--fs-lg); line-height: 1.65; color: var(--ws-plum); max-width: 56ch; }
.ws-venue-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.ws-venue-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ws-venue-facts li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ws-plum); }
.ws-venue-facts__ico {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; background: var(--ws-white); color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum); box-shadow: 0 2px 0 0 var(--ws-plum);
}

.ws-venue-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.ws-venue-chips li {
  padding: 6px 14px; border-radius: var(--r-pill); background: var(--ws-white);
  border: 1.5px solid var(--ws-plum); color: var(--ws-plum);
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-sm);
}

/* Hero photo slider — the same layered "peek" treatment as .ws-program__media. */
.ws-venue-hero__media { position: relative; }
.ws-venue-hero__peek {
  position: absolute; left: 5%; top: 6%; width: 90%; height: 100%;
  border-radius: 24px; overflow: hidden; z-index: 0;
  transform: rotate(-2deg); transform-origin: top left;
  box-shadow: 0 18px 30px -22px rgba(64, 3, 45, .50);
}
.ws-venue-hero__peek img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
.ws-venue-hero__frame {
  position: relative; z-index: 1; aspect-ratio: 4 / 3;
  border-radius: 24px; overflow: hidden; background: var(--ws-white);
  box-shadow: 0 0 0 6px var(--ws-white), 0 20px 40px -22px rgba(64, 3, 45, .45);
}
.ws-venue-hero__track { position: absolute; inset: 0; }
.ws-venue-hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s ease;
  will-change: opacity, transform;
}
.ws-venue-hero__slide.is-active { opacity: 1; transform: scale(1); }
.ws-venue-hero__nav { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 3; }
.ws-venue-hero__nav button {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ws-white); color: var(--ws-plum); border: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(64, 3, 45, .45);
  transition: transform .2s var(--tx-spring), background .2s, color .2s;
}
.ws-venue-hero__nav button:hover  { background: var(--ws-sky); transform: translateY(-1px) scale(1.05); }
.ws-venue-hero__nav button:active { transform: scale(.95); }

/* Bottom margin reserves room for the peek, exactly like .ws-program__media. */
.ws-venue-hero__media { margin-bottom: clamp(24px, 4vw, 40px); }

/* ── Ribbon ──────────────────────────────────────────────── */
.ws-venue-ribbon {
  margin: clamp(26px, 4vw, 44px) auto 0; max-width: 900px; text-align: center;
  padding: 16px 28px; border-radius: var(--r-pill);
  background: var(--ws-sky); color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  box-shadow: 0 2px 0 0 var(--ws-plum);
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-lg);
}

/* ── "We offer" grid ─────────────────────────────────────── */
.ws-venue-offer__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
/* These three carry --shadow-card for a reason, not for decoration: a white card
   on the white "What's included" section measured 1.00 contrast, and the white
   enquiry card on the white form section the same — literally no edge at all.
   The site's own answer for a white card on a light ground is a soft drop shadow
   (.ws-booking__inner on the homepage, .ws-venue-teaser__media here), so use the
   existing token rather than inventing an outline. Do not remove these unless the
   section behind them stops being white. */
.ws-venue-offer__item {
  background: var(--ws-white); border-radius: 24px; padding: 26px;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--tx-spring);
}
.ws-venue-offer__item:hover { transform: translateY(-4px); }
.ws-venue-offer__ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--ws-cream-soft); color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum); box-shadow: 0 2px 0 0 var(--ws-plum);
  margin-bottom: 18px;
}
.ws-venue-offer__item h3 { margin: 0 0 8px; font-family: var(--font-ui); font-weight: 500; font-size: 22px; color: var(--ws-plum); line-height: 1.15; }
.ws-venue-offer__item p { margin: 0; font-family: var(--font-body); color: var(--ws-plum); font-size: 16px; line-height: 1.55; }

/* ── Gallery ─────────────────────────────────────────────────────────────────
   No styles of its own: the strip IS the homepage .ws-marquee component. Only
   the full-bleed layout needs adjusting. */
/* NO overflow rule here on purpose. `.ws-marquee__row` already sets
   `overflow: hidden` and the JS moves the track with a transform, so the strip
   clips itself — the section never needed to. Clipping here actively hurt: this
   section owns two curved dividers that hang OUTSIDE its box, and `overflow:
   hidden` erased them. `overflow-x: clip` rescued them but silently degrades in
   Safari <16, where `overflow-x: hidden` + `overflow-y: visible` computes
   overflow-y to `auto` and turns the section into a scroll container — losing
   both curves AND adding a stray scrollbar. Owning no overflow at all is the
   only version with no fallback story. */
.ws-venue-gallery .ws-venue-head { padding: 0 var(--gutter); }

/* ── Enquiry form ────────────────────────────────────────── */
.ws-venue-formsec__wrap { max-width: 900px; }
.ws-venue-form { background: var(--ws-white); border-radius: 32px; padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow-card); }
.ws-venue-form__grid { display: grid; gap: 18px; }
.ws-venue-form__field { display: flex; flex-direction: column; gap: 7px; }
.ws-venue-form__field--full { grid-column: 1 / -1; }
.ws-venue-form label,
.ws-venue-form__label { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-body); color: var(--ws-plum); }
.ws-venue-form__opt { font-family: var(--font-body); font-weight: 400; color: var(--ws-muted); font-size: var(--fs-sm); }
.ws-venue-form .ws-input,
.ws-venue-form .ws-textarea { width: 100%; }
.ws-venue-form__foot { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ws-venue-form__privacy { margin: 0; font-family: var(--font-body); color: var(--ws-muted); font-size: var(--fs-sm); max-width: 60ch; }
/* Submit is the sky-filled candy pill (the same fill the header CTA uses) at half
   the form's width — a white button here read as secondary next to the coloured
   package picker above it. Full width on phones, where half a column is too
   small a target. */
.ws-venue-submit { width: 100%; justify-content: center; }
@media (min-width: 720px) {
  /* flex-basis, not width: the foot is a ROW at this width, so a plain `width`
     is still shrinkable and the button ended up at ~37% next to the privacy
     note. `flex: 0 0 50%` pins it to exactly half the form's content width. */
  .ws-venue-submit { flex: 0 0 50%; width: auto; }
}

.ws-venue-time { display: flex; align-items: center; gap: 8px; }
.ws-venue-time .ws-input { width: auto; flex: 1 1 0; min-width: 0; }

/* The slot length is deliberately TEXT, not a control — it cannot be changed. */
.ws-venue-fixed {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 16px 20px; border-radius: 24px;
  background: var(--ws-cream-soft); border: 1.5px dashed var(--ws-line);
}
.ws-venue-fixed__len { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ws-plum); line-height: 1; }
.ws-venue-fixed__note { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ws-plum); }
.ws-venue-fixed__preview { width: 100%; color: var(--ws-plum); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); }

.ws-venue-pick { display: grid; gap: 10px; }
.ws-venue-pick__item { position: relative; display: block; cursor: pointer; }
.ws-venue-pick__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ws-venue-pick__body {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--ws-line); background: var(--ws-white);
  transition: border-color .2s var(--tx-spring), box-shadow .2s var(--tx-spring), background .2s;
}
/* Selected = the site's candy pill, so choosing a package reads exactly like
   pressing any other button on the site. */
.ws-venue-pick__item input:checked + .ws-venue-pick__body {
  background: #88DDEE; border-color: var(--ws-plum); box-shadow: 0 2px 0 0 var(--ws-plum);
}
.ws-venue-pick__item input:focus-visible + .ws-venue-pick__body { outline: 3px solid var(--ws-sky-dark); outline-offset: 2px; }
.ws-venue-pick__name { font-family: var(--font-ui); font-weight: 500; color: var(--ws-plum); font-size: 17px; }
.ws-venue-pick__price { white-space: nowrap; font-family: var(--font-ui); }
.ws-venue-pick__price s { color: var(--ws-plum); opacity: .5; margin-right: 6px; font-size: var(--fs-sm); }
.ws-venue-pick__price b { font-weight: 600; font-size: 20px; color: var(--ws-plum); }

/* Program choice (entertainment OR workshop). Hidden until a package that offers
   the choice is selected. Two INDEPENDENT reveal rules, deliberately not merged
   into one selector list: a browser that does not understand :has() would discard
   the entire list and the field could then never be shown. */
.ws-venue-form [data-venue-program-field] { display: none; }
.ws-venue-form.is-program-choice [data-venue-program-field] { display: flex; }
.ws-venue-form:has(input[name="venue_package"][data-choice="1"]:checked) [data-venue-program-field] { display: flex; }
/* Name over description: the copy here is a sentence, not a price, so it must not
   be squeezed into the slot .ws-venue-pick__body reserves on the right. */
.ws-venue-pick--program .ws-venue-pick__body { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 20px; }
.ws-venue-pick__note { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ws-muted); line-height: 1.5; }
.ws-venue-pick__item input:checked + .ws-venue-pick__body .ws-venue-pick__note { color: var(--ws-plum); }

/* ── Location ────────────────────────────────────────────── */
.ws-venue-location__grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.ws-venue-location__block { margin-bottom: 22px; }
.ws-venue-location__block address { font-style: normal; font-family: var(--font-body); color: var(--ws-plum); line-height: 1.6; margin-bottom: 14px; }
.ws-venue-location__block p { margin: 0; font-family: var(--font-body); color: var(--ws-plum); line-height: 1.65; }
.ws-venue-location__map { border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 6px var(--ws-white), 0 20px 40px -22px rgba(64, 3, 45, .45); min-height: 320px; }
.ws-venue-location__map iframe { width: 100%; height: 100%; min-height: 320px; display: block; }
.ws-venue-label {
  font-family: var(--font-body); font-weight: 700; font-size: 18px;
  color: var(--ws-plum); margin: 0 0 10px;
}

/* ── Closing CTA ─────────────────────────────────────────── */
.ws-venue-cta__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.ws-venue-cta__inner h2 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ws-plum); margin: 0 0 12px; }
.ws-venue-cta__inner p { font-family: var(--font-body); color: var(--ws-plum); font-size: var(--fs-lg); line-height: 1.65; margin: 0 0 26px; }
.ws-venue-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 720px) {
  .ws-venue-facts       { grid-template-columns: repeat(2, 1fr); }
  .ws-venue-offer__grid { grid-template-columns: repeat(2, 1fr); }
  .ws-venue-form__grid  { grid-template-columns: repeat(2, 1fr); }
  .ws-venue-form__foot  { flex-direction: row; align-items: center; gap: 20px; }
}
@media (min-width: 960px) {
  .ws-venue-hero__grid     { grid-template-columns: 1.05fr .95fr; }
  .ws-venue-offer__grid    { grid-template-columns: repeat(3, 1fr); }
  .ws-venue-location__grid { grid-template-columns: 1fr 1.1fr; }
  .ws-venue-facts          { grid-template-columns: repeat(3, 1fr); }
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   The stacked layout already works; this is about density. Seven feature cards
   plus the offer cards make a very long column on a 375px screen, so the feature
   icon moves inline with its title and the action buttons go full width. */
@media (max-width: 719px) {
  .ws-venue-head { margin-bottom: 26px; }
  .ws-venue-head__lead { font-size: 16px; }

  .ws-venue-offer__item {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 6px;
    align-items: start; padding: 20px;
  }
  .ws-venue-offer__ico { width: 44px; height: 44px; flex: 0 0 44px; margin-bottom: 0; grid-row: 1; grid-column: 1; }
  .ws-venue-offer__item h3 { grid-column: 2; margin: 0 0 6px; font-size: 20px; }
  .ws-venue-offer__item p  { grid-column: 2; }

  .ws-venue-hero__ctas { flex-direction: column; align-items: stretch; }
  .ws-venue-hero__ctas .ws-program__cta { justify-content: center; }
  .ws-venue-ctas { width: 100%; }
  .ws-venue-ctas .ws-program__cta { flex: 1 1 auto; justify-content: center; }

  /* The homepage price row already wraps; keep the button full width under it. */
  .ws-program__price-row .ws-venue-ctas { margin-top: 4px; }

  /* The homepage keeps its bullets in two columns at every width, but its items
     are two or three words ("pink robes"). Venue inclusions are full phrases
     ("Interactive entertainment program (1 hour)"), which shred into four lines
     in a 140px column — so this one list goes single-column on phones. */
  .ws-venue-packages .ws-program__list,
  .ws-venue-rental .ws-program__list { grid-template-columns: 1fr; }

  .ws-venue-ribbon { font-size: 16px; padding: 14px 20px; }
  .ws-venue-cta__btns { flex-direction: column; align-items: stretch; }
  .ws-venue-cta__btns .ws-program__cta { justify-content: center; }
  .ws-venue-off { font-size: 13px; padding: 3px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-venue-hero__slide,
  .ws-venue-hero__peek img,
  .ws-venue-offer__item,
  .ws-venue-faq__q button svg { transition: none !important; }
  .ws-venue-hero__slide { transform: none !important; }
}

/* ── FAQ ─────────────────────────────────────────────────── */
.ws-venue-faq__wrap { max-width: 860px; }
.ws-venue-faq__list { display: grid; gap: 12px; }
/* Lighter than the two above: these are a stack of accordion rows, and a full
   card shadow on each would read as clutter. White on off-white is 1.06. */
.ws-venue-faq__item { background: var(--ws-white); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-soft); }
.ws-venue-faq__q { margin: 0; }
.ws-venue-faq__q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-weight: 500; font-size: 18px; color: var(--ws-plum);
}
.ws-venue-faq__q button svg { flex: 0 0 auto; transition: transform .2s var(--tx-base); color: var(--ws-plum); }
.ws-venue-faq__q button[aria-expanded="true"] svg { transform: rotate(180deg); }
.ws-venue-faq__a { padding: 0 24px 20px; }
.ws-venue-faq__a p { margin: 0 0 10px; font-family: var(--font-body); color: var(--ws-plum); line-height: 1.65; font-size: 16px; }
.ws-venue-faq__a p:last-child { margin-bottom: 0; }