/* assets/css/components/stock-information.css
 * @layer components — Stock Information page (/investors/stock-information/).
 *
 * Stacked layout: explanatory intro + listing-details on top (constrained
 * measure for readability), then the live dual-exchange stock card spanning the
 * full container width below so the BSE/NSE blocks have room to breathe.
 */

@layer components {

  .stock-information__layout {
    display: flex;
    flex-direction: column;
    gap: calc(var(--container-gap) * 1.5);
  }

  /* Intro prose + listing-details facts, stacked. Capped measure keeps long
     copy readable; the widget below uses the full width. */
  .stock-information__intro {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    max-inline-size: 70ch;
  }

  /* Full-width live card — the two exchange blocks spread across the row. */
  .stock-information__widget {
    inline-size: 100%;
  }

  .stock-information__prose {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .stock-information__details-heading {
    font-family: var(--font-heading);
    font-size: var(--h4);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0 0 var(--content-gap);
  }

  .stock-information__details-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    border-block-start: 1px solid var(--border-subtle);
  }

  .stock-information__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--border-subtle);
  }

  .stock-information__detail-label {
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .stock-information__detail-value {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    margin: 0;
  }

  @media (max-width: 60em) {
    .stock-information__layout {
      grid-template-columns: 1fr;
      gap: var(--container-gap);
    }

    .stock-information__intro {
      max-inline-size: none;
    }
  }

  @media (max-width: 40em) {
    .stock-information__details-list {
      grid-template-columns: 1fr;
    }
  }
}