/* =========================================================================
   VENUE PAGES — SHARED TABLET / DESKTOP LAYOUT (Nov 2026)

   One rhythm and one container for every /venue/ page, loaded AFTER the
   venue sheets (enqueued with them as dependencies) so equal-specificity
   rules here win by order. Colours, type and copy stay in the venue sheets.

   Everything is inside min-width: 769px — phones (≤768px) keep exactly the
   layout they had.

   · Container: content is 1200px wide with a 40px minimum side gutter;
     bands stay full-bleed, the gutter is padding (--vl-gutter).
   · Rhythm: 64px top/bottom per section on desktop, 56px on tablet.
     Two neighbours on the SAME background share one gap (the second drops
     its top padding) instead of stacking 160–200px of empty band.
   ========================================================================= */

@media (min-width: 769px) {

    .coco-venue-page {
        --vl-pad: 56px;
        --vl-gutter: max(40px, calc((100vw - 1200px) / 2));
        --vl-gap: 24px;
    }

    /* ── Hero ─────────────────────────────────────────────────────────
       It was 100vh with a content-box inner: height 100% + 120px bottom
       padding made the inner 120px taller than the hero, so the button row
       sat on (and under) the bottom edge. */
    .coco-venue-page .coco-venue-hero {
        height: min(78vh, 760px);
        min-height: 560px;
    }
    .coco-venue-page .coco-venue-hero-inner {
        box-sizing: border-box;
        height: 100%;
        padding: 120px var(--vl-gutter) 72px;
    }
    .coco-venue-page--haus .coco-venue-title,
    .coco-venue-page--twnty7 .coco-venue-title {
        font-size: clamp(64px, 6.4vw, 96px);
    }
    .coco-venue-page--cite .coco-venue-title {
        font-size: clamp(56px, 5.6vw, 84px);
    }
    .coco-venue-page--jardin .coco-jardin-hero-line {
        text-wrap: balance;
    }
    .coco-venue-page .coco-venue-sub-secondary,
    .coco-venue-page .coco-venue-sub-location {
        margin-bottom: 28px;
    }

    /* ── Section rhythm + container ─────────────────────────────────── */
    .coco-venue-page .coco-venue-philosophy,
    .coco-venue-page .coco-venue-offerings,
    .coco-venue-page .coco-venue-experience,
    .coco-venue-page .coco-venue-gallery,
    .coco-venue-page .coco-venue-perfect-for,
    .coco-venue-page .coco-venue-faq-map,
    .coco-venue-page .coco-venue-tonight,
    .coco-venue-page .coco-venue-scene,
    .coco-venue-page .coco-venue-location-spotlight,
    .coco-venue-page .coco-venue-first-timer,
    .coco-venue-page .coco-venue-squad,
    .coco-venue-page .coco-venue-content-wall,
    .coco-venue-page .coco-venue-dj-section {
        padding: var(--vl-pad) var(--vl-gutter);
    }
    /* Cité's "Dine at Cité" carries inline padding/max-width. */
    .coco-venue-page--cite .coco-venue-offerings {
        padding: var(--vl-pad) var(--vl-gutter) !important;
    }

    /* Same background as the section before it → share the gap. */
    .coco-venue-page--haus .coco-venue-experience + .coco-venue-gallery,
    .coco-venue-page--haus .coco-venue-gallery + .coco-venue-perfect-for,
    .coco-venue-page--haus .coco-venue-perfect-for + .coco-venue-faq-map,
    .coco-venue-page--twnty7 .coco-venue-experience + .coco-venue-content-wall,
    .coco-venue-page--twnty7 .coco-venue-content-wall + .coco-venue-gallery,
    .coco-venue-page--cite .coco-venue-offerings + .coco-venue-scene,
    .coco-venue-page--cite .coco-venue-experience + .coco-venue-gallery,
    .coco-venue-page--cite .coco-venue-gallery + .coco-venue-first-timer,
    .coco-venue-page--cite .coco-venue-first-timer + .coco-venue-faq-map,
    .coco-venue-page .coco-venue-nights + .coco-venue-experience,
    .coco-venue-page .coco-venue-event-strip + .coco-venue-experience,
    .coco-venue-page .coco-venue-no-events + .coco-venue-experience {
        padding-top: 0;
    }
    .coco-venue-page--cite .coco-venue-offerings + .coco-venue-scene .coco-venue-section-title {
        margin-top: 0;
    }

    /* Loose section titles (What's On / Weekly Lineup sit between bands). */
    .coco-venue-page > .coco-venue-section-title {
        margin: var(--vl-pad) 0 28px;
        padding: 0 var(--vl-gutter);
    }
    .coco-venue-page--cite .coco-venue-scene + .coco-venue-section-title {
        margin-top: 0;
    }
    .coco-venue-page .coco-venue-section-title {
        margin-bottom: 28px;
    }

    /* Info strip: inside the container, not edge to edge. */
    .coco-venue-page .coco-venue-info-bar {
        padding: 28px var(--vl-gutter);
        gap: 20px 40px;
        flex-wrap: wrap;
    }

    /* ── Philosophy — two lines of copy, so a slim band ─────────────── */
    .coco-venue-page .coco-venue-philosophy {
        padding-top: 48px;
        padding-bottom: 48px;
        text-align: center;
    }
    .coco-venue-page .coco-venue-philosophy-inner {
        max-width: 760px;
        margin: 0 auto;
    }
    /* Shrink-wrapped and centred: on Jardin (no Haus sheet) the eyebrow sat
       loose at the far left above the heading. */
    .coco-venue-page .coco-venue-philosophy-tag {
        display: table;
        margin: 0 auto 14px;
    }
    .coco-venue-page .coco-venue-philosophy h2 {
        margin: 0 0 14px;
    }
    .coco-venue-page .coco-venue-philosophy p {
        margin: 0 auto;
    }

    /* ── Offerings / Perfect For / Scene: full container ─────────────── */
    .coco-venue-page .coco-venue-offerings-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--vl-gap);
        max-width: none;
        margin: 0;
    }
    .coco-venue-page--cite .offering-icon {
        font-size: 30px;
        margin-bottom: 12px;
    }
    .coco-venue-page--cite .coco-venue-offerings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px !important;
        margin: 0 auto !important;
    }
    .coco-venue-page .coco-venue-perfect-grid,
    .coco-venue-page .scene-grid,
    .coco-venue-page .first-timer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--vl-gap);
        max-width: none;
        margin: 0;
    }
    .coco-venue-page .location-grid {
        max-width: none;
    }
    .coco-venue-page .coco-venue-concierge {
        margin-top: 40px;
        padding-top: 32px;
    }
    .coco-venue-page .coco-venue-concierge p {
        margin-bottom: 16px;
    }

    /* ── Event strip: a grid in the container, cards fill the column ── */
    .coco-venue-page .coco-venue-event-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--vl-gap);
        padding: 0 var(--vl-gutter);
        margin: 0 0 var(--vl-pad);
    }
    .coco-venue-page .coco-venue-event-card {
        width: auto;
        min-width: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
    }
    .coco-venue-page .coco-venue-event-card > a {
        display: block;
    }
    .coco-venue-page .coco-venue-event-card img {
        display: block;
        aspect-ratio: 4 / 3;
        height: auto;
    }
    .coco-venue-page .coco-venue-event-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .coco-venue-page .coco-venue-event-content > button,
    .coco-venue-page .coco-venue-event-content > .event-actions {
        margin-top: auto;
    }
    .coco-venue-page .coco-venue-no-events {
        margin: 0 0 var(--vl-pad);
    }

    /* ── The Weekly Lineup: a guttered grid, not an edge-to-edge strip ─ */
    .coco-venue-page .coco-venue-nights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--vl-gap);
        padding: 0 var(--vl-gutter);
        margin: 0 0 var(--vl-pad);
    }
}

