/* ==========================================================================
   Redesign kit (BC-1787, epic BC-1766): visual-first blocks.
   Chosen direction: 10 Day and Night + 01 Clubhouse + 08 By the Numbers.
   Rules from MQ review (2026-10-09):
     - white text on photos always sits on a bottom gradient + soft shadow
     - prices on photos are set large enough to read without squinting
   Components live in includes/components.php.
   ========================================================================== */
:root {
  --bc-beige: #F5F0EA;        /* Brand Style Guide v3 light surface */
  --bc-beige-line: #D9D0C7;
  --bcx-scrim: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.4) 58%, rgba(0,0,0,.88) 100%);
  --bcx-shadow: 0 1px 14px rgba(0,0,0,.45);
}

.bcx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.bcx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bcx-link { font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid var(--bc-copper); padding-bottom: 2px; }
.bcx-link:hover { color: var(--bc-copper); }
.bc-btn--dark { background: var(--bc-graphite); color: #fff; }
.bc-btn--dark:hover { background: #111; }

/* Price legibility */
.bcx-price {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
  color: var(--bc-gold); font-weight: 800; line-height: 1; letter-spacing: -.01em;
  font-size: clamp(26px, 2.3vw, 32px); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.bcx-price em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.bcx-price span { font-size: .55em; font-weight: 700; color: #fff; }

/* --------------------------------------------------------------------------
   Hero additions: display line, day/night switch, video
   -------------------------------------------------------------------------- */
.bc-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.88) 100%); }
.bc-hero h1, .bc-hero__sub, .bc-hero__display, .bc-hero__price { text-shadow: var(--bcx-shadow); }
.bc-hero--display .bc-hero__content { max-width: 920px; }
/* When a display line carries the visual weight, the H1 keeps the keywords and reads as the eyebrow. */
.bc-hero--display h1 {
  font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bc-gold); line-height: 1.4; margin: 0 0 12px; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.bc-hero__display {
  font-size: clamp(44px, 7vw, 108px); font-weight: 900; line-height: 1.02; letter-spacing: -.02em;
  color: #fff; margin: 0 0 18px; text-wrap: balance; min-height: 1.05em;
}
.bc-hero__display span { color: var(--bc-gold); }
.bc-hero__switch { display: inline-flex; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 5px; margin-bottom: 18px; }
.bc-hero__switch button { font: inherit; font-weight: 800; font-size: 13px; letter-spacing: .06em; border: 0; border-radius: 999px; padding: 9px 18px; color: #fff; background: transparent; cursor: pointer; font-variant-numeric: tabular-nums; }
.bc-hero__switch button[aria-pressed="true"] { background: #fff; color: var(--bc-graphite); }
.bc-hero__media .bc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s; }
.bc-hero__media img { transition: opacity .9s; }
.bc-hero.is-night .bc-hero__video { opacity: 1; }
.bc-hero.is-night .bc-hero__media img { opacity: 0; }
.bc-hero--display .bc-hero__price { font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; color: var(--bc-surface-2); }

/* --------------------------------------------------------------------------
   Header overlay variant (photo-hero pages): transparent at the top, solid once scrolled.
   -------------------------------------------------------------------------- */
.bc-header--overlay { position: absolute; top: auto; left: 0; right: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s, border-color .25s; }
.bc-header--overlay .bc-header__logo .bc-logo--light { display: block; }
.bc-header--overlay .bc-header__logo .bc-logo--dark { display: none; }
.bc-header--overlay .bc-nav a, .bc-header--overlay .bc-header__call { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.bc-header--overlay .bc-header__toggle span { background: #fff; }
.bc-header__logo .bc-logo--light { display: none; }
.bc-header--overlay.is-solid { position: fixed; top: 0; background: rgba(255,255,255,.96); border-bottom-color: var(--bc-line); animation: bcx-drop .25s ease-out; }
.bc-header--overlay.is-solid .bc-logo--light,
.bc-header--overlay:has(.bc-header__toggle[aria-expanded="true"]) .bc-logo--light { display: none; }
.bc-header--overlay.is-solid .bc-logo--dark,
.bc-header--overlay:has(.bc-header__toggle[aria-expanded="true"]) .bc-logo--dark { display: block; }
.bc-header--overlay.is-solid .bc-nav a, .bc-header--overlay.is-solid .bc-header__call,
.bc-header--overlay:has(.bc-header__toggle[aria-expanded="true"]) .bc-nav a { color: var(--bc-ink); text-shadow: none; }
.bc-header--overlay.is-solid .bc-header__toggle span,
.bc-header--overlay:has(.bc-header__toggle[aria-expanded="true"]) .bc-header__toggle span { background: var(--bc-ink); }
.bc-header--overlay:has(.bc-header__toggle[aria-expanded="true"]) { background: #fff; }
/* Nav labels never wrap; between tablet and small-desktop widths the header tightens instead. */
.bc-nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1140px) {
  .bc-nav ul { gap: 16px; }
  .bc-header__logo img { width: 170px; }
  .bc-header__inner { gap: 16px; }
}
@keyframes bcx-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */
.bcx-stats { background: var(--bc-graphite); color: #fff; }
.bcx-stats__in { max-width: var(--bc-max-chrome); margin: 0 auto; padding: 0 var(--bc-gutter); display: grid; grid-template-columns: repeat(4, 1fr); }
.bcx-stat { padding: 34px 26px; border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.bcx-stat:last-child { border-right: 0; }
.bcx-stat dd { margin: 0; font-size: clamp(36px, 4.4vw, 64px); font-weight: 900; line-height: 1; color: var(--bc-gold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bcx-stat dd small { font-size: .42em; letter-spacing: 0; }
.bcx-stat dt { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--bc-surface-2); }

/* --------------------------------------------------------------------------
   Photo tiles
   -------------------------------------------------------------------------- */
.bcx-tiles { display: grid; gap: 8px; padding: 8px; }
.bcx-tiles--mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: 330px 330px; }
.bcx-tiles--pair { grid-template-columns: 1fr 1fr; }
.bcx-tiles--pair .bcx-tile { height: min(64vh, 560px); }
.bcx-tile { position: relative; overflow: hidden; color: #fff; text-decoration: none; border-radius: 2px; background: #222; }
.bcx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.bcx-tile:hover img, .bcx-tile:focus-visible img { transform: scale(1.05); }
.bcx-tile::after { content: ""; position: absolute; inset: 0; background: var(--bcx-scrim); transition: opacity .3s; }
.bcx-tile__t { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: block; text-shadow: var(--bcx-shadow); }
.bcx-tile__t small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bc-gold); margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.bcx-tile__t strong { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.bcx-tile__t strong i { font-style: normal; font-size: .7em; opacity: .85; transition: transform .3s; }
.bcx-tile:hover .bcx-tile__t strong i { transform: translateX(4px); }
.bcx-tile__p { display: block; font-size: 14px; color: var(--bc-surface-2); margin-top: 8px; max-width: 36ch; line-height: 1.5; }
.bcx-tile--lg { grid-column: span 2; grid-row: span 2; }
.bcx-tile--wide { grid-column: span 2; }
.bcx-badge { position: absolute; z-index: 3; top: 16px; left: 16px; background: var(--bc-gold); color: var(--bc-graphite); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   Snippet, gallery, steps
   -------------------------------------------------------------------------- */
.bcx-snip { padding: clamp(64px, 9vw, 112px) var(--bc-gutter); text-align: center; }
.bcx-snip p { max-width: 31ch; margin: 0 auto; font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--bc-ink); }
.bcx-snip strong { color: var(--bc-copper); font-weight: 800; }

.bcx-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 210px; gap: 8px; padding: 0 8px; }
.bcx-gallery figure { margin: 0; position: relative; overflow: hidden; }
.bcx-gallery img { width: 100%; height: 100%; object-fit: cover; }
.bcx-gallery figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(42,42,42,.86); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 6px; opacity: 0; transition: opacity .3s; }
.bcx-gallery figure:hover figcaption { opacity: 1; }
.bcx-g1 { grid-column: span 4; grid-row: span 2; }
.bcx-g2 { grid-column: span 2; grid-row: span 2; }
.bcx-g3, .bcx-g4, .bcx-g5 { grid-column: span 2; grid-row: span 2; }

.bcx-steps__in { max-width: var(--bc-max); margin: 0 auto; padding: clamp(64px, 8vw, 96px) var(--bc-gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; list-style: none; }
.bcx-steps li { border-top: 3px solid var(--bc-graphite); padding-top: 18px; display: grid; gap: 6px; }
.bcx-steps__n { font-size: 12px; font-weight: 800; color: var(--bc-copper); letter-spacing: .16em; text-transform: uppercase; }
.bcx-steps strong { font-size: 20px; font-weight: 800; }
.bcx-steps li > span:last-child { color: var(--bc-body); font-size: 15px; }

/* --------------------------------------------------------------------------
   Photo band
   -------------------------------------------------------------------------- */
.bcx-band { position: relative; min-height: 440px; display: flex; align-items: center; color: #fff; overflow: hidden; background: #222; }
.bcx-band > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bcx-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,25,25,.92) 0%, rgba(25,25,25,.7) 45%, rgba(25,25,25,.35) 100%); }
.bcx-band__in { position: relative; z-index: 2; width: 100%; max-width: var(--bc-max-chrome); margin: 0 auto; padding: 64px var(--bc-gutter); }
.bcx-band .bcx-eyebrow { color: var(--bc-gold); }
.bcx-band h2 { font-size: clamp(32px, 4vw, 58px); font-weight: 900; line-height: 1.05; margin: 12px 0 14px; max-width: 16ch; text-wrap: balance; text-shadow: var(--bcx-shadow); }
.bcx-band p { font-size: 17px; color: var(--bc-surface-2); max-width: 46ch; margin-bottom: 24px; text-shadow: var(--bcx-shadow); }
.bcx-mail { display: inline-block; font-weight: 700; font-size: 17px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; user-select: all; word-break: break-all; }

/* --------------------------------------------------------------------------
   Good to know (crawlable long-form, collapsed)
   -------------------------------------------------------------------------- */
.bcx-more { background: var(--bc-beige); }
.bcx-more__in { max-width: 880px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--bc-gutter); }
.bcx-more h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 10px; }
.bcx-more__intro { color: var(--bc-body); margin-bottom: 24px; }
.bcx-more details { border-top: 1px solid var(--bc-beige-line); }
.bcx-more details:last-child { border-bottom: 1px solid var(--bc-beige-line); }
.bcx-more summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bcx-more summary::-webkit-details-marker { display: none; }
.bcx-more summary h3 { font-size: 18px; font-weight: 700; margin: 0; }
.bcx-more summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--bc-copper); font-weight: 600; flex-shrink: 0; }
.bcx-more details[open] summary::after { content: "\2212"; }
.bcx-more__body { padding: 0 0 22px; color: #555; max-width: 70ch; display: grid; gap: 12px; }
.bcx-more__body ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.bcx-more__body a { color: var(--bc-copper); font-weight: 600; }
.bcx-more__body strong { color: var(--bc-ink); }

/* --------------------------------------------------------------------------
   Closing CTA + map block
   -------------------------------------------------------------------------- */
.bcx-cta { background: var(--bc-beige); padding: clamp(64px, 8vw, 96px) var(--bc-gutter); text-align: center; }
.bcx-cta h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 12px; }
.bcx-cta p { color: var(--bc-body); font-weight: 600; margin-bottom: 26px; }
.bcx-cta .bcx-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .bcx-stats__in { grid-template-columns: 1fr 1fr; padding: 0; }
  .bcx-stat { padding: 24px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .bcx-stat:nth-child(2) { border-right: 0; }
  .bcx-tiles--mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 210px; }
  .bcx-tile--lg { grid-column: 1 / -1; grid-row: span 1; min-height: 300px; }
  .bcx-tile--wide { grid-column: 1 / -1; }
  .bcx-tiles--pair { grid-template-columns: 1fr; }
  .bcx-tiles--pair .bcx-tile { height: 52vh; min-height: 320px; }
  .bcx-tile__t { left: 16px; right: 16px; bottom: 16px; }
  .bcx-tiles--mosaic .bcx-tile:not(.bcx-tile--lg) .bcx-tile__p { display: none; }
  .bcx-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .bcx-g1 { grid-column: 1 / -1; }
  .bcx-g2, .bcx-g3, .bcx-g4, .bcx-g5 { grid-column: span 1; grid-row: span 1; }
  .bcx-steps__in { grid-template-columns: 1fr; gap: 22px; }
  .bcx-band::after { background: rgba(25,25,25,.78); }
  .bc-hero__switch { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bcx-tile img, .bc-hero__media img, .bc-hero__media .bc-hero__video { transition: none; }
}

