/* web/themes/techprosolutions/css/components/et-typography.css */
/**
 * ET Typography — cross-section type refinements on top of the locked scale
 * in css/design-tokens.css (which stays the single source of truth for all
 * sizes; this file only APPLIES tokens where components under-use them).
 *
 * Batch (2026-07-09): hero stats become display numerals — oversized figures
 * (--et-num-*) paired with overline-treated labels, the classic fintech
 * big-number/small-label contrast. Inverse laws hold: numerals get tight
 * lh 1 / -0.03em; the small uppercase labels get +0.08em tracking.
 *
 * Selectors run one class deeper than the component's own rules (0-3-0 vs
 * 0-2-0) so aggregate order can never decide the winner.
 */

/* GEOMETRY LAW (measured 2026-07-09, headless): the stats card is a fixed
   576px at >=1280 viewport; three equal thirds leave ~95px for the figure
   next to a 48px chip. "₹500Cr+" inks 4.28em wide at weight 800, so the
   raw --et-num-size (32-40px, ~137-171px ink) can NEVER fit — it painted
   straight over the dividers. Ceiling = 95px / 4.28em ≈ 22px. The clamp
   below tracks the card's linear shrink from 1440 down to 992. */
.hero-orbital-trust .hero-stats-wrapper .hero-stat__number {
  font-size: clamp(1.125rem, 0.375rem + 1.1vw, 1.375rem); /* 18px -> 22px */
  font-weight: var(--et-num-weight);
  line-height: var(--et-num-lh);
  letter-spacing: -0.02em; /* smaller size than --et-num → gentler negative track */
}

.hero-orbital-trust .hero-stats-wrapper .hero-stat__label {
  font-size: 0.75rem;                 /* 12px */
  font-weight: var(--et-overline-weight);
  letter-spacing: var(--et-overline-track);
  text-transform: uppercase;
  line-height: 1.4;                   /* small size → looser */
  color: var(--et-body-color);
}

/* Narrow-desktop band (992-1199): the left column bottoms out at ~368px of
   card content — three thirds cannot fit a 48px chip AND "₹500Cr+" at any
   readable size. Same call as the phone tier below: drop the decorative
   chip, keep the data. */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-orbital-trust .hero-stats-wrapper .hero-stat__icon {
    display: none;
  }
}

/* Single-column widths: the card spans the full viewport, so numerals return
   to the component's proven 24px — the stats card NEVER stacks (locked law),
   and three 28px figures + tracked uppercase labels overflow a 390px row
   (caught in the 2026-07-09 mobile QA sweep). */
@media (max-width: 991px) {
  .hero-orbital-trust .hero-stats-wrapper .hero-stat__number {
    font-size: 1.5rem;                /* 24px */
  }
  .hero-orbital-trust .hero-stats-wrapper .hero-stat__label {
    font-size: 0.6875rem;             /* 11px */
    letter-spacing: 0.06em;           /* still positive per the small-type law */
  }
}

/* Phones: three thirds of the (350-24)px card are ~103px each; "₹500Cr+" at
   24px/800 measures ~96px, so the 32px decorative icon chip cannot share the
   row. Drop the ornament, keep the data — the card still NEVER stacks. */
@media (max-width: 480px) {
  .hero-orbital-trust .hero-stats-wrapper .hero-stat__icon {
    display: none;
  }
}