/* ==========================================================
   FRANKEVICH — CASES
   ========================================================== */

#cases.frcases {

    position: relative;

    width: 100%;

    padding:
        66px
        0
        56px;

    background:
        #ffffff;

    overflow: hidden;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        #142238;

}


#cases.frcases,
#cases.frcases * {

    box-sizing: border-box;

}



/* ==========================================================
   CONTAINER
   ========================================================== */

#cases .frcases__container {

    position: relative;

    width:
        min(
            1420px,
            calc(100% - 90px)
        );

    margin: 0 auto;

}



/* ==========================================================
   HEADER
   ========================================================== */

#cases .frcases__header {

    max-width: 800px;

    margin:
        0
        auto
        31px;

    text-align: center;

}


#cases .frcases__heading {

    padding: 0;

    margin:
        0
        0
        10px;

    font-size:
        clamp(
            35px,
            3vw,
            50px
        );

    line-height:
        1;

    font-weight:
        650;

    letter-spacing:
        -2px;

    color:
        #172135;

}


#cases .frcases__heading span {

    color:
        #2875e6;

}


#cases .frcases__lead {

    max-width:
        650px;

    padding: 0;

    margin:
        0
        auto;

    font-size:
        15px;

    line-height:
        1.55;

    color:
        #748096;

}



/* ==========================================================
   SLIDER
   ========================================================== */

#cases .frcases__slider {

    position: relative !important;

    display: block !important;

    width: 100%;

}


/*
   Здесь overflow остаётся только у Swiper,
   а стрелки находятся СНАРУЖИ него.
*/

#cases .frcases__slider > .swiper {

    position: relative;

    width: 100%;

    padding:
        7px
        2px
        22px;

    overflow: hidden;

}


#cases .frcases__slider .swiper-wrapper {

    align-items: stretch;

}


#cases .frcases__slider .swiper-slide {

    height: auto;

}



/* ==========================================================
   CARD
   ========================================================== */

#cases .frcase {

    position: relative;

    height: 100%;

    overflow: hidden;

    background:
        #ffffff;

    border:
        1px solid
        #e3e8ef;

    border-radius:
        15px;

    box-shadow:
        0 5px 18px
        rgba(25, 50, 85, .035);

    transition:
        transform .35s
        cubic-bezier(.2,.75,.25,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


#cases .frcase:hover {

    transform:
        translateY(-5px);

    border-color:
        #d4e0f0;

    box-shadow:
        0 19px 40px
        rgba(21, 47, 82, .11);

}



/* ==========================================================
   FULL LINK
   ========================================================== */

#cases .frcase__link {

    display: flex !important;

    flex-direction: column;

    width: 100%;
    height: 100%;

    color:
        inherit !important;

    text-decoration:
        none !important;

}



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

#cases .frcase__photo {

    position: relative;

    width: 100%;

    /*
       Чуть широкоформатнее, чем раньше.
       Получается хорошо для скриншотов сайтов.
    */

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background:
        #edf2f7;

}


#cases .frcase__photo img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    transition:
        transform .65s
        cubic-bezier(.2,.75,.25,1);

}


#cases .frcase:hover
.frcase__photo img {

    transform:
        scale(1.045);

}



/* ==========================================================
   CASE NUMBER
   ========================================================== */

#cases .frcase__number {

    position: absolute;

    z-index: 4;

    top: 14px;
    left: 14px;

    min-width:
        34px;

    padding:
        6px
        8px;

    border:
        1px solid
        rgba(255,255,255,.55);

    border-radius:
        30px;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    text-align:
        center;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        750;

    letter-spacing:
        .8px;

    color:
        #1c3859;

}



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

#cases .frcase__photo-hover {

    position: absolute;

    z-index: 3;

    inset: 0;

    display: flex;

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

    gap: 8px;

    background:
        rgba(20, 53, 94, .20);

    opacity: 0;

    transition:
        opacity .3s ease;

}


#cases .frcase__photo-hover span {

    padding:
        9px
        13px;

    border-radius:
        30px;

    background:
        rgba(255,255,255,.94);

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

    color:
        #173551;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        650;

}


#cases .frcase__photo-hover b {

    display: flex;

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

    width: 32px;
    height: 32px;

    border-radius:
        50%;

    background:
        #2876e8;

    color:
        #fff;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        400;

}


#cases .frcase:hover
.frcase__photo-hover {

    opacity: 1;

}



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

#cases .frcase__body {

    display: flex;

    flex-direction: column;

    flex:
        1 1 auto;

    padding:
        17px
        17px
        16px;

}



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

#cases .frcase__title {

    padding: 0;

    margin:
        0
        0
        10px;

    font-size:
        17px;

    line-height:
        1.25;

    font-weight:
        650;

    letter-spacing:
        -.45px;

    color:
        #17263d;

}



/* ==========================================================
   TAGS — InstantCMS
   ========================================================== */

#cases .frcase__tags {

    min-height:
        23px;

    margin-bottom:
        11px;

}


/*
   Убираем стандартное оформление UL InstantCMS.
*/

#cases .frcase__tags
.multiple_tags_list {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 5px !important;

    padding: 0 !important;

    margin: 0 !important;

    list-style: none !important;

}


