/**
 * BSMC Adventures — page styles.
 *
 * Scoped to body.bsmc-adv-body so it can't leak. Font + heading-color
 * reclaim at the top mirrors clubhouse.css / events-calendar.css so
 * home3.css's `body.bsmc-home3-body h1..h6 { color:#edeadf }` doesn't
 * bleed cream into the white content sections.
 */

/* ─── Font + heading reclaim ──────────────────────────────────── */
body.bsmc-adv-body,
html body.bsmc-adv-body p,
html body.bsmc-adv-body a,
html body.bsmc-adv-body div,
html body.bsmc-adv-body li,
html body.bsmc-adv-body ul,
html body.bsmc-adv-body ol,
html body.bsmc-adv-body span,
html body.bsmc-adv-body em,
html body.bsmc-adv-body button {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
html body.bsmc-adv-body h1,
html body.bsmc-adv-body h2,
html body.bsmc-adv-body h3,
html body.bsmc-adv-body h4,
html body.bsmc-adv-body h5,
html body.bsmc-adv-body h6,
html body.bsmc-adv-body .bsmc-adv-h2,
html body.bsmc-adv-body .bsmc-adv-h2 span,
html body.bsmc-adv-body .bsmc-adv-intro__headline,
html body.bsmc-adv-body .bsmc-adv-intro__headline span,
html body.bsmc-adv-body .bsmc-adv-hero__title,
html body.bsmc-adv-body .bsmc-adv-hero__title span,
html body.bsmc-adv-body .bsmc-adv-card__title,
html body.bsmc-adv-body .bsmc-adv-card__title span,
html body.bsmc-adv-body .bsmc-adv-sell__reason-title,
html body.bsmc-adv-body .bsmc-adv-talk__pitch,
html body.bsmc-adv-body .bsmc-adv-operators__link,
html body.bsmc-adv-body .bsmc-adv-btn,
html body.bsmc-adv-body .bsmc-adv-accent {
    font-family: 'Bebas Neue', Impact, 'Oswald', sans-serif !important;
    font-weight: 400 !important;
}
html body.bsmc-adv-body a { text-decoration: none !important; }

/* home3-body cream-heading reclaim — see clubhouse.css for the same
   pattern. Chained body classes = specificity (0,2,1), beats
   home3.css's `html body.bsmc-home3-body h1..h6` (0,1,3). */
html body.bsmc-adv-body.bsmc-home3-body h1,
html body.bsmc-adv-body.bsmc-home3-body h2,
html body.bsmc-adv-body.bsmc-home3-body h3,
html body.bsmc-adv-body.bsmc-home3-body h4,
html body.bsmc-adv-body.bsmc-home3-body h5,
html body.bsmc-adv-body.bsmc-home3-body h6,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-h2,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-card__title,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-intro__headline,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-operators__link {
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
}
/* Restore white on the dark sections. */
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-hero .bsmc-adv-hero__title,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-hero h1,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-sell .bsmc-adv-h2,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-sell .bsmc-adv-sell__reason-title,
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-talk .bsmc-adv-talk__pitch {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ─── Tokens + base ───────────────────────────────────────────── */
:root {
    --adv-ink: #0F0E0C;
    --adv-body: #3B3931;
    --adv-body-muted: #55524B;
    --adv-line: #E2DFD8;
    --adv-line-soft: #EDEAE3;
    --adv-panel: #F7F6F3;
    --adv-panel-2: #F4F3F1;
    --adv-accent: #A18A55;
    --adv-max: 1240px;
}
body.bsmc-adv-body {
    margin: 0;
    padding: 0;
    background: #FFFFFF !important;
    color: var(--adv-ink);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body.bsmc-adv-body * { box-sizing: border-box; }
body.bsmc-adv-body img { max-width: 100%; display: block; }

/* Shared primitives ---------------------------------------------------- */
.bsmc-adv-kicker {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--adv-accent) !important;
    -webkit-text-fill-color: var(--adv-accent) !important;
}
.bsmc-adv-kicker--dark { color: var(--adv-accent) !important; -webkit-text-fill-color: var(--adv-accent) !important; }
.bsmc-adv-accent { color: var(--adv-accent) !important; -webkit-text-fill-color: var(--adv-accent) !important; }
.bsmc-adv-h2 {
    margin: 0 0 20px;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 0.95;
    letter-spacing: 0.005em;
}
.bsmc-adv-h2--huge { font-size: clamp(40px, 6vw, 88px); line-height: 0.9; margin-bottom: 22px; }

/* Buttons */
.bsmc-adv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 0 !important;   /* beat BB parent theme pill radius */
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    text-align: center;
}
.bsmc-adv-btn--primary {
    background: var(--adv-ink);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: var(--adv-ink);
    flex: 1;
    min-width: 0;
    padding: 13px 10px;
    font-size: 17px;
}
.bsmc-adv-btn--primary:hover { background: var(--adv-accent); color: var(--adv-ink) !important; -webkit-text-fill-color: var(--adv-ink) !important; border-color: var(--adv-accent); }
.bsmc-adv-btn--ghost {
    background: #FFFFFF;
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
    border-color: var(--adv-ink);
    flex: 1;
    min-width: 0;
    padding: 13px 10px;
}
.bsmc-adv-btn--ghost:hover { background: var(--adv-ink); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
.bsmc-adv-btn--white {
    background: #FFFFFF;
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
    padding: 15px 34px;
    font-size: 19px;
}
.bsmc-adv-btn--white:hover { background: var(--adv-accent); color: var(--adv-ink) !important; -webkit-text-fill-color: var(--adv-ink) !important; }
.bsmc-adv-btn--ghost-on-dark {
    background: transparent;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.5);
    padding: 15px 34px;
    font-size: 19px;
}
.bsmc-adv-btn--ghost-on-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: #FFFFFF; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
/* Solid-black on light background — used by the light-variant sell band
   as its single CTA. Same visual weight as --white on the dark band. */
.bsmc-adv-btn--black {
    background: var(--adv-ink);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: var(--adv-ink);
    padding: 15px 34px;
    font-size: 19px;
}
.bsmc-adv-btn--black:hover { background: var(--adv-accent); color: var(--adv-ink) !important; -webkit-text-fill-color: var(--adv-ink) !important; border-color: var(--adv-accent); }

/* ─── 1 · Hero ────────────────────────────────────────────────── */
.bsmc-adv-hero {
    position: relative;
    background: var(--adv-ink);
    color: #FFFFFF;
    min-height: min(86vh, 820px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.bsmc-adv-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Establishes the containment context for the @container rule
       below, which switches the iframe's cover axis. */
    container-type: size;
}
.bsmc-adv-hero__media video,
.bsmc-adv-hero__media img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.bsmc-adv-hero__media iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    /* The Stream player fits the video inside its iframe and pads the rest
       with hard black bars, so the iframe box itself must be exactly 16:9.
       Measured failure of the previous attempt: computed 412 x 511.578 —
       ratio 0.805, not 1.778. With width AND height auto and BOTH minimums
       at 100%, the box simply satisfies the two minimums and aspect-ratio
       yields; the box became the container and the player letterboxed
       inside it (412 x 231.75 of video, ~140px bars top and bottom).
       So: drive ONE axis off the container and let the ratio compute the
       other. Default case is a container taller than 16:9 (every phone):
       take the full height, let width overflow to h x 1.7778. NO min-width
       here — that is the declaration that killed the ratio. */
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    /* THE one that mattered. home-public.css carries
           body.bsmc-mhome img, body.bsmc-mhome video, body.bsmc-mhome iframe
           { max-width: 100%; }
       under the comment "Media must never exceed its container" — and these
       body tags include bsmc-mhome. A hero video is the one case where the
       media MUST exceed its container: covering means overflowing on one
       axis and clipping via the wrapper's overflow:hidden.
       That clamp silently capped every width this rule computed back to the
       container's own width, leaving a container-shaped box for the Stream
       player to letterbox inside. It defeated 100vw, min-width:177.78%,
       177.78vh and aspect-ratio identically — the width was never the
       problem, the ceiling on it was. Opt this element out explicitly. */
    max-width: none !important;
    max-height: none !important;
}

/* Wide containers (desktop, where the hero can be wider than 16:9) need the
   opposite axis driven, or the height-derived width stops covering. A
   container query rather than a media query: what matters is the shape of
   THIS box, not the viewport — the hero's height is content-driven and has
   no fixed relationship to screen height. */
@container (min-aspect-ratio: 16 / 9) {
    .bsmc-adv-hero__media iframe {
        width: 100%;
        height: auto;
    }
}

/* Hero kicker, matched to the LA / London clubhouse heroes — the same
   values as `html body.bsmc-cl-body .bsmc-cl-hero__inner .bsmc-cl-kicker`
   in clubhouse.css. Scoped to the hero so the trips / sell kickers further
   down the page keep the standard 12px treatment. */
html body.bsmc-adv-body .bsmc-adv-hero__inner .bsmc-adv-kicker {
    font-size: clamp(16px, 1.8vw, 22px);
    letter-spacing: 0.18em;
    margin-bottom: 24px;
}

.bsmc-adv-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Was a 180deg vertical gradient running 0.72 opaque at the top,
       clearing to 0.35 in the middle, then back to 0.94 at the bottom.
       On a tall mobile hero that paints a near-black band across the top
       and bottom with a clear window between them — which reads as "the
       video only covers a strip", even though the video fills the whole
       section. Matching home3's 105deg diagonal: it darkens the leading
       edge enough to hold the headline and body copy, but never gets near
       opaque, so the footage reads full-bleed. */
    background: linear-gradient(105deg, rgba(15, 14, 12, 0.9) 0%, rgba(15, 14, 12, 0.78) 45%, rgba(15, 14, 12, 0.35) 100%);
}
.bsmc-adv-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--adv-max);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 40px);
}
.bsmc-adv-hero__title {
    margin: 0 0 22px;
    font-size: clamp(52px, 9.5vw, 140px);
    line-height: 0.86;
    letter-spacing: 0.003em;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-adv-hero__intro {
    margin: 0 0 34px;
    max-width: 620px;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    text-wrap: pretty;
}
.bsmc-adv-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 767px) {
    .bsmc-adv-hero { min-height: 0; }
}

