/* ==========================================================================
   trainer-cta.css — full-bleed "for trainers" recruitment section
   Markup: <section class="trainer-cta">
            <video class="trainer-cta__bg" ...>
            <div class="container trainer-cta__inner">
              <div>
                <div class="kicker">For trainers</div>
                <h2>Earn money on your schedule</h2>
                <p>...</p>
                <div class="actions"><a class="btn btn-primary"></a>...</div>
              </div>
              <div class="trainer-cta__stats">
                <div class="s"><div class="num"></div><div class="lbl"></div></div> ×4
   Layers (back → front):
     1. <video.trainer-cta__bg>           the looping hero footage
     2. ::before  brand-tinted gradient   keeps text readable
     3. ::after   noise.svg               softens banding, adds tactility
     4. .trainer-cta__inner               content
   ========================================================================== */

.trainer-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark); /* fallback if video + poster fail to load */
  color: white;
  padding: 0 0 var(--space-100);
  min-height: 600px;
  display: flex;
  align-items: center;
}

/* Looping background video (poster is rendered while it decodes) */
.trainer-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
}

/* Brand-tinted dark gradient — same direction/strength as the previous box */
.trainer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    120deg,
    rgba(var(--bg-dark-rgb), .88) 0%,
    rgba(var(--brand-ink-rgb), .78) 120%
  );
  pointer-events: none;
}

/* Noise overlay — subtle film-grain texture on top of the gradient */
.trainer-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../../noise.svg');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Inner content grid — sits inside the flex section so it can be vertically
   centered while the section itself stays flush with the previous block. */
.trainer-cta__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-44);
  align-items: center;
}

.trainer-cta h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  margin: 0 0 var(--space-14);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
}
.trainer-cta p {
  margin: 0 0 var(--space-26);
  color: rgba(var(--white-rgb), .82);
  font-size: var(--fs-lead);
  max-width: 48ch;
}
.trainer-cta .actions {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* Buttons inside trainer-cta inherit dark-bg styling via .on-dark on the
   <section> — see buttons.css for the full state set. */

/* Stat tiles (2x2 grid of .live-card components — see live-counter.css) */
.trainer-cta__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-14);
}

/* Dark-surface override for the kicker chip */
.trainer-cta .kicker {
  background: rgba(var(--white-rgb), .12);
  color: white;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .trainer-cta { min-height: 40vh; padding: var(--space-56) 0 var(--space-72); }
  .trainer-cta__inner { grid-template-columns: 1fr; gap: var(--space-36); }
  .trainer-cta h2 { font-size: var(--fs-h1-md); }
}
@media (max-width: 720px) {
  .trainer-cta {
    min-height: 0;
    padding: var(--space-40) 0 var(--space-44);
    align-items: stretch;
  }
  .trainer-cta__inner { gap: var(--space-24); }
  /* Center the text column (kicker / h2 / p / actions) on phones. */
  .trainer-cta__inner > div:first-child { text-align: center; }
  .trainer-cta h2 {
    font-size: var(--fs-h2-md);
    line-height: 1.12;
    margin-bottom: var(--space-10);
  }
  .trainer-cta p {
    font-size: var(--fs-body);
    margin-bottom: var(--space-18);
    margin-left: auto;
    margin-right: auto;
  }
  .trainer-cta .kicker { margin-bottom: var(--space-10); }
  /* Stack action buttons full-width — standard mobile CTA pattern. */
  .trainer-cta .actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
  }
  .trainer-cta .actions .btn { width: 100%; }
  /* Keep the stats as a compact 2×2 grid on phones — readable, not cramped.
     Step text + icons down so the four cards fit without wrapping or
     squeezing the sub-label off the line. */
  .trainer-cta__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
  .trainer-cta__stats .live-card { padding: var(--space-12) var(--space-14); gap: var(--space-10); }
  .trainer-cta__stats .live-card .big { font-size: var(--fs-h3-lg); }
  .trainer-cta__stats .live-card .sub { font-size: var(--fs-micro); margin-top: var(--space-2); }
  .trainer-cta__stats .live-card .icon { width: 34px; height: 34px; }
  .trainer-cta__stats .live-card .icon svg.lucide,
  .trainer-cta__stats .live-card .icon [data-lucide] { width: 16px; height: 16px; }
}