/* QA-PR-19B: ArticleDetail only. Home/News retain their own cards and grids. */
.article-detail { overflow-wrap: anywhere; }
.article-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--mk-8) var(--mk-16); background: linear-gradient(110deg,var(--mk-ink) 35%,#0c3854); }
.article-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,color-mix(in srgb,var(--mk-ink) 90%,transparent),var(--mk-overlay)); }
.article-hero-content { position: relative; z-index: 2; }
.article-hero .breadcrumb { margin-block-end: var(--mk-12); font-size: var(--mk-small); }
.article-hero-layout { max-inline-size: var(--mk-focused); }
.article-category { color: #55d7ed; font-size: var(--mk-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.article-hero .lead { color: #cfdeeb; font-size: var(--mk-body-lg); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--mk-3) var(--mk-6); font-size: var(--mk-small); color: #cfdeeb; }
.article-featured-image { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.article-featured-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.article-reading { max-inline-size: var(--mk-content); }
.article-reading > * + * { margin-block-start: var(--mk-12); }
.article-toc { padding: var(--mk-6); background: var(--mk-light); border: 1px solid #d5e6fa; border-radius: var(--mk-radius); }
.article-toc h2, .article-topics h2 { font-size: var(--mk-h4); }
.article-toc ol { margin-block: var(--mk-4) 0; padding-inline-start: var(--mk-6); }
.article-toc a { display: inline-block; padding-block: var(--mk-2); color: var(--mk-action-blue); }
.article-detail .article-content :is(h2,h3,h4,h5,h6) { margin-block-start: var(--mk-12); margin-block-end: var(--mk-4); line-height: 1.3; scroll-margin-block-start: var(--mk-8); }
.article-detail .article-content h2 { font-size: var(--mk-h3); }
.article-detail .article-content h3 { font-size: 1.25rem; }
.article-detail .article-content h4 { font-size: var(--mk-h4); }
.article-detail .article-content :is(h5,h6) { font-size: var(--mk-body); }
.article-detail .article-content > :first-child { margin-block-start: 0; }
.article-detail .article-content :is(p,ul,ol,figure,pre,blockquote) { max-inline-size: 100%; }
.article-detail .article-content :is(ul,ol) { padding-inline-start: var(--mk-6); margin-block: var(--mk-6); }
.article-detail .article-content li > :is(ul,ol) { margin-block: var(--mk-3); }
.article-detail .article-content li + li { margin-block-start: var(--mk-3); }
.article-detail .article-content li::marker { color: var(--mk-action-blue); }
.article-detail .article-content figure { margin-inline: 0; }
.article-detail .article-content img { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--mk-radius); }
.article-detail .article-content figcaption { margin-block-start: var(--mk-2); color: #526274; font-size: var(--mk-small); }
.article-detail .article-content blockquote { margin-inline: 0; padding: var(--mk-6); border-inline-start: 3px solid var(--mk-red); background: var(--mk-light); }
.article-detail .article-content blockquote > :first-child { margin-block-start: 0; }
.article-detail .article-content pre { padding: var(--mk-6); border-radius: var(--mk-radius); background: var(--mk-ink); color: #a7e9f6; overflow: auto; }
.article-detail .article-content a { color: var(--mk-action-blue); }
.article-detail .article-content pre:focus-visible { outline-offset: 3px; }
.article-table { max-inline-size: 100%; overflow-x: auto; border: 1px solid #c8d9ec; border-radius: var(--mk-radius); }
.article-detail .article-content table { display: table; inline-size: 100%; border-collapse: collapse; font-size: var(--mk-small); }
.article-detail .article-content caption { text-align: start; padding: var(--mk-3); font-weight: 600; }
.article-detail .article-content :is(th,td) { padding: var(--mk-3); text-align: start; border-block-end: 1px solid #dce6f1; min-inline-size: 8rem; overflow-wrap: normal; }
.article-detail .article-content th { background: var(--mk-light); }
.article-topics ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mk-2); }
.article-topics li { padding: var(--mk-2) var(--mk-3); border: 1px solid #c6dff9; border-radius: var(--mk-pill); color: #145ba9; font-size: var(--mk-small); }
.article-back { display: inline-block; }
.article-related-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-6); margin-block-end: var(--mk-8); }
.article-related-heading h2 { font-size: var(--mk-h3); }
.article-related .news-grid { grid-template-columns: 1fr; }
.article-related .card h3 { font-size: var(--mk-h4); }
.article-final { background: linear-gradient(110deg,var(--mk-ink),#103959); }
.article-final > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-8); }
.article-final .stack { flex: 1 1 30rem; }
.article-final h2 { font-size: var(--mk-h2); }
@media (min-width: 48rem) {
    .article-related .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 64rem) {
    .article-hero { padding-block-end: var(--mk-24); }
    .article-related .news-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}