/* =============================================================================
   ADVANCE.HR — MODERN ARTICLE LISTING
   /2025/css/list_modern.css

   Modern editorial listing: modules 4 (Tekstovi) and 1 (Vijesti)
   ========================================================================== */

/* =============================================================================
   PAGE SHEET / LAYOUT
   ========================================================================== */

.modernListPage .navAndMedia {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
}

.modernListPage .media-content_outer {
    margin-top: 0;
}

.modernListPage .media-content {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(230px, 270px);
    justify-content: center;
    align-items: start;
    gap: 38px;
    max-width: 1060px;
    margin: 0 auto 160px;
    padding: 18px 26px 0;
    box-sizing: border-box;
    overflow: visible;
}

.modernListPage.nemaDesneStrane .media-content,
.modernListPage .nemaDesneStrane .media-content {
    grid-template-columns: minmax(0, 780px);
}

.modernListPage .media-left.modernListLeft {
    width: 100%;
    max-width: 720px !important;
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

.modernListPage #prrez_normal.modernListLeft {
    display: block !important;
}

.modernListPage .media-right {
    width: 100%;
    max-width: 270px;
    margin: 0;
    padding: 0 0 0 28px;
    box-sizing: border-box;
    border: 0;
    border-left: 1px solid #e8e7e4;
    background: transparent;
}

.modernListPage .ellipsisWrap {
    display: none !important;
}


/* =============================================================================
   MODULE / CATEGORY HEADER
   ========================================================================== */

.modernListPage .media-header {
    max-width: 1120px;
    margin: 0 auto 20px;
    padding: 22px 30px 0;
    box-sizing: border-box;
    text-align: center;
}

.modernListPage .media-header-inner {
    padding-bottom: 10px;
}

.modernListPage #media-section-title {
    margin: 0 0 14px !important;
    padding: 0 16px 7px !important;
    border: 0;
    border-bottom: 1px solid #d8d7d4;
    color: #24262c;
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: none;
}

.modernListPage #media-section-title span {
    font: inherit;
    letter-spacing: inherit;
}

.modernListPage .breadcrumb-nav {
    margin: 0 auto 12px;
}

.modernListPage .breadcrumb-nav ol {
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 0;
}

.modernListPage .breadcrumb-nav li::after {
    margin: 0 9px;
    color: #c0c1c5;
    font-size: 8px;
}

.modernListPage .breadcrumb-nav a {
    padding: 0 0 5px;
    border-bottom: 1px solid transparent;
    color: #7a7d84;
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 16px;
    letter-spacing: .035em;
}

.modernListPage .breadcrumb-nav li:last-child a {
    color: #292c33;
    font-weight: 650;
    border-bottom: 2px solid #6c6588;
}

.modernListPage .breadcrumb-nav a:hover {
    border-bottom-color: #9b96ad;
}

.modernListPage .media-nav {
    width: 100%;
    padding: 0 0 10px;
    margin: 0;
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.modernListPage .media-nav ul {
    width: auto;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0;
    border-bottom: 1px solid #eeeeec;
    gap: 0;
    justify-content: center;
}

.modernListPage .media-nav li {
    line-height: 1.2;
}

.modernListPage .media-nav a,
.modernListPage .media-nav h1 {
    margin: 0 3px 7px;
    padding: 6px 8px;
    border: 0;
    border-radius: 2px;
    box-shadow: none !important;
    color: #656970;
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .015em;
    text-decoration: none;
}

.modernListPage .media-nav a:hover {
    color: #24272e;
    background: #f6f5f2;
    text-decoration: none;
}

.modernListPage .media-nav a.active {
    padding-bottom: 6px;
    border-bottom: 2px solid #71698d;
    color: #24272e;
}


/* ------- Kill legacy Vijesti nav decorations in modern mode ------- */
.modernListPage .listanjeStyle_vijesti a,
.modernListPage .listanjeStyle_vijesti li a {
    border: 0 !important;
}

.modernListPage .listanjeStyle_vijesti a::after,
.modernListPage .listanjeStyle_vijesti a::before {
    content: none !important;
    display: none !important;
}

.modernListPage .listanjeStyle_vijesti .circlflagg {
    display: none !important;
}

.modernListPage .listingSettings {
    right: 8px;
    bottom: -30px;
    color: #9a9da4;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
}

.modernListPage .listingSettings i {
    padding: 6px;
    color: #989ba1;
    font-size: 12px;
}

.modernListPage .listingSettings i:hover {
    color: #373b45;
    transform: none;
}

.modernListPage .listingSettings__count {
    padding-left: 5px;
}


/* =============================================================================
   ARTICLE LIST RESET
   ========================================================================== */

.modernListPage .news-itemWrapper.modernListItem,
.modernListPage .news-itemWrapper.modernListItem:nth-of-type(even),
.modernListPage .news-itemWrapper.modernListItem:nth-of-type(odd) {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}


/* ------- Kill legacy / zombie pseudo-elements from old listing CSS ------- */

.modernListPage .news-itemWrapper.modernListItem::before,
.modernListPage .news-itemWrapper.modernListItem::after,
.modernListPage .news-itemWrapper.modernListItem:nth-of-type(even)::before,
.modernListPage .news-itemWrapper.modernListItem:nth-of-type(even)::after,
.modernListPage .news-itemWrapper.modernListItem:nth-of-type(odd)::before,
.modernListPage .news-itemWrapper.modernListItem:nth-of-type(odd)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    box-shadow: none !important;
    background: none !important;
}


