/* ==========================================================================
   Основные стили для главной страницы (main-page.css)
   ========================================================================== */

/* === ОБЩИЕ СТИЛИ ДЛЯ КОНТЕНТА ГЛАВНОЙ СТРАНИЦЫ === */
/* Фон всего контента главной страницы */
.main-content {
    background-color: #EFF5F9; /* Фон сайта из ТЗ */
    padding: 2.5rem 0; /* Отступы могут регулироваться секциями */
}

/* Контейнер, ограничивающий ширину основного содержимого */
.container-main-page {
    max-width: 110rem; /* 1760px / 16px */
    margin: 0 auto;
    padding: 2.5rem 2.5rem; /* 40px / 16px по горизонтали, 40px / 16px по вертикали */
    box-sizing: border-box;
    width: 100%;
}

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

/* --- Общий стиль для секций --- */
.section-main-page {
    width: 100%; /* Занимаем всю ширину родителя */
    padding: 4rem 0; /* Отступы сверху и снизу секции */
    background-color: #fff; /* Фон секции - белый */
    border-radius: 1.25rem; /* Скругление углов: 20px / 16px */
    margin-bottom: 2rem; /* Отступ снизу между секциями */
}

/* ==========================================================================
   СЛАЙДЕР (Новости ПТО)
   ========================================================================== */

/* --- Секция слайдера --- */
.slider-section {
    background-color: #fff; /* Фон секции слайдера */
    width: 100%;
    max-width: 110rem;
    border-radius: 2.5rem;
    margin: 5rem auto 2rem auto;
}

/* --- Обёртка для всех слайдов --- */
/* Определяет максимальную ширину и центрирует слайдер */
.slider-wrapper {
    position: relative; /* Для позиционирования слайдов */
    width: 100%;
    max-width: 110rem; /* Ширина слайдера: 1760px / 16px */
    height: 36.25rem; /* Высота слайдера: 580px / 16px */
    margin: 0 auto; /* Центрируем слайдер по горизонтали */
    overflow: hidden; /* Скрываем слайды, выходящие за границы */
    border-radius: 2.5rem; /* Скругление углов: 40px / 16px */
    background-color: #fff; /* Фон слайдера */
    padding: 2rem; /* Внутренние отступы: 32px / 16px */
    box-sizing: border-box; /* Включаем padding и border в ширину/высоту */
}

/* --- Слайд --- */
/* Базовый стиль для слайда. Все слайды абсолютно спозиционированы */
.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 2.5rem; /* Расстояние между контентом и изображением: 40px / 16px */
    align-items: center;
    padding: 2rem; /* Внутренние отступы слайда */
    box-sizing: border-box;
    opacity: 0; /* По умолчанию все слайды скрыты */
    transition: opacity 0.5s ease-in-out; /* Плавный переход прозрачности */
    /* background-color: #fafafa; */ /* Опционально: фон для отладки */
}

/* Активный слайд виден */
.slider-slide--active {
    opacity: 1;
    z-index: 1; /* Активный слайд поверх других */
}

/* --- Контент слайда --- */
.slider-content {
    flex: 1; /* Контент занимает всё доступное пространство слева */
}

/* --- Хештег слайда --- */
.slider-hashtag {
    display: inline-block;
    background-color: rgba(255, 121, 90, 0.1); /* 10% opacity от #FF795A */
    color: #FF795A; /* Цвет текста хештега */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Полужирный */
    font-size: 0.75rem; /* Размер шрифта: 12px / 16px */
    line-height: 100%; /* Межстрочный интервал */
    padding: 0.75rem 1rem; /* Внутренние отступы: 12px 16px / 16px */
    border-radius: 1.25rem; /* Скругление углов: 20px / 16px */
    margin-bottom: 1rem; /* Отступ снизу */
}

.slider-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Black */
    font-size: 3rem; /* Размер шрифта заголовка: 48px / 16px */
    line-height: 100%;
    margin-bottom: 1rem; /* Отступ снизу от заголовка до анонса */
    color: #2A2A2A; /* Цвет текста заголовка из ТЗ */
}

.slider-announce {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1rem; /* Размер шрифта анонса: 16px / 16px */
    line-height: 120%; /* Межстрочный интервал */
    margin-bottom: 2rem; /* Отступ снизу от анонса до кнопок */
    color: #2A2A2A; /* Цвет текста анонса из ТЗ */
}

/* --- Кнопки слайда --- */
/* Контейнер для кнопки "Подробнее" и стрелок */
.slider-buttons-container {
    display: flex;
    justify-content: space-between; /* Распределяет элементы по краям контейнера */
    align-items: center;
    width: 100%; /* Ширина контейнера кнопок: 450px / 16px */
    height: 3.4375rem; /* Высота контейнера кнопок: 55px / 16px */
}

/* Кнопка "Подробнее" */
.slider-button {
    display: inline-block;
    width: 19.0625rem; /* Ширина кнопки: 305px / 16px */
    height: 3.4375rem; /* Высота кнопки: 55px / 16px */
    background-color: #0C4CD3; /* Цвет фона кнопки из ТЗ */
    color: #fff; /* Цвет текста кнопки */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem; /* Размер шрифта кнопки: 16px / 16px */
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    border-radius: 1.25rem; /* Скругление углов: 20px / 16px */
    padding: 1.25rem; /* Паддинги кнопки: 20px / 16px */
    transition: background-color 0.3s; /* Плавный переход цвета фона */
    box-sizing: border-box;
}

.slider-button:hover {
    background-color: #D42A4A; /* Цвет фона кнопки при наведении из ТЗ */
}

