/* ==========================================================================
   Stats cards module — stibosystems.com
   Colours / max stat size come from module fields as scoped custom properties
   (set per instance in module.html). Fallbacks below = Stibo Systems palette.
   Columns are chosen by card count (data-count) so 2/3/4/5 cards never leave
   a stretched orphan; leftover cards stay the same width and centre.
   Font sizes scale with the card's own width (container query units).
   ========================================================================== */

.section-stats {
  --stats-gap: 24px;
  --stats-cols: 3;
  --stats-num-max: 74px;

  position: relative;
  overflow: hidden;
  background-color: var(--stats-bg, #F7FCFD);
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.section-stats *,
.section-stats *::before,
.section-stats *::after {
  box-sizing: border-box;
}

.stats-wrapper {
  max-width: 120rem;
  margin: 0 auto;
  padding: clamp(54px, 8vw, 74px) 54px clamp(40px, 5vw, 54px);
}

/* Title ------------------------------------------------------------------ */
.stats-title {
  margin: 0 0 clamp(2rem, 3vw, 3rem);
  color: var(--stats-title-color, #004F5F);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Grid ------------------------------------------------------------------- */
.stats-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--stats-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-cards-wrapper[data-count="1"] { --stats-cols: 1; }
.stats-cards-wrapper[data-count="2"] { --stats-cols: 2; }
.stats-cards-wrapper[data-count="3"] { --stats-cols: 3; }
.stats-cards-wrapper[data-count="4"] { --stats-cols: 4; }
.stats-cards-wrapper[data-count="5"] { --stats-cols: 5; }
.stats-cards-wrapper[data-count="7"],
.stats-cards-wrapper[data-count="8"] { --stats-cols: 4; }

/* Card ------------------------------------------------------------------- */
.stats-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--stats-cols) - 1) * var(--stats-gap)) / var(--stats-cols));
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--stats-card-bg, #FFFFFF);
  border-radius: 10px;
  box-shadow: 0 0.75rem 2rem rgba(55, 70, 79, 0.08);
  container-type: inline-size;
}

.stats-cards-wrapper[data-count="1"] .stats-card {
  max-width: 32rem;
}

/* Accent bar — brand accent gradient */
.stats-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #00ABC1, #F9D452);
  pointer-events: none;
}

.stats-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 2rem 1.75rem 1.75rem;
}

.stats-card-title {
  margin: 0;
  color: var(--stats-stat-color, #00ABC1);
  font-size: clamp(1.75rem, 4.5vw, var(--stats-num-max));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word; /* last-resort safeguard only */
}

.stats-card-copy {
  margin: 0.75rem 0 0;
  color: var(--stats-copy-color, #37464F);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.45;
}

/* Size type + padding to the card, not the viewport */
/*
  Stat size = smallest of:
  - fluid size (21% of card width),
  - fit size: available text width ÷ (longest stat's characters × 0.64em),
    so words like "Thousands" or "1,200,000+" always fit on one line,
  - the editor's max size (number_field).
  --stats-chars is set per instance in module.html; same size for every card.
*/
@supports (container-type: inline-size) {
  .stats-card-inner {
    --stats-pad-x: clamp(1.25rem, 7cqi, 2rem);
    --stats-num-fluid: 21cqi;
    --stats-num-cap: var(--stats-num-max);
    padding: clamp(1.25rem, 8cqi, 2.25rem) var(--stats-pad-x) clamp(1.25rem, 7cqi, 1.875rem);
  }

  .stats-card-title {
    font-size: clamp(
      1.75rem,
      min(
        var(--stats-num-fluid),
        calc((100cqi - 2 * var(--stats-pad-x)) / (var(--stats-chars, 4) * 0.64))
      ),
      var(--stats-num-cap)
    );
  }

  .stats-card-copy {
    font-size: clamp(1rem, 6cqi, 1.5rem);
  }
}

/* Breakpoints ------------------------------------------------------------ */
@media (max-width: 1399px) {
  .stats-cards-wrapper[data-count="5"] { --stats-cols: 3; }
}

@media (max-width: 1199px) {
  .stats-cards-wrapper[data-count="4"] { --stats-cols: 2; }
  .stats-cards-wrapper[data-count="7"],
  .stats-cards-wrapper[data-count="8"] { --stats-cols: 3; }
}

@media (max-width: 1023px) {
  .stats-wrapper {
    padding-left: 34px;
    padding-right: 34px;
  }
}

@media (max-width: 899px) {
  .stats-cards-wrapper { --stats-cols: 2; }
  .stats-cards-wrapper[data-count="1"] { --stats-cols: 1; }
  .stats-cards-wrapper[data-count="2"],
  .stats-cards-wrapper[data-count="3"],
  .stats-cards-wrapper[data-count="4"],
  .stats-cards-wrapper[data-count="5"],
  .stats-cards-wrapper[data-count="7"],
  .stats-cards-wrapper[data-count="8"] { --stats-cols: 2; }
}

@media (max-width: 767px) {
  .section-stats { --stats-gap: 16px; }

  .stats-wrapper {
    padding: 44px 24px;
  }
}

@media (max-width: 599px) {
  .stats-cards-wrapper,
  .stats-cards-wrapper[data-count] { --stats-cols: 1; }

  .stats-cards-wrapper[data-count="1"] .stats-card { max-width: none; }

  @supports not (container-type: inline-size) {
    .stats-card-title {
      font-size: clamp(1.75rem, 10vw, min(var(--stats-num-max), 3.5rem));
    }
  }

  @supports (container-type: inline-size) {
    .stats-card-inner {
      --stats-num-fluid: 16cqi;
      --stats-num-cap: min(var(--stats-num-max), 3.5rem);
    }

    .stats-card-copy {
      font-size: clamp(1rem, 5cqi, 1.25rem);
    }
  }
}

/* --------------------------------------------------------------------------
   Legacy page-level overrides (carried over unchanged — not used by this
   module's markup, kept to avoid regressions on pages that rely on them)
   -------------------------------------------------------------------------- */
.row-fluid:after,
.row-fluid:before {
  display: none !important;
}

.customers-lp-wrapper {
  padding: 3.875rem 1.5rem 2.125rem;
}