/*
 * About Section — Puzzle Solutions
 * About section layout, stats grid, counter number display.
 * Uses CSS logical properties and token references only.
 */

/* === About Story Column === */
.about__story-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-6);
  color: var(--color-text-primary);
}

.about__story-text {
  margin-block-end: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* === Stats Grid (2x2 inside the right column) === */
.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-content: center;
}

/* === Individual Stat Box === */
.stat {
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Counter number — rendered inline alongside suffix */
.stat__number {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  display: inline;
}

.stat__suffix {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}

.stat__label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
}