.modernListPage .modernListCard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 218px;
    gap: 26px;
    align-items: center;
    min-height: 166px;
    padding: 26px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #dedfdf;
    color: inherit;
    text-decoration: none;
}

.modernListPage .modernListItem:first-of-type .modernListCard {
    padding-top: 12px;
}

.modernListPage .modernListCopy {
    min-width: 0;
}


/* =============================================================================
   EYEBROW / CATEGORY
   ========================================================================== */

.modernListPage .modernListEyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
    color: #7f7b78;
    font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.modernListPage .modernListPretitle {
    color: #6b6663;
}

.modernListPage .modernListCategory {
    color: #7a6f91;
}

.modernListPage .modernListEyebrowSep {
    color: #c0bdba;
}


/* =============================================================================
   TITLE / LEAD
   ========================================================================== */

.modernListPage .modernListTitle {
    margin: 0;
    padding: 0;
    color: #17191e;

    font-family:
        "Source Serif Pro",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px !important;
    font-weight: 500;
    line-height: 1.07;
    letter-spacing: -.028em;
    text-wrap: pretty;

    transition: color 120ms ease;
}

.modernListPage .modernListItem:first-of-type .modernListTitle {
    font-size: 31px !important;
}

.modernListPage .modernListCard:hover .modernListTitle {
    color: #514966;
}

.modernListPage .modernListLead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    margin: 10px 0 0;

    color: #5c6067;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        sans-serif;

    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: .002em;
}

.modernListPage .modernListItem:first-of-type .modernListLead {
    font-size: 16px;
}


/* =============================================================================
   NEWS VARIANT — MODULE 1
   Same editorial family, slightly faster / denser rhythm.
   ========================================================================== */

.modernListPage .modernListItem--news .modernListCard {
    grid-template-columns:
        minmax(0, 1fr)
        205px;

    gap: 24px;

    min-height: 150px;

    padding:
        21px 0;
}

.modernListPage .modernListItem--news:first-of-type .modernListCard {
    padding-top: 12px;
}

.modernListPage .modernListItem--news .modernListTitle {
    font-size: 25px !important;
    line-height: 1.08;
}

.modernListPage .modernListItem--news:first-of-type .modernListTitle {
    font-size: 28px !important;
}

.modernListPage .modernListItem--news .modernListLead {
    -webkit-line-clamp: 2;

    margin-top: 8px;

    font-size: 14.5px;
    line-height: 1.43;
}

.modernListPage .modernListItem--news:first-of-type .modernListLead {
    font-size: 15px;
}

.modernListPage .modernListItem--news .modernListMeta {
    margin-top: 11px;
}

.modernListPage .modernListItem--news .modernListDate {
    color: #777b83;
    font-weight: 500;
}

.modernListPage .modernListItem--news .modernListThumb {
    width: 205px;
    aspect-ratio: 16 / 10;
}

.modernListPage .modernListItem--news .modernListCategory {
    color: #657596;
}

.modernListPage .modernListItem--news .modernListThumb--placeholder {
    color: #8d98aa;
}


/* =============================================================================
   META
   ========================================================================== */

.modernListPage .modernListMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 13px;

    color: #858990;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        sans-serif;

    font-size: 11.5px;
    line-height: 1.2;
}

.modernListPage .modernListAuthor {
    display: inline-flex;
    gap: 4px;
    color: #676b73;
}

.modernListPage .modernListMetaLabel {
    color: #9a9da3;
}

.modernListPage .modernListMetaSep {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #b9bbc0;
}

.modernListPage .modernListDate {
    white-space: nowrap;
}

.modernListPage .modernListLock,
.modernListPage .modernListComments,
.modernListPage .modernListSave {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #9b9ea5;
}

.modernListPage .modernListLock {
    color: #9e8a62;
}

.modernListPage .modernListComments i,
.modernListPage .modernListLock i,
.modernListPage .modernListSave i {
    font-size: 12px;
}

.modernListPage .modernListSave {
    padding: 2px;
    border-radius: 3px;
    cursor: pointer;
}

