/* ==========================================================================
   trainer-proof.css — real-trainer earnings cards (3-up profile + metric)
   Markup: <div class="proof-grid">
            <article class="proof-card">
              <div class="portrait"><img src="…/trainer.webp"></div>
              <header class="who">
                <div class="info">
                  <div class="name">Kevin R.</div>
                  <div class="meta">Boxing · Brooklyn</div>
                </div>
                <span class="rating"><span class="star">★</span> 4.9</span>
              </header>
              <div class="metric">$1,840<small>/ mo avg</small></div>
              <p class="quote">"…"</p>
              <div class="stats-row">…3 micro-stats…</div>
            </article>
   Each card is identical in structure: a transparent-PNG portrait sits
   above the data card, overflowing the top edge so the trainer reads as
   "stepping out" of the surface.
   ========================================================================== */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  /* Top breathing room = portrait height = card width (1:1 aspect).
     For a 1200px container with 3 cards, each card is ~386px wide. */
  margin-top: var(--space-400);
  align-items: stretch;
  /* Stacking context lives on the GRID, not on individual cards — that
     way each portrait at z-index:-1 paints BEHIND its sibling card's
     white background (cards are at the default z within the grid). The
     overlap area reads as "card surface covers the photo's lower torso"
     instead of "photo sits in front of card surface". */
  isolation: isolate;
}

.proof-card {
  position: relative;
  overflow: visible;       /* allow .portrait to peek above the card */
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  /* Top padding gives the name/rating a clean band above the photo's
     visible bleed so they never sit on a t-shirt. */
  padding: var(--space-32) var(--space-24) var(--space-22);
  background: white;
  border-radius: var(--radius);
  transition: transform .2s ease;
}
.proof-card:hover {
  transform: translateY(-2px);
}

/* Portrait — transparent-bg WebP cutout sitting on top of the card,
   bottom edge anchored exactly at the card's top edge. Source image is
   alpha-cut (Freepik bg-removal) so no mask is needed. Uses object-fit:
   contain so shoulders/torso are never cropped horizontally regardless
   of card width. */
.proof-card .portrait {
  position: absolute;
  left: 0;
  right: 0;
  /* Portrait sits flush above the card — bottom edge of the portrait
     touches the top edge of the card with 0px vertical gap (no overlap). */
  bottom: 100%;
  /* Source PNGs are now padded to 1:1 (transparent padding around the
     2:3 photo). Container matches that aspect so contain == cover, the
     image fills card width exactly, and shoulders never get cropped. */
  aspect-ratio: 1 / 1;
  pointer-events: none;
  /* z-index:-1 places the portrait above the card background but
     below every content element — the 90px overlap lets the photo's
     lower torso flow generously onto the card while names, ratings,
     and the metric all paint on top. The card's `isolation: isolate`
     keeps -1 from leaking behind the card itself. */
  z-index: -1;
  animation: portrait-rise .65s cubic-bezier(.22, 1, .36, 1) .15s both;
}
.proof-card .portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* Source PNGs are 960×960 (2× the painted size ~480px) for crisp retina
     rendering. No drop-shadow — trainer outline reads cleanly on its own. */
}
@keyframes portrait-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header — name/meta + rating chip ──────────────────────────────── */
.proof-card .who {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.proof-card .who .info { flex: 1; min-width: 0; }
.proof-card .who .name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
}
.proof-card .who .meta {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-top: var(--space-2);
}
.proof-card .who .rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--pill);
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--ink);
  flex-shrink: 0;
}
.proof-card .who .rating .star { color: var(--star); font-size: var(--fs-sm); }

/* ── The metric — large display number ─────────────────────────────── */
.proof-card .metric {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
}
.proof-card .metric small {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-3);
  letter-spacing: var(--ls-base);
}

/* ── Quote-mark badge — same circle treatment as the testimonials block:
   38px brand-soft circle with a brand-ink quote glyph centered inside.
   Block-level above the quote text, not inline. ─────────────────────── */
.proof-card .quote-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.proof-card .quote-mark svg.lucide,
.proof-card .quote-mark [data-lucide] {
  width: 18px;
  height: 18px;
}

/* ── Quote — supporting evidence, larger and upright (no italic). ─── */
.proof-card .quote {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
}

/* ── Bottom stat row (3 micro-stats) ────────────────────────────────── */
.proof-card .stats-row {
  display: flex;
  gap: var(--space-12);
  border-top: 1px solid var(--line);
  padding-top: var(--space-14);
  margin-top: auto;
}
.proof-card .stats-row .s {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.proof-card .stats-row .s strong {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-display);
  color: var(--ink);
  letter-spacing: var(--ls-snug);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof-card .stats-row .s span {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  line-height: 1.2;
}

/* Respect reduced-motion — kill the portrait rise animation. */
@media (prefers-reduced-motion: reduce) {
  .proof-card .portrait {
    animation: none;
    opacity: 1;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .proof-grid {
    grid-template-columns: 1fr;
    gap: var(--space-72);   /* enough vertical space for portraits between cards */
    max-width: 540px;
    margin: var(--space-72) auto 0;
  }
  .proof-card { padding: var(--space-22) var(--space-22) var(--space-20); }
  .proof-card .metric { font-size: var(--fs-h2-faq); }
  /* Single-column tablet: card up to 540px wide → portrait 540px tall. */
  .proof-grid {
    gap: var(--space-560);
    margin-top: var(--space-560);
  }
}
@media (max-width: 720px) {
  /* Phone: cap the portrait width so it doesn't dwarf the card. Center it
     directly above the card with 0px gap. Gap between cards = portrait
     height so the next card sits exactly under the previous portrait. */
  .proof-card .portrait {
    /* Center via auto-margins (left:0 + right:0 + width: 320px) so the
       portrait-rise transform: translateY animation isn't fighting an
       additional translateX. */
    width: 320px;
    margin: 0 auto;
    bottom: 100%;
  }
  .proof-grid {
    gap: var(--space-340);
    margin-top: var(--space-340);
  }
  .proof-card .stats-row { gap: var(--space-10); }
  .proof-card .stats-row .s strong { font-size: var(--fs-sm); }
}