/* =====================================================================
   LRCMS — Банеры (модуль «Банеры»)
   Разметка формируется helper-ом Banners::render('place')
   (sys/helpers/Banners.php). Классы:
     .banners             — контейнер
     .banners--PLACE      — модификатор места вывода
     .banners__item       — карточка банера
     .banners__link       — ссылка-обёртка (если задана)
     .banners__image      — изображение
     .banners__caption    — подпись
     .banners__text       — описание (title выводится только в alt)

   ВЁРСТКА
   Банеры выстроены на float (без flex): карточки обтекают слева,
   контейнер очищается псевдоэлементом ::after. Отступы между
   карточками задаются через margin (gap во float не работает).

   РАЗМЕРЫ МЕСТ ВЫВОДА
   Высота места задаётся переменной --banners-height.
   Ширина банера НЕ фиксируется: она вычисляется браузером из реальных
   пропорций изображения (атрибуты width/height добавляет helper).
     ширина = высота места × реальная ширина / реальная высота

   Переменные:
     --banners-height — высота изображения (auto — по реальному размеру)
     --banners-width  — ширина изображения (auto — из пропорций)
     --banners-fit    — object-fit (contain — вписать без искажений)
     --banners-gap    — отступ между карточками
   ===================================================================== */

.banners {
    /* --- Размеры по умолчанию (переопределяются модификатором места) --- */
    --banners-gap: 16px;
    --banners-radius: 10px;
    --banners-height: auto;
    --banners-width: auto;
    --banners-fit: contain;

    display: block;
    margin: 20px 0;
}

/* Очистка обтекания: контейнер получает высоту по содержимому */
.banners::after {
    content: "";
    display: block;
    clear: both;
}

.banners__item {
    /* Карточка обтекает слева; отступы задаются через margin */
    float: left;
    display: block;
    margin: 0 var(--banners-gap) var(--banners-gap) 0;
    max-width: 100%;
    min-width: 0;
}

/* =====================================================================
   ПОЗИЦИОНИРОВАНИЕ (поле align: left / center / right)
   ===================================================================== */

/* Слева — базовое поведение float */
.banners--align-left .banners__item {
    float: left;
    margin-left: 0;
    margin-right: var(--banners-gap);
}

/* Справа — карточки прижимаются к правому краю */
.banners--align-right .banners__item {
    float: right;
    margin-left: var(--banners-gap);
    margin-right: 0;
}

/* По центру — float не умеет центрировать, поэтому карточки
   становятся inline-block, а контейнер центрирует их через text-align */
.banners--align-center {
    text-align: center;
}

.banners--align-center .banners__item {
    float: none;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin-left: calc(var(--banners-gap) / 2);
    margin-right: calc(var(--banners-gap) / 2);
}

/* Разные выравнивания — позиционируем каждую карточку отдельно */
.banners--align-mixed .banners__item--align-left {
    float: left;
    margin-left: 0;
    margin-right: var(--banners-gap);
}

.banners--align-mixed .banners__item--align-right {
    float: right;
    margin-left: var(--banners-gap);
    margin-right: 0;
}

/* Центральная карточка в смешанном ряду занимает всю ширину,
   изображение внутри центрируется через margin: auto */
.banners--align-mixed .banners__item--align-center {
    float: none;
    clear: both;
    display: block;
    width: 100%;
    margin: 0 auto var(--banners-gap);
}

/* Банеры на всю ширину (шапка/подвал): выравниваем содержимое карточки */
.banners__item--align-left > .banners__link,
.banners__item--align-left > .banners__image {
    margin-left: 0;
    margin-right: auto;
}

.banners__item--align-center > .banners__link,
.banners__item--align-center > .banners__image {
    margin-left: auto;
    margin-right: auto;
}

.banners__item--align-right > .banners__link,
.banners__item--align-right > .banners__image {
    margin-left: auto;
    margin-right: 0;
}

.banners__link {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: var(--banners-height);
    border-radius: var(--banners-radius);
    overflow: hidden;
}

/* Изображение: высота — из места вывода, ширина — из реальных пропорций */
.banners__image {
    display: block;
    width: var(--banners-width);
    height: var(--banners-height);
    max-width: 100%;
    max-height: var(--banners-height);
    object-fit: var(--banners-fit);
    object-position: center;
    border-radius: var(--banners-radius);
    overflow: hidden;
}

/* Внутри ссылки высоту задаёт сама ссылка */
.banners__link .banners__image {
    height: 100%;
    max-height: none;
    border-radius: 0;
}

.banners__caption {
    padding: 8px 2px 0;
}

