/**
 * SovrNovosti 0.4.6 — Article Experience
 * Author: Illia Abel
 */

/* =========================================================
   SINGLE ARTICLE SHELL
   ========================================================= */

.sn-article-shell {
    width:
        min(
            calc(100% - 40px),
            880px
        );

    padding-top: 2.6rem;
    padding-bottom: 4rem;
}

.sn-breadcrumbs {
    margin-bottom: 1.55rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        0.3rem
        0.55rem;

    color: #7a8390;

    font-size: 0.69rem;
    line-height: 1.35;
}

.sn-breadcrumbs a {
    color: #68717e;
}

.sn-breadcrumbs a:hover {
    color: var(--sn-accent);
}

.sn-article-header {
    max-width: 860px;
}

.sn-article-title {
    max-width: 860px;

    font-size:
        clamp(
            2.25rem,
            4.65vw,
            4.45rem
        );

    font-weight: 770;
    line-height: 1.035;
}

.sn-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;

    font-size: 0.75rem;
}

.sn-article-meta-separator {
    color: #adb4bd;
}

.sn-article-reading-time {
    color: #7b8490;
}

.sn-article-rule {
    margin:
        1.35rem
        0
        2.15rem;

    border-top:
        2px solid
        var(--sn-text);
}

/* =========================================================
   BODY TYPOGRAPHY
   ========================================================= */

.sn-article-content {
    max-width: 790px;

    color: #2e3540;

    font-family:
        var(--sn-font-serif);

    font-size:
        clamp(
            1.08rem,
            1.45vw,
            1.17rem
        );

    line-height: 1.74;

    overflow-wrap: break-word;
    word-break: normal;
}

.sn-article-content > *:first-child {
    margin-top: 0;
}

.sn-article-content p {
    margin:
        0
        0
        1.35em;
}

