:root{
    --height-slider: 550px;
    --height-container-slider: 550px
}

/* ====================== */
/* FONT SIZE SYSTEM (rem) */
/* ====================== */
:root {
    /* Базовый размер (обычно 16px в браузерах) */
    --base-font-size: 16px;

    /* Коэффициент масштабирования (1.2 = золотое сечение) */
    --scale-factor: 1.2;

    /* Цвета текста (опционально) */
    --text-color: #333;
    --text-light: #777;
}

:root{
    /*Основные цвета*/
    --color-primary: #2E74FF;
    --color-dark: #1D1D1C;
    --color-light: #ffffff;
    /*Hover цвета*/
    --color-primary-hover: #316adc;
    --color-gray-hover: #2e2e2e;
    --color-gray: rgba(0, 0, 0, 0.5);
    /*Цвета для текстов*/
    --color-text: var(--color-dark);
    /* Цвета для bg*/
    --color-bg_dark: #A2A1A1;
    --color-light-dark: #D9D9D9;
    --color-bg: #f5f5f5;


    /* Шрифты */
    --font-main:  400 var(--base-font-size) 'Roboto', sans-serif;

    /* Отступы */
    --gap-sm: 10px;
    --gap-md: 20px;
    --gap-lg: 30px;

    /*Ширина и длина на 100%*/

    --hw-100: 100%;
}

:root {
    --font-base: clamp(1rem, 1vw + 0.5rem, 1.5rem); /* 16–24px */
    --font-small: clamp(0.875rem, 0.75vw + 0.5rem, 1rem); /*14-16px*/
    --font-large: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);/*20-32px*/
    --font-h1: clamp(2rem, 4vw + 1rem, 4rem);/*32-64px*/
}




.main-page__slider{
    min-height: var(--height-slider);
    max-height: var(--height-slider);
    width: 100%;
    display: block;
    text-align: center;
    /*background: var(--color-dark);*/
}


.main-page__slider .swiper{
    height: var(--height-container-slider);
}



.main-page__slider .swiper-slide{
    position: relative;
    background-image: var(--img-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    object-position: center;
    height: var(--height-slider);
    width: 100%;
    z-index: 1;
}

.main-page__slider .swiper-slide[data-img] div{
    position: relative;
    z-index: 3;
}

.main-page__slider .swiper-slide[data-img]:before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}

.main-page__slider .slider-wrap{
    max-width: 900px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-page__slider .slider-wrap__container{
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 250px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
}

.main-page__slider .slider-wrap__container .slide-title{
    font-size: var(--font-base);
}

.main-page__slider .slider-wrap__container .slide-desc{
    font-size: var(--font-main);
}


.main-page__slider .swiper-button-next,
.main-page__slider .swiper-button-prev{
    color: var(--color-primary);
}

.main-page__slider  .swiper-pagination {
    width: auto !important;

    top: -30px !important;
    background: var(--color-dark);
    border-radius: 15px;
    margin-left: -8px;
    padding: 5px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
}

.main-page__slider .swiper-pagination-bullet{
    background: var(--color-light);
}

.main-page__slider .swiper-pagination-bullet-active{
    background: var(--color-primary);
}

@media(max-width: 768px){
    .main-page__slider .slider-wrap{
        max-width: 90%;
    }
}


/*Открытый слайдер*/

.main-page__slider .swiper-slide.open-slider{
    position: relative;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    object-position: center;
    height: var(--height-slider);
    width: 100%;
    z-index: 1;
}


/* Основной контейнер открытого слайда */
.main-page__slider .swiper-slide.open-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--strip-gradient);

}

/* Внутренняя обёртка */
.main-page__slider .open-slider__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    height: var(--height-slider);
    padding: 40px;
    gap: 40px;
    position: relative;
    box-sizing: border-box;
    z-index: 2;
}

/* Левая часть — изображение */
.open-slider__image {
    flex: 0 0 55%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.open-slider__image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);


}


.open-slider__image::before {
    content: '';
    position: absolute;
    inset: 0;


    mask-composite: intersect;
    -webkit-mask-composite: destination-in;
    z-index: 2;
    pointer-events: none;
}

/* Правая часть — контент */
.open-slider__content {
    flex: 1;
    color: var(--color-dark);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(255,255,255,0.9);
}


/* Градиентный фон поверх — плавное исчезание по краям */


@media (max-width: 991px) {
    :root {
        --height-slider: 650px;
        --height-container-slider: 650px;
    }
}


@media (max-width: 768px) {
    .open-slider__inner {
        flex-direction: column;
        padding: 30px;
        gap: 20px;
    }

    .open-slider__image {
        width: 100%;
        max-width: 250px;
        max-height: 250px;
        border-radius: 18px;
    }



    .open-slider__content .slide-desc{
        display: -webkit-box;
        -webkit-line-clamp: 7; /* Количество строк */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .open-slider__content {
        text-align: center;
        width: 100%;


    }

    .open-slider__content .button-red {
        margin: 0 auto;
    }
}

/*Cлайдер для поста*/

.main-page__slider.post-slider{
    min-height: 0px;
    max-height: 100%;
    border-top: 1px solid var(--color-bg_dark);
    background: var(--color-light-dark);
    margin: 0;
    padding: 30px;
    user-select: none;
}

.main-page__slider.post-slider .post-slider-wrapper>h1{
    font-size: var(--font-h1);
    margin: 0;
    text-align: left;
    color: var(--color-gray-hover);
}
.main-page__slider.post-slider .post-slider-wrapper>p{
    font-size: var(--font-large);
    margin-bottom: 20px;
}

.post-slider__img{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    width: 100%;
}

.post-slider__img img{
    max-width: 400px;
    width: 100%;
    height: auto;
}

.post-slider-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.additional-post__item-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-light);
}

.additional-post__item-img svg{
    width: 30px;
    height: 30px;
}

.additional-post__item-title p{
    font-size: var(--font-base);
    text-align: left;
}

@media (max-width: 768px) {
    .post-slider{
        flex-wrap: wrap;
        padding: 30px;
        justify-content: center !important;
    }

    .post-slider__img{
        max-height: 200px;
    }

    .post-slider__img img{
        width: auto;
        height: 100%;
    }

    .post-slider-wrapper{
        align-items: center;
        gap: 20px;
    }

    .main-page__slider.post-slider .post-slider-wrapper h1{
        max-width: 400px;
        text-align: center;
    }
}

@media (max-width: 560px) {
    :root {
        --height-slider: 100%;
        --height-container-slider: 100%;
    }

    .additional-post{
        flex-wrap: wrap;
    }
}