/* ========================================
   ОБЩИЕ СТИЛИ СЛАЙДЕРА
   ======================================== */

/* Основной контейнер слайдера */
.posts-slider-wrapper {
    width: 100%;
    max-width: 1400px; /* Максимальная ширина - можете изменить */
    margin: 0 auto;
    padding: 40px 20px;
}

/* ========================================
   СТИЛИ КАТЕГОРИЙ
   ======================================== */

/* Контейнер категорий */
.slider-categories {
    display: flex;
    justify-content: center; /* Выравнивание по центру на ПК */
    flex-wrap: wrap;
    gap: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между кнопками категорий */
    margin-bottom: 64px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между категориями и слайдером - 64px */
    padding-top: 64px; /* ИЗМЕНИТЬ ЗДЕСЬ отступ сверху над категориями - 64px */
}

/* Кнопка категории */
.category-btn {
    background: transparent;
    border: 2px solid transparent; /* Прозрачная обводка по умолчанию */
    color: #23406a; /* ИЗМЕНИТЬ ЗДЕСЬ цвет текста категорий */
    font-size: 17px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта категорий */
    padding: 10px 20px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы внутри кнопки (верх-низ лево-право) */
    cursor: pointer;
    transition: all 0.3s ease; /* Плавный переход при наведении */
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap; /* Запрет переноса текста */
    line-height: 1.2; /* ИЗМЕНИТЬ ЗДЕСЬ межстрочный интервал в кнопках */
}

/* Кнопка категории при наведении */
.category-btn:hover {
    border-color: #1e3250; /* Цвет обводки при наведении */
}

/* Активная категория */
.category-btn.active {
    border-color: #1e3250; /* Цвет обводки активной категории */
    font-weight: 600;
}

/* ========================================
   КОНТЕЙНЕР СЛАЙДЕРА
   ======================================== */

/* Обертка слайдера с навигацией */
.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px; /* Расстояние между стрелками и постами */
}

/* Обертка для постов с overflow */
.slider-posts-wrapper {
    flex: 1;
    overflow: hidden; /* Скрываем посты за пределами */
}

/* Контейнер постов */
.slider-posts {
    display: flex;
    gap: 30px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между карточками постов */
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); /* Мягкая анимация перелистывания */
    will-change: transform; /* Оптимизация производительности */
}

/* ========================================
   СТРЕЛКИ НАВИГАЦИИ
   ======================================== */

/* Общие стили для стрелок */
.slider-arrow {
    width: 50px; /* Ширина квадрата стрелки */
    height: 50px; /* Высота квадрата стрелки */
    background: #4c4c4c; /* Цвет фона квадрата */
    border: 2px solid #f3f5fa; /* Цвет обводки квадрата */
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Запрет сжатия */
    z-index: 10;
}

/* Стрелки при наведении */
.slider-arrow:hover {
    background: #3a3a3a; /* Темнее при наведении - можете изменить */
    transform: scale(1.05); /* Небольшое увеличение */
}

/* Стрелки при нажатии */
.slider-arrow:active {
    transform: scale(0.95);
}

/* Стрелка влево */
.slider-arrow-left {
    order: -1; /* Размещаем слева */
}

/* Стрелка вправо */
.slider-arrow-right {
    order: 1; /* Размещаем справа */
}

/* SVG стрелки внутри кнопки - цвет #f3f5fa */
.slider-arrow svg path {
    stroke: #f3f5fa;
}

/* ========================================
   КАРТОЧКА ПОСТА
   ======================================== */

/* Одна карточка поста */
.post-card {
    min-width: calc(33.333% - 20px); /* На ПК показываем 3 карточки */
    background: #e2e5ec; /* Цвет фона записи */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Легкая тень */
}

/* Изображение поста */
.post-image {
    width: 100%;
    height: 250px; /* ИЗМЕНИТЬ ЗДЕСЬ высоту изображения на ПК */
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обрезка изображения по размеру */
}

/* ========================================
   КОНТЕНТ ПОСТА
   ======================================== */

