/* The cards of editorial copy under the chart.
   Values are the legacy `TradeContentCard.vue`'s scoped block. */

/* No gap between the cards, and not by omission: the legacy declares
   `gap: 16px` on a `display: block` element, where gap does nothing, so the
   cards it ships sit flush against each other. Each carries its own 16px of
   padding, which is the separation you actually see. */
.symbol-about {
  margin: 16px 0 40px;
}

/* The legacy sets `cursor: pointer` on the card, which promises a click that
   does not exist — the card opened a popup in an earlier version. Not carried. */
.symbol-about-card {
  padding: 16px;
  border-radius: 16px;
}

.symbol-about-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
}

.symbol-about-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* `text-align: justify` is the legacy's. It is what makes a Farsi column of
   this width sit flush on both edges. */
.symbol-about-body {
  margin-top: 16px;
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  text-align: justify;
}

/* The editor's own markup, styled from here: it arrives as tags, not classes. */
.symbol-about-body p,
.symbol-about-body ul,
.symbol-about-body ol {
  margin: 0 0 10px;
}

.symbol-about-body ul,
.symbol-about-body ol {
  padding-inline-start: 1.5rem;
}

/* The reset clears list markers globally; inside prose they carry meaning. */
.symbol-about-body ul {
  list-style: disc;
}

.symbol-about-body ol {
  list-style: decimal;
}

.symbol-about-body a {
  color: var(--identity);
  text-decoration: underline;
}

.symbol-about-body h2,
.symbol-about-body h3,
.symbol-about-body h4 {
  margin: 0 0 8px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
}

/* 24px above from 1000px up. The legacy nests this block in a section carrying
   `margin-top: 24px`, and the block's own 16px collapses into it rather than
   adding to it — so the space above the first card is 24, not 40. */
@media (min-width: 1000px) {
  .symbol-about {
    margin: 24px 0 80px;
  }
}