/*
 * content-extras.css
 *
 * Дополнительные стили для CMS-карусели — изображения из Markdown-контента,
 * сгруппированные в Bootstrap 5-карусель через content-carousel.js.
 *
 * Подключается после main.compiled.css, чтобы иметь больший приоритет.
 */

/* =========================================================
   CMS-карусель
   ========================================================= */

/**
 * Контейнер карусели.
 *
 * overflow: hidden — обязателен, чтобы border-radius работал для слайдов.
 * margin: 30px 0  — повторяет отступ .formatted-text > *, заданный в main.compiled.css,
 *                   так как карусель заменяет <p> и уже не является его дочерним элементом.
 */
.cms-carousel {
    overflow: hidden;
    border-radius: 10px;
    margin: 30px auto;
    background-color: var(--bs-secondary-bg);
    max-width: 720px;
}

/**
 * Изображение внутри слайда.
 *
 * max-height    — ограничиваем высоту, чтобы очень высокие изображения
 *                 не выходили за экран.
 * object-fit: contain — показываем изображение целиком без обрезки;
 *                       поля по бокам заполняются фоном контейнера.
 */
.cms-carousel__img {
    max-height: 520px;
    object-fit: contain;
    background-color: var(--bs-secondary-bg);
    border-radius: 0; /* скругление управляется родителем .cms-carousel */
}

/**
 * Кнопки «назад» / «вперёд».
 * По умолчанию Bootstrap делает их шириной 15% — уменьшаем немного
 * для компактности на мобильных устройствах.
 */
.cms-carousel .carousel-control-prev,
.cms-carousel .carousel-control-next {
    width: 10%;
}

/**
 * Индикаторы (точки) — немного поднимаем над нижним краем изображения.
 */
.cms-carousel .carousel-indicators {
    margin-bottom: 0.5rem;
}

/* =========================================================
   Адаптивность
   ========================================================= */

@media (max-width: 767.98px) {
    /* На мобильных устройствах снижаем максимальную высоту */
    .cms-carousel__img {
        max-height: 300px;
    }
}