/* pxe_counter — frontend styles. Layout variants are class hooks on the container. */

/* Screen-reader-only final value: the animated digits are aria-hidden so assistive
   tech announces the final number once instead of every animation frame. */
.pxe-counter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pxe-counter-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
.pxe-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25em;
  text-align: center;
  line-height: 1.05;
}
.pxe-counter__number {
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  font-variant-numeric: tabular-nums;
}
.pxe-counter__prefix,
.pxe-counter__suffix {
  font-size: .6em;
  font-weight: 600;
  opacity: .85;
}
.pxe-counter__label {
  font-size: clamp(.85rem, .8rem + .3vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .8;
}

/* layout variants */
.pxe-counter.layout-1 .pxe-counter__number { color: var(--bs-primary, #2E4A66); }
.pxe-counter.layout-2 {
  flex-direction: row;
  align-items: baseline;
  gap: .5em;
}
.pxe-counter.layout-3 .pxe-counter__number { font-weight: 800; letter-spacing: -.02em; }