/**
 * SovrNovosti 0.4.4 — Integrated Hero
 * Author: Illia Abel
 */

/* =========================================================
   HERO
   ========================================================= */

.sn-hero-media-grid {
    height:
        clamp(
            320px,
            25.5vw,
            370px
        );

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(330px, 0.9fr);

    gap: 20px;
}

.sn-hero-main-media,
.sn-hero-lead-copy {
    display: none;
}

.sn-hero-main-feature {
    position: relative;
    min-width: 0;
    height: 100%;

    border:
        1px solid
        var(--sn-border-strong);

    display: block;
    overflow: hidden;

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

    color: #ffffff;
}

.sn-hero-main-feature:hover {
    color: #ffffff;
}

.sn-hero-main-feature > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sn-hero-main-feature
.sn-media-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}

.sn-hero-main-feature::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 12, 24, 0.94) 0%,
            rgba(5, 12, 24, 0.73) 25%,
            rgba(5, 12, 24, 0.28) 53%,
            rgba(5, 12, 24, 0.02) 76%
        );

    pointer-events: none;
}

.sn-hero-overlay {
    position: absolute;
    z-index: 2;

    left:
        clamp(
            1.1rem,
            2.2vw,
            1.8rem
        );

    right:
        clamp(
            1.1rem,
            2.2vw,
            1.8rem
        );

    bottom:
        clamp(
            1rem,
            2vw,
            1.6rem
        );

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sn-overlay-category {
    margin-bottom: 0.42rem;

    color: #8dc8ff;

    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.sn-overlay-title {
    max-width: 760px;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.75rem
        );

    font-weight: 720;
    line-height: 1.045;
    letter-spacing: -0.045em;
}

.sn-overlay-date {
    margin-top: 0.65rem;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 0.65rem;
}

.sn-hero-side-item {
    grid-template-columns:
        142px
        minmax(0, 1fr);
}

.sn-hero-side-copy h2 {
    font-size: 0.91rem;
    font-weight: 570;
    line-height: 1.22;
}

.sn-hero-side-copy
.sn-category-label {
    font-size: 0.56rem;
}

.sn-top-briefs {
    margin-top: 1rem;
}

/* =========================================================
   PUBLICATIONS
   ========================================================= */

.sn-publications-media-grid {
    height:
        clamp(
            295px,
            23vw,
            345px
        );

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(330px, 0.9fr);

    gap: 20px;
}

.sn-publication-main-media,
.sn-publication-lead-copy {
    display: none;
}

.sn-publication-main-feature {
    position: relative;

    min-width: 0;
    height: 100%;

    border:
        1px solid
        var(--sn-border-strong);

    display: block;
    overflow: hidden;

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

    color: #ffffff;
}

.sn-publication-main-feature:hover {
    color: #ffffff;
}

.sn-publication-main-feature > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sn-publication-main-feature
.sn-media-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}

.sn-publication-main-feature::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 12, 24, 0.94) 0%,
            rgba(5, 12, 24, 0.7) 28%,
            rgba(5, 12, 24, 0.18) 62%,
            transparent 82%
        );

    pointer-events: none;
}

.sn-publication-overlay {
    position: absolute;
    z-index: 2;

    left: 1.45rem;
    right: 1.45rem;
    bottom: 1.35rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sn-publication-overlay-title {
    max-width: 720px;

    font-size:
        clamp(
            1.55rem,
            2.5vw,
            2.3rem
        );

    font-weight: 680;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.sn-publication-grid-item {
    grid-template-columns:
        138px
        minmax(0, 1fr);
}

.sn-publication-grid-copy h3 {
    font-size: 0.9rem;
    font-weight: 560;
    line-height: 1.21;
}

/* =========================================================
   COMPACT FOOTER
   ========================================================= */

.sn-footer-refined,
.sn-footer-newsroom,
.sn-footer-editorial {
    display: none;
}

.sn-footer-compact {
    padding-block:
        2.35rem
        2.15rem;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.9fr);

    gap: 4rem;
}

.sn-footer-compact-brand {
    min-width: 0;
}

.sn-footer-compact-brand > p {
    max-width: 390px;

    margin:
        0.8rem
        0
        0.65rem;

    color:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size: 0.76rem;
    line-height: 1.5;
}

.sn-footer-compact-brand
.sn-footer-motto {
    margin-bottom: 0;
}

.sn-footer-utility {
    margin-top: 1.15rem;

    padding-top: 0.9rem;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.sn-footer-utility ul {
    padding: 0;
    margin: 0;

    display: flex;
    flex-wrap: wrap;

    gap:
        0.45rem
        1.15rem;

    list-style: none;
}

.sn-footer-utility li {
    position: relative;
}

.sn-footer-utility li
+ li::before {
    content: "·";

    position: absolute;
    left: -0.67rem;

    color:
        rgba(
            255,
            255,
            255,
            0.28
        );
}

.sn-footer-utility a,
.sn-footer-utility
.sn-footer-pending {
    font-size: 0.7rem;
}

.sn-footer-utility a {
    color:
        rgba(
            255,
            255,
            255,
            0.74
        );
}

.sn-footer-utility
.sn-footer-pending {
    color:
        rgba(
            255,
            255,
            255,
            0.38
        );
}

.sn-footer-compact-categories h2 {
    margin-bottom: 0.8rem;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

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

.sn-footer-compact-category-columns {
    display: grid;

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

    gap:
        0
        1.6rem;
}

.sn-footer-compact-category-columns ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sn-footer-compact-category-columns li
+ li {
    margin-top: 0.54rem;
}

.sn-footer-compact-category-columns
.sn-footer-category-link {
    font-size: 0.71rem;
    line-height: 1.3;
}

.sn-footer-bottom {
    min-height: 50px;
}

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

@media (max-width: 1000px) {

    .sn-hero-media-grid {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(310px, 0.9fr);
    }

    .sn-publications-media-grid {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(310px, 0.88fr);
    }

    .sn-footer-compact {
        grid-template-columns:
            minmax(270px, 0.8fr)
            minmax(0, 1.5fr);

        gap: 2.8rem;
    }

    .sn-footer-compact-category-columns {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 820px) {

    .sn-hero-media-grid,
    .sn-publications-media-grid {
        height: auto;
        grid-template-columns: 1fr;
    }

    .sn-hero-main-feature {
        aspect-ratio: 16 / 9;
    }

    .sn-publication-main-feature {
        aspect-ratio: 16 / 8.7;
    }

    .sn-footer-compact {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sn-footer-compact-brand {
        max-width: 560px;
    }
}

@media (max-width: 580px) {

    .sn-overlay-title {
        font-size:
            clamp(
                1.55rem,
                7.7vw,
                2.15rem
            );
    }

    .sn-publication-overlay-title {
        font-size:
            clamp(
                1.35rem,
                6.8vw,
                1.9rem
            );
    }

    .sn-hero-side-item,
    .sn-publication-grid-item {
        grid-template-columns:
            108px
            minmax(0, 1fr);
    }

    .sn-footer-utility ul {
        gap:
            0.5rem
            1rem;
    }

    .sn-footer-compact-category-columns {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            0
            1rem;
    }
}