/* -------------------------------------------------------------------------
   StatFlow Group — responsive counter grid
   ------------------------------------------------------------------------- */

.statflow-group {
  width: 100%;
}

.statflow-group__grid {
  display: grid;
  width: 100%;
  gap: var(--statflow-column-gap, 32px);
}

/* Column presets (desktop) */
.statflow-columns-auto.statflow-group__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.statflow-columns-2.statflow-group__grid {
  grid-template-columns: repeat(2, 1fr);
}

.statflow-columns-3.statflow-group__grid {
  grid-template-columns: repeat(3, 1fr);
}

.statflow-columns-4.statflow-group__grid {
  grid-template-columns: repeat(4, 1fr);
}

.statflow-columns-5.statflow-group__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Alignment */
.statflow-align-left.statflow-group__grid {
  justify-items: start;
}

.statflow-align-center.statflow-group__grid {
  justify-items: center;
  justify-content: center;
}

.statflow-align-right.statflow-group__grid {
  justify-items: end;
  justify-content: end;
}

/* Child item positioning for dividers */
.statflow-group__grid > .statflow_counter {
  position: relative;
  width: 100%;
}

.statflow-align-center.statflow-group__grid > .statflow_counter {
  justify-self: center;
}

/* Line dividers */
.statflow-dividers-line.statflow-group__grid > .statflow_counter:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--statflow-column-gap, 32px) / -2);
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: var(--statflow-divider-color, rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

/* Dot dividers */
.statflow-dividers-dots.statflow-group__grid > .statflow_counter:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--statflow-column-gap, 32px) / -2);
  transform: translate(50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--statflow-divider-color, rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

/* Tablet: 2 columns */
@media (max-width: 980px) {
  .statflow-columns-auto.statflow-group__grid,
  .statflow-columns-3.statflow-group__grid,
  .statflow-columns-4.statflow-group__grid,
  .statflow-columns-5.statflow-group__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .statflow-group__grid {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .statflow-dividers-line.statflow-group__grid > .statflow_counter::after,
  .statflow-dividers-dots.statflow-group__grid > .statflow_counter::after {
    display: none;
  }
}