.sn-article-content h2 {
    margin:
        2.15em
        0
        0.7em;

    color: var(--sn-text);

    font-family:
        var(--sn-font-sans);

    font-size:
        clamp(
            1.65rem,
            2.9vw,
            2.25rem
        );

    font-weight: 720;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.sn-article-content h3 {
    margin:
        1.85em
        0
        0.65em;

    color: var(--sn-text);

    font-family:
        var(--sn-font-sans);

    font-size:
        clamp(
            1.3rem,
            2.2vw,
            1.65rem
        );

    font-weight: 690;
    line-height: 1.18;
}

.sn-article-content h4 {
    margin:
        1.6em
        0
        0.6em;

    color: var(--sn-text);

    font-family:
        var(--sn-font-sans);

    font-size: 1.08rem;
    font-weight: 700;
}

/* =========================================================
   QUOTES
   ========================================================= */

.sn-article-content blockquote {
    position: relative;

    margin:
        2rem
        0;

    padding:
        1.45rem
        1.7rem
        1.45rem
        2rem;

    border-left:
        4px solid
        var(--sn-accent);

    background: #f4f7fa;

    color: #202733;

    font-family:
        var(--sn-font-sans);

    font-size:
        clamp(
            1.18rem,
            2vw,
            1.42rem
        );

    font-weight: 540;
    line-height: 1.5;
}

.sn-article-content blockquote::before {
    content: "“";

    position: absolute;

    left: 0.65rem;
    top: 0.38rem;

    color:
        rgba(
            11,
            79,
            138,
            0.18
        );

    font-family:
        Georgia,
        serif;

    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1;
}

.sn-article-content blockquote p {
    position: relative;
    z-index: 1;

    margin-bottom: 0.65em;
}

.sn-article-content blockquote p:last-child {
    margin-bottom: 0;
}

.sn-article-content blockquote cite {
    display: block;

    margin-top: 0.9rem;

    color: #707985;

    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
}

/* =========================================================
   OPTIONAL EDITORIAL NOTE
   Can be used later in new materials:
   <aside class="sn-editorial-note">...</aside>
   ========================================================= */

.sn-article-content
.sn-editorial-note {
    margin:
        2rem
        0;

    padding:
        1.15rem
        1.35rem;

    border-top:
        3px solid
        var(--sn-accent);

    background: #f7f8fa;

    color: #29313d;

    font-family:
        var(--sn-font-sans);

    font-size: 0.94rem;
    line-height: 1.55;
}

.sn-article-content
.sn-editorial-note::before {
    content: "ВАЖЛИВО";

    margin-bottom: 0.6rem;

    display: block;

    color: var(--sn-accent);

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

/* =========================================================
   LISTS
   ========================================================= */

.sn-article-content ul,
.sn-article-content ol {
    margin:
        0
        0
        1.45em;

    padding-left: 1.45em;
}

.sn-article-content li {
    margin-bottom: 0.45em;
    padding-left: 0.15em;
}

.sn-article-content li::marker {
    color: var(--sn-accent);
}

/* =========================================================
   LINKS / LONG URLS
   ========================================================= */

.sn-article-content a {
    color: var(--sn-accent);

    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;

    overflow-wrap: anywhere;
}

.sn-article-content a:hover {
    color: var(--sn-accent-dark);
}

/* =========================================================
   IMAGES / FIGURES
   ========================================================= */

.sn-article-content img {
    max-width: 100%;
    height: auto;

    margin:
        1.8rem
        auto;

    display: block;
}

.sn-article-content figure {
    margin:
        2rem
        0;
}

.sn-article-content figure img {
    margin: 0;
}

.sn-article-content figcaption,
.sn-article-content
.wp-caption-text {
    margin-top: 0.55rem;

    color: #77808b;

    font-family:
        var(--sn-font-sans);

    font-size: 0.7rem;
    line-height: 1.4;
}

/* =========================================================
   TABLES
   ========================================================= */

.sn-article-content
.wp-block-table,
.sn-article-content
.sn-table-scroll {
    max-width: 100%;

    margin:
        2rem
        0;

    overflow-x: auto;
}

.sn-article-content table {
    width: 100%;

    margin:
        2rem
        0;

    border-collapse: collapse;

    font-family:
        var(--sn-font-sans);

    font-size: 0.84rem;
    line-height: 1.4;
}

.sn-article-content th,
.sn-article-content td {
    padding:
        0.7rem
        0.75rem;

    border-bottom:
        1px solid #dfe3e8;

    text-align: left;
    vertical-align: top;
}

.sn-article-content th {
    border-top:
        2px solid
        var(--sn-text);

    color: var(--sn-text);
    font-weight: 700;
}

.sn-article-content tbody tr:hover {
    background: #f8f9fa;
}

/* =========================================================
   VIDEO / EMBEDS
   ========================================================= */

.sn-article-content iframe[
    src*="youtube"
],
.sn-article-content iframe[
    src*="youtu.be"
],
.sn-article-content iframe[
    src*="vimeo"
] {
    width: 100% !important;
    height: auto !important;

    margin:
        1.8rem
        0;

    aspect-ratio: 16 / 9;

    display: block;

    background: #000000;
}

/* =========================================================
   RELATED MATERIALS
   ========================================================= */

.sn-related {
    max-width: 880px;

    margin-top: 4.2rem;
    padding-top: 1.1rem;

    border-top:
        2px solid
        var(--sn-text);
}

.sn-related-header {
    margin-bottom: 1rem;
}

.sn-related-header h2 {
    margin: 0;

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sn-related-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1.3rem;
}

.sn-related-item {
    min-width: 0;
}

.sn-related-image {
    margin-bottom: 0.72rem;

    aspect-ratio: 16 / 9;

    display: block;
    overflow: hidden;

    background: var(--sn-bg-soft);
}

.sn-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sn-related-copy
.sn-card-category {
    margin-bottom: 0.35rem;

    font-size: 0.58rem;
}

.sn-related-copy h3 {
    margin:
        0
        0
        0.45rem;

    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.22;
}

.sn-related-copy time {
    color: #858d97;

    font-size: 0.65rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {

    .sn-article-shell {
        width:
            min(
                calc(100% - 28px),
                880px
            );

        padding-top: 1.8rem;
        padding-bottom: 3rem;
    }

    .sn-article-title {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );
    }

    .sn-article-content {
        font-size: 1.05rem;
    }

    .sn-article-content blockquote {
        padding:
            1.2rem
            1.15rem
            1.2rem
            1.45rem;

        font-size: 1.12rem;
    }

    .sn-related-grid {
        grid-template-columns: 1fr;
    }

    .sn-related-item {
        display: grid;

        grid-template-columns:
            118px
            minmax(0, 1fr);

        gap: 0.9rem;

        padding-bottom: 1rem;
    }

    .sn-related-item
    + .sn-related-item {
        padding-top: 1rem;

        border-top:
            1px solid #e7eaee;
    }

    .sn-related-image {
        margin: 0;

        aspect-ratio: 4 / 3;
    }
}


/* =========================================================
   SOVRNOVOSTI ARTICLE LIST MARKERS FIX

   Restore semantic bullets / numbering inside article body.
   Scoped only to historical/editorial post content.
   ========================================================= */

.sn-article-content ul {
    list-style-type: disc !important;
    list-style-position: outside;

    margin:
        0.35em
        0
        1.45em;

    padding-left: 1.65em;
}

.sn-article-content ol {
    list-style-type: decimal !important;
    list-style-position: outside;

    margin:
        0.35em
        0
        1.45em;

    padding-left: 1.75em;
}

.sn-article-content li {
    display: list-item;

    margin-bottom: 0.45em;
    padding-left: 0.2em;
}

.sn-article-content ul ul {
    list-style-type: circle !important;

    margin-top: 0.4em;
    margin-bottom: 0.55em;
}

.sn-article-content ul ul ul {
    list-style-type: square !important;
}

.sn-article-content ol ol {
    list-style-type: lower-alpha !important;

    margin-top: 0.4em;
    margin-bottom: 0.55em;
}

.sn-article-content li::marker {
    color: var(--sn-accent);
    font-weight: 700;
}

@media (max-width: 720px) {

    .sn-article-content ul,
    .sn-article-content ol {
        padding-left: 1.45em;
    }
}


/* =========================================================
   SOVRNOVOSTI ARTICLE COMPACT HEADER V1

   Tighten the vertical rhythm between:
   latest strip -> breadcrumbs -> category -> headline.

   The headline size and body typography remain unchanged.
   ========================================================= */

@media (min-width: 721px) {

    .sn-article-shell {
        padding-top: 1.35rem;
    }

    .sn-breadcrumbs {
        margin-bottom: 0.95rem;
    }

    .sn-article-header {
        padding-top: 0;
    }

    .sn-article-section {
        margin-bottom: 0.6rem;
    }
}


@media (max-width: 720px) {

    .sn-article-shell {
        padding-top: 1.1rem;
    }

    .sn-breadcrumbs {
        margin-bottom: 0.8rem;
    }

    .sn-article-header {
        padding-top: 0;
    }

    .sn-article-section {
        margin-bottom: 0.55rem;
    }
}


/* =========================================================
   SOVRNOVOSTI ARTICLE HEADING RHYTHM V1

   Keep clear editorial section breaks while reducing
   excessive whitespace before headings inside article body.
   ========================================================= */

.sn-article-content h2 {
    margin-top: 1.45em;
}

.sn-article-content h3 {
    margin-top: 1.35em;
}

.sn-article-content h4 {
    margin-top: 1.25em;
}


/*
 * Slightly tighter on phones, where excessive vertical
 * whitespace consumes a larger part of the viewport.
 */
@media (max-width: 720px) {

    .sn-article-content h2 {
        margin-top: 1.3em;
    }

    .sn-article-content h3 {
        margin-top: 1.25em;
    }

    .sn-article-content h4 {
        margin-top: 1.15em;
    }
}