/* ─── 2 · Intro band ─────────────────────────────────────────── */
.bsmc-adv-intro {
    background: var(--adv-panel);
    border-bottom: 1px solid var(--adv-line);
}
.bsmc-adv-intro__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 40px);
    text-align: center;
}
.bsmc-adv-intro__headline {
    margin: 0 0 26px;
    font-size: clamp(28px, 4.4vw, 58px);
    line-height: 1.02;
}
.bsmc-adv-intro__body {
    margin: 0 auto 30px;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--adv-body);
    text-wrap: pretty;
}
.bsmc-adv-intro__rule {
    width: 56px;
    height: 1px;
    background: var(--adv-accent);
    margin: 0 auto;
}

/* ─── 3 · Trips grid ─────────────────────────────────────────── */
.bsmc-adv-trips {
    max-width: var(--adv-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 40px) clamp(24px, 3vw, 40px);
}
.bsmc-adv-trips__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}
.bsmc-adv-trips__note {
    margin: 0;
    max-width: 420px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--adv-body-muted);
    text-wrap: pretty;
}
.bsmc-adv-trips__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}
.bsmc-adv-trips__empty {
    margin: 40px 0 0;
    font-size: 18px;
    color: var(--adv-body-muted);
}
.bsmc-adv-trips__empty a { color: var(--adv-accent) !important; -webkit-text-fill-color: var(--adv-accent) !important; border-bottom: 1px solid var(--adv-accent); padding-bottom: 1px; margin-left: 4px; }

