/*
 * Слайдер "Новое поступление" на главной.
 *
 * 1. Блок ниже повторяет инлайн-стили, которые раньше стояли прямо в
 *    views/index.php на плашке с названием товара. Внешний вид не меняется,
 *    стили просто переехали в классы, чтобы их можно было переопределять.
 *
 * 2. Media query переносит плашку из-под низа картинки в обычный поток —
 *    название встаёт ПОД картинкой, а не поверх неё. Включается только на
 *    "узких" телефонах, где высота слайда 284-300px и под картинкой остаётся
 *    много пустого места. Десктоп и остальные экраны не затрагиваются.
 */

/* --- 1. Бывшие инлайн-стили (десктоп и все прочие экраны) --- */

.promo-slider-plate {
    position: absolute;
    bottom: 10%;
    width: 100%;
    height: 80px;
    background-color: #7a7270;
    opacity: .9;
}

.promo-slider-plate__name {
    position: absolute;
    bottom: 20%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #000;
}

/* --- 2. Телефоны: плашка уезжает под картинку ---
 *
 * В template_3d45a442ec5393593d6b1f562f8b940d.css высота слайда задана
 * лесенкой брейкпоинтов, и на соседних ширинах она скачет:
 *   до 320px  -> 284px      376-384px -> 159px
 *   321-360px -> 148px      385-425px -> 290px
 *   361-375px -> 300px      426-480px -> 201px
 * Отсюда и разница между устройствами: на одних под плашкой пусто,
 * на других она вплотную наезжает на картинку.
 *
 * Ниже высота слайда выравнивается на всех телефонах. Общая высота блока
 * при этом не меняется: контейнер .promo-slider-list и так занимает 306px,
 * лесенка просто оставляла под слайдом пустую белую полосу.
 */

@media (max-width: 480px) {

    /* одинаковая высота слайда вместо лесенки 148-300px */
    .promo-slider-list__label {
        height: 290px;
    }

    /* .l-layout тянет ширину до 300px, в узком слайде это мешает потоку */
    .promo-slider-list__label .promo-slider__layout {
        min-width: 0;
        height: 100%;
    }

    /* картинка + плашка одним блоком по центру слайда */
    .promo-slider-slide {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%;
    }

    /* Квадратная зона под картинку, одинаковая во всех слайдах.
     * padding-top в процентах считается от ширины, поэтому высота зоны всегда
     * равна ширине слайда — без aspect-ratio, работает и в старых браузерах.
     * Товарные превью разного формата, и без этой зоны и картинки, и плашки
     * вставали на разной высоте. */
    .promo-slider-slide__pic {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* картинка прижата к верху зоны и отцентрована по горизонтали, пропорции
     * сохраняются. !important бьёт инлайновый width: 120px в разметке. */
    .promo-slider-slide__pic .promo-slider-list__img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        display: block;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        max-height: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* плашка: тот же фон и высота, что в оригинале, но под картинкой */
    .promo-slider-plate {
        position: static;
        height: 80px;
        padding: 0 4px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* название по центру плашки: короткое — одной строкой, длинное — в
     * несколько, но не больше 4 строк (4 x 20px = высота плашки).
     * line-height задан явно тем же значением, что наследуется сейчас,
     * чтобы обрезка попадала ровно на границу строки. */
    .promo-slider-plate__name {
        position: static;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-height: 20px;
        max-height: 80px;
        overflow: hidden;
    }
}