.modernListPage .modernListSave:hover {
    color: #615879;
    background: #f4f2f7;
}

.modernListPage .modernListSave.thisArticleIsSaved,
.modernListPage .modernListSave.thisArticleIsSaved i {
    color: #6e5f9b !important;
    outline: 0 !important;
    margin: 0 !important;
    padding: 2px !important;
}


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

.modernListPage .modernListThumb {
    position: relative;
    width: 218px;
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    background: #efefed;
}

.modernListPage .modernListThumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;

    transition:
        transform 220ms ease,
        filter 220ms ease;
}

.modernListPage .modernListCard:hover .modernListThumb img {
    transform: scale(1.018);
}

.modernListPage .modernListThumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e2df;

    box-sizing: border-box;

    color: #aaa7b0;

    background:
        linear-gradient(
            145deg,
            #f6f6f4,
            #ececea
        );
}

.modernListPage .modernListThumb--placeholder i {
    font-size: 28px;
    opacity: .7;
}


/* =============================================================================
   SIDEBAR — QUIETER, SUPPORTING ROLE
   ========================================================================== */

.modernListPage .category-description {
    margin: 0 0 28px;
    padding: 0 0 24px;
    border-bottom: 1px solid #e4e3e1;
}

.modernListPage .category-description h3,
.modernListPage #categoryDescTitle {
    margin: 0 0 10px;

    color: #33363c;

    font-family:
        "Source Serif Pro",
        Georgia,
        serif;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.modernListPage .category-desc {
    color: #666a71;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        sans-serif;

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

.modernListPage .most-read {
    margin: 0 0 26px;
    padding: 0 0 22px;
    border: 0;
    border-bottom: 1px solid #e4e3e1;
}

/* =============================================================================
   MOST READ HEADER / CONTROLS
   ========================================================================== */

.modernListPage .most-read-header {
    display: grid;

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

    align-items: center;

    column-gap: 8px;
    row-gap: 8px;

    width: 100%;

    margin: 0 0 13px;

    position: relative;
}


.modernListPage .most-read-header h2,
.modernListPage .most-read-header h3 {
    min-width: 0;

    margin: 0;

    color: #3b3e45;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        sans-serif;

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

    line-height: 1.3;

    letter-spacing: .045em;

    text-transform: uppercase;
}


.modernListPage .nazivKatNajcit {
    color: #8a8177;
}


.modernListPage .najcitDivider {
    margin:
        0 3px;

    color: #b7b5b1;
}


.modernListPage .citkom_word {
    white-space: normal;
}


.modernListPage .most-read-actions {
    position: static;

    top: auto;
    right: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 4px;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}


.modernListPage .icon-button_kmr,
.modernListPage .icon-button_kmr.kmr_comm {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    min-width: 28px;

    margin: 0;
    padding: 0;

    border:
        1px solid transparent;

    border-radius: 50%;

    background: transparent;

    color: #8f9299;

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

    box-sizing: border-box;

    cursor: pointer;
}


.modernListPage .icon-button_kmr i {
    display: block;

    margin: 0;
    padding: 0;

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


.modernListPage .icon-button_kmr:hover {
    border-color: #dedcd8;

    background: #f6f5f2;

    color: #42464f;
}


.modernListPage .icon-button_kmr.kmread_on {
    border-color: #cbc8c2;

    background: #fff;

    color: #292d35;
}


/* ------- Vremenski raspon koji JS ubacuje nakon klika ------- */

.modernListPage .most-read-header .most-read-range {
    grid-column: 1 / -1;

    position: static;

    display: flex;
    align-items: center;

    gap: 5px;

    width: fit-content;
    max-width: 100%;

    margin: 0;

    padding:
        5px 7px;

    box-sizing: border-box;

    border-radius: 4px;

    background: #f4f2ee;

    color: #696c72;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        sans-serif;

    font-size: 11px;

    white-space: nowrap;
}


.modernListPage .most-read-header .most-read-range::before {
    display: none;
}


.modernListPage .most-read-header .most-read-range i {
    margin: 0;

    color: #9b8d7d;

    font-size: 13px;
}


.modernListPage .most-read-header .most-read-range label {
    margin: 0;

    color: #6d7076;

    font-size: 11px;
    letter-spacing: .01em;
}


.modernListPage .most-read-header .most-read-range select {
    max-width: 125px;

    margin: 0;

    padding:
        3px 22px
        3px 7px;

    border:
        1px solid #cfcac3;

    border-radius: 14px;

    background: #fff;

    font-family:
        "Source Sans 3",
        sans-serif;

    font-size: 11px;
}

.modernListPage .most-read-list {
    margin: 0;
    padding: 0;
    counter-reset: modernMost;
}

.modernListPage .most-read-list li {
    counter-increment: modernMost;

    position: relative;

    margin: 0;

    padding:
        10px 0
        10px 26px;

    border-bottom: 1px solid #ecebe8;

    color: #22252b;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.38;
}

.modernListPage .most-read-list li:last-child {
    border-bottom: 0;
}

.modernListPage .most-read-list li::before {
    content: counter(modernMost) ".";

    position: absolute;

    left: 0;
    top: 10px;

    width: 18px;

    color: #9c7c67;

    font-family:
        "Source Serif Pro",
        Georgia,
        serif;

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

    text-align: left;
}

.modernListPage .most-read-list li a {
    display: block;
    width: auto;

    color: #363941;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        sans-serif;

    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}

.modernListPage .most-read-list li a:hover {
    color: #554d69;
    text-decoration: none;
}

.modernListPage .most-read-list li b {
    font-weight: 600;
}


/* =============================================================================
   LOAD MORE + PAGINATION
   ========================================================================== */

.modernListPage #load-more-wrapper {
    margin: 34px 0 4px;
    text-align: center;
}

.modernListPage #loadMoreBtn,
.modernListPage #searchLoadMore {
    min-width: 150px;

    padding: 9px 16px;

    border: 1px solid #cfd0d2;
    border-radius: 3px;

    background: #fff;

    color: #444952;

    font-family:
        "Source Sans 3",
        sans-serif;

    font-size: 10.5px;
    font-weight: 650;

    letter-spacing: .07em;

    text-transform: uppercase;

    box-shadow: none;
    transform: none;
}

