/* ═══ WEST COAST CLUB — 3D MEMBERSHIP CAROUSEL ══════════════════════════════
   Per-page stylesheet (site convention: about.css, contact.css…).
   Reviewed locally as west-coast-preview/membership-carousel/club-carousel.css
   in the MJUnlimited repo; this file ships that build verbatim.

   Layout contract:
   - Without JS, .club-carousel__stage is a plain responsive grid — the
     previous four-column tier layout, untouched.
   - The inline carousel script adds .is-3d to .club-carousel on init; every
     3D rule is scoped under it, so a script failure degrades to the grid.
   - The 3D transform lives on .club-carousel__item, never on .tier itself:
     app.js scroll-reveal animates .tier with its own transform and the two
     must not fight. */

/* ── No-JS / pre-init fallback: the flat grid ── */
.club-carousel__stage{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px; align-items:stretch;
}
.club-carousel__arr,
.club-carousel__dots{ display:none; }

@media (max-width:1080px){
  .club-carousel:not(.is-3d) .club-carousel__stage{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .club-carousel:not(.is-3d) .club-carousel__stage{ grid-template-columns:1fr; }
}

/* ── Rich-card additions (apply in both layouts) ── */
.tier__incl{ margin-top:4px; }
.tier__incl-label{
  display:block;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:14px; margin-bottom:10px;
  border-top:1px solid var(--line);
}
.tier__incl ul{ display:grid; gap:8px; padding:0; margin:0; }
.tier__incl li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:14.5px; color:var(--navy); line-height:1.45;
}
.tier__incl li svg{ flex:none; margin-top:2px; }
.tier .btn--block{ margin-top:16px; }

/* ── 3D carousel (JS-initialised only) ── */
.club-carousel.is-3d{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
}

.club-carousel.is-3d .club-carousel__stage{
  display:block;
  position:relative;
  perspective:1400px;
  /* height set by JS to the tallest card */
}

.club-carousel.is-3d .club-carousel__item{
  position:absolute; inset:0; margin:auto;
  width:min(430px,86%);
  height:max-content;
  transition:transform .55s cubic-bezier(.22,.8,.3,1), opacity .45s ease;
  will-change:transform;
}
.club-carousel.is-3d .tier{ width:100%; height:100%; }

/* Slots on the circular plane */
.club-carousel__item--front{
  transform:translateZ(0);
  opacity:1; z-index:3;
}
.club-carousel__item--front .tier{ box-shadow:var(--shadow-md); }

.club-carousel__item--left{
  transform:translateX(-55%) translateZ(-180px) rotateY(16deg) scale(.86);
  opacity:.55; z-index:2;
  cursor:pointer;
}
.club-carousel__item--right{
  transform:translateX(55%) translateZ(-180px) rotateY(-16deg) scale(.86);
  opacity:.55; z-index:2;
  cursor:pointer;
}
.club-carousel__item--back{
  transform:translateZ(-320px) scale(.7);
  opacity:0; z-index:1;
  pointer-events:none;
}

/* Flankers: whole card is a "bring me forward" target; inner links are
   inert via JS, so swallow their hover affordances */
.club-carousel__item--left .tier,
.club-carousel__item--right .tier{ pointer-events:none; }
.club-carousel__item--left,
.club-carousel__item--right{ pointer-events:auto; }

/* ── Arrows ── */
.club-carousel.is-3d .club-carousel__arr{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border:1px solid var(--line-2); border-radius:50%;
  background:var(--white); color:var(--navy);
  font-size:26px; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  z-index:4;
}
.club-carousel.is-3d .club-carousel__arr:hover{
  background:var(--orange); border-color:var(--orange); color:var(--white);
}
.club-carousel.is-3d .club-carousel__arr:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
}

/* ── Dots ── */
.club-carousel.is-3d .club-carousel__dots{
  grid-column:1 / -1;
  display:flex; justify-content:center; gap:9px;
  margin-top:22px;
}
.club-carousel__dot{
  width:10px; height:10px; padding:0;
  border:1px solid var(--line-2); border-radius:50%;
  background:var(--white); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.club-carousel__dot[aria-selected="true"]{
  background:var(--orange); border-color:var(--orange);
  transform:scale(1.25);
}
.club-carousel__dot:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
}

