/* ============================================================================
dp_banner.css
Слайдер баннеров на главной — ТОЛЬКО для #MAIN_PAGE.
Не задевает #catalog_section_top_banner и другие слайдеры/галереи slick.
ЗАДАЧА:
- Все слайды одной детерминированной высоты по соотношению картинок 4083:1875
(padding-bottom = 1875/4083 = 45.9221%).
- Картинки 4083x1875 ложатся в коробку без обрезки.
- Видео 1920x1080 (16:9) вписывается через object-fit:cover: по ширине видны
все кадры, режется только верх/низ.
- Корректно и адаптивно, БЕЗ сплющивания на мобиле (Safari iOS) и без скачков
высоты (CLS) при загрузке video/webp.
ПОЧЕМУ ИМЕННО ТАК:
- aspect-ratio на .item не работает: slick.css задаёт .slick-slide{height:100%},
поэтому высота .item уже не auto и aspect-ratio игнорируется. Опору высоты
создаём через height:0 + padding-bottom% на — это надёжно во всех браузерах.
- Внутренние медиа НЕ полагаются на цепочку процентных высот (height:100% ->
height:100% -> height:100%), которая в мобильном Safari нерелиабельна и даёт
сплющивание/скачки. Вместо этого медиа и обёртки прибиты абсолютно через
inset (top/right/bottom/left:0) — размер берётся из offset-бокса предка,
а не из тайминга резолва процентной высоты.
- !important нужен, чтобы перебить inline-стили (в т.ч. height:100% на
видео-слайда, width:100% на .video-container) и inline height от adaptiveHeight.
ОГРАНИЧЕНИЯ: правим только этот файл. slick.css, general.js, dp_banner.js и
HTML баннера (его правит клиент в админке) — не трогаем.
============================================================================ */
/* ---------- Блок 1: нейтрализуем высоты, навязанные slick ----------
slick.css: .slick-slide{height:100%}; adaptiveHeight ставит inline height
на .slick-list. Снимаем, чтобы высоту задавала наша коробка-соотношение. */
#MAIN_PAGE.banner .bannersHolder.slick-slider .slick-list,
#MAIN_PAGE.banner .bannersHolder.slick-slider .slick-track {
height: auto !important;
}
#MAIN_PAGE.banner .bannersHolder .slick-slide,
#MAIN_PAGE.banner .bannersHolder .item {
height: auto !important;
min-height: 0 !important;
}
/* Клоны infinite (.slick-cloned) имеют ту же структуру .item > a и покрываются
правилами ниже; фиксируем высоту явно на случай инлайнов slick на клоне. */
#MAIN_PAGE.banner .bannersHolder .slick-slide.slick-cloned {
height: auto !important;
}
/* ---------- Блок 2: коробка соотношения 4083:1875 на (опора высоты) ----------
height:0 !important перебивает inline height:100% на видео-слайда.
padding-bottom задаёт детерминированную высоту = 45.9221% ширины.
box-sizing:content-box + обнуление border/margin — чтобы padding-bottom%
давал ровно ожидаемую высоту независимо от глобального reset Bitrix.
line-height/font-size:0 — убирают возможный inline-gap под медиа. */
#MAIN_PAGE.banner .bannersHolder .item > a {
position: relative !important;
display: block !important;
box-sizing: content-box !important;
width: 100% !important;
height: 0 !important;
padding: 0 0 45.9221% 0 !important; /* 1875 / 4083 * 100 = 45.9221% */
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
text-decoration: none !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* ---------- Блок 3: обёртки-контейнеры растягиваются на всю коробку ----------
и .video-container — промежуточные слои между и медиа.
Прибиваем их абсолютно через inset:0 (НЕ через height:100% — надёжнее на iOS),
создавая позиционирующий контекст для вложенных ![]()
/