/* Article reading UX: scoped to editorial comparison pages. */
.article-page .article-hero figure,
.article-page .article-hero img,
.article-page .article-wrap,
.article-page .source-list,
.article-page .article-cta,
.article-page .verdict,
.article-page .pending {
  min-width: 0;
  box-sizing: border-box;
}

.article-page .article-hero img {
  max-width: 100%;
}

.article-page .article-faq summary {
  line-height: 1.5;
}

.article-page .share-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.article-page .share-buttons a,
.article-page .share-buttons button {
  min-height: 44px;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .article-page .article-hero .container {
    gap: 22px;
    padding: 30px 16px 32px;
  }

  .article-page .article-hero h1 {
    font-size: clamp(1.85rem, 8.8vw, 2.45rem);
    line-height: 1.14;
    margin: .35rem 0 .85rem;
  }

  .article-page .article-hero p {
    font-size: .96rem;
    line-height: 1.72;
  }

  .article-page .article-hero img {
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  }

  .article-page .article-wrap {
    padding: 32px 16px 38px;
  }

  .article-page .article-wrap h2 {
    font-size: clamp(1.35rem, 6.4vw, 1.7rem);
    line-height: 1.3;
    margin: 2.1rem 0 .75rem;
  }

  .article-page .article-wrap p {
    font-size: 1rem;
    line-height: 1.78;
  }

  .article-page .date-row {
    gap: 8px 14px;
    margin: 16px 0 26px;
    font-size: .84rem;
    line-height: 1.55;
  }

  .article-page .verdict,
  .article-page .pending,
  .article-page .source-list,
  .article-page .article-cta {
    padding: 18px 17px;
    border-radius: 14px;
  }

  .article-page .article-faq {
    margin-top: 34px;
  }

  .article-page .article-faq details {
    margin: 8px 0;
    padding: 0 14px;
  }

  .article-page .article-faq summary {
    padding: 14px 2px;
    font-size: .95rem;
  }

  .article-page .article-faq details p {
    padding: 0 2px 14px;
    font-size: .95rem;
  }

  .article-page .share-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .article-page .share-buttons a,
  .article-page .share-buttons button {
    width: 100%;
    padding: 10px 12px;
    font-size: .9rem;
  }

  .article-page .related-articles {
    margin-top: 34px;
    padding-top: 24px;
  }
}