/* Контейнер контента */
.post-content {
    padding: 30px 25px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы внутри карточки (верх-низ лево-право) */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Заголовок поста */
.post-title {
    font-size: 19px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта заголовка на ПК */
    color: #23406a;
    margin: 0 0 10px 0; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние после заголовка */
    font-weight: 600;
    line-height: 1.4; /* ИЗМЕНИТЬ ЗДЕСЬ межстрочный интервал заголовка */
}

/* Подзаголовок "Violations identified" */
.post-subtitle {
    font-size: 14px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта "Violations identified" */
    color: #666;
    margin: 0 0 61px 0; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между заголовком и постом - 61px */
    font-weight: 500;
}

/* Текст записи */
.post-excerpt {
    font-size: 13px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта текста записи на ПК */
    color: #333;
    line-height: 25px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между строчками поста - 25px */
    margin-bottom: 25px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние от текста до кнопки */
    flex: 1;
    
    /* Ограничение текста до 8 строк */
    display: -webkit-box;
    -webkit-line-clamp: 8; /* ИЗМЕНИТЬ ЗДЕСЬ максимум строк на ПК */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Сохраняем форматирование из оригинального поста */
.post-excerpt p {
    margin-bottom: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между абзацами */
}

.post-excerpt ul,
.post-excerpt ol {
    margin-left: 20px; /* ИЗМЕНИТЬ ЗДЕСЬ отступ списков слева */
    margin-bottom: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние после списка */
}

.post-excerpt li {
    margin-bottom: 8px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между пунктами списка */
}

.post-excerpt strong,
.post-excerpt b {
    font-weight: 600;
}

/* ========================================
   КНОПКА READ MORE
   ======================================== */

/* Кнопка "Read More" */
.read-more-btn {
    background: #ffffff; /* Цвет кнопки */
    color: #23406a;
    border: 1px solid #23406a;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start; /* Выравнивание по левому краю */
}

/* Кнопка при наведении */
.read-more-btn:hover {
    background: #23406a;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(35, 64, 106, 0.3);
}

/* ========================================
   POPUP ОКНО
   ======================================== */

/* Затемненный фон popup */
.slider-popup-overlay {
    display: none; /* По умолчанию скрыто */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон */
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* Показываем popup при активации */
.slider-popup-overlay.active {
    display: flex;
}

/* Само окно popup */
.slider-popup {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    max-width: 500px; /* Максимальная ширина popup */
    width: 90%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: popupSlideIn 0.3s ease; /* Анимация появления */
}

/* Анимация появления popup */
@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Кнопка закрытия (крестик) */
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s ease;
}

.popup-close:hover {
    transform: rotate(90deg); /* Вращение при наведении */
}

/* Текст в popup */
.popup-text {
    font-size: 18px;
    color: #333;
    margin: 0 0 30px 0;
    line-height: 1.6;
    text-align: center;
}

/* Кнопка "Подать Заявку" */
.popup-button {
    display: inline-block;
    width: 100%;
    background: #23406a;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    transition: all 0.3s ease;
}

.popup-button:hover {
    background: #1e3250;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(35, 64, 106, 0.4);
}

/* ========================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ======================================== */

@media (max-width: 768px) {
    
    /* Отступы на мобилке меньше */
    .posts-slider-wrapper {
        padding: 20px 10px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы слева-справа от слайдера */
    }
    
    /* Категории выравниваем по левому краю */
    .slider-categories {
        justify-content: flex-start; /* Выравнивание по левому краю */
        margin-bottom: 30px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние от категорий до слайдера */
        padding-top: 20px; /* ИЗМЕНИТЬ ЗДЕСЬ отступ сверху над категориями */
        gap: 8px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между кнопками категорий */
    }
    
    /* Кнопки категорий на мобилке */
    .category-btn {
        font-size: 14px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта категорий на мобилке */
        padding: 8px 12px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы внутри кнопки (верх-низ лево-право) */
        line-height: 1.2; /* ИЗМЕНИТЬ ЗДЕСЬ межстрочный интервал в кнопках */
    }
    
    /* Контейнер слайдера на мобилке - БЕЗ СТРЕЛОК */
    .slider-container {
        gap: 0; /* Убираем отступы для стрелок */
    }
    
    /* СКРЫВАЕМ СТРЕЛКИ на мобилке - они не нужны */
    .slider-arrow {
        display: none !important; /* Полностью скрываем стрелки */
    }
    
    /* Обертка для постов на мобилке */
    .slider-posts-wrapper {
        width: 100%; /* Занимаем всю ширину */
        overflow-x: auto; /* Включаем горизонтальную прокрутку */
        overflow-y: hidden;
        scroll-behavior: smooth; /* Плавная прокрутка */
        -webkit-overflow-scrolling: touch; /* Плавный свайп на iOS */
        scroll-snap-type: x mandatory; /* Привязка к карточкам при свайпе */
        padding: 0 10px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы слева-справа от карточек */
    }
    
    /* Убираем скроллбар на мобилке */
    .slider-posts-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .slider-posts-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Контейнер постов на мобилке */
    .slider-posts {
        gap: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между карточками */
        padding-right: 15px; /* Отступ справа чтобы было видно кусочек */
    }
    
    /* Карточка на мобилке - 1 карточка + кусочек следующей (10%) */
    .post-card {
        min-width: 85%; /* ИЗМЕНИТЬ ЗДЕСЬ ширину карточки (85% = видно 15% следующей) */
        max-width: 85%; /* Фиксируем ширину */
        scroll-snap-align: start; /* Привязка к началу при свайпе */
        flex-shrink: 0; /* Запрет сжатия карточки */
    }
    
    /* Изображение на мобилке */
    .post-image {
        height: 200px; /* ИЗМЕНИТЬ ЗДЕСЬ высоту картинки на мобилке */
    }
    
    /* Контент карточки на мобилке */
    .post-content {
        padding: 20px 15px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы внутри карточки (верх-низ лево-право) */
    }
    
    /* Заголовок поста на мобилке */
    .post-title {
        font-size: 17px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта заголовка */
        margin-bottom: 8px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние от заголовка до "Violations" */
        line-height: 1.3; /* ИЗМЕНИТЬ ЗДЕСЬ межстрочный интервал заголовка */
    }
    
    /* "Violations identified" на мобилке */
    .post-subtitle {
        font-size: 12px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта подзаголовка */
        margin-bottom: 20px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние от "Violations" до текста */
    }
    
    /* Текст записи на мобилке */
    .post-excerpt {
        font-size: 12px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта текста */
        line-height: 20px; /* ИЗМЕНИТЬ ЗДЕСЬ межстрочный интервал текста */
        margin-bottom: 20px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние от текста до кнопки */
        -webkit-line-clamp: 6; /* ИЗМЕНИТЬ ЗДЕСЬ количество строк текста на мобилке */
    }
    
    /* Отступы в тексте на мобилке */
    .post-excerpt p {
        margin-bottom: 10px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между абзацами */
    }
    
    .post-excerpt ul,
    .post-excerpt ol {
        margin-left: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ отступ списков слева */
        margin-bottom: 10px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние после списка */
    }
    
    .post-excerpt li {
        margin-bottom: 5px; /* ИЗМЕНИТЬ ЗДЕСЬ расстояние между пунктами списка */
    }
    
    /* Кнопка READ MORE на мобилке */
    .read-more-btn {
        font-size: 13px; /* ИЗМЕНИТЬ ЗДЕСЬ размер шрифта кнопки */
        padding: 10px 25px; /* ИЗМЕНИТЬ ЗДЕСЬ размер кнопки (верх-низ лево-право) */
    }
    
    /* Popup на мобилке */
    .slider-popup {
        padding: 30px 20px; /* ИЗМЕНИТЬ ЗДЕСЬ отступы внутри popup */
        max-width: 90%;
    }
    
    .popup-text {
        font-size: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ размер текста в popup */
        line-height: 1.5; /* ИЗМЕНИТЬ ЗДЕСЬ межстрочный интервал в popup */
    }
    
    .popup-button {
        font-size: 15px; /* ИЗМЕНИТЬ ЗДЕСЬ размер текста кнопки в popup */
        padding: 12px 25px; /* ИЗМЕНИТЬ ЗДЕСЬ размер кнопки в popup */
    }
}