/* ============================================================================
 * /local/assets/banner.css — Главный баннер (IB 28, .banners-big).
 *
 * Вынесено сюда из custom.css 22.05.2026 — параллельные сессии Claude трижды
 * подряд перезаписывали custom.css и стирали баннерные правки. Этот файл
 * подключается через AddHeadString в local/php_interface/init.php (после
 * sku_pills.css) и больше не пересекается с custom.css.
 *
 * Содержит ВСЕ баннерные правки:
 *   (1) серый префикс заголовка (часть до <br>) — оборачивает OnEndBufferContent
 *   (2) контент прижат к нижнему-левому углу слайда (вместо центра)
 *   (3) шрифт Inter только на .banners-big (@font-face — в fonts.css)
 *   (4) уменьшенный заголовок на мобиле (20px вместо font_42)
 * ============================================================================ */

/* (1) Серый префикс */
.banners-big .banners-big__title .banners-big__title-prefix {
    color: rgba(255,255,255,.55) !important;
}

/* (2) Контент прижат к нижнему-левому углу. Аспро на <768px центрирует
   .banners-big__text вертикально (banners.css), у нас 550px-высотный слайд
   и фокус-точка фото в верхней половине → текст наезжал на лицо модели.
   60px padding-bottom — кнопка «смотреть каталог» не должна попадать на точки
   swiper-pagination (правка 19.05.2026: точки сидят на bottom:18px, высота ~10px
   + минимум 20px воздуха = ~50px зона запрета снизу, плюс запас). */
@media (max-width: 768px) {
    .banners-big.banners-big--adaptive-1 .banners-big__text {
        justify-content: flex-end !important;
        padding-bottom: 60px !important;
    }
}

/* (3) Шрифт Inter только на баннере. Остальной сайт — Chiron GoRound TC. */
.banners-big,
.banners-big .banners-big__title,
.banners-big .banners-big__title-prefix,
.banners-big .banners-big__text,
.banners-big .banners-big__text-block,
.banners-big .banner-plus-list,
.banners-big .banner-plus-list li,
.banners-big .banners-big__buttons .btn,
.banners-big .banners-big__buttons .btn-default,
.banners-big .banners-big__buttons a {
    font-family: "Inter", "Chiron GoRound TC", Arial, sans-serif !important;
}

/* (4.5) Точки swiper-pagination — в самый низ слайда.
   Aspro banners.css: .banners-big__nav-wrap сидит на bottom:24px и сам
   содержит pagination как position:static. Правка 19.05.2026 сделала
   pagination position:absolute с bottom:18px, что отодвигало точки на
   ~42px от низа. Заказчик попросил прижать к нижней кромке.
   Решение: сдвигаем САМ wrap к bottom:6px и pagination внутри ставим в
   bottom:0 (относительно wrap'а). 6px — крохотный отступ, чтобы точки не
   налезали на скруглённый нижний край слайда (border-radius: 16px). */
.banners-big .maxwidth-banner .banners-big__nav-wrap {
    bottom: 6px !important;
}
.banners-big .maxwidth-banner .banners-big__nav-wrap .swiper-pagination,
.banners-big .swiper-pagination {
    bottom: 0 !important;
}

/* (4.6) Плюсик в розовых кружках USP-списка. Правка 15.05.2026 ставит ::before
   с position:absolute, top:50%, translateY(-50%) и size 22x22. После уменьшения
   шрифта (font-size:12 / line-height:1.35) li стал ~16px высотой, кружок 22px
   на translateY(-50%) выходит на ~3px ВЫШЕ верха li и обрезается каким-то из
   ancestor'ов с overflow:hidden (вероятно .banners-big__text-block или
   .banners-big__inner). Решения два:
   - min-height:22px на li (чтобы кружок не выходил за пределы li);
   - overflow:visible на ul и .text-block (страховка от наследного клиппинга).
   Плюс утолщаем линии 1px → 2px для читаемости при малом размере шрифта. */
