/* =========================================================================
   Block · Card / Stat — Figma 6864:73 (page Global: Blocks)
   White, radius/box, spacing/card-padding; Content at the top, the Stat
   at the foot (space-between).
     Size=Large → .b-card-stat--large   Heading/Card; Content spacing/stack-m apart
     Size=Small → .b-card-stat--small   Heading/Card Small; Content spacing/stack-l apart
     (code only) → .b-card-stat--auto   Small up to 1391, Large from 1392
     ground=blue → .b-card-stat--blue   Blue, white text (a page fill override;
                   the Eyebrow keeps its own colour, Dark, as Figma draws it)
   The Stat: value (Heading/Section) over Body/Default, spacing/stack-m apart.
   Raw in Figma: the gap between Content and Stat, 40 (only a minimum here,
   the two are pushed apart).
   ========================================================================= */
.b-card-stat {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-40);
  overflow: hidden;
  padding: var(--spacing-card-padding);
  border-radius: var(--radius-box);
  background: var(--color-white);
  color: var(--color-black);
}
.b-card-stat__content,
.b-card-stat__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-m);
}
.b-card-stat--small .b-card-stat__content,
.b-card-stat--auto .b-card-stat__content { gap: var(--spacing-stack-l); }
@media (min-width: 1392px) {
  .b-card-stat--auto .b-card-stat__content { gap: var(--spacing-stack-m); }
  /* Large's heading: Heading/Card (the template writes Card Small's class) */
  .b-card-stat--auto .b-card-stat__heading {
    font-size: var(--heading-card-font-size);
    line-height: var(--heading-card-line-height);
  }
  .b-card-stat--auto .b-card-stat__heading { text-wrap: balance; }
}
/* Large: Figma's line breaks in Heading/Card read as balanced lines (our
   face metrics would otherwise pull a word up); Small's are greedy */
.b-card-stat--large .b-card-stat__heading { text-wrap: balance; }
.b-card-stat--blue { background: var(--color-blue); color: var(--color-white); }
.b-card-stat__content > *, .b-card-stat__description { align-self: stretch; }