/* ---------- Base (Grid everywhere) ---------- */
.animated-statistics {
  display: grid;
  gap: px;
  align-items: stretch; /* equal heights per row */
}

/* ---------- Column Variants ---------- */
.animated-statistics--2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.animated-statistics--3-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.animated-statistics--4-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Card + Header ---------- */
.animated-statistics__card {
  display: flex;
  flex-direction: column;       /* vertical layout */
  height: 100%;                 /* stretch to row height */
  margin: 0;                    /* spacing handled by grid gap */
  width: 100%;                  /* fill grid cell (equal widths per row) */
  max-width: px;
  min-height: px;
  justify-self: stretch;
}

/* ⬇️ Pin the content to the TOP so the number line starts at the same height */
.animated-statistics__card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* TOP aligned (key change) */
  /* spacing from style fields */
  padding-top: px;
  padding-right: px;
  padding-bottom: px;
  padding-left: px;
}

/* number row */
.animated-statistics__card-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5rem;         /* consistent space under number row */
}
.animated-statistics__card-header.reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* snug percent sign if separate element */
.animated-statistics__symbol { margin-left: 0.05em; }

/* equal-width digits for nicer alignment across cards */
.animated-statistics__card-number { font-variant-numeric: tabular-nums; }

/* ---------- Tablet: 3→2, 4→2 ---------- */
@media (max-width: 1024px) {
  .animated-statistics--3-col,
  .animated-statistics--4-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .animated-statistics__card {
    max-width: px;
  }
}

/* ---------- Mobile: 1 column + optional horizontal centering ---------- */
@media (max-width: 767px) {
  .animated-statistics--2-col,
  .animated-statistics--3-col,
  .animated-statistics--4-col { grid-template-columns: 1fr; }

  .animated-statistics__card {
    max-width: px;
    justify-self: center; /* center the card block */
  }

  {% if module.styles.layout.center_mobile %}
    /* center text horizontally but keep TOP vertical alignment */
    .animated-statistics__card-content { margin: 0 auto; text-align: center; }
    .animated-statistics__card-header { justify-content: center; }
  {% else %}
    .animated-statistics__card-content { margin: 0 auto; text-align: left; }
    .animated-statistics__card-header { justify-content: flex-start; }
  {% endif %}
}

/* Force top-aligned content inside every card */
.animated-statistics .animated-statistics__card-content{
  /* win against any lingering centering rules */
  display: grid !important;          /* grid is great for simple vertical stacking */
  align-content: start !important;    /* pin to TOP */
  justify-items: start;               /* keep left edge consistent (desktop) */
  row-gap: 0.5rem;                    /* consistent gap between number & description */
}

/* Make the header (number row) take no extra space and start flush */
.animated-statistics .animated-statistics__card-header{
  margin: 0 !important;
  padding: 0 !important;
  align-items: baseline;
}

/* Normalize number metrics so different digits don’t nudge things */
.animated-statistics .animated-statistics__card-number{
  font-variant-numeric: tabular-nums;
  line-height: 1;          /* remove extra leading variance */
  margin: 0;               /* kill accidental margins from theme */
}

/* Tighten the % if it’s a separate element */
.animated-statistics .animated-statistics__symbol{
  margin-left: 0.05em;
}

/* Normalize the description block produced by inline_rich_text */
.animated-statistics .animated-statistics__card-content > div{
  width: 100%;
  margin: 0;               /* prevent top-margin bumps */
}
.animated-statistics .animated-statistics__card-content p{
  margin: 0;               /* theme RTEs often add ~1em; zero it out */
}

/* Mobile centering can stay, but keep TOP anchoring */
@media (max-width: 767px){
  .animated-statistics .animated-statistics__card-content{
    justify-items: center; /* center horizontally on mobile if you want */
    text-align: center;
    align-content: start !important; /* still top pinned */
  }
  .animated-statistics .animated-statistics__card-header{
    justify-content: center;
  }
}
/* ---- Hard center overrides (place LAST in your CSS) ---- */

/* Always center on mobile */
@media (max-width: 767px) {
  .animated-statistics .animated-statistics__card-content {
    display: flex !important;        /* ensure flex column */
    flex-direction: column !important;
    align-items: center !important;   /* center children horizontally */
    text-align: center !important;    /* center text */
  }
  .animated-statistics .animated-statistics__card-header {
    width: 100% !important;
    justify-content: center !important; /* center number + % row */
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* If the editor toggles "Center Content (All Viewports)", center everywhere */
{% if module.styles.layout.center_all %}
.animated-statistics .animated-statistics__card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.animated-statistics .animated-statistics__card-header {
  width: 100% !important;
  justify-content: center !important;
}
{% endif %}