/* Shared visual system for location landing pages. */

body.local-page {
  background: var(--site-bg, #000) !important;
  color: var(--site-text, #f9fbff) !important;
  font-family: var(--site-font-body, 'Open Sans', Arial, sans-serif) !important;
}

body.local-page main,
body.local-page section {
  box-sizing: border-box;
}

body.local-page .container {
  width: min(100%, 1100px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(18px, 4vw, 28px) !important;
}

/* Compact first viewport, matching the site's banner-led program pages. */
body.local-page .hero {
  align-items: center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 87, 220, 0.36), transparent 58%),
    linear-gradient(180deg, var(--site-surface, #083080) 0%, var(--site-surface-deep, #041951) 100%) !important;
  border: 2px solid var(--site-border, #fee500) !important;
  border-radius: 12px !important;
  box-shadow: var(--site-card-shadow, 0 8px 22px rgba(0, 21, 84, 0.48)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: clamp(76px, 8vw, 96px) auto clamp(28px, 4vw, 44px) !important;
  min-height: 0 !important;
  padding: clamp(38px, 6vw, 66px) clamp(20px, 5vw, 54px) !important;
  width: min(1200px, calc(100% - clamp(20px, 4vw, 40px))) !important;
}

body.local-page .distance-badge,
body.local-page .home-badge {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--site-yellow, #fee500) !important;
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

body.local-page .hero h1 {
  color: var(--site-text, #f9fbff) !important;
  font-family: var(--site-font-heading, 'Open Sans', Arial, sans-serif) !important;
  font-size: clamp(2rem, 5vw, 3.6rem) !important;
  letter-spacing: var(--site-heading-letter-spacing, 0.02em) !important;
  line-height: 1.08 !important;
  margin: 0 auto 16px !important;
  max-width: 900px !important;
  text-wrap: balance;
}

body.local-page .hero h1 span {
  color: var(--site-yellow, #fee500) !important;
}

body.local-page .hero .subtitle {
  color: var(--site-text-soft, #dce6ff) !important;
  font-size: clamp(1rem, 1.8vw, 1.16rem) !important;
  line-height: 1.65 !important;
  margin: 0 auto 24px !important;
  max-width: 780px !important;
}

body.local-page .hero .phone {
  color: var(--site-text-soft, #dce6ff) !important;
  font-size: 0.95rem !important;
  margin: 14px 0 0 !important;
}

body.local-page .hero .phone a,
body.local-page main a,
body.local-page .cta-section a:not(.cta-btn) {
  color: var(--site-yellow, #fee500) !important;
}

/* Section rhythm follows the homepage's dark and blue content bands. */
body.local-page .section {
  background: var(--site-bg-section, #0a0a0a) !important;
  padding: clamp(48px, 7vw, 76px) 0 !important;
}

body.local-page .section-dark {
  background: var(--site-bg-alt, #041638) !important;
}

body.local-page .section-title,
body.local-page .cta-section h2,
body.local-page .local-content h2,
body.local-page .local-content h3 {
  color: var(--site-text, #f9fbff) !important;
  font-family: var(--site-font-heading, 'Open Sans', Arial, sans-serif) !important;
  letter-spacing: var(--site-heading-letter-spacing, 0.02em) !important;
}

body.local-page .section-title {
  font-size: clamp(1.65rem, 3.6vw, 2.35rem) !important;
  line-height: 1.2 !important;
  margin: 0 auto 14px !important;
  max-width: 820px !important;
  text-wrap: balance;
}

body.local-page .section-subtitle {
  color: var(--site-text-soft, #dce6ff) !important;
  font-size: clamp(1rem, 1.5vw, 1.08rem) !important;
  line-height: 1.7 !important;
  margin: 0 auto clamp(26px, 4vw, 40px) !important;
  max-width: 760px !important;
}

body.local-page .classes-grid,
body.local-page .benefits-grid,
body.local-page .instructor-grid {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(16px, 2.4vw, 24px) !important;
  margin-inline: auto !important;
}

body.local-page .classes-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1040px !important;
}

body.local-page .benefits-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1040px !important;
}

body.local-page .instructor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 920px !important;
}

body.local-page .class-card,
body.local-page .benefit-item,
body.local-page .instructor-card,
body.local-page .location-box {
  background: linear-gradient(180deg, var(--site-surface, #083080) 0%, var(--site-surface-deep, #041951) 100%) !important;
  border: 1px solid var(--site-border, #fee500) !important;
  border-radius: 8px !important;
  box-shadow: var(--site-card-shadow, 0 8px 22px rgba(0, 21, 84, 0.48)) !important;
  padding: clamp(22px, 3vw, 30px) !important;
  text-align: left !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.local-page .class-card:hover,
body.local-page .benefit-item:hover,
body.local-page .instructor-card:hover {
  border-color: var(--site-hover, #fee500) !important;
  box-shadow: var(--site-card-shadow-hover, 0 10px 24px rgba(254, 229, 0, 0.28)) !important;
  transform: translateY(-2px);
}

body.local-page .class-card h3,
body.local-page .benefit-item h3,
body.local-page .instructor-card h3,
body.local-page .location-box h3 {
  color: var(--site-text, #f9fbff) !important;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem) !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}

body.local-page .class-card p,
body.local-page .benefit-item p,
body.local-page .instructor-card p,
body.local-page .location-box p,
body.local-page .local-content p,
body.local-page .local-content ul,
body.local-page .local-content li {
  color: var(--site-text-soft, #dce6ff) !important;
  line-height: 1.7 !important;
}

body.local-page .class-card p,
body.local-page .benefit-item p,
body.local-page .instructor-card p {
  font-size: 0.96rem !important;
  margin: 0 !important;
}

body.local-page .benefit-item .icon {
  display: none !important;
}

body.local-page .local-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 900px !important;
  padding: 0 !important;
}

body.local-page .local-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 20px !important;
}

body.local-page .local-content h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
  margin: 28px 0 10px !important;
}

body.local-page .local-content p {
  margin: 0 0 16px !important;
}

body.local-page .local-content ul {
  margin: 0 0 20px !important;
  padding-left: 1.25rem !important;
}

body.local-page .local-content li {
  list-style: disc !important;
  margin-bottom: 8px !important;
}

body.local-page .directions-box {
  background: rgba(8, 48, 128, 0.28) !important;
  border: 0 !important;
  border-left: 4px solid var(--site-yellow, #fee500) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
  margin: 28px 0 !important;
  max-width: none !important;
  padding: 22px 24px !important;
  text-align: left !important;
}

body.local-page .directions-box h3 {
  color: var(--site-text, #f9fbff) !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

body.local-page .directions-box p {
  color: var(--site-text-soft, #dce6ff) !important;
  margin: 0 !important;
}

body.local-page .cta-btn {
  background: var(--site-primary, #0057dc) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24) !important;
  color: var(--site-white, #fff) !important;
  display: inline-block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 13px 30px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.local-page .cta-btn:hover {
  background: var(--site-primary-hover, #0044ca) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.3) !important;
  color: var(--site-white, #fff) !important;
  transform: translateY(-1px);
}

body.local-page .cta-section {
  background: var(--site-bg-alt, #041638) !important;
  border-top: 1px solid var(--site-border, #fee500) !important;
  padding: clamp(54px, 8vw, 78px) 20px !important;
}

body.local-page .cta-section h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem) !important;
  line-height: 1.2 !important;
  margin: 0 auto 14px !important;
  max-width: 800px !important;
  text-wrap: balance;
}

body.local-page .cta-section p {
  color: var(--site-text-soft, #dce6ff) !important;
  line-height: 1.65 !important;
  margin: 0 auto 22px !important;
  max-width: 700px !important;
}

body.local-page .footer {
  display: none;
}

@media (max-width: 920px) {
  body.local-page .hero {
    margin-top: clamp(88px, 20vw, 112px) !important;
  }

  body.local-page .classes-grid,
  body.local-page .benefits-grid,
  body.local-page .instructor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 580px) {
  body.local-page .hero {
    width: calc(100% - 12px) !important;
  }

  body.local-page .classes-grid,
  body.local-page .benefits-grid,
  body.local-page .instructor-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.local-page .class-card,
  body.local-page .benefit-item,
  body.local-page .instructor-card,
  body.local-page .location-box {
    padding: 22px !important;
  }

  body.local-page .directions-box {
    padding: 20px !important;
  }
}