#cases .frcase__tags
.multiple_tags_list li {

    display: inline-flex !important;

    width: auto !important;

    padding: 0 !important;

    margin: 0 !important;

    list-style: none !important;

}


/*
   Сам тег.
*/

#cases .frcase__tags
.multiple_tags_list li span {

    display: inline-flex;

    align-items: center;

    padding:
        5px
        9px;

    border-radius:
        20px;

    background:
        #f0f4fa;

    color:
        #61738b;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        600;

}



/* ==========================================================
   RESULT
   ========================================================== */

#cases .frcase__result {

    flex:
        1 1 auto;

    min-height:
        48px;

    margin-bottom:
        15px;

    font-size:
        13px;

    line-height:
        1.55;

    color:
        #3f4b5e;

}


/*
   В opis1 InstantCMS отдаёт <br>.
   Поэтому дополнительных конструкций
   здесь не требуется.
*/

#cases .frcase__result strong,
#cases .frcase__result b {

    font-weight:
        700;

    color:
        #17273e;

}



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

#cases .frcase__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top:
        auto;

    padding-top:
        13px;

    border-top:
        1px solid
        #edf0f4;

    color:
        #2870dc;

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        650;

}


#cases .frcase__footer b {

    position: relative;

    left: 0;

    font-size:
        17px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        left .25s ease;

}


#cases .frcase:hover
.frcase__footer b {

    left:
        4px;

}



/* ==========================================================
   ARROWS

   Очень специфичные стили,
   чтобы не конфликтовали с InstantCMS.
   ========================================================== */

#cases .frcases__slider
button.frcases-nav {

    all: unset;

    box-sizing:
        border-box !important;

    position:
        absolute !important;

    z-index:
        200 !important;

    top:
        50% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        46px !important;

    height:
        46px !important;

    min-width:
        46px !important;

    min-height:
        46px !important;

    max-width:
        46px !important;

    max-height:
        46px !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border:
        1px solid
        #dce4ee !important;

    border-radius:
        50% !important;

    background:
        rgba(255,255,255,.98) !important;

    background-image:
        none !important;

    box-shadow:
        0 8px 24px
        rgba(22,47,80,.13) !important;

    color:
        #18314f !important;

    cursor:
        pointer !important;

    transform:
        translateY(-50%) !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease !important;

}



/*
   Уничтожаем стандартные псевдоэлементы темы.
*/

#cases .frcases__slider
button.frcases-nav::before,

#cases .frcases__slider
button.frcases-nav::after {

    content:
        none !important;

    display:
        none !important;

}



/*
   Наша стрелочка — просто текст.
*/

#cases .frcases__slider
button.frcases-nav > span {

    display:
        block !important;

    position:
        static !important;

    width:
        auto !important;

    height:
        auto !important;

    padding:
        0 !important;

    margin:
        -2px 0 0 !important;

    background:
        none !important;

    color:
        inherit !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        29px !important;

    line-height:
        36px !important;

    font-weight:
        300 !important;

}



/* LEFT */

#cases .frcases__slider
button.frcases-nav--prev {

    left:
        -23px !important;

}



/* RIGHT */

#cases .frcases__slider
button.frcases-nav--next {

    right:
        -23px !important;

}



/* HOVER */

#cases .frcases__slider
button.frcases-nav:hover {

    border-color:
        #2876e8 !important;

    background:
        #2876e8 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 9px 26px
        rgba(40,118,232,.23) !important;

}



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

#cases .frcases__pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 8px;

    margin-top: 3px;

}


#cases .frcases__pagination
.swiper-pagination-bullet {

    width:
        6px;

    height:
        6px;

    margin:
        0 !important;

    border-radius:
        20px;

    background:
        #adbdcf;

    opacity:
        .55;

    transition:
        width .25s ease,
        background .25s ease,
        opacity .25s ease;

}


#cases .frcases__pagination
.swiper-pagination-bullet-active {

    width:
        23px;

    opacity:
        1;

    background:
        #2876e8;

}



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

@media (max-width: 1100px) {

    #cases.frcases {

        padding:
            56px
            0
            48px;

    }


    #cases .frcases__container {

        width:
            calc(100% - 60px);

    }


    #cases .frcases__slider
    button.frcases-nav--prev {

        left:
            -20px !important;

    }


    #cases .frcases__slider
    button.frcases-nav--next {

        right:
            -20px !important;

    }

}



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

@media (max-width: 720px) {

    #cases.frcases {

        padding:
            43px
            0
            38px;

    }


    #cases .frcases__container {

        width:
            calc(100% - 30px);

    }


    #cases .frcases__header {

        margin-bottom:
            22px;

    }


    #cases .frcases__heading {

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        letter-spacing:
            -1.5px;

    }


    #cases .frcases__lead {

        max-width:
            440px;

        font-size:
            14px;

    }


    #cases .frcase__photo {

        aspect-ratio:
            16 / 9;

    }


    #cases .frcase__title {

        font-size:
            18px;

    }


    #cases .frcase__result {

        font-size:
            13px;

    }


    /*
       На мобильном стрелки не нужны —
       Swiper листается пальцем.
    */

    #cases .frcases__slider
    button.frcases-nav {

        display:
            none !important;

    }


    /*
       Hover-плашка тоже не нужна.
    */

    #cases .frcase__photo-hover {

        display:
            none;

    }

}