/*
 * Большой баннер на главной (front/index.blade.php, App\Support\HomeBanner, js/home-banner.js).
 * В ширину страницы (по краям шапки), скруглён; компьютер — полоса 5 : 1, телефон — 2 : 1 со своей картинкой
 * (пока ни у одного баннера её нет — картинка для компьютера целиком, 1920 : 500).
 * Картинка другой формы, чем рамка, не обрезается: целиком (contain) на размытом фоне из неё же;
 * подходящей формы — заполняет рамку (.is-fit ставит скрипт).
 */
.vb.container { margin-top: 20px; margin-bottom: 26px; padding-left: 0; padding-right: 0; }
.vb-slider { position: relative; border-radius: 12px; }
.vb-link { position: relative; display: block; padding-top: 20%; overflow: hidden; border-radius: 12px; background: #F0F2F4;
    isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.vb-link picture,
.vb-link img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
/* размытый фон — только у картинок другой формы */
.vb-bg img { object-fit: cover; -webkit-filter: blur(22px) saturate(1.15); filter: blur(22px) saturate(1.15); transform: scale(1.18); }
.vb-bg::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .12); }
.vb-img img { object-fit: contain; }
.vb-slide.is-fit .vb-bg { display: none; }
.vb-slide.is-fit .vb-img img { object-fit: cover; }

/* стрелки — как в прежнем баннере: тонкие светлые «‹ ›» (значок Swiper) без подложки, по краям; появляются при наведении
   на баннер. Размер — по высоте нового баннера (раньше 44 px на баннер ~375 px, теперь та же доля от 5 : 1) */
.vb-slider { --vb-arrow: clamp(24px, 2.4vw, 32px); }
.vb-arrow { position: absolute; top: 50%; z-index: 5; display: flex; align-items: center; justify-content: center;
    width: calc(var(--vb-arrow) + 12px); height: calc(var(--vb-arrow) * 1.6); margin-top: calc(var(--vb-arrow) * -.8); padding: 0; border: 0;
    background: none; color: #E7E7E7; opacity: 0; cursor: pointer; transition: opacity .4s;
    -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.vb-arrow::after { font-family: swiper-icons; font-size: var(--vb-arrow); line-height: 1; letter-spacing: 0; text-transform: none !important;
    font-variant: initial; }
.vb-prev::after { content: 'prev'; }
.vb-next::after { content: 'next'; }
.vb-slider:hover .vb-arrow,
.vb-arrow:focus-visible { opacity: 1; }
@media (hover: hover) {
    .vb-arrow:hover { color: #fff; }
}
.vb-arrow:focus { outline: none; }
.vb-prev { left: 8px; }
.vb-next { right: 8px; }

/* точки под баннером (у сайта в main.css у точек !important — здесь тоже) */
.vb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.vb-dots .swiper-pagination-bullet { width: 8px !important; height: 8px !important; margin: 0 !important; border-radius: 4px !important;
    background-color: #D5D9DE !important; box-shadow: none; opacity: 1 !important; cursor: pointer;
    transition: width .25s, background-color .25s; }
.vb-dots .swiper-pagination-bullet-active { width: 22px !important; background-color: #FEDC29 !important; }

@media (max-width: 1000px) {
    .vb-arrow { display: none; }
}
/* телефон: почти от края до края; рамка — по картинке для телефона (2 : 1) или для компьютера целиком (1920 : 500) */
@media (max-width: 600px) {
    .vb.container { margin-top: 10px; margin-bottom: 18px; padding-left: 5px; padding-right: 5px; }
    .vb-slider,
    .vb-link { border-radius: 10px; }
    .vb-link { padding-top: 26.0417%; }
    .vb-has-mobile .vb-link { padding-top: 50%; }
    .vb-dots { margin-top: 8px; }
}