/* ============================================================================
   WEST COAST ATHLETICS — home.css
   Page-level styles for the Home page (front-page.php) ONLY.
   Conditionally enqueued via is_front_page(). No global rules here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SECTION 01 — Full-Bleed Hero
   --------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  /* Full-bleed hero photo with dark overlay for text contrast. */
  background:
    linear-gradient(
      180deg,
      rgba(27, 27, 27, 0.82) 0%,
      rgba(27, 27, 27, 0.9) 100%
    ),
    radial-gradient(
      90% 90% at 50% 0%,
      rgba(242, 217, 82, 0.2) 0%,
      transparent 55%
    ),
    url(../Images/PersonalTraining.PNG) center 28% /cover no-repeat,
    var(--c-black);
  border-bottom: 1px solid var(--c-crimson-dim);
}
.home-hero__inner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-block: var(--space-xl);
  text-align: center;
}
.home-hero__body {
  max-width: 620px;
  margin: 0 auto var(--space-lg);
}
.home-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-crimson);
  margin-bottom: var(--space-sm);
}
.home-hero h1 {
  margin-bottom: var(--space-sm);
}
.home-hero .subline {
  margin-bottom: var(--space-md);
}
.home-hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   SECTION 02 — Audience Pathways
   --------------------------------------------------------------------------- */
.pathways {
  background: var(--c-black);
}
.pathways__intro {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--c-white);
  text-transform: none;
  max-width: 640px;
  margin-bottom: var(--space-lg);
}
.pathways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.pathway-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 280px;
}
/* Circular icon badge */
.pathway-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-crimson-dim);
  border: 1px solid rgba(242, 217, 82, 0.3);
  color: var(--c-crimson);
  font-size: 23px;
  transition:
    background var(--ease),
    color var(--ease),
    transform var(--ease);
}
.pathway-card:hover .pathway-card__icon {
  background: var(--c-crimson);
  color: var(--c-on-accent);
  transform: translateY(-2px);
}
.pathway-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.pathway-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--c-white);
  line-height: 1.15;
}
.pathway-card__list {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  color: var(--c-silver-lt);
}
/* CTA anchored to the bottom so all three align */
.pathway-card__cta {
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   SECTION 03 — Program Grid (8 tiles: 4 / 2 / 1)
   --------------------------------------------------------------------------- */
.programs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.program-tile {
  padding: var(--space-md);
}
.program-tile__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-crimson-dim);
  border-radius: var(--radius-sm);
  background: var(--c-crimson-dim);
  color: var(--c-crimson);
  font-size: 19px;
  margin-bottom: var(--space-sm);
}
.program-tile:hover .program-tile__icon {
  color: var(--c-crimson-lt);
}
.program-tile__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.program-tile__desc {
  font-size: 14px;
  color: var(--c-silver);
  line-height: 1.55;
}

/* Section 03 — What We Offer (3 categories: PT / Martial Arts / Youth Athletics) */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-md);
  align-items: start;
}
/* Left column stacks Personal Training + Youth Athletics; right column is Martial Arts. */
.offer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.offer-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
}
.offer-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-crimson-dim);
  border-radius: var(--radius-sm);
  background: var(--c-crimson-dim);
  color: var(--c-crimson);
  font-size: 20px;
  margin-bottom: var(--space-sm);
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.offer-card:hover .offer-card__icon {
  background: var(--c-crimson);
  color: var(--c-on-accent);
  transform: translateY(-3px);
}
.offer-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-white);
  margin-bottom: var(--space-sm);
}
.offer-card__desc {
  color: var(--c-silver);
  font-size: 15px;
  line-height: 1.6;
}
/* Martial Arts disciplines */
.offer-disc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.offer-disc li {
  padding-left: var(--space-md);
  border-left: 2px solid var(--c-crimson);
}
.offer-disc__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-crimson);
  margin-bottom: 2px;
}
.offer-disc__desc {
  display: block;
  color: var(--c-silver);
  font-size: 14px;
  line-height: 1.55;
}
@media (max-width: 960px) {
  .offer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   SECTION 04 — Meet Coach Christian (two-column)
   --------------------------------------------------------------------------- */
.coach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.coach__body {
  max-width: 560px;
}
.coach__body p {
  color: var(--c-silver);
}
.coach__credentials {
  margin-block: var(--space-lg);
}
.coach__cta {
  margin-top: var(--space-md);
}

/* ---------------------------------------------------------------------------
   SECTION 05 — Member Results (testimonials placeholder)
   --------------------------------------------------------------------------- */
.results {
  text-align: center;
}
.results .section-head {
  margin-inline: auto;
}
.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.testimonial {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.testimonial__stars {
  color: var(--c-crimson);
  font-size: 13px;
  letter-spacing: 2px;
}
.testimonial__quote {
  font-size: 15px;
  line-height: 1.7;
}
.testimonial__author {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--c-silver-lt);
  margin-top: auto;
}
.results__yelp {
  color: var(--c-silver);
  max-width: 640px;
  margin: 0 auto var(--space-md);
}

@media (max-width: 768px) {
  .results__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   SECTION 06 — Location Advantage (two-column)
   --------------------------------------------------------------------------- */
.location__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.location__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
  min-height: 340px;
}
.location__map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
  filter: grayscale(0.3) contrast(1.05);
}
.location__details dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-crimson);
  margin-top: var(--space-md);
}
.location__details dd {
  margin: 0;
  color: var(--c-silver-lt);
  font-size: 15px;
  line-height: 1.8;
}
.location__details a {
  color: var(--c-silver-lt);
}
.location__details a:hover {
  color: var(--c-crimson);
}

