/* Shared responsive constraints for post and category content. */
:is(.saudi-article, .saudi-category) :is(.article-layout, .article-opening, .opening-main, .article-body, .article-bottom, .by-person, .by-person > div) { min-width: 0; max-width: 100%; }
:is(.saudi-article, .saudi-category) .crumb { display: flex; flex-wrap: wrap; gap: 6px 9px; white-space: normal; overflow-wrap: anywhere; }
:is(.saudi-article, .saudi-category) :is(.article-title, .by-person, .tab-links a, .sources, .library-card-body) { overflow-wrap: anywhere; }
:is(.saudi-article, .saudi-category) .reading-section :is(img, video, iframe) { max-width: 100%; }
:is(.saudi-article, .saudi-category) .reading-section :is(img, video) { height: auto; }
:is(.saudi-article, .saudi-category) .reading-section pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 850px) {
    .saudi-category :is(.category-articles, .visitor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    :is(.saudi-article, .saudi-category).wrap { width: calc(100% - 28px); }
    :is(.saudi-article, .saudi-category) .byline { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    :is(.saudi-article, .saudi-category) .by-person { font-size: 13px; }
    :is(.saudi-article, .saudi-category) .by-person :is(a, small) { font-size: 12px; }
    :is(.saudi-article, .saudi-category) .by-person + .by-person { border-inline-start: 0; border-top: 1px solid #d8e3d4; padding: 12px 0 0; }
    :is(.saudi-article, .saudi-category) .tab-links a::before { flex-shrink: 0; }
    :is(.saudi-article, .saudi-category) .reading-section table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
    :is(.saudi-article, .saudi-category) :is(.votes, .share-buttons, .category-jumps, .library-filters) { flex-wrap: wrap; }
    :is(.saudi-article, .saudi-category) :is(.btn, .vote, .tab) { white-space: normal; min-height: 44px; }
    :is(.saudi-article, .saudi-category) .inline-comment :is(input, textarea, select) { max-width: 100%; font-size: 16px; }
    .saudi-category :is(.category-articles, .visitor-grid) { grid-template-columns: minmax(0, 1fr); }
}
:is(.saudi-article, .saudi-category) .crumb-item { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; max-width: 100%; }
:is(.saudi-article, .saudi-category) .crumb-item > [aria-hidden] { flex-shrink: 0; }

/* Keep editor-formatted heading fragments in one wrapping text flow. */
:is(.saudi-article, .saudi-category) main#main h3 {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}
:is(.saudi-article, .saudi-category) main#main h3 :is(a, span, strong, b, em, i) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
:is(.saudi-article, .saudi-category) .article-body h3:not(:where(.sc *, .its_sp_section *)) {
    display: block;
    position: relative;
    padding-inline-start: 19px;
    line-height: 1.8;
}
:is(.saudi-article, .saudi-category) .article-body h3:not(:where(.sc *, .its_sp_section *))::before {
    position: absolute;
    inset-inline-start: 0;
    top: .7em;
}
@media (max-width: 700px) {
    :is(.saudi-article, .saudi-category) .article-body h3:not(:where(.sc *, .its_sp_section *)) {
        font-size: 18px;
    }
}

/* Component titles must not inherit article heading flex rows or bullets. */
:is(.saudi-article, .saudi-category) main#main .sc h3 {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.7;
}
:is(.saudi-article, .saudi-category) main#main .sc h3::before {
    content: none;
    display: none;
}
:is(.saudi-article, .saudi-category) main#main .sc h3 :is(span, strong, a, em, b) {
    display: inline;
}