/* VIPListed — inner pages in the 2026 design
   The club, restaurant, area, blog and info pages keep their original HTML (and
   their SEO), so this file restyles their components rather than rewriting 100+
   pages: page headers, venue banners, stat grids, cards, FAQs, price tiers,
   prose, buttons. Loaded after style.css + layout.css. Scoped to <main> so the
   landing, hubs and event pages (which have their own classes) are untouched. */

main { background: var(--page); }

/* ── layout: align every page to the header's 1360px grid ───────────────── */
main .container { max-width: var(--wrap); padding-inline: var(--pad); }
main .container-narrow,
main .page-header .container { max-width: calc(820px + 2 * var(--pad)); }
main .section { padding: 56px 0; }
main .section-sm { padding: 36px 0; }
main .border-top { border-top: 1px solid var(--line); }
main .bg-muted { background: var(--card); }
main .divider { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
main .label-mono { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--go); }
main .muted { color: var(--ink-2); }

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
main .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 22px; font-size: 13px; color: var(--ink-2); }
main .breadcrumb a { color: var(--ink-2); }
main .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
main .breadcrumb [aria-current] { color: var(--ink); }

/* ── page header → dark hub-style banner (Skiddle / Ticketmaster) ────────── */
main .page-header, main > .hero, main section.hero { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; border: 0; padding: 40px 0 52px; text-align: left; }
main .page-header::before, main > .hero::before, main section.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 140% at 85% 0%, rgba(37,211,102,.16), transparent 55%), linear-gradient(180deg, #0d0d0d, #000); }
main .page-header .container, main .hero .container { max-width: var(--wrap); }
main .page-header .breadcrumb, main .hero .breadcrumb { padding: 0 0 22px !important; color: rgba(255,255,255,.7); }
main .page-header .breadcrumb a, main .page-header .breadcrumb [aria-current] { color: rgba(255,255,255,.8); }
main .page-header h1, main .hero h1, main .hero-h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; max-width: 980px; margin: 8px 0 14px; }
main .page-header p, main .hero p, main .hero-sub { color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.6; max-width: 720px; margin-inline: 0; }
main .page-header .label-mono, main .hero-eyebrow { color: var(--go-on-dark); }

/* ── section headings → Ticketmaster uppercase heading with bar ──────────── */
main .section-header { margin-bottom: 26px; }
main .section-header h2, main .section > .container > h2 { position: relative; padding-top: 18px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
main .section-header h2::before, main .section > .container > h2::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 4px; background: var(--ink); }
main .section-header p { margin-top: 8px; color: var(--ink-2); max-width: 720px; }

/* ── club / restaurant intro → dark rounded banner ──────────────────────── */
main .rest-feature { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; background: #000; color: #fff; border: 0; padding: 34px 36px; margin-top: 8px; }
main .rest-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 140% at 100% 0%, rgba(37,211,102,.18), transparent 60%); }
main .rest-feature-area { color: var(--go-on-dark); }
main .rest-feature-name { font-size: clamp(32px, 4.6vw, 52px) !important; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; margin: 10px 0 12px; }
main .rest-feature-desc { color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.65; max-width: 760px; }
main .rest-feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
main .rest-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--font-ui); }

/* venue photo + stats */
main .venue-hero { padding: 26px 0 8px; border: 0; }
main .venue-info-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
main .venue-hero-img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 20px; background: #000; }
main .venue-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; border: 0; }
main .venue-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
main .venue-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-family: var(--font-ui); }
main .venue-stat-val { font-size: 16px; font-weight: 600; color: var(--ink); }

/* intent tiles → big green CTA */
main .intent-tiles { display: flex; gap: 14px; margin-bottom: 34px; }
main .intent-tile { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 24px; border-radius: 14px; background: var(--go); color: #fff; border: 0; font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; transition: background .15s, transform .15s; }
main .intent-tile:hover { background: var(--go-hover); transform: translateY(-2px); }
main .intent-tile-arrow { font-size: 22px; }

/* ── prose (venue copy, blog posts, guides) ──────────────────────────────── */
main .prose, main .blog-post-body .container, main .post-body { max-width: 780px; }
main .prose p, main .blog-post-body p, main .post-body p { font-size: 17px; line-height: 1.75; color: var(--ink); }
main .blog-post-body p, main .post-body p { margin-bottom: 18px; }
main .lead { font-size: 20px !important; line-height: 1.6 !important; font-weight: 500; }
main .prose h2, main .blog-post-body h2, main .post-body h2 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 44px 0 14px; color: var(--ink); }
main .prose h3, main .blog-post-body h3, main .post-body h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; color: var(--ink); }
main .prose a, main .blog-post-body a, main .post-body a { color: var(--go); font-weight: 600; text-decoration: none; }
main .prose a:hover, main .blog-post-body a:hover, main .post-body a:hover { text-decoration: underline; }
main .prose ul li, main .blog-post-body li, main .post-body li { font-size: 17px; line-height: 1.7; color: var(--ink); }
main .blog-post-body ul, main .post-body ul { margin: 0 0 18px 20px; }
main .blog-post-body { padding: 48px 0 24px; }
main .seo-intro { max-width: 860px; margin-bottom: 30px; }
main .seo-intro p { font-size: 17px; line-height: 1.75; color: var(--ink-2); margin-bottom: 12px; }

