.models-page {
    background: var(--bg);
}


/* =====================================================
   INTRO
===================================================== */

.models-intro {
    padding:
        calc(var(--header-h) + 100px)
        0
        90px;

    background:
        radial-gradient(
            circle at 75% 0,
            rgba(23,61,51,.18),
            transparent 42%
        ),
        #090b0a;
}

.models-intro-inner {
    min-height: 270px;
    display: flex;
    align-items: flex-end;
}

.models-intro h1 {
    margin: 0 0 18px;

    font-size:
        clamp(
            62px,
            8vw,
            132px
        );

    line-height: .88;

    font-weight: 300;

    letter-spacing: -.065em;
}

.models-lead {
    margin: 0;

    color: #b8bbb6;

    font-size:
        clamp(
            17px,
            1.4vw,
            21px
        );

    line-height: 1.65;
}


/* =====================================================
   FILTER
===================================================== */

.models-categories {
    position: sticky;

    top: var(--header-h);

    z-index: 30;

    background:
        rgba(
            9,
            11,
            10,
            .92
        );

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid var(--line);
}


.models-category-bar {
    display: flex;

    overflow-x: auto;

    scrollbar-width: none;
}

.models-category-bar::-webkit-scrollbar {
    display: none;
}


.models-category {
    min-height: 74px;

    min-width: 175px;

    flex: 1 0 auto;

    padding:
        0
        24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    color: #888c88;

    font-size: 10px;

    letter-spacing: .13em;

    text-transform: uppercase;

    transition: .28s ease;
}


.models-category:first-child {
    border-left:
        1px solid var(--line);
}


.models-category span {
    display: block;

    margin-bottom: 5px;

    color: #656965;

    font-size: 9px;
}


.models-category:hover,
.models-category.is-active {

    color:
        var(--gold-2);

    background:
        rgba(
            199,
            156,
            86,
            .055
        );
}


.models-category.is-active span {
    color: var(--gold);
}


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

.models-list {
    background: #090b0a;
}


/* =====================================================
   ITEM
===================================================== */

.models-item {
    position: relative;

    min-height: 790px;

    overflow: hidden;

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

    background:
        #0a0c0b;
}


.models-item-bg {
    position: absolute;

    inset: 0;

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    filter:
        saturate(.76)
        brightness(.76);

    transition:
        transform
        1.1s
        cubic-bezier(.2,.7,.2,1),
        filter
        .6s ease;
}


.models-item:hover
.models-item-bg {

    transform:
        scale(1.018);

    filter:
        saturate(.88)
        brightness(.82);
}


/* =====================================================
   LEFT GRADIENT
===================================================== */

.models-item.is-left
.models-item-shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,

            rgba(
                5,
                7,
                6,
                .96
            )
            0%,

            rgba(
                5,
                7,
                6,
                .83
            )
            24%,

            rgba(
                5,
                7,
                6,
                .38
            )
            52%,

            rgba(
                5,
                7,
                6,
                .05
            )
            75%
        ),

        linear-gradient(
            0deg,
            rgba(5,7,6,.72),
            transparent 43%
        );
}


/* =====================================================
   RIGHT GRADIENT
===================================================== */

.models-item.is-right
.models-item-shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            270deg,

            rgba(
                5,
                7,
                6,
                .96
            )
            0%,

            rgba(
                5,
                7,
                6,
                .83
            )
            24%,

            rgba(
                5,
                7,
                6,
                .38
            )
            52%,

            rgba(
                5,
                7,
                6,
                .05
            )
            75%
        ),

        linear-gradient(
            0deg,
            rgba(5,7,6,.72),
            transparent 43%
        );
}


/* =====================================================
   INNER
===================================================== */

.models-item-inner {

    position: relative;

    z-index: 2;

    min-height: 790px;

    display: flex;

    align-items: center;
}


/* LEFT */

.models-item.is-left
.models-item-inner {

    justify-content:
        flex-start;
}


/* RIGHT */

.models-item.is-right
.models-item-inner {

    justify-content:
        flex-end;
}


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

.models-item-content {

    width:
        min(
            620px,
            47%
        );

    padding:
        75px
        0;
}


.models-item.is-right
.models-item-content {

    text-align:
        left;
}


.models-item-topline {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom:
        24px;

    color:
        #bfc1bd;

    font-size:
        10px;

    letter-spacing:
        .15em;
}


.models-series {

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            199,
            156,
            86,
            .48
        );

    color:
        var(--gold-2);

    text-transform:
        uppercase;
}


.models-item h2 {

    margin:
        0
        0
        18px;

    font-size:
        clamp(
            58px,
            7vw,
            112px
        );

    font-weight:
        300;

    line-height:
        .9;

    letter-spacing:
        -.06em;
}


.models-tagline {

    margin:
        0
        0
        30px;

    max-width:
        620px;

    color:
        #e0e1dd;

    font-size:
        clamp(
            18px,
            1.6vw,
            25px
        );

    line-height:
        1.45;
}


/* =====================================================
   FACTS
===================================================== */

.models-facts {

    display: flex;

    gap:
        10px
        24px;

    flex-wrap:
        wrap;

    margin-bottom:
        48px;

    color:
        #d3d5d1;

    font-size:
        12px;
}


