/* --------------------------------------------------------------------------
   Reset — scoped to widget
   -------------------------------------------------------------------------- */
.infographic,
.infographic * {
  box-sizing: border-box;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
.infographic ul,
.infographic ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.infographic li {
  margin: 0;
  padding: 0;
}
.infographic p {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
.infographic strong {
  font-weight: 700;
}
.infographic a {
  text-decoration: none;
  color: inherit;
}
.infographic img {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Outer container
   Base font: 1.5rem / 300 — everything inherits from here
   -------------------------------------------------------------------------- */
.infographic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1rem 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: #3C3C3C;
}

/* --------------------------------------------------------------------------
   Callout numbers — standalone/own line
   -------------------------------------------------------------------------- */
.infographic .num {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */

/* Dark background — add to .item */
.infographic .item.dark {
  background: #3C3C3C;
  color: #fff;
}
.infographic .item.dark .num {
  color: #FFBB00;
}
.infographic .item.dark .stat:not(:last-child) {
  border-right-color: #888;
}

/* Border — add to .item */
.infographic .item.border {
  border: 1px solid #888;
  padding: 2rem;
}

/* Padded — same spacing as .border but no visible border */
.infographic .item.padded {
  padding: 2rem;
}

/* Icon list layout — add to .item */
.infographic .item.icon-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  padding: 1rem 2rem;
}

/* Chart stat layout — add to .item */
.infographic .item.chart-stat {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
}

/* Number grid layout — add to .item */
.infographic .item.number-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   Icon col
   -------------------------------------------------------------------------- */
.infographic .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: #FFBB00;
  padding-right: 1rem;
  border-right: 1px solid #ccc;
}

/* Hide the nbsp placeholder used to prevent CMS from stripping empty spans */
.infographic .icon .placeholder {
  display: none;
}

.infographic .text {
  padding-left: 1rem;
}

/* --------------------------------------------------------------------------
   Chart stat internals
   -------------------------------------------------------------------------- */
.infographic .primary-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2rem;
  border-right: 1px solid #888;
  align-self: stretch;
  justify-content: center;
}

.infographic .chart-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding-left: 2rem;
}

/* Pie chart — each variable sets the WIDTH of that slice (not a cumulative
   endpoint). Private --_ accumulators handle the math internally.
   Set one variable per slice; values should sum to 100%.
   If they don't, the 8th color fills any remainder — a visible error signal.
   Example (2 slices): style="--a: 64%; --b: 36%;"
   Example (4 slices): style="--a: 40%; --b: 35%; --c: 15%; --d: 10%;"
   ========================================================================== */
.infographic .chart {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  --_b: calc(var(--a, 0%) + var(--b, 0%));
  --_c: calc(var(--_b)    + var(--c, 0%));
  --_d: calc(var(--_c)    + var(--d, 0%));
  --_e: calc(var(--_d)    + var(--e, 0%));
  --_f: calc(var(--_e)    + var(--f, 0%));
  --_g: calc(var(--_f)    + var(--g, 0%));
  background: conic-gradient(
    #FFBB00 0%         var(--a, 0%),
    #3C3C3C var(--a, 0%) var(--_b),
    #888    var(--_b)  var(--_c),
    #fc6    var(--_c)  var(--_d),
    #555    var(--_d)  var(--_e),
    #bbb    var(--_e)  var(--_f),
    #ffeeaa var(--_f)  var(--_g),
    #222    var(--_g)  100%
  );
}

