/* =========================================================
   BEOACTIVE — NOVOSTI / SAVETI
========================================================= */

.news-page {
    --news-navy: #102a3a;
    --news-green: #258448;
    --news-green-bright: #36b83b;
    --news-soft: #f5f8f6;
    --news-line: #dce5e0;
    --news-text: #52636d;
    --news-muted: #7b898f;

    background: #fff;
    color: var(--news-navy);
}


.news-page *,
.news-page *::before,
.news-page *::after {
    box-sizing: border-box;
}


.news-page a {
    color: inherit;
}



/* =========================================================
   SHARED
========================================================= */

.news-eyebrow {
    margin: 0;

    color: var(--news-green);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .13em;
    text-transform: uppercase;
}



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

.news-hero {
    padding:
        clamp(78px, 7vw, 110px)
        0
        clamp(64px, 6vw, 90px);

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(54, 184, 59, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #f8faf9 100%
        );
}


.news-hero-inner {
    max-width: 850px;
}


.news-hero h1 {
    max-width: 800px;

    margin: 17px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(52px, 5.2vw, 74px);

    font-weight: 600;
    line-height: .98;

    letter-spacing: -.055em;
}


.news-hero h1 span {
    display: block;

    margin-top: 7px;

    color: var(--news-green);

    font-size: .72em;

    letter-spacing: -.045em;
}


.news-hero-lead {
    max-width: 660px;

    margin: 25px 0 0;

    color: var(--news-text);

    font-size: 16px;
    line-height: 1.7;
}



/* =========================================================
   CONTENT
========================================================= */

.news-content {
    padding:
        clamp(72px, 7vw, 108px)
        0;

    background: #fff;
}



/* =========================================================
   FEATURED ARTICLE
========================================================= */

.news-featured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);

    overflow: hidden;

    min-height: 480px;

    border:
        1px solid var(--news-line);

    border-radius: 24px;

    background: var(--news-soft);
}


.news-featured-media {
    display: block;

    min-height: 480px;

    overflow: hidden;

    background: #e9efeb;
}


.news-featured-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}


.news-featured:hover
.news-featured-media img {
    transform: scale(1.025);
}


.news-featured-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        clamp(34px, 4vw, 56px);
}


.news-meta {
    display: flex;

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

    gap: 10px 14px;

    color: var(--news-muted);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .025em;
}


.news-category {
    color: var(--news-green);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .09em;
}


.news-featured h2 {
    margin:
        17px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(32px, 3.1vw, 46px);

    font-weight: 600;
    line-height: 1.06;

    letter-spacing: -.045em;
}


.news-featured h2 a {
    text-decoration: none;
}


.news-featured-excerpt {
    margin:
        20px 0 0;

    color: var(--news-text);

    font-size: 14px;
    line-height: 1.65;
}


.news-read-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    align-self: flex-start;

    margin-top: 27px;

    color: var(--news-green);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}


.news-read-more span {
    transition:
        transform .2s ease;
}


.news-read-more:hover span {
    transform:
        translateX(4px);
}



/* =========================================================
   IMAGE PLACEHOLDER
========================================================= */

.news-image-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-height: inherit;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(54, 184, 59, .17),
            transparent 34%
        ),
        var(--news-soft);

    color: var(--news-green);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}



/* =========================================================
   LIST HEADING
========================================================= */

.news-list-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin:
        clamp(68px, 7vw, 96px)
        0
        28px;
}


.news-list-head h2 {
    margin:
        10px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(32px, 3vw, 44px);

    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -.04em;
}



/* =========================================================
   NEWS GRID
========================================================= */

.news-grid {
    display: grid;

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

    gap: 18px;
}


.news-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    min-width: 0;

    border:
        1px solid var(--news-line);

    border-radius: 20px;

    background: #fff;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.news-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(37, 132, 72, .25);

    box-shadow:
        0 20px 48px
        rgba(16, 42, 58, .07);
}


.news-card-media {
    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background: var(--news-soft);
}


.news-card-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.news-card:hover
.news-card-media img {
    transform:
        scale(1.03);
}


