/* ============================================================================
   MITCON Credensia — Home Stats Section
   ----------------------------------------------------------------------------
   4-column grid on desktop, 2x2 tablet, stacked mobile.
   Numbers featured with brand color accents.
   ============================================================================ */

.stats {
  padding-block: var(--space-12) var(--space-16);
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg-light) 100%
  );
  position: relative;
}

@media (min-width: 64em) {
  .stats {
    padding-block: var(--space-16) var(--space-20);
  }
}

/* ============================================================================
   GRID
   ============================================================================ */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-4);
  position: relative;

  background-color: var(--color-bg);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
}

@media (min-width: 64em) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: var(--space-10) var(--space-8);
  }
}

/* ============================================================================
   STAT ITEM
   ============================================================================ */
.stats__item {
  position: relative;
  text-align: center;
  padding: var(--space-2) var(--space-3);
}

@media (min-width: 64em) {
  .stats__item {
    padding: var(--space-2) var(--space-6);
  }
}

.stats__value {
  margin-bottom: var(--space-2);
}

.stats__number {
  display: inline-block;
  font-size: clamp(var(--fs-3xl), 5vw, 3.5rem);
  font-weight: var(--fw-extra);
  line-height: 1;
  color: var(--color-primary);
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-feature-settings: "tnum";                      /* tabular numbers — uniform digit width */
  letter-spacing: -0.02em;
}

.stats__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--lh-snug);
  max-width: 22ch;
  margin-inline: auto;
}

@media (min-width: 64em) {
  .stats__label {
    font-size: var(--fs-base);
  }
}

/* ============================================================================
   DIVIDERS (visible only on desktop between items)
   ============================================================================ */
.stats__divider {
  display: none;
}

@media (min-width: 64em) {
  .stats__divider {
    display: block;
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--color-grey-light) 50%,
      transparent 100%
    );
  }
}

/* ============================================================================
   HIGH-CONTRAST FALLBACK
   ============================================================================ */
@media (prefers-contrast: more), (forced-colors: active) {
  .stats__number {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: CanvasText;
  }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .stats {
    background: transparent;
    padding-block: var(--space-6);
  }

  .stats__grid {
    border: 1px solid black;
    box-shadow: none;
  }

  .stats__number {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: black;
  }
}