/* ==========================================================================
   KOBIL — SuperApp family: Numbers
   Figma: /superapp/ 5839:36880 (mobile 6087:53469) ·
          /digital-workplace-superapp/ 5501:33562 (mobile 5501:35301)

   Four centered figures in a row, separated by full-height hairlines.
   The figures count up from 0 on scroll — see numbers.js, same technique
   as the homepage's .sc-stats block.
   ========================================================================== */

.sec-sa-numbers__row {
  display: grid;
  /* Figma lays this out as four fixed 200px (/superapp/) or 227px
     (/digital-workplace-superapp/) columns with hairlines between them.
     A grid of equal fractions reproduces that and stays fluid; the
     hairlines are borders on the items rather than separate elements, so
     there's nothing to keep in sync when the row wraps. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.sec-sa-numbers__item {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  padding: 0 var(--item-pad, var(--w30));
  text-align: center;
}

.sec-sa-numbers__item + .sec-sa-numbers__item {
  border-left: 1px solid var(--navy-60);
}

.sec-sa-numbers__figure {
  font-family: var(--font-mono);
  font-size: var(--w50);
  font-weight: 700;
  line-height: var(--w62);
  color: var(--navy);
  /* The count-up rewrites this text every frame; without a reserved line
     box the row would jitter as the digit count changes (0 → 5000). */
  font-variant-numeric: tabular-nums;
}

.sec-sa-numbers__label {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* /digital-workplace-superapp/ prefixes each label with a semibold lead-in
   ("of IT Tickets", "Faster Approvals", …) on its own line. */
.sec-sa-numbers__label b {
  display: block;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Phone — Figma's numbers/mobile instance is a 2x2 grid with a single
   horizontal hairline between the two rows and none between the columns
   (checked against 5501:35301). */
@media (max-width: 768px) {
  .sec-sa-numbers__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--m32);
  }

  .sec-sa-numbers__item {
    padding: 0 var(--m8);
  }

  .sec-sa-numbers__item + .sec-sa-numbers__item {
    border-left: 0;
  }

  /* Items 3 and 4 open the second row — the hairline sits above them. */
  .sec-sa-numbers__item:nth-child(n + 3) {
    padding-top: var(--m32);
    border-top: 1px solid var(--navy-40);
  }

  .sec-sa-numbers__figure {
    font-size: var(--m32);
    line-height: var(--m40);
  }

  .sec-sa-numbers__label {
    font-size: var(--m15);
    line-height: var(--m21);
  }
}