/* Article page — scoped to .page-article only.
   Uses homepage (--th-*) tokens; does not alter header/footer/blog list. */

.page-article {
    --th-bg: #ffffff;
    --th-bg-soft: #f4f5f7;
    --th-ink: #101828;
    --th-ink-soft: #1f2937;
    --th-muted: #5c6570;
    --th-line: #e3e8ef;
    --th-line-strong: #cdd6e2;
    --th-navy: #0a1a3d;
    --th-accent: #1868c9;
    --th-radius: 4px;
    --th-radius-media: 10px;
    --th-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --th-header-h: 68px;
    --art-read: 750px;
    --art-toc: 200px;
    --art-toc-gap: 36px;
    --art-image: 900px;
    background: var(--th-bg);
    color: var(--th-ink);
}

.page-article .art-page {
    display: block;
}

/* —— Shared rails —— */
.page-article .art-rail {
    width: min(100% - 3rem, var(--art-read));
    max-width: var(--art-read);
    margin-inline: auto;
}

.page-article .art-shell {
    width: min(100% - 3rem, 1100px);
    margin-inline: auto;
}

/* —— Hero / article header: white, no checkerboard —— */
.page-article .art-hero {
    background: #fff;
    padding-block: 56px 28px;
}

.page-article .art-back {
    display: block;
    width: fit-content;
    margin: 0 0 18px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--th-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-article .art-back:hover {
    color: var(--th-navy);
}

.page-article .art-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--th-line-strong);
    background: #f4f8fe;
    color: #1257a6;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
}

.page-article .art-category svg {
    width: 14px;
    height: 14px;
    color: var(--th-accent);
    flex-shrink: 0;
}

.page-article .art-category:hover {
    border-color: var(--th-accent);
    color: var(--th-navy);
}

.page-article .art-title {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: clamp(2.5rem, 3.2vw, 3rem); /* 40–48 */
    font-weight: 700;
    line-height: 1.2;
    color: var(--th-navy);
    text-wrap: pretty;
    text-align: start;
    max-width: none;
}

.page-article .art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.55rem;
    row-gap: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--th-muted);
}

.page-article .art-meta span:not(:last-child)::after {
    content: "\00B7";
    margin-inline-start: 0.55rem;
    color: var(--th-line-strong);
}

.page-article .art-404-lead {
    margin: 0 0 20px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--th-ink-soft);
}

/* —— Main column + featured image —— */
.page-article .art-main {
    padding-block: 8px 56px;
}

.page-article .art-image {
    margin: 0 auto 36px;
    max-width: var(--art-image);
    width: 100%;
    border-radius: var(--th-radius-media);
    overflow: hidden;
    background: var(--th-bg-soft);
    box-shadow: none;
}

.page-article .art-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--th-radius-media);
}

/* —— Body + TOC layout —— */
.page-article .art-layout {
    display: grid;
    align-items: start;
    justify-content: center;
}

.page-article .art-layout--solo {
    grid-template-columns: minmax(0, var(--art-read));
}

.page-article .art-layout--with-toc {
    /* RTL: first track sits on the physical right → TOC right of body */
    grid-template-columns: var(--art-toc) minmax(0, var(--art-read));
    column-gap: var(--art-toc-gap);
}

.page-article .art-layout--with-toc .art-toc--side {
    grid-column: 1;
    grid-row: 1;
}

.page-article .art-layout--with-toc .art-body {
    grid-column: 2;
    grid-row: 1;
}

/* —— TOC —— */
.page-article .art-toc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--th-muted);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.page-article .art-toc__heading,
.page-article .art-toc__summary {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--th-navy);
    list-style: none;
    cursor: pointer;
}

.page-article .art-toc__summary::-webkit-details-marker {
    display: none;
}

.page-article .art-toc__summary::after {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-inline-start: 0.55em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    vertical-align: 0.15em;
    transition: transform 160ms var(--th-ease);
}

.page-article .art-toc--mobile[open] > .art-toc__summary::after {
    transform: rotate(225deg);
    vertical-align: -0.05em;
}

.page-article .art-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-article .art-toc__list li {
    margin: 0 0 8px;
    padding: 0;
}

.page-article .art-toc__list a {
    color: var(--th-muted);
    text-decoration: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    display: inline;
    font-weight: 450;
}

