/* ==========================================================================
   how-it-works.css — 2-column "Three steps. No contracts." block.
   Markup: <section class="block">
            <div class="container how-it-works">
              <div class="hiw-text">
                <div class="kicker">How it works</div>
                <h2>...</h2>
                <p class="hiw-lead">...</p>
                <ol class="hiw-steps">
                  <li><span class="num">1</span><div><h4>Find</h4><p>...</p></div></li>
                  ...
                </ol>
              </div>
              <div class="hiw-art">
                <video class="hiw-video">...</video>
                <div class="booking-pop">…</div>          (booking-pop.css)
              </div>
   This file owns: layout, text column, numbered stepper, video frame, grain.
   The floating booking card is its own component (booking-pop.css); only its
   position inside .hiw-art is set here.
   ========================================================================== */

.how-it-works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-72);
  align-items: center;
}

/* ── Left column — text + numbered steps ─────────────────────────────── */
.hiw-text h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-display);
  margin: 0 0 var(--space-14);
}
.hiw-lead {
  font-size: var(--fs-lead);
  color: var(--ink-3);
  margin: 0 0 var(--space-32);
  max-width: 44ch;
}

.hiw-steps {
  --hiw-step-gap: var(--space-36);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hiw-step-gap);
}
.hiw-steps li {
  position: relative;
  display: flex;
  gap: var(--space-18);
  align-items: flex-start;
  /* Pure-CSS staggered fade-in. `both` fill-mode pins the from-state
     during the animation-delay so steps don't flash at full opacity. */
  animation: hiw-step-in .55s cubic-bezier(.2, .8, .2, 1) both;
}
.hiw-steps li:nth-child(2) { animation-delay: 140ms; }
.hiw-steps li:nth-child(3) { animation-delay: 280ms; }

@keyframes hiw-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hiw-steps .num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-md);
  line-height: 1;
  /* Auto-pulse on a 4.5s loop: each .num lights up brand-solid for ~0.5s
     then dims back. Step 2 starts at 1/3 of the cycle, step 3 at 2/3, so
     the highlight reads as Find → Book → Train flowing on its own. */
  animation: hiw-num-pulse 4.5s ease-in-out infinite;
}
.hiw-steps li:nth-child(2) .num { animation-delay: 1.5s; }
.hiw-steps li:nth-child(3) .num { animation-delay: 3s; }

@keyframes hiw-num-pulse {
  0%, 75%, 100% {
    background: var(--brand-soft);
    color: var(--brand-ink);
    box-shadow: none;
    transform: scale(1);
  }
  18%, 30% {
    background: var(--brand);
    color: white;
    box-shadow: var(--shadow-brand);
    transform: scale(1.08);
  }
}
/* Stepper connector — vertical line in brand-soft running from below the
   current circle, through the description, and into the top of the next
   circle. Anchored to the li (not .num) so the height is driven by the
   actual content height + the configured li gap. */
.hiw-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;       /* center of 40px circle, minus half line width (2/2) */
  top: 40px;        /* immediately below the circle */
  bottom: calc(var(--hiw-step-gap) * -1);  /* through the gap into next li */
  width: 2px;
  background: var(--brand-soft);
}
.hiw-steps h4 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-snug);
}
.hiw-steps li p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-body);
  max-width: 44ch;
}

/* Section CTA — sits below the stepper. Same reveal as the steps, delayed
   so it lands after the third step settles. */
.hiw-cta {
  margin-top: var(--space-32);
  animation: hiw-step-in .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: 420ms;
}

/* Honor reduced-motion: skip the entry stagger and the looping num-pulse. */
@media (prefers-reduced-motion: reduce) {
  .hiw-steps li,
  .hiw-cta,
  .hiw-steps .num {
    animation: none;
  }
}

/* ── Right column — video + grain + booking-pop instance ─────────────── */
.hiw-art {
  position: relative;
  isolation: isolate;
}
.hiw-video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--bg-3);
}

/* Cutout-style trainer portrait — transparent PNG/WebP, no card frame.
   Soft drop-shadow gives subtle depth without a hard edge. */
.hiw-photo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 28px rgba(var(--ink-pure-rgb), .14))
          drop-shadow(0 4px 8px rgba(var(--ink-pure-rgb), .08));
}