.modernListPage #loadMoreBtn:hover,
.modernListPage #searchLoadMore:hover {
    border-color: #585169;

    background: #585169;

    color: #fff;

    transform: none;
}

.modernListPage #loadMoreBtn i {
    margin: 0 4px 0 0;

    color: inherit;

    font-size: 14px;

    transform: none !important;
}

.modernListPage .pagination {
    margin: 34px 0 0;

    padding:
        14px 10px
        5px;

    border: 1px solid #e0dfdc;
    border-radius: 3px;

    background: #f7f6f3;

    box-shadow: none;
}

.modernListPage .pagination a,
.modernListPage .pagination strong {
    margin: 0 2px 8px;

    padding: 6px 9px;

    border: 1px solid #deddd9;
    border-radius: 2px;

    background: #fff;

    color: #555a62;

    font-family:
        "Source Sans 3",
        sans-serif;

    font-size: 12px;
}

.modernListPage .pagination strong {
    border-color: #5b536d;
    background: #5b536d;
    color: #fff;
}


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

@media (max-width: 1050px) {

    .modernListPage .media-content {
        grid-template-columns:
            minmax(0, 680px);

        max-width: 760px;

        padding-left: 24px;
        padding-right: 24px;
    }


    .modernListPage .media-left.modernListLeft {
        max-width: 680px;
    }


    .modernListPage .media-right {
        display: grid;

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

        gap: 24px;

        width: 100%;
        max-width: 680px;

        padding:
            28px 0 0;

        border: 0;
        border-top: 1px solid #e4e3e1;
    }


    .modernListPage .category-description {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 750px) {

    .modernListPage .navAndMedia {
        max-width: none;
    }


    /*
     * Mobile header deliberately tighter than desktop.
     * The legacy listing stylesheet has several header spacings;
     * these !important overrides keep the modern list compact.
     */
    .modernListPage .media-header,
    .modernListPage .media-header.media-headerNoSubCat {
        padding:
            14px 0 0 !important;

        padding-bottom: 0 !important;

        margin-bottom: 0 !important;
    }



    .modernListPage .media-header.media-headerNoSubCat {

        margin-bottom: 40px !important;
    }


    .modernListPage .media-header-inner,
    .modernListPage .media-headerNoSubCat .media-header-inner {
        padding-bottom: 0 !important;
    }


    .modernListPage #media-section-title {
        font-size: 34px;

        margin-bottom:
            6px !important;
    }


    .modernListPage .breadcrumb-nav ol {
        justify-content: flex-start;

        padding-left: 18px;
        padding-right: 18px;
    }


    /* =====================================================================
       MOBILE CATEGORY SCROLLER
       ===================================================================== */

    .modernListPage .media-nav {
        position: relative;

        width: 100%;

        margin-bottom: 0 !important;

        padding:
            0 0 4px !important;

        overflow: visible;

        background: #fff;
    }


    /*
     * list.js wraps the category UL in .hscroll-inner.
     * This remains native touch scrolling — no JS drag simulation.
     */
    .modernListPage .media-nav .hscroll-inner {
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        scrollbar-width: none;

        touch-action: pan-x;
    }


    .modernListPage .media-nav .hscroll-inner::-webkit-scrollbar {
        display: none;
    }


    .modernListPage .media-nav ul {
        justify-content: flex-start;

        flex-wrap: nowrap;

        width: max-content;
        max-width: none;

        /*
         * Extra space on the right means the final category can scroll
         * completely out from under the visual affordance.
         */
        padding:
            1px 42px
            4px 14px;

        border-bottom: 0;
    }


    .modernListPage .media-nav a,
    .modernListPage .media-nav h1 {
        margin:
            0 2px 0;

        padding:
            8px 9px;

        color: #5d626b;

        font-size: 14px;
        font-weight: 500;

        line-height: 1.15;

        white-space: nowrap;
    }


    .modernListPage .media-nav a.active {
        padding-bottom: 7px;
    }


    /*
     * Horizontal-scroll affordance:
     * - soft edge fade instead of a button-like circle
     * - slim chevron only as a visual hint
     * - the hint itself receives the tap, so a tap can NEVER fall through
     *   onto the category link underneath
     *
     * list.js already attaches click handlers to .scroll-hint, so tapping
     * the fade area simply nudges the category strip left/right.
     */
    .modernListPage .media-nav .scroll-hint {
        display: flex !important;

        position: absolute;

        top: 0;
        bottom: 4px;

        width: 34px;

        align-items: center;

        z-index: 9;

        opacity: 0;

        /*
         * IMPORTANT:
         * Do not allow clicks/taps to pass through to a category below.
         * When visible, the existing list.js handler scrolls the strip.
         */
        pointer-events: none;

        transition:
            opacity 150ms ease;

        user-select: none;
        -webkit-user-select: none;
    }


    .modernListPage .media-nav.scrollable .scroll-hint {
        opacity: 1;
        pointer-events: auto;
    }


    .modernListPage .media-nav .scroll-hint--left {
        left: 0;

        justify-content: flex-start;

        padding-left: 2px;

        background:
            linear-gradient(
                to right,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.97) 28%,
                rgba(255,255,255,.76) 58%,
                rgba(255,255,255,0) 100%
            );

        box-shadow:
            8px 0 16px -14px rgba(26,29,36,.55);
    }


    .modernListPage .media-nav .scroll-hint--right {
        right: 0;

        justify-content: flex-end;

        padding-right: 2px;

        background:
            linear-gradient(
                to left,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.97) 28%,
                rgba(255,255,255,.76) 58%,
                rgba(255,255,255,0) 100%
            );

        box-shadow:
            -8px 0 16px -14px rgba(26,29,36,.55);
    }


    /*
     * The chevron deliberately does NOT look like a button:
     * no circle, no border, no filled background.
     */
    .modernListPage .media-nav .scroll-hint span {
        display: block !important;

        width: 16px;
        height: 24px;

        margin: 0 !important;
        padding: 0;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        color: rgba(79,83,93,.68);

        font-family:
            Arial,
            sans-serif;

        font-size: 21px !important;
        font-weight: 300 !important;

        line-height: 22px;

        text-align: center;

        pointer-events: none !important;

        transform: translateY(-1px);

        text-shadow:
            0 1px 0 rgba(255,255,255,.9);
    }


    .modernListPage .media-nav .scroll-hint--left span {
        transform:
            translateY(-1px)
            translateX(1px);
    }


    .modernListPage .media-nav .scroll-hint--right span {
        transform:
            translateY(-1px)
            translateX(-1px);
    }


    .modernListPage .media-nav.at-start .scroll-hint--left,
    .modernListPage .media-nav.at-end .scroll-hint--right {
        opacity: 0;
        pointer-events: none;
    }


    /*
     * Keep the edge clean before list.js calculates scrollability.
     * The actual fade is owned by .scroll-hint once .scrollable is applied.
     */
    .modernListPage .media-nav::after {
        content: none;
        display: none;
    }


    .modernListPage .listingSettings {
        position: static;

        transform: none;

        left: auto;
        right: auto;

        display: flex;

        justify-content: center;

        margin:
            2px auto 4px;
    }


    /*
     * Remove the large legacy gap between the category scroller and
     * the first modern article.
     */
    .modernListPage .media-content {
        display: block;

        max-width: none;

        margin-bottom: 90px;

        padding:
            0 16px 0 !important;
    }


    .modernListPage .media-left.modernListLeft {
        max-width: none;
    }


    .modernListPage .modernListItem--news .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            116px;

        gap: 14px;

        min-height: 116px;

        padding:
            16px 0;
    }


    .modernListPage .modernListItem--news .modernListThumb {
        width: 116px;
    }


    .modernListPage .modernListItem--news .modernListTitle,
    .modernListPage .modernListItem--news:first-of-type .modernListTitle {
        font-size: 21px !important;
        line-height: 1.1;
    }


    .modernListPage .modernListItem--news .modernListLead,
    .modernListPage .modernListItem--news:first-of-type .modernListLead {
        -webkit-line-clamp: 2;

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


    .modernListPage .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            122px;

        gap: 16px;

        min-height: 122px;

        padding:
            18px 0;
    }


    .modernListPage .modernListItem:first-of-type .modernListCard {
        padding-top: 10px;
    }


    .modernListPage .modernListTitle,
    .modernListPage .modernListItem:first-of-type .modernListTitle {
        font-size: 22px !important;
        line-height: 1.1;
    }


    .modernListPage .modernListLead,
    .modernListPage .modernListItem:first-of-type .modernListLead {
        -webkit-line-clamp: 2;

        margin-top: 7px;

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


    .modernListPage .modernListMeta {
        gap: 6px;

        margin-top: 9px;

        font-size: 10px;
    }


    .modernListPage .modernListAuthor {
        display: none;
    }


    .modernListPage .modernListAuthor + .modernListMetaSep {
        display: none;
    }


    .modernListPage .modernListThumb {
        width: 122px;

        align-self: start;
    }


    .modernListPage .media-right {
        display: block;

        max-width: none;

        padding-top: 28px;
    }

}


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

