/* ============================================================
   CAAT Stat / KPI — Component
   AEM client library: caat/components/stat/clientlibs/css
   Depends on: tokens.css (consumes SEMANTIC tokens)

   A figure + label (e.g. "$4.2B · Plan assets"). Use a single
   .caat-stat standalone, or group several in a .caat-stat-strip
   (the dark band beneath a hero). Preferred markup uses
   __value/__label; the legacy strong/span API is also supported.
   ============================================================ */

/* ── Single stat (light context) ───────────────────────────── */
.caat-stat { text-align: center; }
.caat-stat__value {
  display: block;
  font-size: var(--caat-font-size-2xl);
  font-weight: var(--caat-weight-black);
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--caat-color-text-heading);
}
.caat-stat__value small { font-size: .65em; font-weight: 400; }
.caat-stat__label {
  font-size: var(--caat-font-size-xs);
  color: var(--caat-color-text-muted);
}

/* Larger value sizes for hero/headline figures.
   Two APIs: a wrapper modifier (.caat-stat--lg) sizes the value within a
   .caat-stat; an element modifier (.caat-stat__value--lg) sizes a value used
   standalone — e.g. composed inside a Card body without a .caat-stat wrapper. */
.caat-stat--lg .caat-stat__value,
.caat-stat__value--lg { font-size: var(--caat-font-size-4xl); }
.caat-stat--xl .caat-stat__value,
.caat-stat__value--xl { font-size: 3rem; }  /* intentional: between 4xl and 5xl */

/* ── Stat card ─────────────────────────────────────────────────
   A stat presented as a filled card, with an optional leading
   "context" word ("only", "despite") — for big comparison figures.
   Composes the base .caat-stat (value + label). */
.caat-stat-card {
  padding: var(--caat-space-6);
  border-radius: var(--caat-radius-lg);
  background: var(--caat-color-bg-brand);
  color: var(--caat-color-text-inverse);
}
.caat-stat-card--green { background: var(--caat-color-action-secondary); } /* green-700, AA */
.caat-stat-card--blue  { background: var(--caat-color-bg-brand); }          /* blue-900 */
.caat-stat-card__context {
  display: block;
  font-size: var(--caat-font-size-xs);
  opacity: .7;
  margin-bottom: var(--caat-space-1);
}
.caat-stat-card .caat-stat__value { font-size: 3rem;  /* matches --xl */ color: var(--caat-color-text-inverse); }
.caat-stat-card .caat-stat__label { color: var(--caat-color-text-inverse-muted); }

/* Optional icon slot above the stat value.
   Show the icon only on desktop; the stat strip stacks at tablet/mobile widths. */
.caat-stat__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto var(--caat-space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--caat-color-text-inverse);
  font-size: 1rem;
  line-height: 1;
}
.caat-stat__icon i { line-height: 1; }

/* ── Strip — a row of stats with dividers (dark band, e.g. hero) ──
   RULE: maximum 3 stats per strip. Four columns break at tablet
   widths (768–991px) — labels collide with the dividers. Authoring
   validation rejects a 4th; flex-wrap below is only the defensive
   degradation for non-conforming content. */
.caat-stat-strip {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--caat-space-4);
  justify-content: center;
  background: var(--caat-color-bg-brand);
  color: var(--caat-color-text-inverse);
  padding: 1.25rem 2rem;
  margin: 0;
  border-radius: 0;
}
.caat-stat-strip--bleed {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.caat-stat-strip--bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--caat-color-bg-brand);
  z-index: -1;
}
.caat-stat-strip .caat-stat,
.caat-stat-item {
  text-align: center;
  flex: 1;
  padding: 0 1.5rem;
  position: relative;
}
.caat-stat-strip .caat-stat + .caat-stat::before,
.caat-stat-item + .caat-stat-item::before {
  content: "";
  position: absolute;
  left: 0; top: 15%; height: 70%;
  width: 1px;
  background: var(--caat-color-border-inverse);
}
/* On the dark strip the value inherits white; the label is dimmed white */
.caat-stat-strip .caat-stat__value { color: var(--caat-color-text-inverse); }
.caat-stat-strip .caat-stat__label { color: var(--caat-color-text-inverse-dim); }

/* ── Legacy element API (strong/label-span) — kept value-identical.
   Scoped to UN-CLASSED children only so it can never clobber the
   preferred __value/__label spans (a bare `span` selector used to
   shrink .caat-stat__value to label size inside .caat-stat-item). ── */
.caat-stat-item > strong {
  font-size: var(--caat-font-size-2xl);
  font-weight: var(--caat-weight-black);
  display: block;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.caat-stat-item > strong small {
  font-size: .65em;
  font-weight: 400;
}
.caat-stat-item > span:not(.caat-stat__value):not(.caat-stat__label) {
  font-size: var(--caat-font-size-xs);
  color: var(--caat-color-text-inverse-dim);
}
/* Preferred API inside a stat-item inherits the strip colour rules */
.caat-stat-item .caat-stat__value { color: var(--caat-color-text-inverse); }
.caat-stat-item .caat-stat__label { color: var(--caat-color-text-inverse-dim); }

@media (min-width: 992px) {
  .caat-stat__icon { display: inline-flex; }
}

@media (max-width: 575.98px) {
  .caat-stat-strip { flex-direction: column; gap: 1rem; padding: 1.25rem 1.5rem; }
  .caat-stat-strip .caat-stat + .caat-stat::before,
  .caat-stat-item + .caat-stat-item::before {
    width: 70%; height: 1px;
    top: -0.5rem; left: 15%;
  }
}