/**
 * Stats 2026 — new section matching a supplied design reference: headline+
 * image row on top, a copy column next to a divider-separated stat row
 * list below (large number left, label right). Dark is this site's
 * baseline; light-mode.css overrides the muted text/divider colors.
 */

/* REQUESTED CHANGE: rather than a full-bleed band, the background now
   lives on the section-holder itself — a rounded, padded "box" inset from
   the viewport edges (the container's own max-width/centering already
   does the outer inset; this just adds room to breathe inside it). Same
   "raised surface" tone already established elsewhere in this theme (the
   old s002 stat cards' #1c1e26 fill) — light-mode.css flips it to that
   convention's light counterpart (#f2f2f2). */
.stats2026 .section-holder {
  background-color: #1c1e26;
  border-radius: 1.5rem;
  padding: 4rem;
}

@media screen and (max-width: 767px) {
  .stats2026 .section-holder {
    padding: 2rem 1.5rem;
    border-radius: 1rem;
  }
}

.stats2026-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  /* border-top: 1px solid rgba(255, 255, 255, .15); */
}

.stats2026-headline {
  flex: 1;
  max-width: 32em;
  font-family: Spectral, serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.stats2026-top-image {
  flex: 0 0 20em;
  width: 20em;
  aspect-ratio: 1 / 1;
  border-radius: .5em;
  overflow: hidden;
  position: relative;
}

/* Parallax mask technique (stellae Global Parallax Setup): this inner
   wrapper is taller than its masked parent so global-parallax.js has room
   to shift it (yPercent) without ever exposing empty space at the edges. */
.stats2026-top-image__wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
}

.stats2026-top-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stats2026-bottom {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  padding-top: 3rem;
}

.stats2026-copy {
  flex: 0 0 18em;
  max-width: 18em;
}

.stats2026-copy p {
  color: var(--w80);
  font-size: 1em;
  line-height: 1.6;
  margin: 0;
}

.stats2026-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stats2026-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75em 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.stats2026-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.stats2026-row__number {
  font-family: Spectral, serif;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 1;
  flex: none;
}

/* Number Odometer (stellae) mechanics — scroll-triggered digit roll.
   Ported as-is; .odometer-h1's own font sizing skipped since
   .stats2026-row__number above already covers font/size/weight. */
[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"],
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em;
  margin: -0.05em;
  /* BUG FIX: static spans whose entire content is a single space character
     (e.g. the gap in "USD 10,2 Milliarden") were getting whitespace-collapsed
     by the browser since they're the sole content of an inline-block —
     visually disappearing and running the surrounding words together. */
  white-space: pre;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

.stats2026-row__label {
  flex: 0 0 18em;
  max-width: 18em;
  text-align: right;
  color: var(--w80);
  font-family: Karla, sans-serif;
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
}

@media screen and (max-width: 1023px) {
  .stats2026-top {
    flex-direction: column;
  }

  .stats2026-top-image {
    width: 100%;
    flex: none;
  }

  .stats2026-bottom {
    flex-direction: column;
    gap: 2rem;
  }

  .stats2026-copy {
    flex: none;
    max-width: none;
  }

  .stats2026-list {
   width:100%;
  }
  .stats2026-copy p{
    margin-bottom:0;
    font-size:1.75em;
  }
  .stats2026-bottom {
   padding-top:0;
  }
  .stats2026-row {
    flex-wrap: wrap;
  }

  .stats2026-row__number {
    font-size: 3.5rem;
  }

  .stats2026-row__label {
    flex: none;
    max-width: none;
    text-align: left;
  }
}