/* Display hero under the overlay header: the photo runs behind the header, so the hero gains the
   header's height and the copy anchors to the bottom (as in the approved comp). B-9 still holds:
   on a 1366x768 laptop the CTAs land around y=600, inside the ~640px usable fold. */
.bc-hero--display { align-items: end; }
.bc-hero--display.bc-hero--full { min-height: clamp(560px, calc(100vh - 44px), 760px); }
.bc-hero--display .bc-hero__inner { max-width: var(--bc-max-chrome); padding-top: calc(var(--bc-header-h) + 24px); padding-bottom: clamp(36px, 6vw, 64px); }

/* site.css resets every classed list (ol[class] { margin: 0 }), which out-ranks a single class. */
.bcx-steps ol.bcx-steps__in { margin: 0 auto; padding: clamp(64px, 8vw, 96px) var(--bc-gutter); }
.bcx-stats dl.bcx-stats__in { margin: 0 auto; }

/* Phone mosaic: explicit tile heights instead of fixed rows, so the large tile never overflows into the next. */
@media (max-width: 860px) {
  .bcx-tiles--mosaic { grid-auto-rows: auto; }
  .bcx-tiles--mosaic .bcx-tile { height: 210px; min-height: 0; }
  .bcx-tiles--mosaic .bcx-tile--lg { grid-row: auto; height: 340px; }
}