/* ---------------------------------------------------------------------------
   SECTION 07 — Free Intro CTA
   --------------------------------------------------------------------------- */
.free-intro {
  text-align: center;
  background:
    linear-gradient(
      180deg,
      rgba(242, 217, 82, 0.1) 0%,
      rgba(27, 27, 27, 0.95) 70%
    ),
    var(--c-black);
  border-block: 1px solid var(--c-crimson-dim);
}
.free-intro__inner {
  max-width: 760px;
  margin-inline: auto;
}
.free-intro h2 {
  margin-bottom: var(--space-sm);
}
.free-intro .subline {
  margin-bottom: var(--space-md);
}
.free-intro__body {
  margin: 0 auto var(--space-lg);
  max-width: 600px;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .programs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .coach__grid,
  .location__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .coach__media {
    order: -1;
  }
}

@media (max-width: 640px) {
  .pathways__grid {
    grid-template-columns: 1fr;
  }
  .programs__grid {
    grid-template-columns: 1fr;
  }
  .home-hero {
    min-height: 80vh;
  }
  .home-hero__cta .btn {
    width: 100%;
  }
}

/* ===========================================================================
   MODERN UPLIFT — Home art direction
   =========================================================================== */

/* ---- Hero: oversized editorial headline, depth, staggered entrance ---- */
.home-hero {
  min-height: 82vh;
  overflow: hidden;
}
.home-hero__inner {
  position: relative;
}
.home-hero h1 {
  font-size: clamp(46px, 8.5vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.5px;
}
.home-hero h1 .accent {
  color: var(--c-crimson);
  display: block;
}
.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.home-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c-crimson);
}
.home-hero__cta {
  justify-content: center;
}

/* On-load staggered entrance (independent of scroll JS) */
.home-hero__inner > * {
  animation: heroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-hero__inner > :nth-child(1) {
  animation-delay: 0.05s;
}
.home-hero__inner > :nth-child(2) {
  animation-delay: 0.15s;
}
.home-hero__inner > :nth-child(3) {
  animation-delay: 0.25s;
}
.home-hero__inner > :nth-child(4) {
  animation-delay: 0.35s;
}
.home-hero__inner > :nth-child(5) {
  animation-delay: 0.45s;
}
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__inner > * {
    animation: none;
  }
}

/* ---- Pathways: big index numerals + bolder cards ---- */
.pathways__grid {
  counter-reset: pw;
}
.pathway-card {
  counter-increment: pw;
  position: relative;
}
.pathway-card::before {
  content: "0" counter(pw);
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--c-steel);
  transition: color var(--ease);
}
.pathway-card:hover::before {
  color: var(--c-crimson);
}
/* Title color does NOT change on hover — only the index number (::before) changes. */
.pathway-card__title {
  transition: color var(--ease);
}

/* ---- Programs: faint index numerals + hover accent ---- */
.programs__grid {
  counter-reset: pg;
}
.program-tile {
  counter-increment: pg;
  position: relative;
}
.program-tile::before {
  content: "0" counter(pg);
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--c-steel);
  transition: color var(--ease);
}
.program-tile:hover::before {
  color: var(--c-crimson);
}
.program-tile:hover .program-tile__name {
  color: var(--c-crimson);
  transition: color var(--ease);
}
.program-tile__icon {
  transition:
    background var(--ease),
    color var(--ease),
    transform var(--ease);
}
.program-tile:hover .program-tile__icon {
  background: var(--c-crimson);
  color: var(--c-on-accent);
  transform: translateY(-3px);
}

/* ---- Coach: offset crimson frame behind the photo for depth ---- */
.coach__media {
  position: relative;
}
.coach__media::before {
  /* Decorative offset frame removed per client (read as misaligned black lines on
     the light coach section, since --c-crimson maps to dark there). Re-enable with
     a symmetric inset + literal yellow if an aligned frame is ever wanted. */
  display: none;
}
.coach__media .media-well {
  position: relative;
  z-index: 1;
}
.coach__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  display: block;
  filter: grayscale(0.15) contrast(1.05);
}

/* ---- Results: oversized quote glyph on each card ---- */
.testimonial {
  position: relative;
  padding-top: var(--space-lg);
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  line-height: 1;
  color: var(--c-crimson);
  opacity: 0.28;
}

/* ---- Free Intro: layered crimson glow ---- */
.free-intro {
  position: relative;
  overflow: hidden;
}
.free-intro::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(242, 217, 82, 0.22) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.free-intro__inner {
  position: relative;
  z-index: 1;
}

/* GoHighLevel form embed slot (placeholder until the GHL form is connected) */
.ghl-embed {
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: var(--space-lg);
  background: var(--c-charcoal);
  border: 1px dashed var(--c-crimson);
  border-radius: var(--radius);
}

@media (max-width: 640px) {
  .pathway-card::before {
    font-size: 36px;
  }
}