/* --- Контейнер для стрелок слайда --- */
.slider-arrows {
    display: flex; /* Используем флексбокс для расположения стрелок */
    gap: 0.625rem; /* Расстояние между стрелками: 10px / 16px */
    margin-left: auto; /* Прижимаем контейнер со стрелками вправо внутри .slider-buttons-container */
    /* Если нужно выравнивание по правому краю внутри flex-контейнера, а не просто margin-left: auto,
       можно обернуть .slider-button и .slider-arrows в отдельный контейнер и применить justify-content: space-between; */
}

/* Кнопка стрелки (предыдущая/следующая) */
.slider-arrow {
    width: 3.4375rem; /* Ширина кнопки стрелки: 55px / 16px */
    height: 3.4375rem; /* Высота кнопки стрелки: 55px / 16px */
    background-color: #EFF5F9; /* Цвет фона кнопки стрелки из ТЗ */
    border: none; /* Убираем границу */
    border-radius: 1.25rem; /* Скругление углов: 20px / 16px */
    padding: 1.25rem; /* Паддинги кнопки стрелки: 20px / 16px */
    cursor: pointer; /* Курсор "указатель" при наведении */
    transition: background-color 0.3s; /* Плавный переход цвета фона */
    box-sizing: border-box;
}

.slider-arrow:hover {
    background-color: #D42A4A; /* Цвет фона кнопки стрелки при наведении из ТЗ */
}

/* SVG внутри кнопки стрелки */
.slider-arrow svg {
    width: 1.25rem; /* Ширина SVG: 20px / 16px */
    height: 1.25rem; /* Высота SVG: 20px / 16px */
    fill: #000; /* Цвет заливки SVG */
}

/* --- Изображение слайда --- */
/* Блок, содержащий изображение */
.slider-image-block {
    flex: 0 0 auto; /* Изображение не растягивается и не сжимается */
    width: 53.4375rem; /* Ширина блока изображения: 855px / 16px */
    height: auto; /* Высота автоматическая */
    border-radius: 0; /* Убираем скругление углов у блока изображения */
    max-width: 100%; /* Ограничиваем ширину изображения */
}

/* Само изображение */
.slider-image {
    width: 100%; /* Изображение занимает всю ширину своего блока */
    height: auto; /* Высота автоматическая, сохраняя пропорции */
    display: block; /* Убираем нижний отступ под изображением */
    border-top-right-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
}


/* ==========================================================================
   АДАПТИВНОСТЬ (Media Queries)
   ========================================================================== */

@media (max-width: 1200px) {
    .container-main-page {
        max-width: 1140px;
        padding: 0 2rem; /* 32px / 16px */
    }
    .slider-wrapper {
        width: 95vw; /* Адаптируем ширину под экран */
        height: auto; /* Высота может быть автоматической */
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .slider-content, .slider-image-block {
        flex: 1 1 auto; /* Позволяем элементам сжиматься и растягиваться */
        width: 100%;
    }
    .slider-image-block {
        max-width: 100%; /* Ограничиваем ширину изображения */
    }
    .slider-buttons-container {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 1rem;
    }
    .slider-button {
        width: 100%;
        max-width: 19.0625rem; /* Ограничиваем максимальную ширину кнопки */
    }
    .slider-arrows {
        /* Стрелки остаются справа, если нужно, или можно перенести */
        align-self: flex-end;
    }
}

@media (max-width: 992px) {
    .container-main-page {
        max-width: 960px;
    }
}

@media (max-width: 768px) {
    .container-main-page {
        max-width: 720px;
        padding: 0 1rem; /* 16px / 16px */
    }
    .slider-section {
        padding: 2rem 0; /* Уменьшаем отступы на мобильных */
    }
    .slider-wrapper {
        border-radius: 1.25rem; /* 20px / 16px */
        padding: 1rem;
        gap: 1rem;
    }
    .slider-slide {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 1rem;
    }
    .slider-title {
        font-size: 2rem; /* Уменьшаем заголовок на мобильных */
    }
    .slider-announce {
        font-size: 0.875rem; /* Уменьшаем анонс на мобильных */
    }
    .slider-buttons-container {
        align-items: center;
    }
    .slider-arrows {
        align-self: center; /* Центрируем стрелки на мобильных */
    }
    .slider-image-block {
        /* Показываем изображение */
        display: block;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .container-main-page {
        max-width: 540px;
        padding: 0 0.75rem; /* 12px / 16px */
    }
    .slider-wrapper {
        padding: 0.75rem;
        border-radius: 1rem; /* 16px / 16px */
    }
    .slider-hashtag {
        font-size: 0.625rem; /* 10px / 16px */
        padding: 0.5rem 0.75rem; /* 8px 12px / 16px */
        border-radius: 1rem; /* 16px / 16px */
    }
    .slider-title {
        font-size: 1.5rem; /* Еще меньше заголовок */
    }
    .slider-announce {
        font-size: 0.75rem; /* 12px / 16px */
    }
    .slider-button {
        width: 100%;
        font-size: 0.875rem; /* 14px / 16px */
        padding: 1rem;
        border-radius: 1rem; /* 16px / 16px */
    }
    .slider-arrow {
        width: 2.5rem; /* 40px / 16px */
        height: 2.5rem; /* 40px / 16px */
        padding: 0.625rem; /* 10px / 16px */
        border-radius: 1rem; /* 16px / 16px */
    }
    .slider-arrow svg {
        width: 1rem; /* 16px / 16px */
        height: 1rem; /* 16px / 16px */
    }
}