/*
 * Банеры ЛК и страницы входа. Автор: Масич Г.
 * Размеры задаёт слот, а не банер: ЛК — горизонталь 3:1, вход — вертикаль 1:2.
 */

/* Контейнер скрыт, пока движок не отрисовал содержимое: не мигает пустотой. */
.bg-banners { display: none; margin: 0 auto 15px auto; }
.bg-banners.bgb-ready { display: block; }

.bg-banners[data-slot="lk"]    .bgb-viewport { width: 100%; max-width: 790px; aspect-ratio: 3 / 1; margin: 0 auto; }
.bg-banners[data-slot="login"] .bgb-viewport { width: 307px; aspect-ratio: 1 / 2; margin: 0 auto; }

/* Фолбэк для браузеров без aspect-ratio (Safari ≤14, Chrome ≤87 — заметная
   доля старых Android/iPhone у абонентов). Без него .bgb-viewport остаётся
   без высоты, дети с height:100% схлопываются в 0 и банер молча исчезает —
   без ошибок в консоли и без сигнала в ?bannerDebug=1. Классический
   padding-top-хак: высота задаётся отступом относительно ширины блока
   (33.33% = 1/3 для 3:1 у ЛК, 200% = 2/1 для 1:2 у входа), трек кладётся
   внутрь абсолютным позиционированием. */
@supports not (aspect-ratio: 1 / 1) {
    .bg-banners[data-slot="lk"]    .bgb-viewport { height: 0; padding-top: 33.33%; }
    .bg-banners[data-slot="login"] .bgb-viewport { height: 0; padding-top: 200%; }
    .bgb-track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
}

.bgb-viewport { position: relative; overflow: hidden; border-radius: 7px; touch-action: pan-y; }

.bgb-track { display: flex; height: 100%; transition: transform .4s ease; }
.bgb-slide { position: relative; flex: 0 0 100%; height: 100%; }
.bgb-media { display: block; position: relative; width: 100%; height: 100%; }

/* object-fit вместо background-size: картинка вписывается целиком и не обрезается. */
.bgb-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Ширина подписи привязана к слоту: подпись в узкой колонке входа (307px)
   без своего max-width вылезала бы за границы viewport'а. */
.bgb-caption { margin: -10px auto 15px auto; padding-left: 5px; font-size: 1.1rem; }
.bg-banners[data-slot="lk"]    .bgb-caption { max-width: 790px; }
.bg-banners[data-slot="login"] .bgb-caption { max-width: 307px; }

.bgb-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.bgb-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: #c4c4c4; cursor: pointer;
}
.bgb-dot.bgb-dot-active { background: #6b6b6b; }

.bgb-arrow {
    display: none; position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .35); color: #fff; font-size: 18px; line-height: 32px;
    cursor: pointer; z-index: 2;
}
.bgb-arrow-prev { left: 8px; }
.bgb-arrow-next { right: 8px; }

/* Стрелки только там, где есть курсор: на телефоне их роль выполняет свайп. */
@media (hover: hover) {
    .bgb-viewport:hover .bgb-arrow { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .bgb-track { transition: none; }
}