/* When the right column hosts a cutout, anchor the figure to the bottom
   edge of the section — they stand on the block's lower border. The
   negative margin cancels the parent section's padding-bottom (88px) and
   then some, so the figure presses flush against the boundary. The
   `display: block` removes the inline-image baseline gap that browsers
   leave below <img>. */
.hiw-art:has(.hiw-photo) {
  align-self: end;
  margin-bottom: calc(var(--space-88) * -1);
  line-height: 0;
}

/* ── Floating stat card — cycles trainer → earnings → schedule → reviews,
   anchored to the bottom-right of the cutout. Sticker-style white card,
   sticks slightly past the photo's right edge so it reads as a UI overlay
   rather than something inside the image. ───────────────────────────── */
.hiw-stat {
  position: absolute;
  right: calc(var(--space-24) * -1);
  bottom: calc(var(--space-88) + var(--space-24));
  z-index: 2;
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--space-14) var(--space-18);
  box-shadow: var(--shadow-lg);
  /* Fixed width — keeps the card stable across cycle states; no jumping
     edges when inner content swaps. */
  width: 280px;
  line-height: var(--lh-body);
}

/* Sticker-style brand badge — same sticker pattern as .booking-pop__badge,
   identifies the card surface as the trainer's view. */
.hiw-stat__badge {
  position: absolute;
  top: calc(var(--space-10) * -1);
  right: calc(var(--space-12) * -1);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-10);
  background: var(--brand);
  color: white;
  border-radius: var(--pill);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1;
  box-shadow: var(--shadow-brand);
  white-space: nowrap;
}

.hiw-stat__inner {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.2, .8, .2, 1);
}
.hiw-stat__inner.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}
.hiw-stat__inner.is-entering {
  animation: hiw-stat-in .4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes hiw-stat-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hiw-stat .ic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--brand-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.hiw-stat .ic svg.lucide,
.hiw-stat .ic [data-lucide] {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.hiw-stat .info { flex: 1; min-width: 0; }
.hiw-stat .t {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hiw-stat .s {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-top: var(--space-2);
  font-weight: var(--fw-medium);
}

/* Film-grain overlay scoped to the video area only (trainer-cta texture).
   Skipped on .hiw-art instances that hold a transparent .hiw-photo cutout,
   where the noise would smear across the empty surrounding area. */
.hiw-art:has(.hiw-video)::after {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  /* Match the video's footprint exactly: same aspect-ratio, top-anchored.
     The pop-card overflows below but ::after stops at the video bounds. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background-image: url('../../noise.svg');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Position override for the booking-pop instance inside .hiw-art —
   bottom-left, slightly overflows the photo to the left so it reads as
   "lifted off" the video. */
.hiw-art .booking-pop {
  position: absolute;
  left: calc(var(--space-24) * -1);
  bottom: var(--space-32);
  z-index: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .how-it-works {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }
  .hiw-art { max-width: 480px; margin: 0 auto; }
  .hiw-text h2 { font-size: var(--fs-h1-md); }
}
@media (max-width: 720px) {
  .how-it-works { gap: var(--space-32); }
  .hiw-text h2 { font-size: var(--fs-h1-sm); line-height: var(--lh-heading); }
  .hiw-lead { margin-bottom: var(--space-24); }
  .hiw-steps { --hiw-step-gap: var(--space-28); }
  /* Section CTA stretches full-width on phones — same rule used across all
     content CTAs on mobile. */
  .hiw-cta { width: 100%; }
  /* Photo stays inside the section background but sits flush against its
     bottom edge on phones. Cancel the mobile section padding-bottom (56px)
     with a matching negative margin so the cutout's feet land exactly on
     the section boundary — no overflow into the next block. */
  .hiw-art:has(.hiw-photo) {
    align-self: auto;
    margin-bottom: calc(var(--space-56) * -1);
  }
  /* Tuck the booking-pop inside the photo bounds on phones — overhang
     looks cramped at narrow widths. */
  .hiw-art .booking-pop {
    left: var(--space-16);
    right: var(--space-16);
    bottom: var(--space-16);
    min-width: 0;
  }
  /* Stat card — let it span the column on narrow viewports, no overhang. */
  .hiw-stat {
    left: var(--space-12);
    right: var(--space-12);
    bottom: calc(var(--space-56) + var(--space-12));
    width: auto;
  }
}