/* Widget 31 (design system "data-story module"): one finding, one big number, bars that add up,
   and a footer that says what was counted. Bars use the brand colour on the wash; no decoration. */

.hc-story {
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-card, 16px);
  background: var(--hc-card);
  padding: 22px;
  margin: 28px 0;
}

.hc-story .hc-story__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-accent);
  margin: 0 0 8px;
}

.hc-story .hc-story__figure {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--hc-text);
  margin: 0;
}

.hc-story .hc-story__claim {
  font-size: 17px;
  line-height: 1.5;
  color: var(--hc-text);
  margin: 6px 0 16px;
}

.hc-story .hc-story__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hc-story .hc-story__bars li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label value" "bar bar";
  gap: 4px 12px;
  font-size: 15px;
  color: var(--hc-body);
}

.hc-story .hc-story__label {
  grid-area: label;
}
.hc-story .hc-story__label a {
  color: inherit;
}
.hc-story .hc-story__value {
  grid-area: value;
  font-weight: 600;
  color: var(--hc-text);
}

.hc-story .hc-story__bar {
  grid-area: bar;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(var(--hc-brand), var(--hc-brand)) no-repeat left / max(var(--hc-v), 2px) 100%,
    var(--hc-wash);
}

.hc-story .hc-story__foot {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-muted);
  margin-top: 14px;
}

@media (max-width: 600px) {
  .hc-story .hc-story__figure {
    font-size: 36px;
  }
}