/* The price symbol page's shell, from the legacy `crypto-price/[symbol].vue`'s
   own `<style>` block.

   The legacy nests a grid inside a plain block: `.symbol_details` holds
   `.symbol-container` (the grid), and the articles row and the banner sit
   outside it as siblings. That is reproduced rather than flattened into one
   grid, because it is what puts those two across the full width without either
   having to be placed.

   Every `.symbol-*` child rule that this page shares with `/crypto-buy/{symbol}/`
   — the card gaps, the chart box, the sidebar's own insides — lives in
   `crypto-buy-symbol.css`, which this page loads through its `crypto-buy` style
   group. Only what the legacy states about *this* page's layout is here. */
.crypto-price-symbol-page {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

/* --- Below 1000px --- */

/* The legacy hides its page-level prose here and renders a second copy inside
   the sidebar, between the calculator and the gauge. Two copies of several
   thousand words is a page-weight and duplicate-content cost this site will not
   pay, so both wrappers dissolve and the single copy is ordered into that slot.
   The reading order a phone gets is then the legacy's exactly: chart,
   calculator, prose, fear & greed, top assets, questions. */
.symbol-container,
.symbol-aside {
  display: contents;
}

.crypto-price-symbol-page > .symbol-container > .symbol-main {
  order: 1;
}

.symbol-aside > .symbol-calc {
  order: 2;
}

.symbol-content {
  order: 3;
}

.symbol-aside > .symbol-fear-greed {
  order: 4;
}

.symbol-aside > .symbol-latest {
  order: 5;
}

.symbol-faq-block {
  order: 6;
  /* The legacy's `.faq { margin-top: 16px }` below 1000px. */
  margin-top: 16px;
}

.crypto-price-symbol-page > .articles {
  order: 7;
}

.crypto-price-symbol-page > .download-banner {
  order: 8;
  margin-top: 16px;
}

/* The 24px row gap belongs to the sidebar, and the sidebar has no box here — so
   it is re-hung on the children that used to sit inside it, and on the prose
   now ordered among them. A row gap falls between items and not after the last
   one, so the card that ends the run carries none: what follows it is the
   questions block, and that brings its own 16px. */
.symbol-aside > *,
.symbol-content {
  margin-bottom: 24px;
}

.symbol-aside > .symbol-latest {
  margin-bottom: 0;
}

/* The legacy's `#assets_chart { margin-bottom: 36px }` below 1000px — the chart
   column is separated from the sidebar by more than the sidebar's own gap. */
.symbol-main {
  margin-bottom: 36px;
}

/* This page dresses the shared FAQ as the legacy's `.faq :deep(.title)` block
   does: a larger heading, less space under it, and the tab row against the
   leading edge. The shared stylesheet centres both from 1000px up because the
   landing page wants that; the legacy's shared component has no alignment of its
   own and each page opts in, and this page opts out. */
.symbol-faq-block .faq-title {
  margin-bottom: 16px;
  font-size: 28px;
  text-align: start;
}

.symbol-faq-block .faq-tabs {
  justify-content: flex-start;
}

/* --- From 1000px --- */

@media (min-width: 1000px) {
  .crypto-price-symbol-page {
    display: block;
    margin-top: 64px;
  }

  /* `2fr` rather than a second fixed width: the sidebar is 380px whatever the
     viewport and the chart column takes what is left. `start` keeps the
     sidebar's own height, so a short card does not stretch down the page. */
  .symbol-container {
    display: grid;
    grid-template-columns: 2fr 380px;
    align-items: start;
    column-gap: 40px;
    grid-template-areas:
      'chart sidebar'
      'content sidebar'
      'faq sidebar';
  }

  .symbol-container > .symbol-main {
    grid-area: chart;
  }

  /* A box again — beside the chart column rather than dissolved into it, so the
     gap between its cards goes back to being its own. */
  .symbol-container > .symbol-aside {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    width: 100%;
    grid-area: sidebar;
  }

  .symbol-container > .symbol-content {
    grid-area: content;
    /* The legacy's `.content { margin-top: 24px }`. */
    margin-top: 24px;
  }

  .symbol-container > .symbol-faq-block {
    grid-area: faq;
    margin-top: 0;
  }

  .symbol-main,
  .symbol-aside > *,
  .symbol-content {
    margin-bottom: 0;
  }
}