/* stats-1 — purple pill; upright script numbers; layout by data-items */

.stats-1 {
  background: var(--color-bg, #fff);
  padding: 0.75rem var(--page-gutter) 3.25rem;
}

/* Hidden items: controlled by data-show-hidden (live + editor) */
html[data-mode="block"] .stats-1__item[data-block-visible="false"],
html[data-mode="structure"] .stats-1__item[data-block-visible="false"],
html[data-mode="edit"] .stats-1__item[data-block-visible="false"],
html[data-mode="live"] .stats-1__item[data-block-visible="false"],
html[data-public="1"] .stats-1__item[data-block-visible="false"] {
  display: none;
}

html[data-mode="block"][data-show-hidden="1"] .stats-1__item[data-block-visible="false"],
html[data-mode="structure"][data-show-hidden="1"] .stats-1__item[data-block-visible="false"],
html[data-mode="edit"][data-show-hidden="1"] .stats-1__item[data-block-visible="false"],
html[data-mode="live"][data-show-hidden="1"] .stats-1__item[data-block-visible="false"] {
  display: block;
  opacity: 0.28;
  outline: 1px dashed color-mix(in srgb, var(--chrome-border, #94a3b8) 70%, transparent);
}

.stats-1__bar {
  max-width: var(--page-max);
  margin: 0 auto;
  background: #7c3690;
  border-radius: var(--radius-pill);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 0.65rem;
  padding: 1.15rem 1.25rem 1.25rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, #5a2470 28%, transparent);
}

/* Number — upright script (no italic / no rotate). Size ≈ D1 at --page-max */
.stats-1__item strong,
.stats-1__item strong .flow-t {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.85rem, 8cqi, 2.25rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  transform: none;
}

.stats-1__item strong:has(.stats-1__digit) {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  width: 100%;
}

.stats-1__digit {
  display: inline-block;
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

/* Lit from the right as the count-up reaches each place (1s → 10s → 100s…). */
.stats-1__digit.is-on {
  opacity: 1;
}

/* Label only — direct child span (NOT .flow-t inside strong) */
.stats-1__item > span,
.stats-1__item > span.flow-t {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-sans, inherit);
  font-size: clamp(0.72rem, 2.4cqi, 0.875rem);
  font-weight: 500;
  font-style: normal;
  opacity: 0.96;
  line-height: 1.2;
  text-wrap: balance;
}

/* “a szám megjelenésekor”: dim until count-up hits 50%, then fade in 1s */
.stats-1__item > span.is-label-wait,
.stats-1__item > span.flow-t.is-label-wait {
  opacity: 0.25;
  transition: none;
}

.stats-1__item > span.is-label-in,
.stats-1__item > span.flow-t.is-label-in {
  opacity: 0.96;
  transition: opacity 1s ease;
}

@container page (max-width: 767px) {
  .stats-1 {
    padding: 0.55rem var(--page-gutter) 2rem;
  }

  .stats-1__bar {
    gap: 0.75rem 0.45rem;
    padding: 0.95rem 0.85rem 1.05rem;
    border-radius: 1.75rem;
  }

  .stats-1[data-items="3"] .stats-1__bar,
  .stats-1[data-items="5"] .stats-1__bar,
  .stats-1[data-items="7"] .stats-1__bar,
  .stats-1[data-items="9"] .stats-1__bar {
    grid-template-columns: repeat(1, 1fr);
  }

  .stats-1[data-items="4"] .stats-1__bar,
  .stats-1[data-items="6"] .stats-1__bar,
  .stats-1[data-items="8"] .stats-1__bar,
  .stats-1[data-items="10"] .stats-1__bar,
  .stats-1:not([data-items]) .stats-1__bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-1__item strong,
  .stats-1__item strong .flow-t {
    font-size: clamp(1.35rem, 8cqi, 1.75rem);
  }
}

@container page (min-width: 768px) {
  .stats-1 {
    padding: 1rem var(--page-gutter) 3.75rem;
  }

  .stats-1__bar {
    gap: 0.35rem;
    padding: 1.25rem 1.75rem 1.35rem;
  }

  /* Ideal column layouts for 5–10 items (and nearby counts) */
  .stats-1[data-items="5"] .stats-1__bar,
  .stats-1:not([data-items]) .stats-1__bar {
    grid-template-columns: repeat(5, 1fr);
  }

  .stats-1[data-items="6"] .stats-1__bar {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.28rem;
    padding-inline: 1.35rem;
  }

  .stats-1[data-items="7"] .stats-1__bar {
    grid-template-columns: repeat(7, 1fr);
    gap: 0.22rem;
    padding-inline: 1.15rem;
  }

  .stats-1[data-items="8"] .stats-1__bar {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem 0.35rem;
  }

  .stats-1[data-items="9"] .stats-1__bar {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem 0.45rem;
  }

  .stats-1[data-items="10"] .stats-1__bar {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem 0.35rem;
  }

  .stats-1__item strong,
  .stats-1__item strong .flow-t {
    font-size: clamp(1.55rem, 3.2cqi, 2.25rem);
  }

  .stats-1[data-items="6"] .stats-1__item strong,
  .stats-1[data-items="6"] .stats-1__item strong .flow-t,
  .stats-1[data-items="7"] .stats-1__item strong,
  .stats-1[data-items="7"] .stats-1__item strong .flow-t {
    font-size: clamp(1.25rem, 2.6cqi, 1.85rem);
  }

  .stats-1[data-items="6"] .stats-1__item > span,
  .stats-1[data-items="6"] .stats-1__item > span.flow-t,
  .stats-1[data-items="7"] .stats-1__item > span,
  .stats-1[data-items="7"] .stats-1__item > span.flow-t {
    font-size: clamp(0.65rem, 1.8cqi, 0.78rem);
  }
}