.banners-big .banner-plus-list,
.banners-big .banners-big__text-block,
.banners-big .banners-big__text-wrapper {
    overflow: visible !important;
}
.banners-big .banner-plus-list li {
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}
.banners-big .banner-plus-list li::before {
    font-size: 0 !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    background-size: 10px 2px, 2px 10px !important;
    background-position: 50% 50%, 50% 50% !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
}

/* (4) Размеры текста на мобиле — подогнаны под Tilda 22.05.2026:
       - заголовок 20px (Aspro font_42 даёт ~25.6px на 402px, заказчик попросил мельче);
       - USP-список .banner-plus-list 12px. */
@media (max-width: 768px) {
    .banners-big.banners-big--adaptive-1 .banners-big__title,
    .banners-big .banners-big__title.font_42,
    .banners-big .banners-big__title.font_large {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
    .banners-big .banner-plus-list,
    .banners-big .banner-plus-list li,
    .banners-big .banners-big__text-block {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
}

/* ============================================================================
 * (5) Десктопная подмена фоновых фото 25.05.2026
 *
 * Грабля: банер настроен в режиме `HEIGHT_BANNER='LOW'` + `BIGBANNER_MOBILE=1`
 * (см. include/mainpage/components/big_banner_index/type_1.php + Aspro theme).
 * В этом режиме шаблон `com.banners.lite/.default/template.php:165` рендерит
 * ОДИН div `.swiper-slide.main-slider__item` с inline `background-image: url(LOW_BG_IMAGE)`
 * и НЕ выводит отдельный `$tabletImgSrc` блок (это происходит только при
 * BIGBANNER_MOBILE=3). Поэтому десктоп и мобила берут одно и то же
 * LOW_BG_IMAGE.
 *
 * 22.05.2026 в LOW_BG_IMAGE залили портретные фото (1080×~1350-1773) — для
 * мобилы это правильно (контейнер 402×550), но на десктопе wide-баннер с
 * `background-size: cover` тянет портрет и видна только нижняя полоса (ноги).
 *
 * Решение: оставляем LOW_BG_IMAGE портретным (для мобилы), а на десктопе
 * (>=769px) подменяем background-image через CSS на ландшафтные JPG из
 * NORMAL_BG_IMAGE (file_id 65633/65635/65637/65639 — заливал тем же утром).
 * `!important` в stylesheet перебивает inline-стиль без !important.
 *
 * Селектор по суффиксу `data-background$="..."` целится в портретный URL
 * (он есть на самом slide-элементе). Если когда-нибудь в админке IB 28
 * перезальют LOW_BG_IMAGE — URL изменится, селектор перестанет матчить,
 * на десктопе вернётся новое (вероятно тоже портретное) фото из admin.
 * Тогда правьте этот блок: подставьте новые URL портретов и НОВЫЕ landscape
 * URL из NORMAL_BG_IMAGE (или загрузите ландшафты сюда).
 *
 * Маппинг "портретный URL → ландшафтный URL":
 *   24729 Раздать стиля        c56/iy44... → 5ba/fertg2gi... (1680x740)
 *   24728 Чётко и по делу      ced/thl17... → f53/a7upaqej... (1680x565)
 *   773   Тяжёлая контрабанда  f65/swkwh... → d3e/k3le28kt... (1680x609)
 *   24752 Дождались! пионы     0b3/h9okx... → 796/3hm5lijq... (1680x945)
 * ============================================================================ */
@media (min-width: 769px) {
    .main-slider__item[data-background$="iy44rtnzvxc3fvkkycqpjzz7zk0ctqzs.jpg"] {
        background-image: url(/upload/iblock/5ba/fertg2gim71s3x2vz5xarrcl0ajzm5yo.jpg) !important;
    }
    .main-slider__item[data-background$="thl17q8jvx8y2bur73oxyxxjyg47h4jq.jpg"] {
        background-image: url(/upload/iblock/f53/a7upaqej19wxa9ynuj6ybggdkucaceul.jpg) !important;
    }
    .main-slider__item[data-background$="swkwhmbg6k9j05j12qx0jo2wxosrni2l.jpg"] {
        background-image: url(/upload/iblock/d3e/k3le28ktlz8sj1cu6mbliw72ews1rtsb.jpg) !important;
    }
    .main-slider__item[data-background$="h9okxpgk1qvmyu1lk936m1s2of55d63b.jpg"] {
        background-image: url(/upload/iblock/b07/gu0ra2h1lzkrbanbuxm5rjcrkwazre74.jpg) !important;
    }
}

/* ============================================================================
 * (6) Десктоп: высота баннера 460px + позиция фото 27.05.2026
 *
 * 25.05.2026 высота была поднята до 700px ради «фото целиком». 27.05.2026
 * заказчик попросил уменьшить (как luxury-flowers.ru / референс с розами) -
 * возвращаемся к Aspro-дефолту `.banners-big--low` (460px).
 *
 * Оставляем явный override + комментарий, чтобы при следующих правках было
 * понятно: значение НЕ случайное, а целевое (а не дефолт, который Аспро
 * может поменять в обновлении).
 *
 * `background-position: center top` оставлен с 25.05.2026 - при ландшафтных
 * фото 1680×565-945 (после scale на 1402 wide → высоты 471-789px) обрезка
 * идёт снизу, т.е. теряются ноги/асфальт, а не голова с букетом. Для фото
 * пионов 1680×945 (Боня) обрезка снизу будет ~329px - если ключевые элементы
 * окажутся внизу кадра, нужно перезалить фото в админке (IB=28) с другим
 * focal point либо сменить background-position на этот слайд по селектору
 * `.main-slider__item[data-background$="h9okxpgk1qvmyu1lk936m1s2of55d63b.jpg"]`.
 *
 * Мобила (<=768px) не затронута - у неё высота 550px от 21.05.2026 и
 * портретные фото с `center bottom` (custom.css продолжает контролировать).
 * ============================================================================ */
@media (min-width: 769px) {
    .banners-big.banners-big--low {
        --big-banner-height: 460px !important;
    }
    .banners-big .main-slider__item,
    .banners-big .banners-big__item {
        background-position: center top !important;
    }
}

/* ============================================================================
 * (7) Десктоп: слайд баннера на всю ширину wrapper'а 29.05.2026
 *
 * После добавления виджета «Хит дня» (28.05.2026) контейнер
 * .maxwidth-banner стал flex-row, а .banners-big__wrapper сузился через
 * flex:1 до ~1132px (виджет 320px + gap 16px съели правую часть). Но слайдер
 * инициализируется со swiper-опцией `slidesPerView:"auto"`, а у Aspro
 * `.swiper-slide{width:auto}` — поэтому ширина слайда берётся по контенту
 * (~1002px) и НЕ растягивается на wrapper. В образовавшийся зазор (~130px
 * между правым краем баннера и виджетом) просвечивал обрезанный следующий
 * слайд — выглядело как «баннер не достаёт до виджета».
 *
 * Фикс: принудительно width:100% на слайд → он заполняет wrapper, баннер
 * встаёт вплотную к виджету (остаётся ровный gap:16px из hit_of_day.css), и
 * правый край ряда «баннер + виджет» совпадает по вертикали с блоком
 * «КОЛЛЕКЦИЯ ШИП-ШОП» ниже (оба контейнера = --theme-page-width 1500px).
 *
 * Безопасно для карусели: при slidesPerView:"auto" swiper измеряет offsetWidth
 * каждого слайда на init (CSS уже применён к этому моменту через AddHeadString),
 * поэтому трансформации перелистывания считаются от 100%-ширины корректно,
 * а «подглядывание» соседнего слайда пропадает.
 *
 * Только десктоп (>=992px) — там, где виджет в одном ряду с баннером. На
 * мобиле (<992px) виджет уходит под баннер (display:none у --desktop), баннер
 * и так на всю ширину, слайд не трогаем.
 * ============================================================================ */
@media (min-width: 992px) {
    .banners-big .main-slider .swiper-slide.main-slider__item {
        width: 100% !important;
    }
}