/* Styles for statistics.hbs — "صراف از نگاه آمارها".

   Values are the legacy's, measured on the live site. This section keeps its
   own class for the heading and its own breakpoint rather than borrowing the
   page's: the legacy spaces this title with a margin where the other two use
   padding, and scales it at 600 where they scale at 1000. */

/* The legacy set only size, weight and alignment here and let the colour
   inherit, which on that site resolved to plain black while its two sibling
   headings were `--gray-900`. Pinned to `--gray-900` so all three agree, and
   because this app gives `body` a colour of its own — inheriting would land on
   neither. */
.about-statistics-title {
  margin-top: 80px;
  color: var(--gray-900);
  font-size: 21px;
  font-weight: 700;
  text-align: center;
}

/* The sprite only defines <symbol>s; it must never occupy layout space. */
.about-statistics-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* This carries its own frame rather than the page's `.about-panel`, even
   though the border, radius and background are the same three values. The
   panel changes its padding and margin at 1000 and this changes them at 600,
   so sharing it would mean one class overriding another's media query — which
   only works while the stylesheets happen to load in the right order, and they
   are linked alphabetically.

   `space-around` rather than `space-between`: the three are different widths,
   and the legacy's spacing puts a half-gap at each end. `wrap` is what lets
   them stack when the middle one's parenthetical is too wide to sit alongside. */
.about-statistics-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
  padding: 32px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background-color: var(--gray-0);
}

.about-statistic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Volume leads on small screens and users leads from 600 up. The source order
   is users, volume, trades, which is the order they should be read in. */
.about-statistic--users {
  order: 2;
}

.about-statistic--volume {
  order: 1;
}

.about-statistic--trades {
  order: 3;
}

/* #ffc80070 — the legacy's own hex. The same highlighter yellow as the hero's
   marked headline, at a lighter alpha, and a decorative wash rather than a
   themed surface, so it is not a token. */
.about-statistic-icon {
  display: flex;
  width: fit-content;
  padding: 8px;
  border-radius: 50%;
  background-color: #ffc80070;
  color: var(--gray-900);
}

/* Sized here rather than on the tag, so the 600 breakpoint below has one place
   to change. The symbols are drawn in a 40 box either way. */
.about-statistic-icon svg {
  width: 32px;
  height: 32px;
}

.about-statistic-value {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
}

.about-statistic-unit {
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 400;
}

.about-statistic-label {
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 400;
}

@media (min-width: 600px) {
  .about-statistics-title {
    font-size: 36px;
  }

  .about-statistics-list {
    gap: 24px;
    margin-top: 40px;
    padding: 40px;
  }

  .about-statistic--users {
    order: 1;
  }

  .about-statistic--volume {
    order: 2;
  }

  .about-statistic-icon {
    padding: 16px;
  }

  .about-statistic-icon svg {
    width: 40px;
    height: 40px;
  }

  .about-statistic-value {
    font-size: 24px;
  }

  .about-statistic-unit {
    font-size: 16px;
  }

  .about-statistic-label {
    font-size: 16px;
  }
}