/* ==========================================================================
   FITNESS PROGRAMS PAGE — append to main.css or load after it
   Prefixed with "fp-" to avoid collisions with existing page classes
   (apg-*, con-*, story-*, program-*, how-*, mem-*, ss-*, wt-*).
   Reuses global primitives already shipped in main.css: .grain, .foil-btn,
   .hero-outline-btn, .hero-dark, .apg-float-shape / @keyframes apg-float.
   ========================================================================== */

/* ---- Hero breadcrumb ---- */
.fp-breadcrumb a { transition: color .3s ease; }
.fp-breadcrumb a:hover { color: #e3c887; }
.fp-crumb-sep { color: rgba(197, 154, 64, 0.45); }

/* ---- Intro: image + quote card (mirrors .apg-welcome-image / .ss-quote-card) ---- */
.fp-intro-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.fp-intro-image:hover img { transform: scale(1.04); }

.fp-intro-card {
  background: rgba(250, 247, 241, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.18);
  border-radius: 1.25rem;
}

.fp-highlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(197, 154, 64, 0.08);
  border: 1px solid rgba(197, 154, 64, 0.22);
  border-radius: 9999px;
  padding: 0.55rem 1rem;
  color: #e3c887;
  font-size: 0.85rem;
  transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.fp-highlight-chip:hover {
  background: rgba(197, 154, 64, 0.14);
  border-color: rgba(197, 154, 64, 0.4);
  transform: translateY(-2px);
}

.fp-quote-card {
  position: relative;
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid rgba(197, 154, 64, 0.2);
  border-radius: 1.25rem;
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s ease;
}
.fp-quote-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197,154,64,0.4);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 20px -5px rgba(197,154,64,0.18);
}
.fp-quote-mark {
  font-family: '"Fraunces"', serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(197, 154, 64, 0.35);
}

/* ---- Program category cards (image + icon + benefits + CTA) ---- */
.fp-program-card {
  position: relative;
  background: rgba(250, 247, 241, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .5s ease;
  will-change: transform;
}
.fp-program-card:hover,
.fp-program-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(197, 154, 64, 0.4);
  box-shadow: 0 26px 55px -18px rgba(0,0,0,0.6), 0 0 24px -8px rgba(197,154,64,0.2);
}
.fp-program-image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.fp-program-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.fp-program-card:hover .fp-program-image img { transform: scale(1.08); }
.fp-program-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,8,0) 40%, rgba(11,10,8,0.92) 100%);
  pointer-events: none;
}
.fp-program-icon {
  position: absolute;
  left: 1.25rem;
  bottom: -1.4rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
  font-size: 1.05rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 22px -8px rgba(197,154,64,0.6);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.fp-program-card:hover .fp-program-icon { transform: scale(1.1) rotate(-4deg); }
.fp-program-body { padding: 2.25rem 1.5rem 1.75rem; }
.fp-program-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: #b7a98c;
  font-size: 0.85rem;
  line-height: 1.5;
}
.fp-program-benefits i { color: #c59a40; font-size: 0.7rem; margin-top: 0.3rem; flex-shrink: 0; }
.fp-program-cta {
  color: #e3c887;
  transition: gap .3s ease, color .3s ease;
}
.fp-program-cta i { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.fp-program-cta:hover i { transform: translateX(4px); }

/* ---- Feature / benefit icon cards (mirrors .mem-include-card) ---- */
.fp-feature-card {
  position: relative;
  background: rgba(250, 247, 241, 0.04);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1rem;
  padding: 2rem 1.6rem;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .5s ease, background-color .4s ease;
  will-change: transform;
}
.fp-feature-card:hover,
.fp-feature-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(197, 154, 64, 0.4);
  background: rgba(250, 247, 241, 0.07);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.2);
}
.fp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 1rem;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease;
}
.fp-feature-card:hover .fp-feature-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
}

/* ---- Journey timeline (mirrors .mem-timeline signature element) ---- */
.fp-timeline-track { position: relative; }
.fp-timeline-line-bg { background: rgba(197, 154, 64, 0.18); }
.fp-timeline-line-fill {
  background: linear-gradient(90deg, #8f6f2c 0%, #e3c887 50%, #c59a40 100%);
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 767px) {
  .fp-timeline-line-fill { transform: scaleY(0); transform-origin: top; }
}
.fp-timeline-node {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: #1b1712;
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #b7a98c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  position: relative;
  z-index: 2;
  transition: background .5s ease, border-color .5s ease, color .5s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.fp-timeline-node.is-active {
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  border-color: #e3c887;
  color: #14110d;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(197,154,64,0.12), 0 10px 24px -8px rgba(0,0,0,0.5);
}
.fp-timeline-label { opacity: 0.55; transition: opacity .5s ease, color .5s ease; }
.fp-timeline-step.is-active .fp-timeline-label { opacity: 1; }

/* ---- Workout experience: alternating image/copy rows ---- */
.fp-experience-image { overflow: hidden; }
.fp-experience-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.fp-experience-image:hover img { transform: scale(1.045); }
.fp-experience-row:nth-child(even) .fp-experience-image { order: 2; }
.fp-experience-row:nth-child(even) .fp-experience-copy { order: 1; }
.fp-experience-index {
  font-family: '"Fraunces"', serif;
  font-style: italic;
  color: rgba(197, 154, 64, 0.3);
}

/* ---- Final CTA floating shape reuses .apg-float-shape ---- */

/* ---- Shared reveal base state, animated by fitnessPrograms JS ---- */
.fp-reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fp-program-card, .fp-feature-card, .fp-quote-card, .fp-highlight-chip,
  .fp-timeline-line-fill, .fp-timeline-node,
  .fp-intro-image img, .fp-experience-image img, .fp-program-image img {
    transition: none !important;
  }
}