/* Screen-reader live region */
.club-carousel__live{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

/* ── Mobile: same carousel, tighter — flankers become edge slivers ── */
@media (max-width:620px){
  .club-carousel.is-3d{ grid-template-columns:minmax(0,1fr); }
  .club-carousel.is-3d .club-carousel__item{ width:88%; }
  .club-carousel__item--left{
    transform:translateX(-30%) translateZ(-240px) rotateY(18deg) scale(.8);
    opacity:.35;
  }
  .club-carousel__item--right{
    transform:translateX(30%) translateZ(-240px) rotateY(-18deg) scale(.8);
    opacity:.35;
  }
  /* Arrows overlay the stage edges instead of flanking it */
  .club-carousel.is-3d .club-carousel__arr{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; font-size:22px;
    box-shadow:var(--shadow-sm);
  }
  .club-carousel.is-3d .club-carousel__arr--left{ left:2px; }
  .club-carousel.is-3d .club-carousel__arr--right{ right:2px; }
}

/* ── Wide desktops: the carousel claims its own width ──
   Below 1440px nothing changes. From 1440px up the component breaks out of the
   1360px text column and sizes off the viewport, because the container is the
   binding limit at 1440 (1123px) and leaves ~185px of dead stage either side at
   1920. Card width and flanker spread grow together — the assembly is
   width x (translateX + scale/2) x 2, so both must move or the cards just drift
   apart inside the same footprint.

   The percentage in margin-inline resolves against .container at runtime, so
   this centres correctly wherever the component is nested; margin-inline is
   exactly 50% - width/2. Everything is scoped to .is-3d so the no-JS flat grid
   keeps the container's width and alignment.

   Measured: assembly 842px flat -> ~1157px at 1440, ~1339px at 1920. */
@media (min-width:1440px){
  .club-carousel.is-3d{
    width:min(92vw,1560px);
    margin-inline:calc(50% - min(46vw,780px));
  }
  .club-carousel.is-3d .club-carousel__item{
    width:min(clamp(430px,39vw,650px),86%);
  }
  .club-carousel.is-3d .club-carousel__item--left{
    transform:translateX(-60%) translateZ(-180px) rotateY(16deg) scale(.86);
  }
  .club-carousel.is-3d .club-carousel__item--right{
    transform:translateX(60%) translateZ(-180px) rotateY(-16deg) scale(.86);
  }
}

/* ── Reduced motion: slot swaps are instant ── */
@media (prefers-reduced-motion: reduce){
  .club-carousel.is-3d .club-carousel__item{ transition:none; }
  .club-carousel__dot{ transition:none; }
}

/* ═══ HERO BEAR CUTOUT ══════════════════════════════════════════════════════
   Scope contract: .i-hero lives in the shared inner.css and is used by every
   service, city, hub and legal page. Nothing here touches it. Every rule hangs
   off the .i-hero--bear modifier, which only this page carries.

   Two base behaviours have to be overridden for a cutout hero, and both are
   why About and Contact were given bespoke hero CSS instead of reusing .i-hero:
     - inner.css sets overflow:hidden, which would clip the bear's bleed
     - .i-hero has no z-index, so the section below would paint over him
   ──────────────────────────────────────────────────────────────────────── */

.i-hero--bear{
  overflow:hidden;
  z-index:2;
  padding-block:clamp(14px,1.6vw,22px);
}

.i-hero--bear .i-hero__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(28px,4vw,56px);
  align-items:end;
}
.i-hero--bear .i-hero__copy{ align-self:center; }
.i-hero--bear .i-hero__sub{ margin:0 0 24px; max-width:54ch; }

.i-hero--bear .i-hero__media{
  position:relative;
  display:flex; justify-content:center; align-items:flex-end;
}

/* The wrapper -- not the img -- is what the motion script transforms, so the
   sign lettering travels with the sign instead of sliding off it.
   margin-bottom is the bleed past the hero edge. transition + will-change are
   the contract the script writes against; .1s linear smooths a continuously
   updated transform without the lag an eased curve would add. */
.i-hero--bear .i-hero__bear{
  position:relative;
  display:inline-block;
  margin-bottom:-170px;
  transition:transform .1s linear;
  will-change:transform;
}
.i-hero--bear .i-hero__bear img{
  max-height:520px; width:auto; display:block;
  filter:drop-shadow(0 18px 34px rgba(17,19,51,.20));
}

/* Sign lettering: an SVG overlay sharing the artwork's 1024x1536 viewBox, so
   text is positioned in image coordinates and scales exactly with the bear at
   any size. Stays real text -- crisp at every scale, editable without
   regenerating artwork. The img alt carries the wording for assistive tech, so
   the overlay is decorative to avoid announcing it twice. */
