/*
 * snsnb article detail page styles
 * Scoped to .snsnb-article-page so Bootstrap and module styles remain unchanged.
 */
.snsnb-article-page {
    --snsnb-article-accent: #f37052;
    --snsnb-article-text: #30343b;
    --snsnb-article-muted: #7a828c;
    --snsnb-article-border: #e9ecef;
}

.snsnb-article-page .snsnb-article-main {
    min-width: 0;
}

.snsnb-article-page .snsnb-article-header,
.snsnb-article-page .snsnb-article-body,
.snsnb-article-page .snsnb-article-main > .toc-container,
.snsnb-article-page .snsnb-article-main > .my-3 {
    width: 100%;
    max-width: 840px;
    margin-right: auto;
    margin-left: auto;
}

.snsnb-article-page .snsnb-article-header {
    padding: 4px 0 18px !important;
    border-color: var(--snsnb-article-border) !important;
}

.snsnb-article-page .snsnb-article-title {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    color: #292d33;
    font-size: clamp(24px, 2.1vw, 30px) !important;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.01em;
}

.snsnb-article-page .snsnb-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 0 !important;
    color: var(--snsnb-article-muted);
    font-size: 14px;
    line-height: 1.6;
}

.snsnb-article-page .snsnb-article-meta > span,
.snsnb-article-page .snsnb-article-meta__item {
    display: inline-flex;
    align-items: center;
    padding-right: 0 !important;
    padding-left: 0 !important;
    white-space: nowrap;
}

.snsnb-article-page .snsnb-article-meta a {
    color: inherit;
}

.snsnb-article-page .snsnb-article-body {
    padding-top: 24px !important;
    padding-bottom: 8px !important;
    color: var(--snsnb-article-text);
    font-size: 17px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.snsnb-article-page .snsnb-article-body > :first-child {
    margin-top: 0 !important;
}

.snsnb-article-page .snsnb-article-body p {
    margin-top: 0;
    margin-bottom: 1.1em;
    line-height: inherit;
}

.snsnb-article-page .snsnb-article-body h1,
.snsnb-article-page .snsnb-article-body h2,
.snsnb-article-page .snsnb-article-body h3,
.snsnb-article-page .snsnb-article-body h4,
.snsnb-article-page .snsnb-article-body h5,
.snsnb-article-page .snsnb-article-body h6 {
    height: auto;
    color: #30343b;
    font-weight: 650;
    line-height: 1.5;
    overflow: visible;
}

.snsnb-article-page .snsnb-article-body h1,
.snsnb-article-page .snsnb-article-body h2 {
    margin: 32px 0 16px !important;
    padding: 0 0 0 14px !important;
    border-left: 4px solid var(--snsnb-article-accent);
    font-size: 24px !important;
}

.snsnb-article-page .snsnb-article-body h3 {
    margin: 25px 0 12px !important;
    padding: 0 !important;
    font-size: 20px !important;
}

.snsnb-article-page .snsnb-article-body h4,
.snsnb-article-page .snsnb-article-body h5,
.snsnb-article-page .snsnb-article-body h6 {
    margin: 20px 0 10px !important;
    padding: 0 !important;
    font-size: 18px !important;
}

.snsnb-article-page .snsnb-article-body ul,
.snsnb-article-page .snsnb-article-body ol {
    margin: 0 0 1.1em;
    padding-left: 1.6em;
}

.snsnb-article-page .snsnb-article-body li {
    margin: 0.3em 0;
}

.snsnb-article-page .snsnb-article-body a {
    color: #397c8a;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.snsnb-article-page .snsnb-article-body img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 20px auto;
    border-radius: 8px;
}

.snsnb-article-page .snsnb-article-body iframe,
.snsnb-article-page .snsnb-article-body video {
    max-width: 100%;
}

.snsnb-article-page .snsnb-article-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    overflow-x: auto;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
}

.snsnb-article-page .snsnb-article-body th,
.snsnb-article-page .snsnb-article-body td {
    min-width: 110px;
    padding: 10px 12px;
    border: 1px solid #e4e7eb;
    text-align: left;
    vertical-align: top;
}

.snsnb-article-page .snsnb-article-body th {
    background: #f7f8fa;
    font-weight: 650;
}

.snsnb-article-page .snsnb-article-body blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    border-left: 4px solid #f5a28f;
    background: #fff7f5;
    color: #5b6169;
}

.snsnb-article-page .snsnb-article-main > .toc-container {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .snsnb-article-page .snsnb-article-header {
        padding: 2px 0 14px !important;
    }

    .snsnb-article-page .snsnb-article-title {
        margin-top: 10px !important;
        font-size: 22px !important;
        line-height: 1.4;
        text-align: left !important;
    }

    .snsnb-article-page .snsnb-article-meta {
        justify-content: flex-start;
        gap: 4px 12px;
        text-align: left !important;
    }

    .snsnb-article-page .snsnb-article-body {
        padding-top: 20px !important;
        font-size: 16px;
        line-height: 1.88;
    }

    .snsnb-article-page .snsnb-article-body h1,
    .snsnb-article-page .snsnb-article-body h2 {
        margin: 27px 0 14px !important;
        padding-left: 10px !important;
        border-left-width: 3px;
        font-size: 20px !important;
        line-height: 1.5;
    }

    .snsnb-article-page .snsnb-article-body h3 {
        margin: 22px 0 10px !important;
        font-size: 18px !important;
        line-height: 1.55;
    }

    .snsnb-article-page .snsnb-article-body h4,
    .snsnb-article-page .snsnb-article-body h5,
    .snsnb-article-page .snsnb-article-body h6 {
        font-size: 17px !important;
    }

    .snsnb-article-page .snsnb-article-body img {
        margin: 16px auto;
        border-radius: 6px;
    }

    .snsnb-article-page .snsnb-article-body th,
    .snsnb-article-page .snsnb-article-body td {
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* Keep secondary desktop sidebar blocks from extending far below article content. */
@media (min-width: 768px) {
    .snsnb-article-page--zixun .snsnb-article-sidebar > .txtMarquee-top,
    .snsnb-article-page--zixun .snsnb-article-sidebar > .slide_box.mt-3 {
        display: none !important;
    }
}

/* Give long-form content more room while keeping tablet/mobile layouts unchanged. */
@media (min-width: 1200px) {
    .snsnb-article-page--zixun .snsnb-article-main {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .snsnb-article-page--zixun .snsnb-article-sidebar {
        flex: 0 0 25%;
        max-width: 25%;
        min-width: 0;
    }

    .snsnb-article-page--zixun .snsnb-article-header,
    .snsnb-article-page--zixun .snsnb-article-body,
    .snsnb-article-page--zixun .snsnb-article-main > .toc-container,
    .snsnb-article-page--zixun .snsnb-article-main > .my-3 {
        max-width: 920px;
    }
}