/* ==========================================================================
   Colorado Pickleball design system
   Dark theme derived from the Baseline app palette. Navy is used as a depth
   accent only. Purple is reserved exclusively for DUPR displays.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #0a0a0d;
  --surface: #18181d;
  --surface-raised: #202027;
  --border: #2b2b33;
  --border-strong: #3a3a45;

  /* Text */
  --ink: #f5f5f7;
  --ink-soft: #a6a6b0;
  --ink-faint: #75757f;

  /* Accents */
  --primary: #2f7cf6;
  /* Exact blue of the logo artwork, so the wordmark matches the mark. */
  --brand-blue: #2371eb;
  --primary-dark: #1e5fd6;
  --primary-light: #6ba3fa;
  --primary-tint: #142642;

  --navy: #1c3f73;
  --navy-light: #2a5aa0;

  /* DUPR: purple is used for nothing else */
  --dupr: #8b5cf6;
  --dupr-dark: #7c3aed;
  --dupr-tint: #241b42;

  /* Scale */
  --r-card: 12px;
  --r-control: 8px;
  --r-pill: 100px;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --maxw: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary-light);
  text-decoration: none;
}
a:hover {
  color: var(--primary);
}

:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 var(--r-control) 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 {
  font-size: clamp(34px, 5.5vw, 62px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(26px, 3.4vw, 40px);
}
h3 {
  font-size: clamp(19px, 2vw, 23px);
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: var(--sp-2);
}

.lede {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 62ch;
}

.muted {
  color: var(--ink-soft);
}
.faint {
  color: var(--ink-faint);
  font-size: 14px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 13, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-3);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* Stacked lockup, rebuilt from the supplied art: the mark is the art with its
   wordmark cropped off, and the wordmark below is live text so it sets in the
   site typeface. Every number here is measured off the original artwork —
   cap height 0.270 of the mark height, gap 0.164, text width 1.015 — so the
   reconstruction keeps the original proportions. */
.nav-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* 3.65px, not the artwork's 5.26px: with line-height 1 the text box already
     carries 1.6px of space above the cap line, and the gap that reads is the
     one between the mark and the caps. */
  gap: 3.65px;
  color: var(--ink);
}

.nav-logo .wordmark {
  /* Sized so the rendered cap height is the artwork's 0.270 of mark height. */
  font-size: 11.7px;
  font-weight: 700;
  line-height: 1;
  /* Solved so the set width matches the artwork's 1.015x mark width. */
  letter-spacing: 0.1034em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  /* Tracking is added after the last glyph too, which would throw the
     wordmark off centre beneath the mark. */
  margin-right: -0.1034em;
}
.nav-logo .pb {
  color: var(--brand-blue);
}
.nav-logo:hover {
  color: var(--ink);
}
/* Sized to clear the 64px nav row with air above and below. The art is
   supplied at 500px wide, so this stays sharp on a 2x display. */
.logo-mark {
  height: 32px;
  width: auto;
  flex: none;
  display: block;
}

.nav-links {
  display: flex;
  gap: var(--sp-3);
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.btn-sm {
  min-height: 38px;
  padding: 8px 18px;
  font-size: 13px;
}

.btn-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* ---------- Sections ---------- */

.section {
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--border);
}
.section:first-of-type {
  border-top: none;
}

.section-head {
  max-width: 68ch;
  margin-bottom: var(--sp-5);
}
.section-head h2 {
  margin-bottom: var(--sp-2);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-6);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 80% 60% at 20% 0%,
      var(--primary-tint) 0%,
      transparent 60%
    ),
    radial-gradient(ellipse 60% 50% at 90% 20%, var(--navy) 0%, transparent 65%);
  opacity: 0.75;
  pointer-events: none;
}

.hero > * {
  position: relative;
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: var(--sp-3);
}

.hero .lede {
  max-width: 54ch;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  /* Ends with the last stat label instead of spanning the whole column. */
  width: fit-content;
  max-width: 100%;
}

.hero-stat .n {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  line-height: 1.1;
}

.hero-stat .l {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* ---------- Cards ---------- */

.grid {
  display: grid;
  gap: var(--sp-2);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
/* Fits however many items it is given, down to one column on phones. */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.card h3,
.card .card-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.card .card-time {
  font-size: 14px;
  color: var(--primary-light);
  font-weight: 500;
}

.card .card-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.card-link {
  transition: border-color 0.15s, background 0.15s;
}
.card-link:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

/* Tag / badge */

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--ink-soft);
  white-space: nowrap;
}

.tag-free {
  background: var(--primary-tint);
  border-color: var(--primary-dark);
  color: var(--primary-light);
}

.tag-dupr {
  background: var(--dupr-tint);
  border-color: var(--dupr-dark);
  color: var(--dupr);
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Cards are flex columns, so a bare tag would stretch to full width. */
.card > .tag,
.spotlight-card > .tag {
  align-self: flex-start;
}

/* ---------- Schedule table ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

th,
td {
  text-align: left;
  padding: 14px var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: top;
}

th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-raised);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

td.prog-name {
  font-weight: 600;
  color: var(--ink);
}

td.prog-time {
  color: var(--primary-light);
  white-space: nowrap;
}

/* ---------- Pathway ---------- */

.pathway {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  counter-reset: step;
}

.path-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  position: relative;
}

