/* =============================================================================
   TRAINING PAGES
   ============================================================================= */

/* ---- Training Program Hero (full-width, 80vh) ---- */
/* NOTE: Also loaded by the Private Skate Practice page; the hero include
   templates/training/includes/program_detail/_hero.html is shared between
   ProgramDetailPage and PrivateSkatePracticePage. Hero typography rules
   below (.hero-eyebrow, .program-detail-meta*) apply to both. */
.training-hero {
  position: relative;
  height: 80vh;
  min-height: 600px;
  background-color: var(--color-surface-dark, #1a1a1a);
  overflow: hidden;
}

/* Editorial eyebrow above the hero h1 (small, uppercase, letter-spaced, gold) */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c4a052; /* antique gold */
  margin-bottom: 0.75rem;
}

/* Program detail metadata — inline dot-separated.
   Treatment: first item highlighted in gold (.program-detail-meta__level),
   remaining items in muted ivory, dots in faded ivory. The same shape applies
   on PSP via the hero_meta_items rendering loop in _hero.html. */
.program-detail-meta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--color-alabaster-70);
  letter-spacing: 0.02em;
}
.program-detail-meta__level {
  color: #c4a052;
}
.program-detail-meta__dot {
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--color-alabaster-40);
}

/* Hero CTA Buttons */
.training-hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
/* Scroll Indicator */
.training-hero__scroll-indicator {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border: 1px solid #f2f0eb;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2f0eb;
  text-decoration: none;
  animation: training-hero-bounce 2s ease infinite;
  z-index: 2;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.training-hero__scroll-indicator:hover {
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
}
@keyframes training-hero-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

/* ---- Training Body (full-width StreamField blocks) ---- */
.training-body {
  background-color: var(--color-surface-primary, #f8f6f1);
}

/* Mobile responsive */
@media (max-width: 991.98px) {
  .training-hero {
    height: auto;
    min-height: 650px;
  }
}
@media (max-width: 767.98px) {
  .training-hero {
    min-height: 550px;
  }
  .training-hero__ctas {
    flex-direction: column;
    gap: var(--space-3);
  }
  .training-hero__ctas .editorial-cta-btn {
    text-align: center;
  }
  .training-hero__scroll-indicator {
    display: none;
  }
}

/* ---- Training Detail Gradient ---- */
.training-detail__gradient-transition {
  height: 200px;
  background: linear-gradient(
    to bottom,
    #faf9f6 0%, #f5f4f0 8%, #e8e6e2 16%, #d5d3cf 24%,
    #c0beba 32%, #a8a6a2 40%, #8f8d89 48%, #767471 56%,
    #5e5c59 64%, #474544 72%, #3a3838 80%, #313030 88%,
    var(--charcoal, #2b2b2b) 100%
  );
  margin-top: -1px;
}