/* tables */
main .facts-table, main .blog-post-body table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 14px; overflow: hidden; margin: 18px 0 26px; font-size: 15px; }
main .facts-table th, main .facts-table td, main .blog-post-body th, main .blog-post-body td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink); }
main .facts-table th, main .blog-post-body th { width: 38%; font-weight: 600; color: var(--ink-2); }
main .facts-table tr:last-child th, main .facts-table tr:last-child td { border-bottom: 0; }

/* ── cards (venue grid, blog grid, related) → Shaped cards ───────────────── */
main .grid-3 { gap: 26px; }
main .grid-2 { gap: 26px; }
main .card, main .blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--card-body); border: 1px solid var(--card-line); transition: transform .2s, box-shadow .2s; }
main .card:hover, main .blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
main .card-img, main .blog-card-img { width: 100%; aspect-ratio: 416/300; height: auto; object-fit: cover; background: #000; border-radius: 0; }
main .card-img--venue { object-fit: cover; padding: 0; }
main .card-body, main .blog-card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
main .card-label, main .blog-card-label { font-size: 12px; }
main .card-title, main .blog-card-title { font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.3; }
main .card-desc, main .blog-card-excerpt { font-size: 15px; color: var(--card-copy); line-height: 1.5; }
main .blog-card-read { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--ink); }

