/*
 * Баннер бонусной программы.
 *
 * У баннера два вида из макета: горизонтальный (955x104) и вертикальный
 * (332x231). Вид выбирается двумя способами — по ширине экрана и по месту
 * вывода: в сайдбаре корзины места столько же, сколько на телефоне, поэтому там
 * баннер получает класс `--compact` и становится вертикальным при любой ширине.
 *
 * Чтобы не верстать один макет дважды, все различия сведены в переменные:
 * правила ниже написаны один раз, а медиазапрос и класс лишь подставляют другой
 * набор значений. Дублируется только сам набор — селектор в медиазапросе и класс
 * объединить в один селектор средствами CSS нельзя.
 *
 * Размеры и цвета — по макету: радиус 20, заголовок 16/600, описание 13/300
 * (#363636, 70%), кнопка 42px, радиус 10, #E63737.
 */
.saby-card-banner {
    /* Горизонтальный вид — по умолчанию. */
    --banner-image: var(--saby-card-banner-image);
    --banner-size: auto;
    --banner-position: right center;
    --banner-height: 104px;
    --banner-min-height: 104px;
    --banner-direction: row;
    --banner-align: center;
    --banner-gap: 28px;
    --banner-padding: 30px;
    --banner-text-basis: 319px;
    --banner-text-max: 319px;
    --banner-button-width: auto;
    --banner-button-min-width: 194px;
    --banner-button-margin-left: auto;
    --banner-button-margin-top: 0;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--banner-height);
    margin: 0 0 20px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff9ee;
    background-image: var(--banner-image);
    background-repeat: no-repeat;
    /* Прижимаем к правому краю: при более узком контейнере срезается пустой
       левый край, а иллюстрация у кромки остаётся целой. */
    background-position: var(--banner-position);
    background-size: var(--banner-size);
}

.saby-card-banner__inner {
    position: relative;
    display: flex;
    flex-direction: var(--banner-direction);
    align-items: var(--banner-align);
    gap: var(--banner-gap);
    box-sizing: border-box;
    min-height: var(--banner-min-height);
    padding: var(--banner-padding);
}

.saby-card-banner__title {
    margin: 0;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
}

.saby-card-banner__text {
    margin: 0;
    flex: 0 1 var(--banner-text-basis);
    max-width: var(--banner-text-max);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4;
    color: #363636;
    opacity: 0.7;
}

.saby-card-banner__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--banner-button-width);
    min-width: var(--banner-button-min-width);
    height: 42px;
    margin-top: var(--banner-button-margin-top);
    margin-left: var(--banner-button-margin-left);
    padding: 11px 14px;
    border-radius: 10px;
    background: #e63737;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.saby-card-banner__button:hover,
.saby-card-banner__button:focus {
    background: #cf2c2c;
    color: #fff;
}

/* Узкие контейнеры: иллюстрация уезжает за кнопку, поэтому текст ужимаем. */
@media (max-width: 1180px) {
    .saby-card-banner:not(.saby-card-banner--compact) {
        --banner-text-basis: 280px;
        --banner-text-max: 280px;
    }
}

/*
 * Вертикальный вид (332x231): содержимое в столбик, отступ 20, между заголовком
 * и описанием 10, кнопка на всю ширину и прижата к низу — в макете она
 * перекрывает часть карточки, поэтому за ней в подложке пусто.
 *
 * Картинка выгружена из макета в 2x (664x462), логический размер задаём явно:
 * иначе она нарисовалась бы вдвое крупнее, а на retina так остаётся чёткой.
 */
.saby-card-banner--compact {
    --banner-image: var(--saby-card-banner-image-mobile);
    /* В отличие от телефона, ширина места вывода произвольная (сайдбар корзины —
       около 305px против 332px в макете). Поэтому иллюстрация не фиксированного
       размера, а во всю ширину с сохранением пропорций: иначе она сдвигается
       влево под текст и описание читается поверх карточки с монетами.
       Высота 212px — те же 231px макета, пересчитанные на 305px ширины. */
    --banner-size: 100% auto;
    --banner-position: right bottom;
    --banner-height: auto;
    --banner-min-height: 212px;
    --banner-direction: column;
    --banner-align: stretch;
    --banner-gap: 10px;
    --banner-padding: 20px;
    --banner-text-basis: auto;
    --banner-text-max: 70%; /* 230 из 332 по макету, но в долях — под любую ширину */
    --banner-button-width: 100%;
    --banner-button-min-width: 0;
    --banner-button-margin-left: 0;
    --banner-button-margin-top: auto; /* прижимаем к низу, как в макете */
}

/* Тот же набор — для телефонов, где вид выбирает не место вывода, а ширина. */
@media (max-width: 900px) {
    .saby-card-banner {
        --banner-image: var(--saby-card-banner-image-mobile);
        --banner-size: 332px 231px;
        --banner-position: right bottom;
        --banner-height: auto;
        --banner-min-height: 231px;
        --banner-direction: column;
        --banner-align: stretch;
        --banner-gap: 10px;
        --banner-padding: 20px;
        --banner-text-basis: auto;
        --banner-text-max: 230px;
        --banner-button-width: 100%;
        --banner-button-min-width: 0;
        --banner-button-margin-left: 0;
        --banner-button-margin-top: auto;
    }
}

/* Совсем узкие экраны: макет рассчитан на 332px, ужимаем только отступы. */
@media (max-width: 359px) {
    .saby-card-banner {
        --banner-padding: 16px;
    }
}