.page-article .art-toc__list a:hover {
    color: var(--th-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-article .art-toc--side {
    position: sticky;
    top: calc(var(--th-header-h) + 16px);
    align-self: start;
    max-width: var(--art-toc);
}

.page-article .art-toc--mobile {
    display: none;
    margin: 0 0 24px;
    max-width: var(--art-read);
}

/* —— Reading body typography —— */
.page-article .art-body {
    max-width: var(--art-read);
    min-width: 0;
    text-align: start;
    unicode-bidi: plaintext;
}

.page-article .art-body > *:first-child {
    margin-top: 0;
}

.page-article .art-body p {
    margin: 0 0 1.25rem; /* ~20px */
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
    color: var(--th-ink-soft);
    text-align: start;
    text-justify: auto;
}

.page-article .art-body h2 {
    margin: 2.25rem 0 0.85rem; /* more space before than after */
    font-size: clamp(1.625rem, 2vw, 1.875rem); /* 26–30 */
    font-weight: 700;
    line-height: 1.3;
    color: var(--th-navy);
    scroll-margin-top: calc(var(--th-header-h) + 16px);
}

.page-article .art-body h2:first-child {
    margin-top: 0;
}

.page-article .art-body ul,
.page-article .art-body ol {
    margin: 0 0 1.25rem;
    padding-inline-start: 1.35rem;
    list-style: disc;
}

.page-article .art-body ol {
    list-style: decimal;
}

.page-article .art-body li {
    margin: 0 0 0.65rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--th-ink-soft);
    text-align: start;
    list-style: inherit;
    display: list-item;
}

.page-article .art-body li::marker {
    color: var(--th-accent);
}

.page-article .art-body a {
    color: var(--th-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-article .art-body a:hover {
    color: var(--th-navy);
}

.page-article .art-body strong,
.page-article .art-body b {
    font-weight: 700;
    color: inherit;
}

/* —— End CTA: light-gray strip —— */
.page-article .art-cta {
    background: var(--th-bg-soft);
    padding-block: 48px; /* ~40–56 */
}

.page-article .art-cta__inner {
    width: min(100% - 3rem, 900px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.page-article .art-cta__copy {
    flex: 1;
    min-width: 0;
    max-width: 36rem;
    text-align: start; /* RTL → right */
}

.page-article .art-cta__copy h2 {
    margin: 0 0 10px;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--th-navy);
}

.page-article .art-cta__copy p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--th-ink-soft);
}

.page-article .art-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

.page-article .art-cta .th-btn {
    min-height: 48px;
}

/* Kill old hero/cta bleed if leftover classes appear */
.page-article .hero--compact::before {
    display: none !important;
}
.page-article .section--raised {
    background: transparent;
}
.page-article .cta-band {
    background: transparent !important;
    border-radius: 0;
    padding: 0;
}

/* —— Desktop mid / mobile —— */
@media (max-width: 1100px) {
    .page-article .art-layout--with-toc {
        --art-toc: 180px;
        --art-toc-gap: 32px;
    }
}

@media (max-width: 960px) {
    .page-article .art-layout--with-toc {
        grid-template-columns: minmax(0, var(--art-read));
        column-gap: 0;
        justify-content: center;
    }

    .page-article .art-layout--with-toc .art-toc--side {
        display: none;
    }

    .page-article .art-layout--with-toc .art-toc--mobile {
        display: block;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: var(--art-read);
    }

    .page-article .art-layout--with-toc .art-body {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (max-width: 720px) {
    .page-article {
        --art-read: 100%;
    }

    .page-article .art-rail,
    .page-article .art-shell,
    .page-article .art-cta__inner {
        width: calc(100% - 2.75rem); /* ~22px each side → 20–24px */
        max-width: none;
    }

    .page-article .art-hero {
        padding-block: 36px 20px;
    }

    .page-article .art-title {
        font-size: clamp(1.75rem, 6vw, 2.125rem); /* 28–34 */
    }

    .page-article .art-meta {
        font-size: 0.875rem;
    }

    .page-article .art-image {
        margin-bottom: 28px;
        border-radius: 8px;
    }

    .page-article .art-image img {
        border-radius: 8px;
    }

    .page-article .art-main {
        padding-block: 4px 40px;
    }

    .page-article .art-body p,
    .page-article .art-body li {
        font-size: 1.0625rem; /* ~17 */
        margin-bottom: 1.1rem;
    }

    .page-article .art-body h2 {
        font-size: clamp(1.375rem, 4.5vw, 1.5625rem); /* 22–25 */
        margin-top: 1.85rem;
        margin-bottom: 0.7rem;
    }

    .page-article .art-cta {
        padding-block: 40px;
    }

    .page-article .art-cta__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .page-article .art-cta__actions {
        width: 100%;
    }

    .page-article .art-cta__actions .th-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .page-article .art-cta__actions {
        flex-direction: column;
    }

    .page-article .art-cta__actions .th-btn {
        flex: 1 1 auto;
        width: 100%;
    }
}