/* Segment color classes — apply to .chart-key in legend markup */
.infographic .segment-1 { background: #FFBB00; color: #000; }
.infographic .segment-2 { background: #3C3C3C; color: #fff; }
.infographic .segment-3 { background: #888;    color: #000; }
.infographic .segment-4 { background: #fc6;    color: #000; }
.infographic .segment-5 { background: #555;    color: #fff; }
.infographic .segment-6 { background: #bbb;    color: #000; }
.infographic .segment-7 { background: #ffeeaa; color: #000; }
.infographic .segment-8 { background: #222;    color: #fff; }

/* Donut variant — add to .chart */
.infographic .chart.donut::after {
  content: '';
  display: block;
  width: 65%;
  height: 65%;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.infographic .chart-legend {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 12px;
  align-items: center;
}

.infographic .chart-legend li {
  display: contents;
}

.infographic .chart-key {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 1rem;
  font-weight: 400;
}

.infographic .chart-legend li > .label {
  font-size: .875rem;
  font-weight: 400;
  color: #3C3C3C;
}

.infographic .stat-full {
  grid-column: 1 / -1;
  border-top: 1px solid #888;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Eyebrow / label
   -------------------------------------------------------------------------- */
.infographic .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}

.infographic .eyebrow-label {
  display: inline-block;
  background: #FFBB00;
  color: #000;
  padding: 5px 10px;
}

/* Base arrow — shared setup */
.infographic .eyebrow.arrow .eyebrow-label {
  position: relative;
}
.infographic .eyebrow.arrow .eyebrow-label::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

/* Down variant */
.infographic .eyebrow.arrow.down {
  padding-bottom: 12px;
}
.infographic .eyebrow.arrow.down .eyebrow-label::after {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #FFBB00;
}

/* Right variant */
.infographic .eyebrow.arrow.right .eyebrow-label {
  margin-right: 12px;
}
.infographic .eyebrow.arrow.right .eyebrow-label::after {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #FFBB00;
}

/* --------------------------------------------------------------------------
   Number grid internals
   -------------------------------------------------------------------------- */
.infographic .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 1rem;
  border-right: 1px solid #ccc;
}

.infographic .stat:first-child {
  padding-left: 0;
}

.infographic .stat:last-child {
  padding-right: 0;
  border-right: none;
}

/* Default 3-up grid, multi-row: edge treatment follows row position, not
   document position. Halves and two-one handle their own columns. */
.infographic .item.number-grid:not(.halves):not(.two-one) .stat:nth-of-type(3n+1) {
  padding-left: 0;
}
.infographic .item.number-grid:not(.halves):not(.two-one) .stat:nth-of-type(3n) {
  padding-right: 0;
  border-right: none;
}
/* Space between stat rows 2+ (margin, not row-gap, so eyebrow and
   .stat-full siblings are unaffected) */
.infographic .item.number-grid:not(.halves):not(.two-one) .stat:nth-of-type(n+4) {
  margin-top: 30px;
}

/* Two-up grid with full-width spanning last stat */
.infographic .item.number-grid.two-one {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
}
.infographic .item.number-grid.two-one .stat:nth-child(2n) {
  border-right: none;
}
.infographic .item.number-grid.two-one .stat:not(:last-child) {
  align-items: center;
  text-align: center;
}
.infographic .item.number-grid.two-one .stat:last-child {
  grid-column: 1 / -1;
  border-right: none;
  border-top: 1px solid #ccc;
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
}

/* --------------------------------------------------------------------------
   Zigzag separator — SVG data URI
   Tile: 12x7px. Filled path traces top edge (peak at x=6, y=0) then
   returns 1px lower along bottom edge — no stroke, no rounding artifacts.
   Transparent background — works on any color.
   -------------------------------------------------------------------------- */
.infographic .separator.zigzag {
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M0,6 L6,0 L12,6 L12,7 L6,1 L0,7 Z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left top;
}

/* --------------------------------------------------------------------------
   Large display number
   .num is 3rem / 700 (base). .num.xl mirrors legacy "large" treatment.
   -------------------------------------------------------------------------- */
.infographic .num.xl {
  font-size: 5rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Prefix / suffix span inside .num
   <p class="num xl stroke"><span>#</span>1</p>
   -------------------------------------------------------------------------- */
.infographic .num span {
  font-size: 85%;
  padding-right: 3px;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------
   Outlined number treatment
   .num.stroke         — gold fill, 1px black stroke
   .num.stroke.inverse — graphite fill, 2px gold stroke
   .num.stroke span    — stroke only, no fill
   .item.dark override removes stroke; restores span fill
   -------------------------------------------------------------------------- */
.infographic .num.stroke {
  color: #FFBB00;
  -webkit-text-stroke: 1px #000;
}
.infographic .num.stroke.inverse {
  color: #3C3C3C;
  -webkit-text-stroke: 1.5px #FFBB00;
}
.infographic .num.stroke span {
  color: transparent;
}
.infographic .item.dark .num.stroke {
  -webkit-text-stroke: unset;
}
.infographic .item.dark .num.stroke span {
  color: inherit;
}

/* Convenience: apply inverse stroke via .stat wrapper */
.infographic .stat.inverse .num.stroke {
  color: #3C3C3C;
  -webkit-text-stroke: 1.5px #FFBB00;
}

/* --------------------------------------------------------------------------
   Wide stat — side-by-side number / label layout
   Maps to legacy .infographic-item.large.
   -------------------------------------------------------------------------- */
.infographic .stat.wide {
  display: grid;
  grid-template-columns: fit-content(50%) 1fr;
  gap: 18px;
  align-items: center;
  container-type: inline-size;
}

.infographic .stat.wide p:not(.num) {
  font-family: 'kandal', serif;
  font-style: italic;
  font-size: 1.75rem;
  text-align: left;
}

@container (max-width: 340px) {
  .infographic .stat.wide p:not(.num) {
    font-size: 1.5rem;
  }
}
@container (max-width: 240px) {
  .infographic .stat.wide p:not(.num) {
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Number grid column variants
   .number-grid (existing) — 3-up / 33–33–33
   .number-grid.halves     — 2-up / 50–50
   -------------------------------------------------------------------------- */
.infographic .item.number-grid.halves {
  grid-template-columns: repeat(2, 1fr);
}

/* --------------------------------------------------------------------------
   Number grid — inherited number treatments
   Classes on .item.number-grid cascade to all child .num elements,
   so authors can style the container rather than each individual stat.
   -------------------------------------------------------------------------- */
.infographic .item.number-grid.xl .num {
  font-size: 5rem;
  font-weight: 800;
}

.infographic .item.number-grid.stroke .num {
  color: #FFBB00;
  -webkit-text-stroke: 1px #000;
}
.infographic .item.number-grid.stroke .num span {
  color: transparent;
}

.infographic .item.number-grid.stroke.inverse .num {
  color: #3C3C3C;
  -webkit-text-stroke: 1.5px #FFBB00;
}

.infographic .item.number-grid.dark.stroke .num {
  -webkit-text-stroke: unset;
}
.infographic .item.number-grid.dark.stroke .num span {
  color: inherit;
}

/* Smaller label text — add to .item.number-grid */
.infographic .item.number-grid.small-label .stat p:last-of-type:not(.num) {
  font-size: 1.25rem;
}

/* Center number and label — add to .item.number-grid */
.infographic .item.number-grid.centered .stat {
  align-items: center;
  text-align: center;
}

/* Hide dividers — add to .item.number-grid */
.infographic .item.number-grid.no-divider .stat {
  border-right: none;
  border-bottom: none;
}

/* Centered: even horizontal padding on every stat so content centers on the
   true cell center (desktop only; the stacked layout already uses 1rem 0).
   Second selector matches the specificity of the multi-row edge rules. */
@media (min-width: 501px) {
  .infographic .item.number-grid.centered .stat,
  .infographic .item.number-grid.centered:not(.halves):not(.two-one) .stat:nth-of-type(n) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Mobile — stack all columns at 500px
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {

  .infographic .num.xl,
  .infographic .item.number-grid.xl .num {
    font-size: 3rem;
  }

}

@media (max-width: 500px) {

  .infographic .num.xl,
  .infographic .item.number-grid.xl .num {
    font-size: 3.75rem;
  }

  .infographic .item.icon-list {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1rem;
  }

  .infographic .icon {
    border-right: none;
    border-bottom: 1px solid #ccc;
    padding-right: 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .infographic .text {
    padding-left: 0;
  }

  .infographic .item.chart-stat {
    grid-template-columns: 1fr;
  }

  .infographic .item.border,
  .infographic .item.padded {
    padding: 1rem;
  }

  .infographic .primary-stat {
    border-right: none;
    border-bottom: 1px solid #888;
    padding-right: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .infographic .chart-wrap {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .infographic .stat-full {
    flex-direction: column;
    gap: 4px;
  }

  .infographic .item.number-grid {
    grid-template-columns: 1fr;
  }

  .infographic .item.number-grid:not(.halves):not(.two-one) .stat:nth-of-type(n+4) {
    margin-top: 0;
  }

  .infographic .item.number-grid.halves,
  .infographic .item.number-grid.two-one {
    grid-template-columns: 1fr;
  }

  .infographic .item.number-grid.two-one .stat:last-child {
    border-top: none;
  }

  .infographic .stat {
    padding: 1rem 0;
    border-right: none;
    border-bottom: 1px solid #ccc;
    text-align: center;
  }

  .infographic .item.dark .stat {
    border-bottom-color: #555;
  }

  .infographic .stat:last-child {
    border-bottom: none;
  }

}