/* Mid widths: three event columns. */
@media (min-width: 900px) {
    .coco-venue-page .coco-venue-event-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop. */
@media (min-width: 1200px) {
    .coco-venue-page {
        --vl-pad: 64px;
    }
    .coco-venue-page .coco-venue-event-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* TWNTY7 renders at most three nights — three full columns, no hole. */
    .coco-venue-page--twnty7 .coco-venue-event-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .coco-venue-page .coco-venue-nights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .coco-venue-page .coco-venue-perfect-grid,
    .coco-venue-page .scene-grid,
    .coco-venue-page .first-timer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── Phones (≤768px): two fixes only (Folabi, 10 Nov 2026) ───────────────
   1. Hero: same content-box bug as desktop — the inner box was its padding
      taller than the hero, so the button row was cut off at the bottom.
      Border-box keeps the buttons inside; svh keeps them above the
      browser's address bar.
   2. Jardin: the philosophy eyebrow ("The garden") sat loose at the far
      left because only the Haus sheet styles it. */
@media (max-width: 768px) {
    .coco-venue-page .coco-venue-hero-inner {
        box-sizing: border-box;
        height: 100%;
    }
    /* min-height was 700px (Jardin 800px) — taller than most phone
       screens, which is what pushed the buttons below the fold. */
    .coco-venue-page .coco-venue-hero,
    .coco-venue-page.coco-venue-page--jardin .coco-venue-hero {
        min-height: 540px;
    }
    @supports (height: 100svh) {
        .coco-venue-page .coco-venue-hero,
        .coco-venue-page.coco-venue-page--jardin .coco-venue-hero {
            height: 100svh;
        }
    }
    /* Jardin carries a notice bar above the hero (e.g. "Closed for
       refurbishment"), so its hero starts ~100px down the screen. */
    @supports (height: 100svh) {
        .coco-venue-page.coco-venue-page--jardin .coco-venue-hero {
            height: calc(100svh - 100px);
        }
    }
    .coco-venue-page .coco-venue-philosophy-tag {
        display: table;
        margin: 0 auto 14px;
    }
}