/* Trip card */
.bsmc-adv-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--adv-line);
    transition: border-color 0.15s ease;
}
.bsmc-adv-card:hover { border-color: rgba(161, 138, 85, 0.7); }
.bsmc-adv-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--adv-panel-2);
    display: block;
}
.bsmc-adv-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.bsmc-adv-card:hover .bsmc-adv-card__media img { transform: scale(1.03); }
.bsmc-adv-card__region {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--adv-ink);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-family: 'Bebas Neue', Impact, sans-serif !important;
    font-size: 13px;
    letter-spacing: 0.16em;
    padding: 6px 11px;
    line-height: 1.2;
    text-transform: uppercase;
}
.bsmc-adv-card__body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
    min-width: 0;
}
.bsmc-adv-card__title {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
    word-wrap: break-word;
}
.bsmc-adv-card__title a { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.bsmc-adv-card__title a:hover { color: var(--adv-accent) !important; -webkit-text-fill-color: var(--adv-accent) !important; }
/* Description under the trip title. Matches the calendar card style —
   black sentence case, not a gold caps chip — because event descriptions
   are typically a full sentence, not a short label. */
.bsmc-adv-card__subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
}
.bsmc-adv-card__facts {
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-top: 1px solid var(--adv-line-soft);
}
.bsmc-adv-card__facts li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--adv-body);
}
.bsmc-adv-card__facts li > span:first-child { color: var(--adv-accent); }
.bsmc-adv-card__facts--offer { color: var(--adv-ink) !important; font-weight: 600; }
.bsmc-adv-card__ctas {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    gap: 8px;
}

