/*
  statCard — one card that calls attention to a number (component.json statCard, 13 tokens).
  Two slots: an optional media slot on top (full width, no padding) and the content slot (the card's padding).
  REVISED by Vivek 2026-10-18 (6sense page, site-wide): no fill (the card shows the section behind it) and a 1px
  outline in the number's own ink. Was a fill a shade lighter or darker than the ground, no border: so quiet
  the cards looked like default boxes. No shadow. Text inside is always left-aligned.
  Two number sizes: a card with a row to itself gets the large number (61px, down to 44px on phones, where every card has its own row); cards that
  share a row (trio, the two halves of a summary) get the smaller one (49px). See .stat-card__number below.
*/

.stat-card {
  border: var(--stat-card-border-width-all) solid var(--stat-card-border-all);
  border-radius: var(--stat-card-radius-all);
  overflow: hidden; /* clips a media slot's top corners to the card's radius */
}

.stat-card__content {
  padding: var(--stat-card-content-padding-all);
  display: flex;
  flex-direction: column;
}

/* optional: a date or cohort label above the number, only to tell sibling cards apart */
.stat-card__date {
  font-family: var(--stat-card-date-label-text-style-all-font-family);
  font-size: var(--stat-card-date-label-text-style-all-font-size);
  font-weight: var(--stat-card-date-label-text-style-all-font-weight);
  line-height: var(--stat-card-date-label-text-style-all-line-height);
  letter-spacing: var(--stat-card-date-label-text-style-all-letter-spacing);
  text-transform: uppercase;
  color: var(--stat-card-supporting-content-all);
  margin-block-end: var(--stat-card-date-label-gap-all);
}

/* the number, plus at most one change word ("growth") on the same line, same style */
.stat-card__number {
  font-family: var(--stat-card-number-text-style-all-font-family);
  font-size: var(--stat-card-number-text-style-all-font-size);
  font-weight: var(--stat-card-number-text-style-all-font-weight);
  line-height: var(--stat-card-number-text-style-all-line-height);
  color: var(--stat-card-number-content-all);
}
/* cards that share a row get the smaller number (from 768px up; below that every card has its own row) */
@media (width >= 768px) {
  .stat-card-group--trio .stat-card__number,
  .stat-card-group--summary > :not(:first-child) .stat-card__number {
    font-family: var(--stat-card-number-text-style-secondary-all-font-family);
    font-size: var(--stat-card-number-text-style-secondary-all-font-size);
    font-weight: var(--stat-card-number-text-style-secondary-all-font-weight);
    line-height: var(--stat-card-number-text-style-secondary-all-line-height);
  }
}

.stat-card__caption {
  font-family: var(--stat-card-caption-text-style-all-font-family);
  font-size: var(--stat-card-caption-text-style-all-font-size);
  font-weight: var(--stat-card-caption-text-style-all-font-weight);
  line-height: var(--stat-card-caption-text-style-all-line-height);
  color: var(--stat-card-supporting-content-all);
  margin-block-start: var(--stat-card-number-gap-all);
  text-wrap: balance; /* avoids two-word widows like "in use" */
}

/* optional: the workings zone showing the math (the cost card only, today) */
.stat-card__workings {
  font-family: var(--stat-card-workings-text-style-all-font-family);
  font-size: var(--stat-card-workings-text-style-all-font-size);
  font-weight: var(--stat-card-workings-text-style-all-font-weight);
  line-height: var(--stat-card-workings-text-style-all-line-height);
  color: var(--stat-card-supporting-content-all);
  margin-block-start: var(--stat-card-caption-gap-all);
}