@media (max-width: 500px) {

    .modernListPage .media-nav a,
    .modernListPage .media-nav h1 {
        font-size: 14px;
    }


    .modernListPage .media-content {
        padding-left: 12px;
        padding-right: 12px;
    }


    .modernListPage .modernListItem--news .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            92px;

        gap: 11px;

        min-height: 101px;

        padding:
            14px 0;
    }


    .modernListPage .modernListItem--news .modernListThumb {
        width: 92px;
        aspect-ratio: 4 / 3;
    }


    .modernListPage .modernListItem--news .modernListTitle,
    .modernListPage .modernListItem--news:first-of-type .modernListTitle {
        font-size: 18.5px !important;
    }


    .modernListPage .modernListItem--news .modernListLead {
        display: none;
    }


    .modernListPage .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            96px;

        gap: 12px;

        min-height: 105px;

        padding:
            15px 0;
    }


    .modernListPage .modernListTitle,
    .modernListPage .modernListItem:first-of-type .modernListTitle {
        font-size: 19px !important;
    }


    .modernListPage .modernListLead {
        display: none;
    }


    .modernListPage .modernListThumb {
        width: 96px;

        aspect-ratio: 4 / 3;
    }


    .modernListPage .modernListEyebrow {
        margin-bottom: 6px;

        font-size: 8px;

        gap: 5px;
    }


    .modernListPage .modernListMeta {
        margin-top: 8px;
    }

}


