/* ============================================
   gs-stat-card — reusable card with stat + title + desc
   Variants:
     --featured    (coral border, brand-editorial emphasis, light bg)
     --plain       (no card chrome at all, on-dark text — for a stat
                    row sitting directly on a dark section; see below)
     --label-first (title reads as a small kicker ABOVE the value,
                    not a heading below it — see below)
   Used across multiple sections (assembly tax, customer outcomes, etc.)
   ============================================ */

.gs-stat-card {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Featured variant — coral border for brand-editorial emphasis.
   Use when the card is meant to call attention to itself
   (e.g., "look at these numbers"). The 2px border width matches
   the system rule that static blue/coral borders are 2px (only
   grey borders that grow on hover stay at 1.5px). */
.gs-stat-card--featured {
  border: 2px solid var(--color-brand-accent);
}

/* Plain variant — for a stat row sitting directly on a dark section
   (gs-wgs-section--dark, gs-hero, etc.) with no card chrome at all:
   drop the background/border/radius/padding entirely, just the
   value/title/desc typography on the section's own bg. Value stays
   coral (stat numbers are a brand-editorial moment regardless of
   background per the color-system rule); title/desc flip to the
   on-dark text tokens since the light-bg defaults would be
   unreadable here. */
.gs-stat-card--plain {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.gs-stat-card--plain .gs-stat-card__title {
  color: var(--color-fg-on-dark);
}

.gs-stat-card--plain .gs-stat-card__desc {
  color: var(--color-fg-on-dark);
}

/* Label-first variant — title comes first in the markup (moved
   above the value, not just visually reordered) and restyles from
   a heading into a small uppercase kicker. A bold h4 sitting
   directly above a 48px stat value competes with it for attention;
   a small muted label reads as "here's what this number is," then
   gets out of the way. Same typographic recipe as the page's other
   pre-headlines (.gs-wgs-section__eyebrow in landing.css). */
.gs-stat-card--label-first .gs-stat-card__title {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin: 0 0 0.5rem;
}

/* Per-card source line — small, muted, icon + "Source: X". Reuses
   the coral solid-circle icon badge already defined for the
   section-level sources line (.gs-landing-sources__icon in
   landing.css) so a per-card source looks like a smaller sibling of
   that pattern, not an unrelated new one. */
.gs-stat-card__source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  margin: 1rem 0 0;
}

.gs-stat-card__value {
  font-size: 3rem; /* 48px — bigger than --text-h2 for prominent stat presence */
  font-weight: var(--weight-bold);
  color: var(--color-brand-accent); /* coral — stat as brand-editorial moment */
  line-height: var(--leading-tight);
  margin-bottom: 1rem;
}

.gs-stat-card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: pretty; /* avoid orphan last words (better than balance for this) */
}

.gs-stat-card__desc {
  color: var(--color-fg-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  /* `pretty` specifically targets orphan avoidance, unlike `balance`
     which evenly distributes (and can leave orphans depending on words) */
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .gs-stat-card {
    /* Tighter padding on mobile so content fills the card
       instead of swimming in whitespace */
    padding: 1.5rem 1.25rem;
  }
}