.models-fact {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


.model-icon {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        var(--gold-2);

    stroke-width:
        1.5;

    stroke-linecap:
        round;


    stroke-linejoin:
        round;
}


/* =====================================================
   PRICE
===================================================== */

.models-price {

    margin-bottom:
        28px;

    color:
        var(--gold-2);

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

    font-weight:
        300;
}


.models-price small {

    margin-right:
        9px;

    color:
        #b8bbb7;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;
}


/* =====================================================
   ACTIONS
===================================================== */

.models-actions {

    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;
}


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

.models-empty {

    padding:
        100px
        0;

    text-align:
        center;
}


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

@media (
    max-width: 1100px
) {

    .models-item {

        min-height:
            680px;
    }


    .models-item-inner {

        min-height:
            680px;
    }


    .models-item-content {

        width:
            min(
                570px,
                58%
            );
    }

}


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

@media (
    max-width: 760px
) {

    .models-intro {

        padding:
            130px
            0
            65px;
    }


    .models-intro-inner {

        min-height:
            220px;
    }


    .models-intro h1 {

        font-size:
            58px;
    }


    .models-category {

        min-width:
            132px;

        min-height:
            64px;

        padding:
            0
            15px;
    }


    .models-item,
    .models-item-inner {

        min-height:
            690px;
    }


    /*
       На mobile всички текстове
       остават отляво.
    */

    .models-item.is-right
    .models-item-inner,
    .models-item.is-left
    .models-item-inner {

        justify-content:
            flex-start;
    }


    .models-item.is-left
    .models-item-shade,
    .models-item.is-right
    .models-item-shade {

        background:

            linear-gradient(
                0deg,

                rgba(
                    5,
                    7,
                    6,
                    .96
                )
                0%,

                rgba(
                    5,
                    7,
                    6,
                    .82
                )
                36%,

                rgba(
                    5,
                    7,
                    6,
                    .24
                )
                72%,

                rgba(
                    5,
                    7,
                    6,
                    .12
                )
                100%
            );
    }


    @media (max-width: 760px) {

    .models-item {
        position: relative;
        overflow: hidden;
        background: #090c0a;
    }


    /* =================================================
       HOLDER
    ================================================= */

    .models-item-bg {
        position: absolute;
        inset: 0;

        z-index: 0;

        background-size: 0 0;
        background-repeat: no-repeat;

        filter: none;
        opacity: 1;

        transform: none !important;
    }


    /* =================================================
       BACKGROUND / AMBIENCE
    ================================================= */

    .models-item-bg::before {
        content: "";

        position: absolute;

        inset: -25px;

        z-index: 0;

        background-image: inherit;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        filter:
            blur(13px)
            saturate(.55)
            brightness(.24);

        transform: scale(1.1);

        opacity: .9;
    }


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

    .models-item-bg::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 1;

        background-image: inherit;
        background-size: contain;
        background-position: center 0%;
        background-repeat: no-repeat;

        transform: scale(1);

        filter:
            saturate(.88)
            brightness(.82)
            contrast(1.02);

        opacity: .95;

        /*
         * Много по-дълго и плавно преливане.
         * Така изчезва усещането за правоъгълна снимка.
         */

        -webkit-mask-image:
            radial-gradient(
                ellipse 78% 62% at 50% 43%,

                rgba(0,0,0,1) 0%,
                rgba(0,0,0,1) 38%,
                rgba(0,0,0,.96) 50%,
                rgba(0,0,0,.78) 62%,
                rgba(0,0,0,.48) 74%,
                rgba(0,0,0,.18) 86%,
                transparent 100%
            );

        mask-image:
            radial-gradient(
                ellipse 78% 62% at 50% 43%,

                rgba(0,0,0,1) 0%,
                rgba(0,0,0,1) 38%,
                rgba(0,0,0,.96) 50%,
                rgba(0,0,0,.78) 62%,
                rgba(0,0,0,.48) 74%,
                rgba(0,0,0,.18) 86%,
                transparent 100%
            );
    }


    /* =================================================
       CINEMATIC SHADE
       Над снимката, под текста
    ================================================= */

    .models-item.is-left .models-item-shade,
    .models-item.is-right .models-item-shade {

        position: absolute;

        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:

            /* radial vignette */
            radial-gradient(
                ellipse 82% 68% at 50% 43%,

                rgba(9,12,10,0) 20%,

                rgba(9,12,10,.06) 42%,

                rgba(9,12,10,.22) 62%,

                rgba(9,12,10,.55) 82%,

                rgba(9,12,10,.88) 100%
            ),

            /* bottom readability */
            linear-gradient(
                to bottom,

                rgba(9,12,10,.18) 0%,

                rgba(9,12,10,.02) 28%,

                rgba(9,12,10,.08) 45%,

                rgba(9,12,10,.38) 63%,

                rgba(9,12,10,.82) 78%,

                #090c0a 100%
            );
    }


    /* =================================================
       CONTENT
       Задължително над shade
    ================================================= */

    .models-item-inner {
        position: relative;
        z-index: 2;
    }

}


    .models-item-inner {

        align-items:
            flex-end;
    }


    .models-item-content {

        width:
            100%;

        padding:
            180px
            0
            42px;
    }


    .models-item h2 {

        font-size:
            54px;
    }


    .models-tagline {

        font-size:
            17px;

        margin-bottom:
            23px;
    }


    .models-facts {

        gap:
            12px
            18px;

        margin-bottom:
            30px;
    }


    .models-price {

        font-size:
            36px;
    }


    .models-actions {

        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .models-actions
    .btn {

        width:
            100%;
    }

}