/* =====================================================================
   Venue pages (/<venue-slug>) - see content/venue-page.php
   ===================================================================== */

/* ---------- 1. Hero + booking bar ---------- */

.vp-hero { min-height: min(92svh, 900px); }
.vp-hero-content { width: 100%; }
.vp-place { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; font-size: 15px; font-weight: 600; color: var(--lx-gold); text-shadow: 0 1px 8px rgba(7, 10, 26, .7); }
.vp-hero .lx-lede { max-width: 40ch; }

.vp-bar {
  display: flex; align-items: stretch; gap: 0; margin: clamp(28px, 5vh, 44px) auto 0; max-width: 1060px;
  border-radius: var(--lx-radius); overflow: hidden; text-align: left;
  background: rgba(0, 0, 51, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(249, 192, 84, .45), 0 0 26px -4px rgba(249, 192, 84, .35), 0 24px 70px -30px rgba(204, 0, 102, .8);
}
.vp-bar dl { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.vp-bar dl > div { padding: 18px 22px; }
.vp-bar dl > div + div { box-shadow: inset 1px 0 0 rgba(249, 192, 84, .2); }
.vp-bar dt { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--lx-gold); margin-bottom: 4px; }
.vp-bar dd { margin: 0; font: 600 16px/1.3 var(--lx-font-display); letter-spacing: -0.01em; color: #fff; }
.vp-bar dd strong { color: var(--lx-gold); font-size: 1.125rem; }
.vp-bar .lx-btn { flex: none; border-radius: 0; min-height: 0; padding: 0 34px; font-size: 18px; }
@media (max-width: 900px) {
  .vp-bar { flex-direction: column; }
  .vp-bar dl { grid-template-columns: 1fr 1fr; }
  .vp-bar dl > div { padding: 14px 16px; }
  .vp-bar dl > div:nth-child(3) { box-shadow: inset 0 1px 0 rgba(249, 192, 84, .2); }
  .vp-bar dl > div:nth-child(4) { box-shadow: inset 1px 0 0 rgba(249, 192, 84, .2), inset 0 1px 0 rgba(249, 192, 84, .2); }
  .vp-bar .lx-btn { min-height: 56px; }
}

/* ---------- 2. Story ---------- */

.vp-story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.vp-story-text .lx-h2 { max-width: 16ch; }
.vp-stat { margin-top: 22px; font: 700 clamp(1.375rem, 2.6vw, 1.875rem)/1.2 var(--lx-font-display); letter-spacing: -0.025em; color: var(--lx-gold); text-shadow: 0 0 30px rgba(249, 192, 84, .3); max-width: 26ch; }
.vp-para { margin-top: 16px; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; color: #e4e3ee; max-width: 56ch; }
.vp-para a { color: var(--lx-link-dark); }

.vp-fan { position: relative; height: clamp(360px, 38vw, 520px); }
.vp-fan img {
  position: absolute; width: 62%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--lx-radius);
  box-shadow: 0 0 0 1px rgba(249, 192, 84, .35), 0 0 30px -6px rgba(249, 192, 84, .35), 0 30px 70px -24px rgba(0, 0, 0, .8);
  transition: transform .6s var(--lx-ease);
}
.vp-fan-1 { left: 19%; top: 0; z-index: 3; }
.vp-fan-2 { left: 0; top: 14%; z-index: 2; transform: rotate(-8deg); }
.vp-fan-3 { right: 0; top: 16%; z-index: 1; transform: rotate(8deg); }
.vp-fan:hover .vp-fan-2 { transform: rotate(-12deg) translateX(-12px); }
.vp-fan:hover .vp-fan-3 { transform: rotate(12deg) translateX(12px); }
@media (max-width: 860px) {
  .vp-story-grid { grid-template-columns: 1fr; }
  .vp-fan { height: clamp(300px, 90vw, 420px); max-width: 460px; width: 100%; margin: 0 auto; }
}

/* ---------- 3. What you'll see ---------- */

.vp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.vp-head .lx-muted { font-size: 15px; }
.vp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 17vw, 240px); gap: clamp(12px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.vp-bento li { min-width: 0; }
.vp-bento .vp-bento-big { grid-column: span 2; grid-row: span 2; }
.vp-bento .lx-tile { height: 100%; }
.vp-bento .lx-tile img { box-shadow: 0 0 0 1px rgba(249, 192, 84, .18); transition: transform .8s var(--lx-ease), box-shadow .35s var(--lx-ease); }
.vp-bento li:hover .lx-tile img { box-shadow: 0 0 0 1px rgba(249, 192, 84, .6), 0 0 30px -6px rgba(249, 192, 84, .45); }
.vp-more { margin-top: 22px; color: var(--lx-ink-2); font-size: 15px; }
@media (max-width: 760px) {
  .vp-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .vp-bento .vp-bento-big { grid-row: span 1; height: auto; }
  .vp-bento .vp-bento-big { grid-row: span 2; }
}

/* ---------- 4. Book your night ---------- */

.vp-book-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.vp-prices { margin-top: 26px; }
.vp-notes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.vp-notes li { display: flex; gap: 14px; align-items: flex-start; color: var(--lx-paper-ink-2); font-size: 16px; line-height: 1.45; }
.vp-notes i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--lx-btn-r); background: rgba(204, 0, 102, .08); color: var(--lx-link-light); font-size: 15px; }
.vp-notes strong { color: var(--lx-paper-ink); }
.vp-notes a { color: var(--lx-link-light); font-weight: 600; }
.vp-special { display: grid; gap: 18px; margin-top: 26px; }
.vp-special .lx-h4 { display: flex; align-items: center; gap: 8px; color: var(--lx-paper-ink); }

