/* =========================================================
   THE ORCHARD - CLUBHOUSE PAGE
   Scroll-scrubbed "walk-in" video hero + options grid
   Inherits tokens from styles.css
   ========================================================= */

.clubhouse-page { background: var(--pine-deep); }
.clubhouse-page .site-header { z-index: 50; }

/* ---------- WALK-IN: scroll-scrubbed video hero ---------- */
.walkin { position: relative; background: #0c120e; }
.walkin-track { position: relative; height: 360vh; }

.walkin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.walkin-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c120e;
}

.walkin-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 92% at 50% 16%, rgba(12,18,14,0) 36%, rgba(12,18,14,.74) 100%),
    linear-gradient(180deg, rgba(12,18,14,.56) 0%, rgba(12,18,14,.10) 32%, rgba(12,18,14,.58) 100%);
}

.walkin-intro {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--bone);
  padding-inline: var(--gutter);
  max-width: 54rem;
  will-change: opacity, transform;
}
.walkin-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 8.4vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 44px rgba(0,0,0,.46);
}
.walkin-sub {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  color: rgba(246,241,231,.86);
  letter-spacing: .01em;
}

.walkin-arrival {
  position: absolute;
  z-index: 2;
  text-align: center;
  color: var(--bone);
  padding-inline: var(--gutter);
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.walkin-arrival-line {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 4.6vw, 3.3rem);
  margin-top: .4rem;
  text-shadow: 0 2px 44px rgba(0,0,0,.5);
}

.walkin-cue {
  position: absolute;
  z-index: 3;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--bone);
  font-family: var(--ff-sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.walkin-cue-dot { animation: cueDot 1.8s var(--ease) infinite; }
@keyframes cueDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(5px); opacity: .35; }
}

/* ---------- CLUBHOUSE OPTIONS GRID ---------- */
.clubgrid {
  position: relative;
  z-index: 2;
  background: var(--pine);
  color: var(--bone);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.clubgrid-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2.6rem, 5vw, 4rem);
}
.clubgrid-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.clubgrid-lede {
  margin-top: 1.1rem;
  color: var(--muted-light);
  font-size: 1.08rem;
}

.club-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
.club-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 13.5rem;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  background: rgba(246,241,231,.04);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  transition: transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.club-card:hover {
  transform: translateY(-6px);
  background: rgba(246,241,231,.08);
  border-color: var(--brass);
}
.club-card-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
  color: var(--brass-light);
  border: 1px solid var(--line-light);
  border-radius: 50%;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.club-card:hover .club-card-icon { color: var(--brass); border-color: var(--brass); }
.club-card-icon svg { width: 22px; height: 22px; }
.club-card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.club-card p {
  flex: 1;
  color: var(--muted-light);
  font-size: .98rem;
  line-height: 1.55;
}
.club-card-go {
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-light);
  display: inline-flex;
  gap: .4rem;
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.club-card:hover .club-card-go { gap: .72rem; color: var(--brass); }

.clubgrid-note {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--muted-light);
}
.clubgrid-note a {
  color: var(--brass-light);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.clubgrid-note a:hover { border-color: var(--brass-light); }

/* ---------- REVEAL (pop-up) ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-up.is-in { opacity: 1; transform: none; }
.club-cards .club-card:nth-child(1) { transition-delay: .00s; }
.club-cards .club-card:nth-child(2) { transition-delay: .07s; }
.club-cards .club-card:nth-child(3) { transition-delay: .14s; }
.club-cards .club-card:nth-child(4) { transition-delay: .07s; }
.club-cards .club-card:nth-child(5) { transition-delay: .14s; }
.club-cards .club-card:nth-child(6) { transition-delay: .21s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .club-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .club-cards { grid-template-columns: 1fr; }
  .walkin-track { height: 300vh; }
  .club-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .walkin-cue-dot { animation: none; }
  .walkin-intro { opacity: 1 !important; transform: none !important; }
}