/* =============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .modernListPage .modernListTitle,
    .modernListPage .modernListThumb img {
        transition: none;
    }

}




/* =============================================================================
   SIDEBAR NEWSLETTER
   ========================================================================== */

.modernListPage .newsletter-signup {
    width: 100%;
    max-width: 100%;

    margin: 28px 0 0;
    padding: 20px 18px;

    box-sizing: border-box;
    overflow: hidden;

    border-radius: 2px;
}


.modernListPage .newsletter-signup::after {
    width: 100%;
}


.modernListPage .newsletter-content {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
}


.modernListPage .newsletter-signup h3 {
    margin: 0 0 10px;

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


.modernListPage .newsletter-signup p {
    margin: 0 0 15px;

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


/* U uskom sidebaru je čišće staviti input + gumb jedan ispod drugoga */
.modernListPage .newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: 8px;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
}


.modernListPage .newsletter-form input[type="email"] {
    display: block;

    width: 100%;
    max-width: none;
    min-width: 0;

    padding: 10px 11px;

    box-sizing: border-box;

    border-radius: 3px;
}


.modernListPage .newsletter-form button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    padding: 9px 12px;

    box-sizing: border-box;

    border-radius: 3px;

    white-space: nowrap;
}


.modernListPage .newsletter-form button i {
    margin-right: 6px;
}


/* =============================================================================
   TELEGRAPH / WIRE VARIANT — MODULE 2
   ========================================================================== */

/*
 * Telegrafska žica keeps its dark atmospheric module background,
 * but the article stream becomes one calm, consistent column.
 */
.modernListPage.modernWirePage .navAndMedia {
    max-width: 1000px;
    background: transparent;
}


.modernListPage.modernWirePage .media-header {
    max-width: 1000px;
    margin-bottom: 26px;
}


.modernListPage.modernWirePage #media-section-title {
    border-bottom-color: rgba(229, 215, 193, .28);

    color: #e8dac5;

    font-family:
        "Source Serif Pro",
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(36px, 4vw, 50px);

    font-weight: 500;

    letter-spacing: -.02em;

    text-transform: uppercase;
}