.vp-ticket-wrap { display: flex; flex-direction: column; align-items: center; }
.vp-ticket { margin: 0 !important; width: 100%; max-width: 360px !important; }
.vp-ticket > li { max-width: none !important; rotate: -3deg; }
.vp-ticket .lx-ticket { min-height: 340px; background: var(--lx-navy); box-shadow: 0 30px 70px -24px rgba(0, 0, 51, .55); }
.vp-ticket .lx-ticket:hover { background: var(--lx-accent); }
.vp-ticket .lx-ticket-main strong { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.vp-ticket .lx-ticket-main small { font-size: 14px; }
.vp-ticket-note { margin-top: 18px; text-align: center; max-width: 34ch; }
@media (max-width: 900px) { .vp-book-grid { grid-template-columns: 1fr; } .vp-ticket .lx-ticket { min-height: 280px; } }

/* ---------- 5. Plan your visit: tabs on wide screens, accordion on phones ---------- */

.vp-tabs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.vp-tablist { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--lx-nav-h) + 24px); }
.vp-tablist button {
  text-align: left; padding: 14px 18px; border: 0; border-radius: var(--lx-btn-r); cursor: pointer;
  font: 600 16px/1.2 var(--lx-font); color: var(--lx-paper-ink-2); background: transparent;
  transition: background-color .2s, color .2s;
}
.vp-tablist button:hover:not([aria-selected="true"]) { color: var(--lx-paper-ink); background: rgba(0, 0, 51, .05); }
.vp-tablist button:focus:not(:focus-visible) { outline: none; }
.vp-tablist button[aria-selected="true"] { background: var(--lx-navy); color: #fff; box-shadow: inset 3px 0 0 0 var(--lx-gold); }
.vp-panels { min-height: 320px; }
.vp-panel > summary { display: none; }
.vp-panel:not([open]) { display: none; }
.vp-panel-body { background: var(--lx-white); border-radius: var(--lx-radius); padding: clamp(22px, 3vw, 36px); }
.vp-panel-body .lx-faq-body { padding: 0; max-width: 68ch; overflow-wrap: anywhere; }
.vp-panel-body .lx-faq-body :is(ol, ul) ol, .vp-panel-body .lx-faq-body :is(ol, ul) ul { padding-left: 1.1em; }
.vp-panel-body .lx-faq-body p + p { margin-top: 12px; }
.vp-panel-body .lx-faq-body strong { color: var(--lx-paper-ink); }
.vp-panel-body--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vp-panel-body--map .lx-map { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .vp-tabs { grid-template-columns: minmax(0, 1fr); }
  .vp-tablist { display: none; }
  .vp-panels { min-height: 0; border-top: 1px solid var(--lx-paper-line); }
  .vp-panel, .vp-panel:not([open]) { display: block; border-bottom: 1px solid var(--lx-paper-line); }
  .vp-panel > summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; cursor: pointer;
    padding: 18px 0; font: 600 1.125rem/1.3 var(--lx-font-display); color: var(--lx-paper-ink);
  }
  .vp-panel > summary::-webkit-details-marker { display: none; }
  .vp-panel > summary::after { content: "+"; font: 300 26px/1 var(--lx-font); color: var(--lx-paper-ink-2); transition: transform .3s var(--lx-ease); }
  .vp-panel[open] > summary::after { transform: rotate(45deg); }
  .vp-panel-body { padding: 0 0 22px; background: none; }
  .vp-panel-body--map { grid-template-columns: 1fr; }
}

/* ---------- 6. Good to know ---------- */

.vp-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.vp-faq-grid .lx-faq { max-width: none; margin: 0; }
@media (max-width: 860px) { .vp-faq-grid { grid-template-columns: minmax(0, 1fr); } }