/* "How it works" section removed 2026-08 — kept the .bsmc-adv-how__ rules
   here commented out in case we want to restore later. Meta box fields
   (_bsmc_adv_how_*) still register + save so any admin-entered copy
   survives if the section comes back. */

/* ─── Membership sell ────────────────────────────────────────
   Original was dark bg + gold reasons + two CTAs. Simplified to a
   white variant with a single black CTA button per Aug-18 request:
   remove the visual noise, one clear "join" push.
   ------------------------------------------------------------ */
.bsmc-adv-sell {
    background: var(--adv-ink);
    color: #FFFFFF;
}
.bsmc-adv-sell__inner {
    max-width: var(--adv-max);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 40px);
}
.bsmc-adv-sell__intro {
    max-width: 760px;
    margin-bottom: clamp(36px, 4.5vw, 56px);
}
.bsmc-adv-sell__body {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
    text-wrap: pretty;
}
.bsmc-adv-sell__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(24px, 3vw, 40px);
}
.bsmc-adv-sell__reason {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 18px;
}
.bsmc-adv-sell__reason-title {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-adv-sell__reason-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    text-wrap: pretty;
}
.bsmc-adv-sell__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(36px, 4.5vw, 56px);
}

/* ─── 6 · Operators list ─────────────────────────────────────── */
.bsmc-adv-operators {
    max-width: var(--adv-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 40px);
}
.bsmc-adv-operators__inner { display: flex; flex-direction: column; gap: 22px; }
.bsmc-adv-operators__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}
.bsmc-adv-operators__link {
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: 0.04em;
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
    transition: color 0.15s ease;
}
a.bsmc-adv-operators__link:hover { color: var(--adv-accent) !important; -webkit-text-fill-color: var(--adv-accent) !important; }

/* ─── 7 · Talk-to-us band (before shared footer) ─────────────── */
.bsmc-adv-talk {
    background: var(--adv-ink);
    color: #FFFFFF;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.bsmc-adv-talk__inner {
    max-width: var(--adv-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
}
.bsmc-adv-talk__pitch {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.05;
    max-width: 22ch;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
/* Light-variant Talk-to-us — white bg, ink pitch text, black CTA. Same
   pattern as the (now-dropped) sell--light idea but here the section
   really does need to flip: it's the last thing above the shared
   footer and the user wants a bright CTA moment right before it. */
.bsmc-adv-talk--light {
    background: #FFFFFF !important;
    border-top: 1px solid var(--adv-line);
}
html body.bsmc-adv-body.bsmc-home3-body .bsmc-adv-talk--light .bsmc-adv-talk__pitch {
    color: var(--adv-ink) !important;
    -webkit-text-fill-color: var(--adv-ink) !important;
}