.modernListPage.modernWirePage #media-section-title span {
    color: inherit !important;
}


.modernListPage.modernWirePage .breadcrumb-nav a,
.modernListPage.modernWirePage .breadcrumb-nav li:last-child a {
    color: rgba(236, 232, 224, .76);
}


.modernListPage.modernWirePage .breadcrumb-nav li:last-child a {
    border-bottom-color: #c3ad82;
    color: #f2ece2;
}


.modernListPage.modernWirePage .breadcrumb-nav li::after {
    color: rgba(235, 231, 224, .35);
}


.modernListPage.modernWirePage .media-nav {
    background: transparent;
}


.modernListPage.modernWirePage .media-nav ul {
    border-bottom-color: rgba(255,255,255,.12);
}


.modernListPage.modernWirePage .media-nav a,
.modernListPage.modernWirePage .media-nav h1 {
    color: rgba(235, 232, 225, .72);
}


.modernListPage.modernWirePage .media-nav a:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}


.modernListPage.modernWirePage .media-nav a.active {
    border-bottom-color: #cfb783;
    color: #fff;
}


.modernListPage.modernWirePage .listingSettings,
.modernListPage.modernWirePage .listingSettings i,
.modernListPage.modernWirePage .listingSettings__count {
    color: rgba(235, 232, 225, .52);
}


.modernListPage.modernWirePage .listingSettings i:hover {
    color: #e8d8b7;
}


/* ------- One-column content ------- */

.modernListPage.modernWirePage .media-content {
    display: block;

    max-width: 820px;

    margin:
        0 auto
        150px;

    padding:
        10px 20px 0;

    overflow: visible;
	    margin-top: 45px;
}
@media (max-width: 850px) {
.modernListPage.modernWirePage .media-content {
	    margin-top: 0px;	
}
}

.modernListPage.modernWirePage .media-left.modernListLeft {
    width: 100%;
    max-width: 780px !important;

    margin: 0 auto;
}


.modernListPage.modernWirePage .media-right {
    display: none !important;
}


/* ------- Kill every remnant of legacy stagger / paper pile ------- */

.modernListPage.modernWirePage .modernListItem,
.modernListPage.modernWirePage .modernListItem:nth-of-type(even),
.modernListPage.modernWirePage .modernListItem:nth-of-type(odd) {
    width: 100% !important;

    margin:
        0 0 12px !important;

    transform: none !important;
}


.modernListPage.modernWirePage .modernListItem::before,
.modernListPage.modernWirePage .modernListItem::after {
    content: none !important;
    display: none !important;
}


/* ------- Wire card ------- */

.modernListPage.modernWirePage .modernListItem--wire .modernListCard {
    grid-template-columns:
        minmax(0, 1fr)
        190px;

    align-items: center;

    gap: 24px;

    min-height: 132px;

    margin: 0;

    padding:
        20px 22px;

    border:
        1px solid rgba(65, 57, 48, .16);

    border-radius: 3px;

    background:
        rgba(249, 247, 242, .965);
		    background: rgb(255 255 255);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .10);

    transition:
        background-color 130ms ease,
        border-color 130ms ease,
        transform 130ms ease,
        box-shadow 130ms ease;
}