.banners__text {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

/* =====================================================================
   РАЗМЕРЫ ПО МЕСТАМ ВЫВОДА
   Место задаёт высоту; ширина изображения рассчитывается автоматически
   из его реальных пропорций (width / height).
   ===================================================================== */

/* Шапка — узкие горизонтальные полосы с фиксированной высотой.
   Высота уменьшена на 45px: 80px − 45px = 35px. */
.banners--header_top,
.banners--header_bottom {
    --banners-height: 35px;

    /* Чёткая высота полосы: ряд банеров не «прыгает» при загрузке */
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    margin: 0;
    overflow: hidden;
}

/* Полосы шапки и подвала — карточка прижимается вправо */
.banners--header_top .banners__item,
.banners--header_bottom .banners__item,
.banners--footer_top .banners__item,
.banners--footer_bottom .banners__item {
    float: right;
    display: block;
    margin: 0;
}

/* Главная — крупные банеры */
.banners--home_top,
.banners--home_middle,
.banners--home_bottom {
    --banners-height: clamp(180px, 24vw, 360px);
}

/* Страницы и статьи — над/под текстом */
.banners--content_top,
.banners--content_bottom {
    --banners-height: clamp(140px, 20vw, 280px);
}

/* Подвал — невысокие полосы */
.banners--footer_top,
.banners--footer_bottom {
    --banners-height: clamp(80px, 9vw, 140px);
}

/* Боковая колонка — вертикальный список (float + clear) */
.banners--sidebar .banners__item {
    float: none;
    clear: both;
    width: 100%;
    margin-right: 0;
}

/* Всплывающее окно — центрируем карточку абсолютным позиционированием */
.banners--modal {
    --banners-height: auto;
    --banners-width: 100%;
    --banners-fit: contain;

    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    margin: 0;
    background: rgba(15, 23, 42, .55);
}

.banners--modal .banners__item {
    position: absolute;
    top: 50%;
    left: 50%;
    float: none;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 640px;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
}

.banners--modal .banners__link {
    width: 100%;
    height: auto;
}

.banners--modal .banners__image {
    max-height: calc(100vh - 80px);
}

/* =====================================================================
   КОНТЕЙНЕРЫ БАНЕРНЫХ МЕСТ (шапка)
   --banners-height наследуется изображениями: место резервирует высоту,
   а банер заполняет её, подстраивая ширину по своим пропорциям.
   ===================================================================== */

/* header_top выводится внутри .navbar-tools — перед кнопкой «Контакты».
   Блок занимает ширину по содержимому и является flex-элементом.
   Высота уменьшена на 45px: 80px − 45px = 35px. */
.topbar-banners {
    float: none;
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;

    /* Чёткая высота блока с банерами в шапке */
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    margin: 0;
    overflow: hidden;
}

.topbar-banners .banners {
    float: right;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    margin: 0;
}

.banner-slot {
    --banners-height: 35px;
    padding: 10px 0;
}

.banner-slot--header-top {
    padding-bottom: 0;
}

.banner-slot--header-bottom {
    padding-top: 12px;
}

.banner-slot .banners {
    height: 35px;
    margin: 0;
    overflow: hidden;
}

/* =====================================================================
   АДАПТИВНОСТЬ: на узких экранах банер занимает всю ширину,
   высота пересчитывается из реальных пропорций изображения
   ===================================================================== */

/* ≤992px: банер снова выводится в шапке, но по логике десктопа —
   фиксированная небольшая высота, ширина из пропорций изображения,
   прижатие вправо. .navbar-tools «растворяется» (display: contents),
   поэтому банер и кнопки переносятся на свои строки силами flex. */
@media (max-width: 992px) {
    .navbar-tools {
        display: contents;
    }

    .contacts-btn {
        margin-left: auto;
    }

    .topbar-banners {
        display: block;
        order: 1;
        flex: 1 0 100%;
        width: auto;
        height: 26px;
        min-height: 26px;
        max-height: 26px;
        margin: 4px 0 0;
        overflow: hidden;
    }

    .topbar-banners .banners {
        --banners-height: 26px;

        float: none;
        height: 26px;
        min-height: 26px;
        max-height: 26px;
        overflow: hidden;
    }

    .topbar-banners .banners .banners__item {
        float: right;
        width: auto;
        margin: 0;
    }

    .topbar-banners .banners .banners__link {
        width: fit-content;
        height: var(--banners-height);
    }

    .topbar-banners .banners .banners__image {
        width: auto;
        height: var(--banners-height);
        max-height: var(--banners-height);
    }
}

@media (max-width: 768px) {
    .banners {
        --banners-gap: 12px;
    }

    .banners__item,
    .banners--align-left .banners__item,
    .banners--align-right .banners__item,
    .banners--align-mixed .banners__item--align-left,
    .banners--align-mixed .banners__item--align-right {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 var(--banners-gap);
    }

    .banners--align-center .banners__item {
        display: block;
        width: 100%;
        margin: 0 0 var(--banners-gap);
    }

    .banners__link {
        width: 100%;
        height: auto;
    }

    .banners__image,
    .banners__link .banners__image {
        width: 100%;
        height: auto;
        max-height: var(--banners-height);
    }
}