.path-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-tint);
  border: 1px solid var(--primary-dark);
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}

.path-step h3 {
  margin-bottom: 4px;
}

.path-meta {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.path-detail {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.path-detail strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

/* ---------- Beginner spotlight ---------- */

.spotlight {
  background: linear-gradient(
    135deg,
    var(--primary-tint) 0%,
    var(--surface) 55%
  );
  border: 1px solid var(--primary-dark);
  border-radius: var(--r-card);
  padding: var(--sp-5);
}

.spotlight h2 {
  margin-bottom: var(--sp-2);
}

.spotlight .lede {
  color: var(--ink-soft);
}

.check-list,
.x-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.check-list li,
.x-list li {
  font-size: 0.9rem;
  padding-left: 1.4em;
  position: relative;
  color: var(--ink);
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.x-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

.promo-details {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}

@media (max-width: 600px) {
  .promo-details {
    grid-template-columns: 1fr !important;
  }
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.spotlight-card {
  background: rgba(10, 10, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: var(--sp-3);
}

.spotlight-card .card-title {
  display: block;
  margin-bottom: 6px;
}

/* Sizes itself to however many deals are running this month. */
.deal-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.deal-amount {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--primary-light);
  margin-bottom: 4px;
}

/* ---------- Membership ---------- */

.price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.price-big {
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.price-period {
  font-size: 17px;
  color: var(--ink-faint);
}

.value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.value-row:last-child {
  border-bottom: none;
}

.value-row .v-name {
  font-weight: 600;
  font-size: 15px;
}
.value-row .v-detail {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.value-row .v-amt {
  font-weight: 700;
  color: var(--primary-light);
  white-space: nowrap;
  font-size: 16px;
}

td.compare-here {
  color: var(--ink);
  font-weight: 500;
}
td.compare-else {
  color: var(--ink-faint);
}

/* ---------- Coaches ---------- */

.coach-photo {
  width: 100%;
  /* height:auto is required, otherwise the img height attribute wins and
     aspect-ratio is ignored, leaving the portrait uncropped. */
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-control);
  object-fit: cover;
  object-position: center 20%;
  background: var(--surface-raised);
  margin-bottom: 4px;
}

.photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-control);
  background: var(--surface-raised);
  border: 1px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
  padding: var(--sp-2);
  margin-bottom: 4px;
}

.photo-placeholder-wide {
  aspect-ratio: 16 / 10;
}

.coach-title {
  font-size: 13px;
  color: var(--primary-light);
  font-weight: 500;
}

.coach-bio {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Mixed card heights in one grid: without this, short name cards stretch to
   match a tall profile card next to them and read as empty boxes. */
.grid-top {
  align-items: start;
}

/* Small uppercase label above a group inside a card (Focus, Certifications,
   Private instruction). Was repeated as an inline style on every occurrence. */
.card-label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

/* Coaches without a headshot or bio yet get a dense name card rather than an
   empty photo box, so the section reads as deliberate instead of unfinished. */
.coach-compact {
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  justify-content: center;
}

.cert-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ---------- Updates ---------- */

.update-item {
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.update-item:last-child {
  border-bottom: none;
}

.update-date {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.update-item h3 a,
.update-item h3 {
  color: var(--ink);
}
.update-item h3 a:hover {
  color: var(--primary-light);
}

.update-excerpt {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 70ch;
}

.prose {
  max-width: 68ch;
}
.prose p,
.prose ul,
.prose ol {
  margin-bottom: var(--sp-2);
  color: var(--ink-soft);
}
.prose ul,
.prose ol {
  padding-left: var(--sp-3);
}
.prose li {
  margin-bottom: 6px;
}
.prose h2,
.prose h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--ink);
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Empty state ---------- */

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  text-align: center;
  color: var(--ink-faint);
  background: var(--surface);
}

/* ---------- Placeholder notice ---------- */

.notice {
  border: 1px dashed var(--primary-dark);
  background: var(--primary-tint);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  font-size: 14px;
  color: var(--ink-soft);
}
.notice strong {
  color: var(--primary-light);
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Amenities ---------- */

.amenity {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 14px var(--sp-2);
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}

.amenity svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--primary-tint) 100%);
  border: 1px solid var(--navy-light);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  text-align: center;
}

.cta-band h2 {
  margin-bottom: var(--sp-2);
}

.cta-band .lede {
  margin: 0 auto;
}

.cta-band .btn-row {
  justify-content: center;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-6) 0 var(--sp-4);
  margin-top: var(--sp-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 2.2fr 1fr;
  gap: var(--sp-5);
}

/* Footer link groups mirror the four top-nav groupings. */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) {
  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .footer-nav {
    grid-template-columns: 1fr;
  }
}

.footer h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}