.modernListPage.modernWirePage .modernListItem--wire:first-of-type .modernListCard {
    padding-top: 20px;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListCard:hover {
    border-color: rgba(85, 74, 61, .26);

    background:
        rgba(255, 253, 248, .985);

    box-shadow:
        0 7px 22px rgba(0, 0, 0, .13);

    transform:
        translateY(-1px);
}


/* No image: the copy simply gets the full row. */
.modernListPage.modernWirePage .modernListItem--wire.modernListItem--no-image .modernListCard {
    grid-template-columns:
        minmax(0, 1fr);
}


/* ------- Wire eyebrow ------- */

.modernListPage.modernWirePage .modernListItem--wire .modernListEyebrow {
    margin-bottom: 8px;

    color: #7d756d;

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

    letter-spacing: .105em;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListPretitle {
    color: #67615c;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListCategory {
    color: #8a7658;
}


/* ------- Wire headline ------- */

.modernListPage.modernWirePage .modernListItem--wire .modernListTitle,
.modernListPage.modernWirePage .modernListItem--wire:first-of-type .modernListTitle {
    color: #222326;

    font-family:
        "Source Sans 3",
        "Source Sans Pro",
        Arial,
        sans-serif;

    font-size: 22px !important;
    font-weight: 590;

    line-height: 1.16;

    letter-spacing: -.015em;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListCard:hover .modernListTitle {
    color: #493f57;
}


/* Wire never needs a lead in the stream. */
.modernListPage.modernWirePage .modernListItem--wire .modernListLead {
    display: none !important;
}


/* ------- Wire meta ------- */

.modernListPage.modernWirePage .modernListItem--wire .modernListMeta {
    margin-top: 12px;

    color: #85817c;

    font-size: 11px;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListDate {
    color: #77736e;

    font-variant-numeric:
        tabular-nums;

    font-weight: 500;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListLock {
    color: #9d825a;
}


/* ------- Wire thumbnail ------- */

.modernListPage.modernWirePage .modernListItem--wire .modernListThumb {
    width: 190px;

    aspect-ratio:
        16 / 10;

    border-radius: 2px;

    background: #e8e5df;
}


.modernListPage.modernWirePage .modernListItem--wire .modernListThumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ------- Wire load more ------- */

.modernListPage.modernWirePage #load-more-wrapper {
    margin-top: 28px;
}


.modernListPage.modernWirePage #loadMoreBtn,
.modernListPage.modernWirePage #searchLoadMore {
    border-color: rgba(232, 224, 211, .32);

    background:
        rgba(248, 245, 238, .92);

    color: #453f3a;
}


.modernListPage.modernWirePage #loadMoreBtn:hover,
.modernListPage.modernWirePage #searchLoadMore:hover {
    border-color: #d1b982;

    background: #ded0b3;

    color: #25231f;
}


/* =============================================================================
   WIRE — TABLET
   ========================================================================== */

@media (max-width: 850px) {

    .modernListPage.modernWirePage .media-content {
        max-width: 720px;

        padding-left: 16px;
        padding-right: 16px;
    }


    .modernListPage.modernWirePage .media-left.modernListLeft {
        max-width: 680px !important;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            165px;

        gap: 20px;

        padding:
            18px 20px;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListThumb {
        width: 165px;
    }

}


/* =============================================================================
   WIRE — MOBILE
   ========================================================================== */

@media (max-width: 750px) {

    .modernListPage.modernWirePage .media-header,
    .modernListPage.modernWirePage .media-header.media-headerNoSubCat {
        padding-top: 14px !important;
    }


    .modernListPage.modernWirePage #media-section-title {
        margin-bottom: 7px !important;

        color: #e7d8c1;

        font-size: 31px;
    }


    .modernListPage.modernWirePage .media-nav {
        background: transparent;
    }


    .modernListPage.modernWirePage .media-nav .hscroll-inner {
        background: transparent;
    }


    .modernListPage.modernWirePage .media-nav .scroll-hint--left {
        background:
            linear-gradient(
                to right,
                rgba(7,7,7,1) 0%,
                rgba(7,7,7,.88) 48%,
                rgba(7,7,7,0) 100%
            );

        box-shadow: none;
    }


    .modernListPage.modernWirePage .media-nav .scroll-hint--right {
        background:
            linear-gradient(
                to left,
                rgba(7,7,7,1) 0%,
                rgba(7,7,7,.88) 48%,
                rgba(7,7,7,0) 100%
            );

        box-shadow: none;
    }


    .modernListPage.modernWirePage .media-nav .scroll-hint span {
        color: rgba(239, 227, 207, .74);

        text-shadow:
            0 1px 0 rgba(0,0,0,.5);
    }


    .modernListPage.modernWirePage .media-content {
        max-width: none;

        margin-bottom: 90px;

        padding:
            4px 10px 0 !important;
    }


    .modernListPage.modernWirePage .modernListItem {
        margin-bottom: 8px !important;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            108px;

        gap: 13px;

        min-height: 104px;

        padding:
            15px 14px;

        box-shadow:
            0 3px 12px rgba(0,0,0,.11);
    }


    .modernListPage.modernWirePage .modernListItem--wire.modernListItem--no-image .modernListCard {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListTitle,
    .modernListPage.modernWirePage .modernListItem--wire:first-of-type .modernListTitle {
        font-size: 18.5px !important;

        line-height: 1.17;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListEyebrow {
        margin-bottom: 6px;

        font-size: 8.5px;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListMeta {
        margin-top: 9px;

        font-size: 9.5px;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListThumb {
        width: 108px;

        aspect-ratio:
            4 / 3;
    }

}


/* =============================================================================
   WIRE — SMALL PHONE
   ========================================================================== */

@media (max-width: 430px) {

    .modernListPage.modernWirePage .modernListItem--wire .modernListCard {
        grid-template-columns:
            minmax(0, 1fr)
            88px;

        gap: 10px;

        padding:
            13px 11px;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListThumb {
        width: 88px;
    }


    .modernListPage.modernWirePage .modernListItem--wire .modernListTitle,
    .modernListPage.modernWirePage .modernListItem--wire:first-of-type .modernListTitle {
        font-size: 17px !important;
    }

}