/* Display hero copy runs from mid-photo down, so the scrim starts darkening earlier than on other heroes. */
.bc-hero--display::after { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 22%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.7) 65%, rgba(0,0,0,.9) 100%); }
@media (max-width: 860px) {
  .bc-hero--display::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.9) 100%); }
}

/* --------------------------------------------------------------------------
   Inner-page section, rate table, info pair, pass strip (Play & Pricing pattern)
   -------------------------------------------------------------------------- */
.bcx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bcx-sec { max-width: var(--bc-max); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--bc-gutter) 0; }
.bcx-sec > h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.bcx-sec > .bcx-lede { color: var(--bc-body); font-size: 17px; margin: 10px 0 26px; max-width: 60ch; }
.bcx-rates { overflow-x: auto; border: 1px solid var(--bc-line); border-radius: 12px; }
.bcx-rates table { width: 100%; min-width: 520px; font-variant-numeric: tabular-nums; }
.bcx-rates th, .bcx-rates td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--bc-line); }
.bcx-rates tbody tr:last-child > * { border-bottom: 0; }
.bcx-rates thead th { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bc-body); font-weight: 700; background: var(--bc-beige); }
.bcx-rates tbody th { font-size: 16px; font-weight: 600; color: var(--bc-ink); }
.bcx-rates td, .bcx-rates thead th:not(:first-child) { text-align: right; }
.bcx-rates td { font-size: 22px; font-weight: 800; color: var(--bc-ink); white-space: nowrap; }
.bcx-rates td span { font-size: 14px; font-weight: 600; color: var(--bc-body); }
.bcx-rates td.is-low { color: var(--bc-copper); }
.bcx-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; color: var(--bc-body); font-size: 15px; }
.bcx-notes li::before { content: "\2022"; color: var(--bc-copper); font-weight: 800; margin-right: 8px; }
.bcx-notes strong { color: var(--bc-ink); }
.bcx-pass { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--bc-graphite); color: #fff; border-radius: 12px; padding: 24px 28px; margin-top: 18px; }
.bcx-pass strong { font-size: 22px; font-weight: 800; }
.bcx-pass strong span { color: var(--bc-gold); }
.bcx-pass p { color: var(--bc-surface-2); font-size: 15px; margin-top: 4px; }
.bcx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.bcx-pair__c { background: var(--bc-beige); border-radius: 12px; padding: 22px 24px; }
.bcx-pair__c h3 { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bc-copper); margin-bottom: 8px; }
.bcx-pair__c p { color: #555; font-size: 15px; }
.bcx-pair__c strong { color: var(--bc-ink); }
.bc-hero--inner.bc-hero--display { min-height: clamp(460px, 64vh, 620px); }
@media (max-width: 860px) {
  .bcx-pair { grid-template-columns: 1fr; }
  .bcx-rates th, .bcx-rates td { padding: 14px 14px; }
  .bcx-rates td { font-size: 19px; }
}

/* Inner-page display hero: same structure as home, scaled for a shorter hero so the copy never
   rides up under the overlay header. */
.bc-hero--inner.bc-hero--display { min-height: clamp(540px, 74vh, 700px); }
.bc-hero--inner .bc-hero__display { font-size: clamp(38px, 5.4vw, 80px); margin-bottom: 14px; }
.bc-hero--inner .bc-hero__lead { max-width: 56ch; font-size: 16px; }
@media (max-width: 860px) {
  .bc-hero--inner.bc-hero--display { min-height: 0; }
  .bc-hero--inner .bc-hero__lead { font-size: 15px; }
  /* Rate table fits a phone instead of scrolling: labels wrap, numbers stay on one line. */
  .bcx-rates table { min-width: 0; }
  .bcx-rates tbody th { font-size: 14px; }
  .bcx-rates th, .bcx-rates td { padding: 12px 10px; }
  .bcx-rates td { font-size: 18px; }
  .bcx-rates thead th { font-size: 10px; letter-spacing: .12em; }
}

/* Memberships: shortest display hero, so the hero price row and the plans (analytics audit 2026-08-11) sit near the
   fold on a 1366x768 laptop even with the challenge strip and breadcrumbs below the hero. */
.bc-hero--mship.bc-hero--display { min-height: clamp(460px, 58vh, 520px); }
.bc-hero--mship .bc-hero__inner { padding-bottom: 36px; }

/* Hero price row ($hero_prices): name small, price big, hairline dividers, no boxes. */
.bc-hero__prices { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; }
.bc-hero__prices li { display: flex; }
.bc-hero__prices li + li { border-left: 1px solid rgba(255,255,255,.28); }
.bc-hero__prices a { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 4px 26px; color: #fff; text-decoration: none; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.bc-hero__prices li:first-child a { padding-left: 0; }
.bc-hero__prices a:hover .bc-hero__pamt { color: var(--bc-gold, #F5B323); }
.bc-hero__pname { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.bc-hero__pamt { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color .2s; }
.bc-hero__pamt small { font-size: .45em; font-weight: 500; opacity: .8; margin-left: 2px; }
.bc-hero__pnote { margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.78); }
@media (max-width: 560px) {
  .bc-hero__prices { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .bc-hero__prices a { padding: 2px 6px; }
  .bc-hero__pname { font-size: 9.5px; letter-spacing: .08em; }
  .bc-hero__pamt { font-size: 21px; }
  .bc-hero__pamt small { margin-left: 1px; }
}
.bcx-gap { height: clamp(40px, 6vw, 72px); }

/* In-page jumps (#event-inquiry, #pricing, #plans, #policies...) land below the solid header
   instead of under it. */
main [id] { scroll-margin-top: calc(var(--bc-header-h) + 12px); }
@media (max-width: 860px) { main [id] { scroll-margin-top: 80px; } }

/* --------------------------------------------------------------------------
   Photo cards, review quote, 4-step variant, ask box (First Visit, Lessons)
   -------------------------------------------------------------------------- */
.bcx-cards { max-width: var(--bc-max-chrome); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--bc-gutter) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bcx-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.bcx-card h3 { font-size: 20px; font-weight: 800; margin: 16px 0 6px; }
.bcx-card p { color: var(--bc-body); font-size: 15px; }
.bcx-quote { max-width: 860px; margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--bc-gutter); display: grid; grid-template-columns: auto 1fr; gap: 0 24px; }
.bcx-quote > span { font-size: 88px; line-height: .8; font-weight: 900; color: var(--bc-copper); grid-row: span 2; }
.bcx-quote blockquote { margin: 0; font-size: clamp(18px, 1.8vw, 23px); font-weight: 600; line-height: 1.45; color: var(--bc-ink); }
.bcx-quote figcaption { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--bc-body); }
.bcx-steps--4 ol.bcx-steps__in { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.bcx-steps__note { max-width: var(--bc-max); margin: -48px auto 0; padding: 0 var(--bc-gutter) clamp(48px, 6vw, 72px); color: var(--bc-body); font-size: 14px; }
.bcx-steps__note strong { color: var(--bc-ink); }
.bcx-ask { max-width: var(--bc-max); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--bc-gutter); display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.bcx-ask h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 12px; }
.bcx-ask > div > p { color: var(--bc-body); font-size: 17px; }
.bcx-ask__box { background: var(--bc-beige); border-radius: 12px; padding: 28px; }
.bcx-ask__box small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bc-copper); margin-bottom: 10px; }
.bcx-ask__box p.bcx-ask__mail { font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; user-select: all; word-break: break-all; margin-bottom: 18px; color: var(--bc-ink); }
@media (max-width: 860px) {
  .bcx-cards { grid-template-columns: 1fr; gap: 32px; }
  .bcx-steps--4 ol.bcx-steps__in { grid-template-columns: 1fr 1fr; }
  .bcx-steps__note { margin-top: -32px; }
  .bcx-ask { grid-template-columns: 1fr; gap: 24px; }
  .bcx-quote { grid-template-columns: 1fr; }
  .bcx-quote > span { grid-row: auto; font-size: 64px; }
}
@media (max-width: 520px) { .bcx-steps--4 ol.bcx-steps__in { grid-template-columns: 1fr; } }

/* Short display hero for pages whose first block must clear the fold (Memberships, Fall League). */
.bc-hero--short.bc-hero--display { min-height: clamp(460px, 58vh, 520px); }
.bc-hero--short .bc-hero__inner { padding-bottom: 36px; }

/* Slim display hero for reference pages (FAQ, Club Rules, Support): the content is the point. */
.bc-hero--slim.bc-hero--display { min-height: clamp(380px, 48vh, 460px); }
.bc-hero--slim .bc-hero__display { font-size: clamp(34px, 4.6vw, 64px); }
.bc-hero--slim .bc-hero__inner { padding-bottom: 32px; }
.bc-hero--xslim.bc-hero--display { min-height: clamp(340px, 40vh, 400px); }
@media (max-width: 860px) {
  .bc-hero--slim.bc-hero--display, .bc-hero--xslim.bc-hero--display { min-height: 0; }
  .bc-hero--slim .bc-hero__inner { padding-bottom: 24px; }
}

/* FAQ: the "This Week in Golf" signup panel sat flush against the question grid (MQ, 2026-10-09).
   Same 48px rhythm as the "Still have questions?" box below it. Scoped to .bc-faq; the Memberships
   panel gets its space from its own wrapper. */
.bc-faq .bc-ec--panel { margin-top: 48px; }

/* --------------------------------------------------------------------------
   Blog index (BC-1778): featured latest post + photo-card grid
   -------------------------------------------------------------------------- */
.bcx-blog { max-width: var(--bc-max-chrome); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--bc-gutter) clamp(56px, 7vw, 88px); }
.bcx-blog a { text-decoration: none; color: inherit; }
.bcx-blog__feature { position: relative; display: block; min-height: 440px; border-radius: 12px; overflow: hidden; color: #fff; background: #222; }
.bcx-blog__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.bcx-blog__feature:hover img { transform: scale(1.03); }
.bcx-blog__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%); }
.bcx-blog__feature-t { position: absolute; z-index: 2; left: clamp(20px, 4vw, 44px); right: clamp(20px, 4vw, 44px); bottom: clamp(20px, 4vw, 40px); display: grid; gap: 10px; text-shadow: var(--bcx-shadow); }
.bcx-blog__feature-t small { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bc-gold); }
.bcx-blog__feature-t h2 { color: #fff; font-size: clamp(28px, 3.6vw, 48px); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; margin: 0; }
.bcx-blog__feature .bcx-blog__dek { color: var(--bc-surface-2); max-width: 60ch; font-size: 16px; }
.bcx-blog__feature .bcx-blog__meta { color: var(--bc-surface-2); font-size: 13px; }
.bcx-blog__feature .bcx-blog__meta b { color: var(--bc-gold); }
.bcx-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin-top: 40px; }
.bcx-blog__card a { display: grid; gap: 10px; }
.bcx-blog__img { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: #222; }
.bcx-blog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bcx-blog__card a:hover .bcx-blog__img img { transform: scale(1.05); }
.bcx-blog__img small { position: absolute; left: 12px; top: 12px; background: rgba(42,42,42,.86); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
.bcx-blog__card h2 { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; margin: 6px 0 0; color: var(--bc-ink); text-wrap: balance; }
.bcx-blog__card a:hover h2 { color: var(--bc-copper); }
.bcx-blog__card .bcx-blog__dek { color: var(--bc-body); font-size: 14.5px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcx-blog__card .bcx-blog__meta { color: var(--bc-muted); font-size: 12.5px; margin: 0; }
@media (max-width: 960px) { .bcx-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .bcx-blog__grid { grid-template-columns: 1fr; gap: 32px; }
  .bcx-blog__feature { min-height: 420px; }
}

/* --------------------------------------------------------------------------
   Blog posts (all 22 at once, no markup change; new-post.py output unaffected)
   -------------------------------------------------------------------------- */
.bc-post__inner { max-width: 760px; }
.bc-post__head { padding: 34px 0 30px; border-bottom: 0; margin-bottom: 28px; position: relative; }
.bc-post__head::after { content: ""; display: block; width: 56px; height: 4px; background: var(--bc-copper); border-radius: 2px; margin-top: 26px; }
.bc-post__eyebrow { font-size: 12px; letter-spacing: .2em; }
.bc-post__head h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.article-body { font-size: 17.5px; line-height: 1.8; color: #333; }
.article-body h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin-top: 48px; }
.article-body h3 { font-size: 19px; }
.article-body figure img, .article-body > img { border-radius: 12px; }
.bc-post__cta { background: var(--bc-graphite); color: #fff; border: 0; border-radius: 14px; padding: clamp(28px, 4vw, 40px); margin-top: 56px; }
.bc-post__cta h2 { color: #fff; font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; }
.bc-post__cta p { color: var(--bc-surface-2); }
.bc-post__cta-actions .bc-btn[style] { background: transparent; border: 2px solid rgba(255,255,255,.5); }

/* 404 (BC-1779): every nav destination as a plain link row under the tiles. */
.bcx-404links { padding: 40px var(--bc-gutter) 72px; }
.bcx-404links ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--bc-max); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.bcx-404links a { font-size: 15px; font-weight: 700; color: var(--bc-ink); text-decoration: none; border-bottom: 2px solid var(--bc-copper); padding-bottom: 2px; }
.bcx-404links a:hover { color: var(--bc-copper); }

/* Pre-launch QA (BC-1781): the open phone menu is a fixed sheet starting at --bc-header-h, which assumes the
   header sits at the very top. On the home page the overlay header sits below the This Week bar (and on staging
   below the staging flag), so the sheet covered the close button. Pin the header to the top while the menu is open. */
@media (max-width: 860px) {
  body.bc-nav-open .bc-header { position: fixed; top: 0; left: 0; right: 0; z-index: 102; }
}

/* Home hero time switch (UX review 2026-10-12): pill + caption on one row under "Open 24/7." */
.bc-hero__when { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -4px 0 18px; }
.bc-hero__when .bc-hero__switch { margin-bottom: 0; }
.bc-hero__caption { margin: 0; color: #fff; font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); text-shadow: var(--bcx-shadow); }

/* Sitewide phone trim (MQ, 2026-10-16). The footer ran 2.7 phone screens on every page: links stacked one per
   line in single columns. Same links, same order, same NAP; the Explore and Read links sit two to a row.
   Contact stays full width so the email address never wraps. */
@media (max-width: 560px) {
  .bc-footer__inner { gap: 28px; }
  .bc-footer__inner > .bc-footer__col:nth-child(2) .bc-footer__links,
  .bc-footer__inner > .bc-footer__col:nth-child(3) .bc-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .bc-footer__inner > .bc-footer__col:nth-child(2) .bc-footer__links li + li,
  .bc-footer__inner > .bc-footer__col:nth-child(3) .bc-footer__links li + li { margin-top: 0; }
}

/* Blog index on phones (MQ, 2026-10-16): 21 full-width photo cards ran ~11 screens. Each card becomes a row:
   square thumbnail left, title and date right. The summary line stays in the HTML (and on desktop). */
@media (max-width: 600px) {
  .bcx-blog__grid { gap: 18px; margin-top: 28px; }
  .bcx-blog__card a { grid-template-columns: 104px 1fr; grid-template-rows: auto 1fr; gap: 4px 14px; align-items: start; }
  .bcx-blog__card .bcx-blog__img { grid-row: 1 / span 3; aspect-ratio: 1 / 1; border-radius: 8px; }
  .bcx-blog__card .bcx-blog__img small { display: none; }
  .bcx-blog__card h2 { font-size: 16px; margin: 0; }
  .bcx-blog__card .bcx-blog__dek { display: none; }
  .bcx-blog__feature { min-height: 360px; }
}