.footer-links {
  list-style: none;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  font-size: 14px;
  color: var(--ink-soft);
}
.footer-links a:hover {
  color: var(--ink);
}

.footer-disclaimer {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.6;
  max-width: 44ch;
  margin-top: 12px;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.social {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.social a:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .spotlight-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .section {
    padding: var(--sp-6) 0;
  }
  .hero {
    padding: var(--sp-5) 0 var(--sp-5);
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-1) var(--sp-3) var(--sp-3);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    border-bottom: 1px solid var(--border);
  }
  .nav-links li:last-child {
    border-bottom: none;
  }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 15px;
  }
  .nav-toggle {
    display: block;
  }
  .nav .btn {
    display: none;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .path-step {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .spotlight {
    padding: var(--sp-3);
  }
  .cta-band {
    padding: var(--sp-4) var(--sp-3);
  }

  .hero-stats {
    gap: var(--sp-3);
  }
  .hero-stat {
    min-width: 40%;
  }

  .value-row {
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* Per-membership benefit lists on the memberships page. */
.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
}
.benefit-list li {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.card-featured {
  border: 2px solid var(--primary);
  background: var(--primary-tint);
}

/* ---------- Hero background video ---------- */
/* Only applies when src/assets/img/video/hero.mp4 exists; otherwise the hero
   keeps its gradient. The scrim keeps headline and CTA contrast readable over
   whatever the footage is doing underneath. */

.hero-video {
  isolation: isolate;
}
.hero-video::before {
  opacity: 0.22; /* let the footage carry the hero, keep a hint of the gradient */
}

.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-media {
  overflow: hidden;
  z-index: -2;
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two clips are stacked and cross-faded to avoid the seek-back hitch. Only the
   active one is visible; without the script the first stays at opacity 1. */
.hero-media .hero-clip {
  opacity: 0;
  transition: opacity 450ms linear;
}
.hero-media .hero-clip.is-active {
  opacity: 1;
}

.hero-scrim {
  z-index: -1;
  /* Two gradients stack multiplicatively, so these read far darker than the
     numbers suggest. Tuned so the footage stays visible while the headline
     keeps well clear of the WCAG AA contrast floor. */
  background: linear-gradient(
      90deg,
      rgba(10, 10, 13, 0.86) 0%,
      rgba(10, 10, 13, 0.78) 30%,
      rgba(10, 10, 13, 0.5) 62%,
      rgba(10, 10, 13, 0.26) 100%
    ),
    linear-gradient(180deg, rgba(10, 10, 13, 0.28) 0%, rgba(10, 10, 13, 0.45) 100%);
}

@media (max-width: 720px) {
  /* Portrait viewports crop the footage hard and the text needs more cover. */
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 13, 0.68) 0%,
      rgba(10, 10, 13, 0.78) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video {
    display: none;
  }
}

/* Over video the hero stat labels sit on a lighter, busier background than the
   flat gradient they were tuned for, so --ink-faint drops under the 4.5:1 AA
   floor. Lift them to --ink-soft only in the video case. */
.hero-video .hero-stat .l {
  color: var(--ink-soft);
}

/* ---------- Nav dropdowns ---------- */

.nav-item {
  position: relative;
}

.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.nav-parent:hover,
.nav-parent[aria-expanded="true"],
.nav-parent[data-current="true"] {
  color: var(--ink);
}

.nav-caret {
  width: 9px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.nav-parent[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

.nav-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: 8px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 120;
}

/* A hover-bridge so the pointer can cross the gap without the menu closing. */
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-control);
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* Age ranges sit alongside the label so people can self-select from the menu
   without loading a page. Seniors overlaps adults on purpose. */
.nav-hint {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
  margin-left: 6px;
}
.nav-menu a:hover .nav-hint,
.nav-menu a[aria-current="page"] .nav-hint {
  color: var(--ink-soft);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  background: var(--surface-raised);
  color: var(--ink);
}

@media (min-width: 721px) {
  .nav-item.has-menu:hover .nav-menu,
  .nav-item.has-menu:focus-within .nav-menu,
  .nav-parent[aria-expanded="true"] + .nav-menu {
    display: block;
  }
}

@media (max-width: 720px) {
  /* Inside the hamburger the submenus read as an accordion, not a popover. */
  .nav-item.has-menu::after {
    display: none;
  }
  .nav-parent {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 15px;
    min-height: 44px;
  }
  .nav-menu {
    position: static;
    transform: none;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 12px;
  }
  .nav-parent[aria-expanded="true"] + .nav-menu {
    display: block;
  }
  .nav-menu a {
    padding: 11px 0;
  }
}

/* ---------- Weekly schedule grid ---------- */

.week-grid {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  align-items: start;
}

.day-card {
  gap: var(--sp-2);
}

.day-name {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-light);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.session-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.session-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.session-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-light);
}

.session-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.session-list .tag {
  margin-top: 2px;
  font-size: 10.5px;
  padding: 3px 8px;
}