/* filter pills (clubs index) → tabs */
main .filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
main .filter-pill { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid #c7c7c7; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
main .filter-pill.active, main .filter-pill:hover { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* ── price tiers → On Location package cards ────────────────────────────── */
main .price-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 18px 0; }
main .price-tier { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--go); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
main .price-tier-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
main .price-tier-amount { font-size: 26px; font-weight: 800; color: var(--ink); }
main .price-tier-desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
main .price-note { font-size: 13px; color: var(--ink-2); }

/* ── FAQ → card rows ─────────────────────────────────────────────────────── */
main .faq-list, main .faq { display: flex; flex-direction: column; gap: 10px; }
main .faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
main .faq-item:last-child { border-bottom: 1px solid var(--line); }
main .faq-q, main .faq-item h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
main .faq-a, main .faq-item p { font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
main .btn { border-radius: 8px; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; text-transform: none; }
main .btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
main .btn-whatsapp { background: #25D366; color: #000; border: 0; }
main .btn-whatsapp:hover { filter: brightness(1.06); }
main .btn-primary { background: var(--go); color: #fff; border-color: var(--go); }
main .btn-ghost { border-radius: 8px; }

/* CTA bands */
main .cta-band, main .cta-inline { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; background: #000; color: #fff; padding: 36px; border: 0; }
main .cta-band::before, main .cta-inline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 140% at 100% 0%, rgba(37,211,102,.2), transparent 60%); }
main .cta-band h2, main .cta-band h3, main .cta-inline h2, main .cta-inline h3, main .cta-inline strong { color: #fff; }
main .cta-band p, main .cta-inline p { color: rgba(255,255,255,.78); }

/* useful links + related lists */
main .useful-links ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 26px; }
main .useful-links a { color: var(--ink); font-weight: 600; }
main .useful-links a:hover { color: var(--go); }

/* events page night cards → Shaped cards */
main .nc { border-radius: 20px; overflow: hidden; background: var(--card-body); border: 1px solid var(--card-line); }
main .nc-media { border-radius: 0; }
main .nc-title { font-size: 18px; font-weight: 600; }
main .nc-btn { border-radius: 8px; }

/* sticky mobile WhatsApp bar */
.sticky-cta .btn { border-radius: 10px; }

@media (max-width: 1024px) {
  main .venue-info-wrap { grid-template-columns: 1fr; }
  main .venue-hero-img { max-height: 340px; }
}
@media (max-width: 760px) {
  main .section { padding: 40px 0; }
  main .rest-feature { padding: 24px 20px; border-radius: 16px; }
  main .venue-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  main .venue-stat { padding: 12px 14px; }
  main .venue-stat-val { font-size: 14px; }
  main .intent-tiles { flex-direction: column; }
  main .page-header, main > .hero, main section.hero { padding: 28px 0 36px; }
  main .prose h2, main .blog-post-body h2 { font-size: 24px; }
  main .card, main .blog-card { border-radius: 16px; }
  main .cta-band, main .cta-inline { padding: 26px 20px; }
}
main .rest-feature { display: block; min-height: 0; grid-template-columns: none; }
main .rest-feature-body { padding: 0; max-width: none; }
main .section-header h2::after, main .section > .container > h2::after { display: none; }

/* ── "List your venue / VIP event" form (partners page) ─────────────────── */
.lf-wrap { padding: 64px 0; background: var(--page); scroll-margin-top: 80px; }
.lf-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.lf-intro { position: sticky; top: 100px; color: var(--ink); }
.lf-intro .lh2 { margin-bottom: 18px; }
.lf-intro > p { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.lf-alt { margin-top: 18px; }
.lf-alt a { color: var(--go); font-weight: 600; }
.lf { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.lf [hidden] { display: none !important; }
.lf-h { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--go); }
.lf-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lf-row-3 { grid-template-columns: 1fr 1fr .7fr; }
.lf-f { display: block; }
.lf input:not([type=radio]):not([type=checkbox]):not([type=file]), .lf select, .lf textarea { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); font: inherit; font-size: 15px; }
.lf textarea { resize: vertical; line-height: 1.5; }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: 2px solid var(--go); outline-offset: -1px; }
.lf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-type { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lf-type legend { margin-bottom: 8px; }
.lf-type label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--ink); }
.lf-type input { accent-color: var(--go); }
.lf-type .i { width: 24px; height: 24px; color: var(--go); }
.lf-type span { display: flex; flex-direction: column; }
.lf-type b { font-size: 15px; }
.lf-type small { font-size: 13px; color: var(--ink-2); }
.lf-type label:has(input:checked) { border-color: var(--go); box-shadow: 0 0 0 1px var(--go) inset; }
.lf-days { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-days label { cursor: pointer; }
.lf-days input { position: absolute; opacity: 0; pointer-events: none; }
.lf-days span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.lf-days input:checked + span { background: var(--go); border-color: var(--go); color: #fff; }
.lf-days input:focus-visible + span { outline: 2px solid var(--go); outline-offset: 2px; }
.lf-file input { font-size: 14px; color: var(--ink-2); }
.lf-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.lf-consent { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.lf-consent input { accent-color: var(--go); margin-top: 3px; }
.lf-consent a { color: var(--go); }
.lf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 0; border-radius: 10px; background: var(--go); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.lf-submit:hover { background: var(--go-hover); }
.lf-submit:disabled { opacity: .6; cursor: progress; }
.lf-submit .i { width: 18px; height: 18px; }
.lf-msg { font-size: 15px; min-height: 1em; }
.lf-msg.is-ok { color: var(--go); font-weight: 600; }
.lf-msg.is-err { color: #e5484d; }
.lf-msg a { color: inherit; text-decoration: underline; font-weight: 700; }
@media (max-width: 1024px) { .lf-grid { grid-template-columns: 1fr; gap: 28px; } .lf-intro { position: static; } }
@media (max-width: 760px) { .lf { padding: 20px; } .lf-row, .lf-row-3, .lf-type { grid-template-columns: 1fr; } }
main .vh-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 300px; color: #fff; background: radial-gradient(120% 90% at 30% 20%, #1d3a2a 0%, #0b0b0b 70%); }
main .vh-art .i { width: 54px; height: 54px; stroke-width: 1.2; color: var(--go-on-dark); }
main .vh-art b { font-size: 24px; font-weight: 800; text-align: center; padding: 0 16px; }
main .vh-art small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
main .price-tiers { grid-template-columns: repeat(auto-fill, minmax(240px, 340px)); }

/* legal pages: contents box + tighter rhythm */
main .legal-toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 30px; }
main .legal-toc-h { font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) !important; margin-bottom: 8px !important; }
main .legal-toc ol { columns: 2 220px; column-gap: 26px; margin: 0 0 0 18px; }
main .legal-toc li { font-size: 15px !important; padding: 2px 0; }
main .legal h2 { scroll-margin-top: 90px; font-size: 24px; }
main .legal h3 { font-size: 18px; margin-top: 22px; }