/*
 * Mobile-only article hero refinements.
 * This file intentionally has no rules outside the media query, so desktop
 * article layout and typography remain unchanged.
 */
@media (max-width: 767px) {
  /* Keep a wide data table inside its own scroll area, never the page canvas. */
  body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  .article-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .article-table-wrap > table {
    min-width: 460px;
  }

  .article-hero {
    padding: 34px 18px 42px;
  }

  .article-hero .container {
    gap: 14px;
  }

  .article-hero h1 {
    max-width: 100%;
    font-size: clamp(1.9rem, 8.5vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
  }

  .article-hero__intro {
    font-size: 1rem;
    line-height: 1.58;
  }

  .article-meta {
    gap: 6px 12px;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .article-hero__media {
    margin-top: 18px !important;
    border-radius: 10px !important;
  }

  .article-hero__media img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .article-hero__media figcaption {
    margin-top: 0 !important;
    padding: 10px 12px;
    font-size: 0.78rem !important;
    line-height: 1.45;
  }
}

/*
 * The site switches to its mobile navigation below 768px. Keep the article
 * masthead within that same range so a narrow phone or an in-app mobile
 * viewport cannot retain the desktop-sized article heading.
 */
@media (max-width: 767px) {
  .article-hero {
    padding: 28px 18px 36px;
    overflow-x: clip;
  }

  .article-hero .container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    gap: 12px;
    min-width: 0;
  }

  .article-hero .breadcrumb,
  .article-hero .eyebrow,
  .article-hero h1,
  .article-hero__intro,
  .article-meta {
    min-width: 0;
    max-width: 100%;
  }

  /* The current-page crumb duplicates the H1 and consumes most of a narrow row. */
  .article-hero .breadcrumb > span:last-child {
    display: none;
  }

  .article-hero h1 {
    font-size: clamp(1.65rem, 7.25vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .article-hero__intro {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .article-meta {
    gap: 4px 10px;
    font-size: 0.78rem;
  }

  /* Avoid a separator being stranded at the beginning of a new line. */
  .article-meta > span[aria-hidden="true"] {
    display: none;
  }
}