/* ==========================================================================
   trust-strip.css — 3-up stat row (rating, trainers, sessions) with icons
   Markup: <section class="trust"><div class="container trust-grid">
            <div class="trust-item">
              <div class="ti-icon">...lucide</div>
              <div class="ti-text">
                <div class="big">4.8 <span class="unit">/ 5</span></div>
                <div class="small">From 2,300+ verified reviews</div>
   Display metrics use the Russo One display font (--font-display).
   ========================================================================== */

section.trust {
  border-bottom: 1px solid var(--line);
  background: white;
  padding: var(--space-28) 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* Icon tile (default = brand-soft) */
.trust-item .ti-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.trust-item .ti-icon svg.lucide,
.trust-item .ti-icon [data-lucide] { width: 22px; height: 22px; }

/* Modifier: gold star tile (filled) */
.trust-item .ti-icon--star {
  background: var(--star-soft);
  color: var(--star);
}
.trust-item .ti-icon--star svg.lucide,
.trust-item .ti-icon--star [data-lucide] {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.trust-item .ti-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Display metric (number) — uses display font */
.trust-item .big {
  font-family: var(--font-display);
  font-size: var(--fs-metric);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
}
.trust-item .big .star {
  color: var(--star);
  font-size: var(--fs-h1-sm);
  line-height: 1;
}
/* "/ 5" suffix — back to base font, muted */
.trust-item .big .unit {
  color: var(--muted);
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-base);
}

.trust-item .small {
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* ── Desktop: float the strip as a content-width card that overlaps the
   hero by ~half its own height. Mobile stays full-bleed (rules below). ── */
@media (min-width: 981px) {
  section.trust {
    background: var(--bg-soft);
    border-bottom: 0;
    padding: 0 0 var(--space-72);
    position: relative;
    z-index: 2;
  }
  .trust-grid {
    background: var(--bg);
    border-radius: var(--radius-3xl);
    padding: var(--space-28) var(--space-44);
    /* Lift visually by exactly 50% of the card's own height, then collapse
       the layout gap left below it so trust-section padding stays flush. */
    transform: translateY(-50%);
    margin-bottom: calc(var(--space-72) * -1);
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .trust-grid { grid-template-columns: 1fr; gap: var(--space-18); }
  .trust-item .big { font-size: var(--fs-metric-sm); }
  .trust-item .big .star { font-size: var(--fs-h2-sm); }
}