.news-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding:
        23px 22px 21px;
}


.news-card h3 {
    margin:
        14px 0 0;

    color: var(--news-navy);

    font-size: 21px;
    font-weight: 600;
    line-height: 1.16;

    letter-spacing: -.03em;
}


.news-card h3 a {
    text-decoration: none;
}


.news-card-content > p {
    margin:
        13px 0 0;

    color: var(--news-text);

    font-size: 12.5px;
    line-height: 1.58;
}


.news-card-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    align-self: flex-start;

    margin-top: auto;
    padding-top: 21px;

    color: var(--news-green);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}


.news-card-link span {
    transition:
        transform .2s ease;
}


.news-card-link:hover span {
    transform:
        translateX(3px);
}



/* =========================================================
   PAGINATION
========================================================= */

.news-pagination {
    margin-top:
        clamp(44px, 5vw, 68px);
}


.news-pagination ul {
    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.news-pagination a,
.news-pagination span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;

    padding: 0 10px;

    border:
        1px solid var(--news-line);

    border-radius: 10px;

    background: #fff;

    color: var(--news-navy);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


.news-pagination .current {
    border-color: var(--news-green);

    background: var(--news-green);

    color: #fff;
}



/* =========================================================
   EMPTY STATE
========================================================= */

.news-empty {
    max-width: 700px;

    padding:
        30px 0;
}


.news-empty h2 {
    margin:
        12px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(34px, 3.5vw, 48px);

    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -.04em;
}


.news-empty > p:last-child {
    margin:
        17px 0 0;

    color: var(--news-text);

    font-size: 14px;
    line-height: 1.65;
}



/* =========================================================
   CTA
========================================================= */

.news-cta {
    padding:
        0
        0
        clamp(78px, 8vw, 118px);

    background: #fff;
}


.news-cta-card {
    display: grid;

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

    align-items: center;

    gap: 50px;

    padding:
        clamp(38px, 4.5vw, 58px);

    border-radius: 24px;

    background: var(--news-navy);

    color: #fff;
}


.news-cta-copy {
    max-width: 720px;
}


.news-cta .news-eyebrow {
    color: #8ed89a;
}


.news-cta h2 {
    max-width: 650px;

    margin:
        13px 0 0;

    color: #fff;

    font-size:
        clamp(34px, 3.5vw, 48px);

    font-weight: 600;
    line-height: 1.04;

    letter-spacing: -.045em;
}


.news-cta-copy > p:last-child {
    max-width: 600px;

    margin:
        17px 0 0;

    color:
        rgba(255, 255, 255, .67);

    font-size: 13.5px;
    line-height: 1.6;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .news-featured {
        grid-template-columns: 1fr;
    }


    .news-featured-media {
        min-height: 360px;
    }


    .news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .news-cta-card {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .news-cta-action {
        justify-self: start;
    }

}



/* =========================================================
   LAPTOP LOW HEIGHT
========================================================= */

@media
    (min-width: 1100px)
    and (max-height: 760px) {

    .news-hero {
        padding:
            52px 0
            55px;
    }


    .news-hero h1 {
        font-size: 56px;
    }


    .news-hero-lead {
        margin-top: 18px;

        font-size: 14px;
    }


    .news-content {
        padding:
            55px 0;
    }


    .news-featured {
        min-height: 400px;
    }


    .news-featured-media {
        min-height: 400px;
    }


    .news-featured-content {
        padding:
            35px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .news-hero {
        padding:
            44px 0
            48px;
    }


    .news-eyebrow {
        font-size: 8.5px;
    }


    .news-hero h1 {
        margin-top: 12px;

        font-size: 40px;
        line-height: .98;
    }


    .news-hero-lead {
        margin-top: 17px;

        font-size: 13px;
        line-height: 1.55;
    }


    .news-content {
        padding:
            44px 0;
    }


    /* Featured */

    .news-featured {
        min-height: 0;

        border-radius: 18px;
    }


    .news-featured-media {
        min-height: 0;

        aspect-ratio: 16 / 10;
    }


    .news-featured-content {
        padding:
            22px 19px;
    }


    .news-meta {
        font-size: 9px;
    }


    .news-featured h2 {
        margin-top: 12px;

        font-size: 27px;
        line-height: 1.08;
    }


    .news-featured-excerpt {
        margin-top: 13px;

        font-size: 12.5px;
        line-height: 1.55;
    }


    .news-read-more {
        margin-top: 18px;

        font-size: 11px;
    }


    /* List */

    .news-list-head {
        margin:
            46px 0
            18px;
    }


    .news-list-head h2 {
        margin-top: 8px;

        font-size: 29px;
    }


    .news-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .news-card {
        border-radius: 17px;
    }


    .news-card-content {
        padding:
            18px 17px;
    }


    .news-card h3 {
        margin-top: 11px;

        font-size: 20px;
    }


    .news-card-content > p {
        margin-top: 10px;

        font-size: 12px;
    }


    .news-card-link {
        padding-top: 16px;
    }


    /* CTA */

    .news-cta {
        padding-bottom: 52px;
    }


    .news-cta-card {
        gap: 23px;

        padding:
            27px 21px;

        border-radius: 18px;
    }


    .news-cta h2 {
        margin-top: 10px;

        font-size: 29px;
    }


    .news-cta-copy > p:last-child {
        margin-top: 13px;

        font-size: 12.5px;
    }


    .news-cta-action,
    .news-cta-action .btn {
        width: 100%;
    }


    .news-cta-action .btn {
        justify-content: center;
    }

}

/* =========================================================
   BEOACTIVE — SINGLE ARTICLE
========================================================= */

.news-single-page {
    --news-navy: #102a3a;
    --news-green: #258448;
    --news-green-bright: #36b83b;
    --news-soft: #f5f8f6;
    --news-line: #dce5e0;
    --news-text: #52636d;
    --news-muted: #7b898f;

    background: #fff;
    color: var(--news-navy);
}


.news-single-page *,
.news-single-page *::before,
.news-single-page *::after {
    box-sizing: border-box;
}



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

.article-hero {
    padding:
        clamp(70px, 7vw, 108px)
        0
        clamp(56px, 5vw, 78px);

    background:
        radial-gradient(
            circle at 82% 15%,
            rgba(54, 184, 59, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #f8faf9 100%
        );
}


.article-hero-inner {
    max-width: 970px;
}


.article-back {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--news-green);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        gap .2s ease;
}


.article-back:hover {
    gap: 12px;
}


.article-meta {
    display: flex;

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

    gap: 12px 16px;

    margin-top: 45px;

    color: var(--news-muted);

    font-size: 10.5px;
    font-weight: 600;
}


.article-category {
    color: var(--news-green);

    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.article-hero h1 {
    max-width: 940px;

    margin: 18px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(48px, 5.6vw, 80px);

    font-weight: 600;
    line-height: .99;

    letter-spacing: -.055em;
}


.article-intro {
    max-width: 720px;

    margin: 26px 0 0;

    color: var(--news-text);

    font-size:
        clamp(16px, 1.3vw, 19px);

    line-height: 1.7;
}



/* =========================================================
   FEATURED IMAGE
========================================================= */

.article-featured {
    padding:
        clamp(40px, 4vw, 62px)
        0
        0;

    background: #fff;
}


.article-featured-image {
    overflow: hidden;

    width: 100%;

    margin: 0;

    border-radius: 24px;

    background: var(--news-soft);
}


.article-featured-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 720px;

    object-fit: cover;
}



/* =========================================================
   ARTICLE MAIN
========================================================= */

.article-main {
    padding:
        clamp(64px, 7vw, 104px)
        0;

    background: #fff;
}


.article-main-inner {
    max-width: 820px;
}



/* =========================================================
   GUTENBERG CONTENT
========================================================= */

.article-content {
    color: #354d58;

    font-size: 17px;
    line-height: 1.78;
}


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


.article-content > *:last-child {
    margin-bottom: 0;
}


.article-content p {
    margin:
        0 0 26px;
}


.article-content h2 {
    margin:
        58px 0
        21px;

    color: var(--news-navy);

    font-size:
        clamp(31px, 3vw, 42px);

    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -.04em;
}


.article-content h3 {
    margin:
        42px 0
        16px;

    color: var(--news-navy);

    font-size:
        clamp(23px, 2.2vw, 29px);

    font-weight: 600;
    line-height: 1.15;

    letter-spacing: -.03em;
}


.article-content h4 {
    margin:
        34px 0
        14px;

    color: var(--news-navy);

    font-size: 20px;
    line-height: 1.25;
}


.article-content strong {
    color: var(--news-navy);

    font-weight: 700;
}


.article-content a {
    color: var(--news-green);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


.article-content ul,
.article-content ol {
    margin:
        27px 0;

    padding-left: 25px;
}


.article-content li {
    margin:
        9px 0;

    padding-left: 4px;
}


.article-content li::marker {
    color: var(--news-green);
}



/* =========================================================
   CONTENT IMAGES
========================================================= */

.article-content figure {
    margin:
        44px 0;
}


.article-content figure img,
.article-content > img {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: 18px;
}


.article-content figcaption {
    margin-top: 10px;

    color: var(--news-muted);

    font-size: 11px;
    line-height: 1.5;
}



/* =========================================================
   BLOCKQUOTE
========================================================= */

.article-content blockquote {
    margin:
        44px 0;

    padding:
        28px 30px;

    border-left:
        3px solid var(--news-green);

    border-radius:
        0 16px 16px 0;

    background: var(--news-soft);

    color: var(--news-navy);

    font-size: 20px;
    font-weight: 500;
    line-height: 1.55;
}


.article-content blockquote p {
    margin: 0;
}



/* =========================================================
   SEPARATOR
========================================================= */

.article-content hr {
    height: 1px;

    margin:
        48px 0;

    border: 0;

    background: var(--news-line);
}



/* =========================================================
   ARTICLE END
========================================================= */

.article-end {
    margin-top:
        clamp(58px, 6vw, 86px);
}


.article-end-line {
    width: 100%;
    height: 1px;

    background: var(--news-line);
}


.article-back-bottom {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: var(--news-green);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition:
        gap .2s ease;
}


.article-back-bottom:hover {
    gap: 12px;
}



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

.article-related {
    padding:
        clamp(74px, 7vw, 108px)
        0;

    background: var(--news-soft);
}


.article-related-head {
    margin-bottom:
        clamp(28px, 3.5vw, 42px);
}


.article-related-head h2 {
    margin:
        10px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(34px, 3.5vw, 48px);

    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -.045em;
}


.article-cta {
    padding-top:
        clamp(76px, 7vw, 110px);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .article-hero-inner {
        max-width: 760px;
    }


    .article-main-inner {
        max-width: 720px;
    }


    .article-featured-image {
        border-radius: 20px;
    }

}



/* =========================================================
   LAPTOP LOW HEIGHT
========================================================= */

@media
    (min-width: 1100px)
    and (max-height: 760px) {

    .article-hero {
        padding:
            48px 0
            52px;
    }


    .article-meta {
        margin-top: 30px;
    }


    .article-hero h1 {
        font-size: 58px;
    }


    .article-intro {
        margin-top: 18px;

        font-size: 15px;
    }


    .article-featured {
        padding-top: 34px;
    }


    .article-featured-image img {
        max-height: 570px;
    }


    .article-main {
        padding:
            58px 0;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .article-hero {
        padding:
            40px 0
            44px;
    }


    .article-back {
        font-size: 10px;
    }


    .article-meta {
        gap: 9px 12px;

        margin-top: 31px;

        font-size: 9px;
    }


    .article-hero h1 {
        margin-top: 13px;

        font-size: 39px;
        line-height: 1.01;

        letter-spacing: -.045em;
    }


    .article-intro {
        margin-top: 18px;

        font-size: 14px;
        line-height: 1.58;
    }


    /* Featured */

    .article-featured {
        padding-top: 28px;
    }


    .article-featured-image {
        border-radius: 17px;
    }


    .article-featured-image img {
        max-height: none;
    }


    /* Content */

    .article-main {
        padding:
            44px 0
            54px;
    }


    .article-content {
        font-size: 14.5px;
        line-height: 1.72;
    }


    .article-content p {
        margin-bottom: 20px;
    }


    .article-content h2 {
        margin:
            42px 0
            16px;

        font-size: 29px;
        line-height: 1.08;
    }


    .article-content h3 {
        margin:
            32px 0
            13px;

        font-size: 22px;
    }


    .article-content h4 {
        margin-top: 28px;

        font-size: 18px;
    }


    .article-content ul,
    .article-content ol {
        margin:
            21px 0;

        padding-left: 21px;
    }


    .article-content li {
        margin:
            7px 0;
    }


    .article-content figure {
        margin:
            30px 0;
    }


    .article-content figure img,
    .article-content > img {
        border-radius: 14px;
    }


    .article-content blockquote {
        margin:
            31px 0;

        padding:
            20px 19px;

        font-size: 17px;
    }


    /* End */

    .article-end {
        margin-top: 48px;
    }


    /* Related */

    .article-related {
        padding:
            50px 0;
    }


    .article-related-head {
        margin-bottom: 21px;
    }


    .article-related-head h2 {
        margin-top: 8px;

        font-size: 30px;
    }


    .article-cta {
        padding-top: 52px;
    }

}

/* =========================================================
   SINGLE ARTICLE — FINAL EDITORIAL POLISH
========================================================= */


/* =========================================================
   FEATURED IMAGE
   Jedinstven 16:9 format
========================================================= */

.article-featured-image {
    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;

    aspect-ratio: 16 / 9;

    overflow: hidden;
}


.article-featured-image img {
    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: cover;
    object-position: center;
}



/* =========================================================
   ARTICLE CONTENT WIDTH / RHYTHM
========================================================= */

.article-main {
    padding:
        70px 0
        90px;
}


.article-main-inner {
    max-width: 800px;
}


/* Prvi pasus kao prirodan uvod u tekst */
.article-content > p:first-child {
    color: #405965;

    font-size: 18px;
    line-height: 1.72;
}



/* =========================================================
   HEADINGS
========================================================= */

.article-content h2 {
    margin:
        52px 0
        18px;

    font-size:
        clamp(31px, 2.7vw, 40px);

    line-height: 1.08;
}


.article-content h3 {
    margin:
        38px 0
        14px;
}



/* =========================================================
   IMAGES INSIDE ARTICLE
========================================================= */

.article-content .wp-block-image {
    margin:
        38px 0
        46px;
}


.article-content .wp-block-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
    object-position: center;

    border-radius: 18px;
}


/* Ako Gutenberg napravi figure drugačije */
.article-content figure.wp-block-image {
    width: 100%;
}


.article-content figure.wp-block-image figcaption {
    margin:
        9px 4px 0;

    color: var(--news-muted);

    font-size: 11px;
    line-height: 1.5;
}



/* =========================================================
   PARAGRAPH RHYTHM
========================================================= */

.article-content p {
    margin:
        0 0 22px;
}


.article-content {
    font-size: 17px;
    line-height: 1.72;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .article-featured-image {
        aspect-ratio: 16 / 10;
    }


    .article-main {
        padding:
            42px 0
            52px;
    }


    .article-main-inner {
        max-width: none;
    }


    .article-content {
        font-size: 14.5px;
        line-height: 1.68;
    }


    .article-content > p:first-child {
        font-size: 15.5px;
        line-height: 1.65;
    }


    .article-content h2 {
        margin:
            36px 0
            13px;

        font-size: 27px;
        line-height: 1.1;
    }


    .article-content .wp-block-image {
        margin:
            27px 0
            32px;
    }


    .article-content .wp-block-image img {
        aspect-ratio: 16 / 10;

        border-radius: 14px;
    }

}

/* =========================================================
   SINGLE ARTICLE — SPLIT HERO
========================================================= */

.article-hero-split {
    padding:
        clamp(62px, 6vw, 92px)
        0;

    background:
        radial-gradient(
            circle at 83% 20%,
            rgba(54, 184, 59, .09),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #f8faf9 100%
        );
}


.article-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .93fr)
        minmax(440px, 1.07fr);

    align-items: center;

    gap:
        clamp(48px, 5.5vw, 86px);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.article-hero-copy {
    min-width: 0;
}


.article-hero-split .article-back {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--news-green);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        gap .2s ease;
}


.article-hero-split .article-back:hover {
    gap: 12px;
}


.article-hero-split .article-meta {
    display: flex;

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

    gap: 11px 15px;

    margin-top: 42px;

    color: var(--news-muted);

    font-size: 10.5px;
    font-weight: 600;
}


.article-hero-split .article-category {
    color: var(--news-green);

    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.article-hero-split h1 {
    max-width: 680px;

    margin: 18px 0 0;

    color: var(--news-navy);

    font-size:
        clamp(52px, 4.8vw, 72px);

    font-weight: 600;
    line-height: .99;

    letter-spacing: -.055em;
}


.article-hero-split .article-intro {
    max-width: 610px;

    margin: 23px 0 0;

    color: var(--news-text);

    font-size: 16px;
    line-height: 1.65;
}



/* =========================================================
   RIGHT IMAGE
========================================================= */

.article-hero-media {
    overflow: hidden;

    width: 100%;

    margin: 0;

    aspect-ratio: 4 / 3;

    border-radius: 24px;

    background: var(--news-soft);

    box-shadow:
        0 24px 70px
        rgba(16, 42, 58, .07);
}


.article-hero-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}



/* =========================================================
   WITHOUT FEATURED IMAGE
========================================================= */

.article-hero-split.no-image
.article-hero-grid {
    grid-template-columns: 1fr;

    max-width: 970px;
}


.article-hero-split.no-image
.article-hero-copy {
    max-width: 900px;
}



/* =========================================================
   ARTICLE AFTER SPLIT HERO
========================================================= */

.article-hero-split + .article-main {
    padding-top:
        clamp(68px, 7vw, 100px);
}



/* =========================================================
   LOW HEIGHT LAPTOP
========================================================= */

@media
    (min-width: 1100px)
    and (max-height: 760px) {

    .article-hero-split {
        padding:
            44px 0
            48px;
    }


    .article-hero-grid {
        grid-template-columns:
            minmax(0, .92fr)
            minmax(400px, 1.08fr);

        gap: 44px;
    }


    .article-hero-split
    .article-meta {
        margin-top: 28px;
    }


    .article-hero-split h1 {
        font-size: 52px;
    }


    .article-hero-media {
        max-height: 440px;
    }

}



/* =========================================================
   TABLET / 1024 LANDSCAPE
========================================================= */

@media (max-width: 1099px) {

    .article-hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .article-hero-copy {
        max-width: 760px;
    }


    .article-hero-split h1 {
        max-width: 760px;
    }


    .article-hero-media {
        max-width: 900px;

        aspect-ratio: 16 / 9;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .article-hero-split {
        padding:
            38px 0
            44px;
    }


    .article-hero-grid {
        gap: 29px;
    }


    .article-hero-split
    .article-back {
        font-size: 10px;
    }


    .article-hero-split
    .article-meta {
        gap: 9px 12px;

        margin-top: 30px;

        font-size: 9px;
    }


    .article-hero-split h1 {
        margin-top: 13px;

        font-size: 38px;
        line-height: 1.01;

        letter-spacing: -.045em;
    }


    .article-hero-split
    .article-intro {
        margin-top: 17px;

        font-size: 14px;
        line-height: 1.58;
    }


    .article-hero-media {
        aspect-ratio: 16 / 10;

        border-radius: 17px;

        box-shadow: none;
    }

}

/* =========================================================
   SINGLE ARTICLE — INTRO / LEAD PARAGRAPH
========================================================= */

.article-content > p:first-child {
    max-width: 760px;

    margin-bottom: 42px;

    color: #294653;

    font-size: 19px;
    font-weight: 500;
    line-height: 1.65;

    letter-spacing: -.012em;
}


/* MOBILE */
@media (max-width: 620px) {

    .article-content > p:first-child {
        margin-bottom: 30px;

        font-size: 16px;
        line-height: 1.6;
    }

}

/* =========================================================
   SINGLE — DESKTOP HERO FINAL POLISH
========================================================= */

@media (min-width: 1100px) {

    .article-hero-split {
        padding:
            54px 0
            68px;
    }

    .article-hero-media {
        transform: translateY(18px);
    }

    .article-hero-split + .article-main {
        padding-top: 52px;
    }

}

/* =========================================================
   SINGLE ARTICLE — FINAL DESKTOP MICRO POLISH
========================================================= */

@media (min-width: 1100px) {

    /* Back link malo čitljiviji */
    .article-hero-split .article-back {
        font-size: 12px;
    }

    /* Meta bliže back linku + malo čitljivija */
    .article-hero-split .article-meta {
        margin-top: 34px;
        font-size: 11px;
    }

}


/* =========================================================
   SINGLE ARTICLE — EDITORIAL IMAGE BREAKOUT TEST
   Tekst ostaje 800px, slike izlaze blago šire
========================================================= */

@media (min-width: 1000px) {

    .article-content .wp-block-image {
        width: min(920px, calc(100vw - 80px));

        margin-left: 50%;
        transform: translateX(-50%);
    }

}

/* =========================================================
   SINGLE ARTICLE — LOW HEIGHT LAPTOP SPACING
========================================================= */

@media
    (min-width: 1100px)
    and (max-height: 760px) {

    /* Manje praznog prostora posle povratnog linka */
    .article-main {
        padding-bottom: 32px;
    }

    /* Malo kompaktniji ulaz u related sekciju */
    .article-related {
        padding-top: 58px;
        padding-bottom: 72px;
    }

}

/* =========================================================
   SINGLE ARTICLE — TABLET LANDSCAPE / 1024
   Vraćamo kompaktan split hero
========================================================= */

@media
    (min-width: 900px)
    and (max-width: 1099px) {

    .article-hero-split {
        padding:
            46px 0
            54px;
    }


    .article-hero-grid {
        grid-template-columns:
            minmax(0, .92fr)
            minmax(430px, 1.08fr);

        align-items: center;

        gap: 34px;
    }


    .article-hero-copy {
        max-width: none;
    }


    .article-hero-split
    .article-back {
        font-size: 11px;
    }


    .article-hero-split
    .article-meta {
        margin-top: 28px;

        font-size: 10px;
    }


    .article-hero-split h1 {
        max-width: 470px;

        margin-top: 15px;

        font-size: 46px;
        line-height: 1;

        letter-spacing: -.05em;
    }


    .article-hero-media {
        width: 100%;
        max-width: none;

        aspect-ratio: 4 / 3;

        border-radius: 20px;

        box-shadow:
            0 20px 55px
            rgba(16, 42, 58, .055);
    }


    .article-hero-split
    + .article-main {
        padding-top: 56px;
    }

}

/* =========================================================
   SINGLE ARTICLE — FINAL MOBILE POLISH
========================================================= */

@media (max-width: 620px) {

    /* Manji prelaz hero -> sadržaj */
    .article-hero-split + .article-main {
        padding-top: 42px;
    }

    /* Malo prijatniji body tekst za čitanje */
    .article-content {
        font-size: 15px;
        line-height: 1.7;
    }

}

/* =========================================================
   NEWS ARCHIVE — DESKTOP POLISH
========================================================= */

@media (min-width: 1100px) {

    .news-hero {
        padding:
            84px 0
            62px;
    }

    .news-content {
        padding-top: 68px;
    }

}

/* =========================================================
   NEWS ARCHIVE — LOW HEIGHT LAPTOP POLISH
========================================================= */

@media
    (min-width: 1100px)
    and (max-height: 760px) {

    .news-list-head {
        margin-top: 54px;
        margin-bottom: 24px;
    }

}

/* =========================================================
   NEWS ARCHIVE — TABLET FINAL POLISH
========================================================= */


/* =========================================================
   TABLET PORTRAIT
   768 × 1024 i slični
========================================================= */

@media
    (min-width: 621px)
    and (max-width: 980px) {

    /* Malo kompaktniji hero */
    .news-hero {
        padding:
            62px 0
            58px;
    }


    /* Manji prelaz hero -> featured */
    .news-content {
        padding:
            58px 0
            70px;
    }


    /* Featured kartica */
    .news-featured {
        min-height: 0;
    }


    /* Umesto fiksnog min-height: 360px */
    .news-featured-media {
        min-height: 0;

        aspect-ratio: 16 / 9;
    }


    .news-featured-content {
        padding:
            30px 28px;
    }


    /* Malo bliže featured kartici */
    .news-list-head {
        margin:
            58px 0
            24px;
    }

}



/* =========================================================
   TABLET LANDSCAPE
   1024 × 768 i slični
========================================================= */

@media
    (min-width: 981px)
    and (max-width: 1099px) {

    /* Na niskom landscape ekranu hero ne treba
       da troši skoro pola prvog viewporta */
    .news-hero {
        padding:
            58px 0
            56px;
    }


    .news-content {
        padding:
            58px 0
            72px;
    }


    /* Zadržavamo split featured,
       ali ga značajno spuštamo po visini */
    .news-featured {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(340px, .92fr);

        min-height: 400px;
    }


    .news-featured-media {
        min-height: 400px;
    }


    .news-featured-content {
        padding:
            34px 30px;
    }


    .news-featured h2 {
        font-size: 34px;
    }


    /* Featured -> lista članaka */
    .news-list-head {
        margin:
            58px 0
            24px;
    }


    /* Na 1024 tri kolone su već preuske
       i sada ostavljaju besmislenu praznu treću */
    .news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   NEWS ARCHIVE — FINAL MOBILE POLISH
========================================================= */

@media (max-width: 620px) {

    .news-hero-lead {
        font-size: 13.5px;
        line-height: 1.58;
    }

}

/* =========================================================
   NOVOSTI ARCHIVE — FINAL MOBILE READABILITY PASS
========================================================= */

@media (max-width: 620px) {

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

    .news-eyebrow {
        font-size: 10.5px;
        line-height: 1.35;
    }


    .news-hero-lead {
        font-size: 15.5px;
        line-height: 1.62;
    }


    /* =====================================================
       FEATURED ARTICLE
    ====================================================== */

    .news-meta {
        gap: 8px 12px;

        font-size: 10.5px;
        line-height: 1.4;
    }


    .news-featured h2 {
        font-size: 28px;
        line-height: 1.08;
    }


    .news-featured-excerpt {
        margin-top: 13px;

        font-size: 14.5px;
        line-height: 1.58;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;

        overflow: hidden;
    }


    .news-read-more {
        margin-top: 17px;

        font-size: 13.5px;
    }


    /* =====================================================
       "NAJNOVIJE / JOŠ IZ BEOACTIVE-A"
    ====================================================== */

    .news-list-head {
        margin:
            46px 0
            21px;
    }


    .news-list-head .news-eyebrow {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .11em;
    }


    .news-list-head h2 {
        margin-top: 9px;

        font-size: 31px;
        line-height: 1.08;
    }


    /* =====================================================
       ARTICLE CARDS
    ====================================================== */

    .news-card-content {
        padding:
            19px
            18px
            20px;
    }


    .news-card h3 {
        margin-top: 12px;

        font-size: 21px;
        line-height: 1.25;
    }


    .news-card-content > p {
        margin-top: 10px;

        font-size: 14.5px;
        line-height: 1.58;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        overflow: hidden;
    }


    .news-card-link {
        padding-top: 16px;

        font-size: 13.5px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .news-cta h2 {
        font-size: 30px;
        line-height: 1.08;
    }


    .news-cta-copy > p:last-child {
        font-size: 14.5px;
        line-height: 1.6;
    }


    .news-cta-action .btn {
        min-height: 46px;

        font-size: 14px;
    }

}