.i-hero--bear .i-hero__sign{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.i-hero--bear .i-hero__sign text{
  font-family:'Barlow Condensed',var(--font-sans);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}
.i-hero--bear .i-hero__sign .sign__l1{ font-size:68px;  fill:var(--navy); }
.i-hero--bear .i-hero__sign .sign__l2{ font-size:100px; fill:var(--orange); }
.i-hero--bear .i-hero__sign .sign__l3{ font-size:68px;  fill:var(--navy); }

@media(max-width:980px){
  .i-hero--bear .i-hero__grid{ grid-template-columns:1fr; }
  .i-hero--bear .i-hero__media{ justify-content:flex-start; }
  .i-hero--bear .i-hero__bear{ margin-bottom:0; }
  .i-hero--bear .i-hero__bear img{ max-height:340px; }
}
@media(max-width:620px){
  .i-hero--bear .i-hero__media{ display:none; }
}

/* ── Hiller-format club sections (Mike feedback 10/15) ── */
.hh-page-air-conditioning .wcc-head{max-width:820px;margin:0 auto 40px;text-align:center}
.hh-page-air-conditioning .wcc-head .hh-lede{margin:16px auto 0}
.hh-page-air-conditioning .wcc-ticks{margin-top:24px;max-width:520px}
.hh-page-air-conditioning .wcc-ticks li{font-weight:700;color:var(--navy)}
.hh-page-air-conditioning .hh-perks.wcc-perks{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.hh-page-air-conditioning .hh-pcards.wcc-cards{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
@media (max-width:1100px){.hh-page-air-conditioning .hh-perks.wcc-perks,.hh-page-air-conditioning .hh-pcards.wcc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hh-page-air-conditioning .hh-perks.wcc-perks,.hh-page-air-conditioning .hh-pcards.wcc-cards{grid-template-columns:minmax(0,1fr)}}

/* one-plan card */
.hh-page-air-conditioning .wcc-plan{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:6px solid var(--red);border-radius:22px;padding:36px 40px;box-shadow:0 30px 60px -40px rgba(17,19,51,.45)}
.hh-page-air-conditioning .wcc-plan__top{text-align:center}
.hh-page-air-conditioning .wcc-plan__price{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-top:10px}
.hh-page-air-conditioning .wcc-plan__price b{font-size:64px;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--navy)}
.hh-page-air-conditioning .wcc-plan__price span{font-size:20px;font-weight:700;color:var(--navy)}
.hh-page-air-conditioning .wcc-plan__sub{margin-top:10px;color:var(--ink)}
.hh-page-air-conditioning .wcc-plan__list{margin-top:28px}
.hh-page-air-conditioning .wcc-plan .hh-btns{justify-content:center}
.hh-page-air-conditioning .wcc-plan__fine{margin-top:22px;font-size:14px;line-height:1.5;color:var(--ink);text-align:center}
@media (max-width:640px){.hh-page-air-conditioning .wcc-plan{padding:28px 20px}.hh-page-air-conditioning .wcc-plan .hh-btn{width:100%;justify-content:center}}
/* plan card spacing fix 10/16 */
.hh-page-air-conditioning .hh-ticks.wcc-plan__list{grid-template-columns:minmax(0,1fr);gap:14px;max-width:540px;margin:28px auto 0}
.hh-page-air-conditioning .hh-ticks.wcc-plan__list li{align-items:center}
.hh-page-air-conditioning .wcc-plan .hh-btns{margin-top:32px}
.hh-page-air-conditioning .hh-p.wcc-plan__fine{margin-top:28px;color:#000;font-weight:500}
/* 10/16: orange perk cards, navy pricing band */
.hh-page-air-conditioning .wcc-perks .hh-perk{background:var(--red);box-shadow:0 22px 44px -30px rgba(252,57,0,.7)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-badge{background:#fff;color:var(--red)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext b,.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext span{color:#fff}
.hh-page-air-conditioning .wcc-navy .wcc-head h2{color:#fff}
.hh-page-air-conditioning .wcc-navy .wcc-head .hh-lede{color:#fff}
.hh-page-air-conditioning .wcc-navy .wcc-plan{border-color:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext span{color:#000}
/* 10/16: navy perk cards */
.hh-page-air-conditioning .wcc-perks .hh-perk{background:#111333;box-shadow:0 22px 44px -30px rgba(17,19,51,.8)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-badge{background:var(--red);color:#fff}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext b{color:var(--red)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext span{color:#fff}
/* 10/16 call: perk cards white bg, navy description, orange title */
.hh-page-air-conditioning .wcc-perks .hh-perk{background:#fff;border:1px solid rgba(17,19,51,.12);box-shadow:0 22px 44px -32px rgba(17,19,51,.45)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-badge{background:var(--red);color:#fff}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext b{color:var(--red)}
.hh-page-air-conditioning .wcc-perks .hh-perk .hh-ptext span{color:#111333}