/* Automic Stats 01
   All values come from CSS custom properties set inline in module.html. */

.automic-stats {
  background-color: var(--as-section-bg, transparent);
  background-image: var(--as-section-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--as-section-pt, 40px) 20px var(--as-section-pb, 40px);
  border-radius: var(--as-radius, 16px);
}

.automic-stats__container {
  background-color: var(--as-container-bg, #F0FBF6);
  
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--as-max-width, 1200px);
  padding: var(--as-pad-y, 32px) var(--as-pad-x, 24px);
}

/* Flex rather than grid so an incomplete last row stays centred
   (e.g. 5 stats on tablet = 3 + 2). */
.automic-stats__grid {
  --as-cols: var(--as-cols-desktop, 4);
  column-gap: var(--as-col-gap, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: var(--as-row-gap, 32px);
}

.automic-stats__item {
  flex: 0 0 calc((100% - (var(--as-cols) - 1) * var(--as-col-gap, 24px)) / var(--as-cols));
  container-type: inline-size; /* lets the number size itself to its column */
  margin: 0;
  min-width: 0;
  padding: 0;
  text-align: var(--as-align, center);
}

.automic-stats__value {
  color: var(--as-num-color, #13B47F);
  font-size: 56px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--as-num-weight, 700);
  letter-spacing: -2px;
  word-spacing: -8px;
  line-height: 1.1;
  margin: 0;
}

.automic-stats__affix {
  color: var(--as-affix-color, inherit);
  font-size: 1em; /* same size as the number */
  white-space: pre; /* keeps spaces in suffixes like " in 3" */
}

.automic-stats__label {
  color: var(--as-label-color, #1F2933);
  font-size: 16px;
  font-weight: var(--as-label-weight, 400);
  line-height: 1.4;
  margin: var(--as-label-gap, 8px) 0 0;
}

/* Screen readers get the final value once, not every animation frame */
.automic-stats__sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Fluid number size: 28% of the column width, between 32px and 56px.
   Keeps values like 1,200+ on one line whether there are 2 stats or 6. */
@supports (font-size: 1cqi) {
  .automic-stats__value {
    font-size: clamp(32px, 28cqi, 56px);
  }
}

/* Tablet: max 3 per row */
@media (max-width: 991px) {
  .automic-stats__grid {
    --as-cols: var(--as-cols-tablet, 3);
  }

  .automic-stats__label {
    font-size: 15px;
  }
}

/* Fallback sizes for older browsers without container units */
@supports not (font-size: 1cqi) {
  @media (max-width: 991px) {
    .automic-stats__value { font-size: 46px; }
  }
  @media (max-width: 767px) {
    .automic-stats__value { font-size: 36px; }
  }
}

/* Mobile: 2 per row */
@media (max-width: 767px) {
  .automic-stats {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    margin: 0 auto;
  }

  .automic-stats__container {
    padding: var(--as-pad-y, 32px) min(var(--as-pad-x, 24px), 16px);
  }

  .automic-stats__grid {
    --as-cols: var(--as-cols-mobile, 2);
    column-gap: min(var(--as-col-gap, 24px), 16px);
  }

  .automic-stats__item {
    flex-basis: calc((100% - (var(--as-cols) - 1) * min(var(--as-col-gap, 24px), 16px)) / var(--as-cols));
  }

  .automic-stats__label {
    font-size: 14px;
  }
}