/* MEMBERSHIP PAGE — page-specific styles.
   Shared nav, buttons, and .tiers/.tier-card pricing component live in base.css.
   (This file previously contained its entire contents pasted twice, plus a
   second copy of the global reset/nav/hero already defined in base.css —
   both have been removed.) */

/* ───────── HERO ───────── */
.hero {
  background: var(--lilac); 
  padding: 80px 48px 100px; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 64px; 
  align-items: center; 
}
.hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(var(--plum-rgb), 0.8); margin-bottom: 16px; }
.hero-headline { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.95; color: var(--plum); text-transform: uppercase; margin-bottom: 24px; }
.hero-headline H2 { color: var(--plum); }
.hero-headline span { color: var(--matcha); }
.hero-body { font-size: 17px; line-height: 1.6; color: rgba(var(--cream-rgb), 0.62); max-width: 420px; margin-bottom: 36px; }
.hero-card { background: var(--matcha); border-radius: 16px; padding: 40px; }
.hero-card h2 { font-family: var(--font-display); font-weight: 900; font-size: 32px; color: var(--text); text-transform: uppercase; margin-bottom: 24px; }
.why-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; color: var(--text); font-weight: 500; line-height: 1.4; }
.why-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); flex-shrink: 0; margin-top: 5px; }
.price-pill { background: var(--plum); border-radius: 8px; padding: 16px 20px; margin-top: 28px; font-size: 14px; font-weight: 600; color: var(--cream); }
.hero-btn { display: block; margin-top: 16px; width: 100%; background: var(--plum-deep); color: var(--cream); text-align: center; padding: 16px; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer; border: none; }



#image-slider {
  width: 50%;
  height: 100%;

  margin-left: 0;

  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.splide,
.splide__track,
.splide__list,
.splide__slide {
  height: 100%;
  display: flex;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero-split {
  display: flex;
  width: 100%;
  height: 100vh;
  background:var(--cream);
}

#slider-text {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vw;
  background: var(--warm-white);;
  z-index: 2;
}

#slider-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
  text-align: center;
}

#slider-text p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-dark);
  max-width: 700px;
  margin: 0 auto;
}


.splide__slide {
  height: 100%;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {

  .hero-split {
    flex-direction: column;
    height: auto;
  }

  #slider-text,
  #image-slider {
    width: 100%;
  }

  #image-slider {
    height: 60vh;
  }

  #slider-text {
    padding: 60px 8%;
  }
}


/* ───────── CLUBHOUSE HOURS STRIP ───────── */
.hours-strip { background: var(--lilac); padding: 18px 48px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text); flex-wrap: wrap; text-align: center; }
.hours-strip span { opacity: 0.4; }

/* ───────── SHARED SECTION HEADINGS ───────── */
.section-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum); margin-bottom: 12px; }
.section-title { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 0.95; text-transform: uppercase; color: var(--plum); margin-bottom: 56px; }

/* ───────── HOW IT WORKS (4 steps) ───────── */
.how { 
  background: var(--cream); 
  padding: 96px 48px; 
  text-align: center; 
}
.steps { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 24px; 
  max-width: 900px; 
  margin: 0 auto; 
}

.step-num { 
  font-family: var(--font-display); 
  font-weight: 900; 
  font-size: 64px; 
  color: var(--matcha); 
  line-height: 1; 
  margin-bottom: 8px; 
  -webkit-text-stroke: 2px var(--plum); 
}
.step-title { 
  font-family: var(--font-display); 
  font-weight: 800; 
  font-size: 18px; 
  text-transform: uppercase; 
  color: var(--text); 
  margin-bottom: 8px; 
  line-height: 1.1; 
}
.step-body { 
  font-size: 13px; 
  color: var(--plum-mid); 
  line-height: 1.5; 
}

/* ───────── COMPARE: TICKET VS MEMBERSHIP ───────── */
.compare { background: var(--cream); padding: 96px 48px; text-align: center; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; margin: 0 auto; text-align: left; }
.compare-card { background: white; border-radius: 12px; padding: 32px; }
.compare-card.highlight { background: var(--lilac); }
.compare-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-transform: uppercase; margin-bottom: 20px; color: var(--text); }
.compare-item { display: flex; gap: 10px; font-size: 14px; color: var(--text); margin-bottom: 12px; line-height: 1.4; }
.compare-item::before { content: '•'; font-weight: 700; flex-shrink: 0; color: var(--plum); }
.compare-intro { margin-bottom: 48px; font-size: 16px; color: var(--plum-mid); max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.6; }


/* ───────── CLUBHOUSE HOURS ───────── */
.hours-section { background: var(--plum-deep); padding: 80px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hours-left h2 { font-family: var(--font-display); font-weight: 900; font-size: 56px; color: var(--cream); text-transform: uppercase; line-height: 0.95; margin-bottom: 20px; }
.hours-left h2 span { color: var(--lilac); }
.hours-left p { font-size: 16px; color: rgba(var(--cream-rgb), 0.55); line-height: 1.6; max-width: 360px; }
.hours-right { display: flex; flex-direction: column; gap: 12px; }
.hours-row { background: var(--plum-mid); border-radius: 10px; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; }
.hours-day { font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--cream); }
.hours-time { font-size: 14px; font-weight: 600; color: var(--lilac); }
.hours-row.er { background: rgba(186, 215, 151, 0.1); }
.hours-row.er .hours-day { color: var(--lilac); }
.hours-row.er .hours-time { color: rgba(var(--cream-rgb), 0.5); font-size: 12px; }

/* ───────── FINAL CTA ───────── */
.cta-section { background: var(--matcha); padding: 96px 48px; text-align: center; }
.cta-section h2 { font-family: var(--font-display); font-weight: 900; font-size: 64px; text-transform: uppercase; color: var(--text); line-height: 0.95; margin-bottom: 24px; }
.cta-section p { font-size: 17px; color: rgba(var(--text-rgb), 0.62); margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary { background: var(--plum); color: var(--cream); padding: 16px 36px; border-radius: 6px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn-secondary { background: transparent; color: var(--plum); padding: 16px 36px; border-radius: 6px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; border: 2px solid var(--plum); }

/* ───────── RESPONSIVE ───────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 56px 24px 72px; }
  .steps, .points-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-grid { grid-template-columns: 1fr; }
  .hours-section { grid-template-columns: 1fr; padding: 56px 24px; }
}

@media (max-width: 600px) {
  .hero-headline { font-size: 44px; }
  .section-title { font-size: 40px; }
  .steps, .points-grid { grid-template-columns: 1fr; }
  .cta-section h2 { font-size: 44px; }
}