/*
 * Рекламные баннеры: ряд под шапкой и полоса под рекомендациями на главной, полоса в выдаче каталога.
 * Картинки при загрузке обрезаются до нужных пропорций, aspect-ratio держит место до загрузки.
 */

.promo-banner {
    display: block;
    overflow: hidden;
    border-radius: 1.5rem;
    background-color: #F4F4F4;
}

.promo-banner picture,
.promo-banner img {
    display: block;
    width: 100%;
    height: 100%;
}

.promo-banner img {
    object-fit: cover;
    transition: transform .3s ease;
}

.promo-banner[href]:hover img {
    transform: scale(1.02);
}

/* Баннер с описанием акции — кнопка, открывающая окно */
button.promo-banner {
    width: 100%;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.promo-banner_small {
    aspect-ratio: 3 / 1;
}

.promo-banner_wide {
    aspect-ratio: 6 / 1;
}

/* ---------- Ряд под шапкой ---------- */

.promo-row.margin-title {
    padding-top: 1.5rem;
    padding-bottom: 0;
}

.promo-row__list {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 1.75rem;
}

.promo-row__list > .promo-banner {
    flex: 0 0 calc((100% - 2 * 1.75rem) / 3);
}

/* Лента рекомендаций сразу под рядом баннеров */
.home-feed.home-feed_after-promo.margin-title {
    padding-top: 4rem;
}

/* ---------- Полоса под рекомендациями ---------- */

.promo-wide-section__banner {
    grid-column: 1 / -1;
}

/* ---------- Полоса в выдаче каталога ---------- */

.catalog-page__grid > .promo-banner {
    grid-column: 1 / -1;
}

/* ---------- Окно акции ---------- */

.modal__content_promo {
    width: 64rem;
}

/* Прокручивается тело окна, а не само окно: крестик на десктопе стоит за его правым краем */
.modal__content_promo__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: calc(90vh - 5rem);
    overflow-y: auto;
}

.modal__content_promo__image {
    display: block;
    width: 100%;
    max-height: 40rem;
    object-fit: cover;
    border-radius: 1rem;
}

.modal__content_promo__text {
    font-size: 1.6rem;
    line-height: 140%;
}

.modal__content_promo__text > :first-child {
    margin-top: 0;
}

.modal__content_promo__text > :last-child {
    margin-bottom: 0;
}

.modal__content_promo__text p,
.modal__content_promo__text ul,
.modal__content_promo__text ol {
    margin: 0 0 1rem;
}

.modal__content_promo__text ul,
.modal__content_promo__text ol {
    padding-left: 2rem;
}

.modal__content_promo__text a {
    text-decoration: underline;
}

.modal__content_promo__button {
    align-self: flex-start;
}

@media (max-width: 768px) {
    .modal__content_promo__body {
        max-height: 80vh;
    }

    .modal__content_promo__image {
        max-height: 30rem;
    }

    .modal__content_promo__button {
        align-self: stretch;
    }

    .promo-banner {
        border-radius: 1rem;
    }

    .promo-banner_wide.promo-banner_has-mobile {
        aspect-ratio: 3 / 1;
    }

    .promo-row.margin-title {
        padding-top: 7.5rem;
    }

    /* На телефоне ряд листается вбок, следующий баннер выглядывает из-за края */
    .promo-row__list {
        justify-content: flex-start;
        gap: .75rem;
        margin: 0 -1.25rem;
        padding: 0 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1.25rem;
        scrollbar-width: none;
    }

    .promo-row__list::-webkit-scrollbar {
        display: none;
    }

    .promo-row__list > .promo-banner {
        flex-basis: 85%;
        scroll-snap-align: start;
    }

    .promo-row__list > .promo-banner:only-child {
        flex-basis: 100%;
    }

    .home-feed.home-feed_after-promo.margin-title {
        padding-top: 2.5rem;
    }
}

/* ---------- Страница акции ---------- */
/* Основная вёрстка взята у статьи блога (blog-detail-section), здесь только дополнения */

.promo-page__status {
    align-self: center;
    padding: .5rem 1.25rem;
    border-radius: 10rem;
    font-size: 1.4rem;
    background-color: #F4F4F4;
}

.promo-page__status_finished {
    color: color-mix(in srgb, #FFFFFF 40%, #383838 60%);
}

.promo-page__status_draft {
    background-color: #FFF4D6;
}

.promo-page__lead {
    font-size: 2rem;
    line-height: 140%;
}

.promo-page__buttons {
    justify-content: flex-start;
}

/* Без оглавления текст не оставляет под него место слева, а встаёт по ширине обложки */
@media (min-width: 769px) {
    .blog-detail-section .promo-page_no-toc > article,
    .blog-detail-section .promo-page_no-toc > .blog-detail-section__buttons-block {
        grid-column: 2 / span 3;
    }
}

@media (max-width: 768px) {
    .promo-page__lead {
        font-size: 1.6rem;
    }

    .promo-page__buttons .button {
        flex: 1;
    }
}