/* =========================================================
   MAIN BLOG — BASE
========================================================= */

.main-blog {
    width: 100%;
    text-align: left;
}

.main-blog__tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 34px;
}

.main-blog__tab {
    position: relative;
    min-width: 113px;
    margin: 0;
    padding: 0 18px 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.main-blog__tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 3px;
    background: #cae652;
    opacity: 0;
    transform: scaleX(0.65);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.main-blog__tab:hover,
.main-blog__tab:focus-visible,
.main-blog__tab.is-active {
    color: #ffffff;
}

.main-blog__tab.is-active {
    font-weight: 600;
}

.main-blog__tab.is-active::after {
    opacity: 1;
    transform: scaleX(1.1);
}

.main-blog__tab:focus-visible {
    outline: 2px solid #cae652;
    outline-offset: 3px;
    border-radius: 3px;
}

.main-blog__panel[hidden] {
    display: none !important;
}

.main-blog__development {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 300px;
    margin: 0;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .main-blog__tab,
    .main-blog__tab::after {
        transition: none;
    }
}
/* =========================================================
   COMMON BLOG ELEMENTS
========================================================= */

.main-blog-section .main-blog,
.main-blog-section .main-video,
.main-blog-section .main-blog-card,
.main-blog-section .main-video-card,
.main-blog-section .main-blog-card__content,
.main-blog-section .main-video-card__content {
    min-width: 0;
}
.main-blog-section .main-blog-card__image-link,
.main-blog-section .main-video-card__image-button {
    align-self: start;
} 
/* =========================================================
   DESKTOP 1400–1920
========================================================= */

@media (min-width: 1400px) /*and (max-width: 1920px)*/ {
    .main-blog-section { margin: clamp(80px, calc(17.008px + 4.374vw), 100.997px) 0; }
    .main-blog-section > .inner-width { max-width: clamp(1143px, calc(243px + 62.5vw), 1443px); }
    .main-blog-section .main-blog__tabs { gap: clamp(8px, calc(1.701px + 0.437vw), 10.1px); margin-bottom: clamp(34px, calc(7.228px + 1.859vw), 42.924px); }
    .main-blog-section .main-blog__tab { min-width: clamp(113px, calc(24.024px + 6.179vw), 142.659px); padding: 0 clamp(18px, calc(3.827px + 0.984vw), 22.724px) clamp(10px, calc(2.126px + 0.547vw), 12.625px); font-size: clamp(16px, calc(3.402px + 0.875vw), 20.199px); }
    .main-blog-section .main-blog__tab::after { height: clamp(3px, calc(0.638px + 0.164vw), 3.787px); border-radius: clamp(3px, calc(0.638px + 0.164vw), 3.787px); }
    .main-blog-section .main-blog__grid,
    .main-blog-section .main-video__grid { column-gap: clamp(46px, calc(9.78px + 2.515vw), 58.073px); row-gap: clamp(44px, calc(9.354px + 2.406vw), 55.549px); }
    .main-blog-section .main-blog-card,
    .main-blog-section .main-video-card { grid-template-columns: clamp(263px, calc(55.913px + 14.381vw), 332.029px) minmax(0,1fr); gap: clamp(20px, calc(4.252px + 1.094vw), 25.249px); }
    .main-blog-section .main-blog-card__image-link,
    .main-blog-section .main-video-card__image-button { border-radius: clamp(18px, calc(3.827px + 0.984vw), 22.724px); }
    .main-blog-section .main-blog-card__content { gap: clamp(28px, calc(8.291px + 2.133vw), 29.236px); }
    .main-blog-section .main-video-card__content { gap: clamp(23px, calc(-1.622px + 1.64vw), 37.874px); }
    .main-blog-section .main-blog-card__date,
    .main-blog-section .main-video-card__date { font-size: clamp(14px, calc(2.976px + 0.766vw), 17.675px); }
    .main-blog-section .main-blog-card__title,
    .main-blog-section .main-video-card__title { margin-bottom: 0; font-size: clamp(16px, calc(3.402px + 0.875vw), 20.199px); }
    .main-blog-section .main-video-card__preview { margin-bottom: 0; font-size: clamp(14px, calc(2.976px + 0.766vw), 17.675px); }
    .main-blog-section .main-blog-card__more { font-size: clamp(16px, calc(3.402px + 0.875vw), 20.199px); }
    .main-blog-section .main-video-card__play-icon { width: clamp(46px, calc(9.78px + 2.515vw), 58.073px); height: clamp(46px, calc(9.78px + 2.515vw), 58.073px); }
    .main-blog-section .main-video-card__play-icon::before { margin-left: clamp(3px, calc(0.638px + 0.164vw), 3.787px); border-top-width: clamp(7px, calc(1.488px + 0.383vw), 8.837px); border-bottom-width: clamp(7px, calc(1.488px + 0.383vw), 8.837px); border-left-width: clamp(11px, calc(2.339px + 0.601vw), 13.887px); }
    .main-blog-section .main-video-modal { padding: clamp(40px, calc(8.504px + 2.187vw), 50.499px) clamp(20px, calc(4.252px + 1.094vw), 25.249px); }
    .main-blog-section .main-video-modal__dialog { width: min(clamp(960px, calc(204.094px + 52.493vw), 1211.969px),100%); border-radius: clamp(18px, calc(3.827px + 0.984vw), 22.724px); }
    .main-blog-section .main-video-modal__close { width: clamp(36px, calc(7.654px + 1.969vw), 45.449px); height: clamp(36px, calc(7.654px + 1.969vw), 45.449px); font-size: clamp(30px, calc(6.378px + 1.64vw), 37.874px); }
}

/* =========================================================
   LARGE DESKTOP 1921+
========================================================= */

@media (min-width: 1921px) and (min-device-width: 2200px) {
    .main-blog-section {
        margin:
            clamp(
                100.997px,
                calc(-19.997192px + 6.301781vw),
                147px
            )
            0;
    }

    .main-blog-section > .inner-width {
        width: 100%;

        max-width:
            clamp(
                1443px,
                calc(-292.890411px + 90.410959vw),
                2103px
            );

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


    /* ---------- Вкладки ---------- */

    .main-blog-section .main-blog__tabs {
        gap:
            clamp(
                10.1px,
                calc(-2.787671px + 0.671233vw),
                15px
            );

        margin-bottom:
            clamp(
                42.924px,
                calc(-9.878630px + 2.750137vw),
                63px
            );
    }

    .main-blog-section .main-blog__tab {
        min-width:
            clamp(
                142.659px,
                calc(-29.196781px + 8.950822vw),
                208px
            );

        padding:
            0
            clamp(
                22.724px,
                calc(-4.303288px + 1.407671vw),
                33px
            )
            clamp(
                12.625px,
                calc(-1.511986px + 0.736301vw),
                18px
            );

        font-size:
            clamp(
                20.199px,
                calc(-2.948836px + 1.205616vw),
                29px
            );
    }

    .main-blog-section .main-blog__tab::after {
        height:
            clamp(
                3.787px,
                calc(-2.033493px + 0.303151vw),
                6px
            );

        border-radius:
            clamp(
                3.787px,
                calc(-2.033493px + 0.303151vw),
                6px
            );
    }

    .main-blog-section .main-blog__tab:focus-visible {
        outline-width:
            clamp(
                2px,
                calc(-3.260274px + 0.273973vw),
                4px
            );

        outline-offset:
            clamp(
                3px,
                calc(-4.890411px + 0.410959vw),
                6px
            );

        border-radius:
            clamp(
                3px,
                calc(-4.890411px + 0.410959vw),
                6px
            );
    }


    /* ---------- Общая сетка: статьи + видео ---------- */

    .main-blog-section .main-blog__grid,
    .main-blog-section .main-video__grid {
        column-gap:
            clamp(
                58.073px,
                calc(-12.748699px + 3.688630vw),
                85px
            );

        row-gap:
            clamp(
                55.549px,
                calc(-11.390616px + 3.486438vw),
                81px
            );
    }

    .main-blog-section .main-blog-card,
    .main-blog-section .main-video-card {
        grid-template-columns:
            clamp(
                332.029px,
                calc(-67.675548px + 20.817945vw),
                484px
            )
            minmax(0, 1fr);

        gap:
            clamp(
                25.249px,
                calc(-5.657740px + 1.609726vw),
                37px
            );
    }

    .main-blog-section .main-blog-card__image-link,
    .main-blog-section .main-video-card__image-button {
        border-radius:
            clamp(
                22.724px,
                calc(-4.303288px + 1.407671vw),
                33px
            );
    }


    /* ---------- Текст карточек ---------- */

    .main-blog-section .main-blog-card__content {
        gap: clamp(29.236px, calc(-10.636438px + 3.118356vw), 52px);
    }

    .main-blog-section .main-video-card__content {
        gap: clamp(-6.126px, calc(-24.169726px + 2.346027vw), 37px);
    }

    .main-blog-section .main-blog-card__date,
    .main-blog-section .main-video-card__date {
        margin-top:
            clamp(
                1px,
                calc(-1.630137px + 0.136986vw),
                2px
            );

        font-size:
            clamp(
                17.675px,
                calc(-4.220890px + 1.140411vw),
                26px
            );
    }

    .main-blog-section .main-blog-card__title,
    .main-blog-section .main-video-card__title {
        margin-bottom:
            clamp(
                8.837px,
                calc(-2.112260px + 0.570274vw),
                13px
            );

        font-size:
            clamp(
                20.199px,
                calc(-2.948836px + 1.205616vw),
                29px
            );
    }

    .main-blog-section .main-video-card__preview {
        margin-bottom: 0;

        font-size:
            clamp(
                17.675px,
                calc(-4.220890px + 1.140411vw),
                26px
            );
    }

    .main-blog-section .main-blog-card__more {
        font-size:
            clamp(
                20.199px,
                calc(-2.948836px + 1.205616vw),
                29px
            );
    }

    .main-blog-section .main-blog-card__title a:focus-visible,
    .main-blog-section .main-blog-card__more:focus-visible,
    .main-blog-section button.main-video-card__image-button:focus-visible {
        outline-width:
            clamp(
                2px,
                calc(-3.260274px + 0.273973vw),
                4px
            );

        outline-offset:
            clamp(
                3px,
                calc(-4.890411px + 0.410959vw),
                6px
            );
    }


    /* ---------- Play на видео ---------- */

    .main-blog-section .main-video-card__play-icon {
        width:
            clamp(
                58.073px,
                calc(-12.748699px + 3.688630vw),
                85px
            );

        height:
            clamp(
                58.073px,
                calc(-12.748699px + 3.688630vw),
                85px
            );
    }

    .main-blog-section .main-video-card__play-icon::before {
        margin-left:
            clamp(
                3.787px,
                calc(-2.033493px + 0.303151vw),
                6px
            );

        border-top-width:
            clamp(
                8.837px,
                calc(-2.112260px + 0.570274vw),
                13px
            );

        border-bottom-width:
            clamp(
                8.837px,
                calc(-2.112260px + 0.570274vw),
                13px
            );

        border-left-width:
            clamp(
                13.887px,
                calc(-2.191027px + 0.837397vw),
                20px
            );
    }


    /* ---------- Пустые состояния ---------- */

    .main-blog-section .main-blog__development,
    .main-blog-section .main-blog__empty,
    .main-blog-section .main-video__empty {
        min-height:
            clamp(
                300px,
                calc(-362.794521px + 34.520548vw),
                552px
            );

        font-size:
            clamp(
                18px,
                calc(-21.452055px + 2.054795vw),
                33px
            );
    }


    /* ---------- Модальное видео ---------- */

    .main-blog-section .main-video-modal {
        padding:
            clamp(
                50.499px,
                calc(-11.311849px + 3.219315vw),
                74px
            )
            clamp(
                25.249px,
                calc(-5.657740px + 1.609726vw),
                37px
            );
    }

    .main-blog-section .main-video-modal__dialog {
        width:
            min(
                clamp(
                    1211.969px,
                    calc(-245.208425px + 75.894658vw),
                    1766px
                ),
                100%
            );

        max-height:
            calc(
                100vh -
                clamp(
                    80px,
                    calc(-96.219178px + 9.178082vw),
                    147px
                )
            );

        border-radius:
            clamp(
                22.724px,
                calc(-4.303288px + 1.407671vw),
                33px
            );
    }

    .main-blog-section .main-video-modal__close {
        top:
            clamp(
                12px,
                calc(-14.301370px + 1.369863vw),
                22px
            );

        right:
            clamp(
                14px,
                calc(-17.561644px + 1.643836vw),
                26px
            );

        width:
            clamp(
                45.449px,
                calc(-8.602945px + 2.815205vw),
                66px
            );

        height:
            clamp(
                45.449px,
                calc(-8.602945px + 2.815205vw),
                66px
            );

        font-size:
            clamp(
                37.874px,
                calc(-7.169726px + 2.346027vw),
                55px
            );
    }

    .main-blog-section .main-video-modal__close:focus-visible {
        outline-width:
            clamp(
                2px,
                calc(-3.260274px + 0.273973vw),
                4px
            );

        outline-offset:
            clamp(
                3px,
                calc(-4.890411px + 0.410959vw),
                6px
            );
    }
}

/* =========================================================
   TABLET LANDSCAPE 1024–1278
========================================================= */

@media (min-width: 1024px) and (max-width: 1278px) {
    .main-blog-section {
        box-sizing: border-box;
        margin: 0;
        padding: 0;/*56px 0 64px;*/
    }

    .main-blog-section > .inner-width {
        width: auto;
        max-width: none;
        margin-right: clamp(42px, 6vw, 76px);
        margin-left: clamp(42px, 6vw, 76px);
    }

    .main-blog-section .page-section__title.center {
        display: block;
        position: static;
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 auto 34px;
        padding: 0;
        transform: none;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(36px, 3.6vw, 46px);
        font-weight: 700;
        line-height: 1.15;
        text-align: center !important;
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-blog-section > .inner-width > div.center {
        width: 100%;
        text-align: left;
    }

    .main-blog-section .main-blog__tabs {
        gap: 12px;
        margin-bottom: 28px;
    }

    .main-blog-section .main-blog__tab {
        min-width: 112px;
        padding-right: 15px;
        padding-left: 15px;
        font-size: 16px;
    }

    .main-blog-section .main-blog__grid,
    .main-blog-section .main-video__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 28px;
    }

    .main-blog-section .main-blog-card,
    .main-blog-section .main-video-card {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 16px;
    }

    .main-blog-section .main-blog-card__image-link,
    .main-blog-section .main-video-card__image-button {
        width: 100%;
        aspect-ratio: 1.62 / 1;
        border-radius: 18px;
    }

    .main-blog-section .main-blog-card__content,
    .main-blog-section .main-video-card__content {
        flex: 1 1 auto;
        height: auto;
        gap: 15px;
    }

    .main-blog-section .main-blog-card__more {
        margin: 0;
    }
}

/* =========================================================
   TABLET 768–1023
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
    .main-blog-section {
        box-sizing: border-box;
        margin: 0;
    }

    .main-blog-section > .inner-width {
        width: auto;
        max-width: none;
        margin-right: clamp(28px, 4.5vw, 44px);
        margin-left: clamp(28px, 4.5vw, 44px);
    }

    .main-blog-section .page-section__title.center {
        display: block;
        position: static;
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 auto 30px;
        padding: 0;
        transform: none;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(32px, 4.4vw, 40px);
        font-weight: 700;
        line-height: 1.15;
        text-align: center !important;
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-blog-section > .inner-width > div.center {
        width: 100%;
        text-align: left;
    }

    .main-blog-section .main-blog__tabs {
        margin-bottom: 26px;
    }

    .main-blog-section .main-blog__grid,
    .main-blog-section .main-video__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .main-blog-section .main-blog-card,
    .main-blog-section .main-video-card {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 14px;
    }

    .main-blog-section .main-blog-card__image-link,
    .main-blog-section .main-video-card__image-button {
        width: 100%;
        aspect-ratio: 1.62 / 1;
        border-radius: 16px;
    }

    .main-blog-section .main-blog-card__content,
    .main-blog-section .main-video-card__content {
        flex: 1 1 auto;
        height: auto;
        gap: 15px;
    }

    .main-blog-section .main-blog-card__title,
    .main-blog-section .main-video-card__title {
        font-size: 15px;
    }

    .main-blog-section .main-blog-card__more {
        margin-top: 0;
        font-size: 13.5px;
    }
}

/* =========================================================
   MOBILE <=767
========================================================= */

@media (max-width: 767px) {
    .main-blog-section {
        box-sizing: border-box;
        margin: 0;
        /*background: #0e0c20;*/
    }

    .main-blog-section > .inner-width {
        width: auto;
        max-width: none;
        margin-right: 10px;
        margin-left: 10px;
    }

    .main-blog-section .page-section__title.center {
        display: block;
        position: static;
        float: none;
        clear: both;
        width: 100%;
        max-width: none;
        margin: 0 auto 26px;
        padding: 0;
        transform: none;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.3px;
        text-align: center !important;
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-blog-section > .inner-width > div.center {
        width: 100%;
        text-align: left;
    }


    /* Вкладки */

    .main-blog-section .main-blog__tabs {
        display: flex;
        gap: 14px;
        margin: 0 0 18px;
        padding: 0;
    }

    .main-blog-section .main-blog__tab {
        position: relative;
        display: inline-flex;
        width: 96px;
        min-width: 0;
        padding: 0 18px 10px;
        align-items: center;
        justify-content: center;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
    }

    .main-blog-section .main-blog__tab::after {
        height: 3px;
    }


    /* Сетка: и статьи, и видео — одной колонкой */

    .main-blog-section .main-blog__grid,
    .main-blog-section .main-video__grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }


    /* На мобильном показываем только первые две карточки */

    .main-blog-section .main-blog-card:nth-child(n + 3),
    .main-blog-section .main-video-card:nth-child(n + 3) {
        display: none;
    }


    /* Карточка */

    .main-blog-section .main-blog-card,
    .main-blog-section .main-video-card {
        display: flex;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 0;
    }


    /* Картинка 370 × 231.51 на экране 390 px */

    .main-blog-section .main-blog-card__image-link,
    .main-blog-section .main-video-card__image-button {
        width: 100%;
        aspect-ratio: 370 / 231.51;
        margin: 0 0 20px;
        border-radius: 16px;
    }


    /* Текстовая часть */

    .main-blog-section .main-blog-card__content,
    .main-blog-section .main-video-card__content {
        display: flex;
        min-width: 0;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }


    /* Дата */

    .main-blog-section .main-blog-card__date,
    .main-blog-section .main-video-card__date {
        margin: 0;
        color: rgba(255, 255, 255, .94);
        font-family: 'Manrope', Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }


    /* Заголовок статьи */

    .main-blog-section .main-blog-card__title {
        display: block;
        margin: 0;
        overflow: visible;
        color: rgba(255, 255, 255, .92);
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
        -webkit-line-clamp: unset;
    }

    .main-blog-section .main-blog-card__title a {
        font-size: 16px;
    }


    /* Заголовок видео */

    .main-blog-section .main-video-card__title {
        display: block;
        margin: 0;
        overflow: visible;
        color: rgba(255, 255, 255, .92);
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.35;
        -webkit-line-clamp: unset;
    }


    /*
     * У статьи описание мы уже убрали.
     * На мобильном описание видео тоже скрываем,
     * чтобы вкладки имели одинаковую структуру.
     */
    .main-blog-section .main-video-card__preview {
        display: none;
    }


    /* Читать подробнее */

    .main-blog-section .main-blog-card__more {
        margin: 0;
        color: #cae652;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
    }


    /* Пустое состояние */

    .main-blog-section .main-blog__development,
    .main-blog-section .main-blog__empty,
    .main-blog-section .main-video__empty {
        min-height: 180px;
        font-size: 15px;
    }


    /* Модалка видео */

    .main-blog-section .main-video-modal {
        padding: 16px 10px;
    }

    .main-blog-section .main-video-modal__dialog {
        width: 100%;
        max-height: calc(100vh - 32px);
        border-radius: 14px;
    }

    .main-blog-section .main-video-modal__close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
        font-size: 28px;
    }
}

/* =========================================================
   SMALL MOBILE <=374
========================================================= */

@media (max-width: 374px) {
    .main-blog-section > .inner-width {
        margin-right: 8px;
        margin-left: 8px;
    }

    .main-blog-section .page-section__title.center {
        margin-bottom: 22px;
        font-size: 24px;
    }

    .main-blog-section .main-blog-card__image-link,
    .main-blog-section .main-video-card__image-button {
        border-radius: 14px;
    }

    .main-blog-section .main-blog-card__more {
        font-size: 13px;
    }
}