/* ============================================================
   Акции: список /akcii/, детальная /akcii/слаг/ и слайдер баннеров
   на главной. Грузится только на этих страницах (functions.php → add_styles).

   В теме две лестницы брейкпоинтов, и здесь используются обе — по месту:

   • Страница «Акции» и детальная — лестница calc.css («Как купить?»):
     1024–1439 / 768–1023 / ≤767. Те же точки, что у <picture> в
     newcity_promo_picture(), поэтому вёрстка и картинка переключаются вместе.

   • Баннер на главной — лестница главной (media.css + style.css):
     1520–1839 / 1200–1519 / 770–1200 / ≤769. Он живёт на той же странице,
     что .first_screen, и повторяет её отступ под фиксированную шапку.

   Пересечений нет: правила баннера (.promo_banner*) встречаются только
   в блоках главной, правила страниц — только в блоках calc.
   ============================================================ */

:root {
    --promo-green: #00984c;
    --promo-green-dark: #007a3d;
    --promo-text: #231f20;
    --promo-muted: #757575;
    --promo-grey: #949494;
    --promo-cream: #f5f5f0;
    --promo-bg: #e7eade;
    --promo-white: #fff;
    /* Радиусы темы: 44px — крупные блоки (.bgster, .first_screen_slide),
       28px — карточки поменьше, 30px — кнопки-пилюли, 20px — стрелки слайдеров. */
    --promo-radius: 28px;
    --promo-radius-lg: 44px;
    --promo-arrow: 54px;
}

/* ============================================================
   ЗАГОЛОВОК СТРАНИЦЫ СПИСКА
   ============================================================ */

main .promo_intro {
    padding-top: 40px;
}

.promo_intro__title {
    margin: 0 0 24px;
    color: var(--promo-text);
    font-family: "Play", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 110%;
}

.promo_intro__text {
    max-width: 640px;
    color: var(--promo-text);
    font-size: 20px;
    line-height: 140%;
}

.promo_intro__text p {
    margin: 0 0 8px;
}

.promo_intro__text p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   СЕТКА КАРТОЧЕК
   ============================================================ */

main .promo_list {
    padding-top: 56px;
    padding-bottom: 40px;
}

/* Колонки через minmax(0, 1fr): без нуля в minmax трек не может стать уже
   содержимого, и сетка вылезает за контейнер. */
.promo_grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.promo_empty {
    padding: 60px 0;
    color: var(--promo-muted);
    font-size: 20px;
}

/* ---------- Карточка в сетке ---------- */

.promo_card {
    display: flex;
    /* Страховка от распора по ширине: min-width снимает «автоматический
       минимальный размер» grid-элемента, max-width жёстко режет по grid-области.
       Пропорции живут на .promo_card__media, но эти две строки гарантируют,
       что карточка не вылезет за контейнер ни при каких обстоятельствах. */
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--promo-radius);
    background: var(--promo-white);
    color: var(--promo-text);
    text-decoration: none;
    transition: 0.25s;
}

.promo_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(35, 31, 32, 0.1);
}

.promo_card__media {
    position: relative;
    aspect-ratio: 660 / 228;
    overflow: hidden;
    background: var(--promo-bg);
}

.promo_card__media img,
.promo_card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.promo_card__media img {
    object-fit: cover;
}

.promo_card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 10px 20px;
    border-radius: 30px;
    background: var(--promo-green);
    color: var(--promo-cream);
    font-size: 16px;
    line-height: 100%;
    white-space: nowrap;
}

.promo_card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px 28px 32px;
}

/* Пустая дата: место резервируется, чтобы карточки в ряду не прыгали по высоте */
.promo_card__date {
    display: block;
    min-height: 16px;
    margin-bottom: 14px;
    color: var(--promo-grey);
    font-size: 16px;
    line-height: 100%;
}

.promo_card__title {
    margin-bottom: 14px;
    color: var(--promo-text);
    font-size: 26px;
    font-weight: 700;
    line-height: 125%;
}

/* Максимум три строки — дальше многоточие, иначе сетка разъезжается */
.promo_card__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--promo-muted);
    font-size: 18px;
    line-height: 145%;
}

/* ---------- Широкая карточка (первая в списке) ---------- */

/* Ни aspect-ratio, ни min-height на самой карточке: это grid-элемент,
   и такая связка задаёт ему минимальную ширину по пропорции
   (320px × 1400/415 ≈ 1080px), из-за чего карточка вылезала за контейнер.
   Высоту задаёт картинка внутри — она в потоке и обычный флекс-элемент,
   а текстовый блок кладём поверх неё абсолютом. */
.promo_card--big {
    position: relative;
    grid-column: 1 / -1;
    /* крупный блок — радиус как у .first_screen_slide и .bgster в теме */
    border-radius: var(--promo-radius-lg);
    background: var(--promo-text);
}

.promo_card--big .promo_card__media {
    position: relative;
    min-width: 0;
    aspect-ratio: 1400 / 415;
    min-height: 320px;
}

/* Затемнение слева: без него белый текст пропадает на светлой фотографии */
.promo_card--big .promo_card__media::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(20, 22, 20, 0.78) 0%,
        rgba(20, 22, 20, 0.55) 38%,
        rgba(20, 22, 20, 0) 72%
    );
    content: "";
}

.promo_card--big .promo_card__badge {
    top: 32px;
    left: 40px;
}

/* Текст поверх картинки. right не задаём: с max-width он был бы избыточен
   и ширину определял бы left.

   top — это зарезервированная зона бейджа «Акция»: он сидит на 32px от верха
   и сам высотой 36px (10 + 16 + 10), плюс 16px минимального зазора = 84px.
   Содержимое выровнено по низу и растёт вверх, поэтому на низких адаптивах
   пилюля с датой доезжала до бейджа — теперь выше этой границы она не поднимется.
   Верхний padding обнулён: при выравнивании по низу он всё равно не работал,
   а с ним отступ сверху удваивался бы. */
.promo_card--big .promo_card__body {
    position: absolute;
    z-index: 2;
    top: 84px;
    bottom: 0;
    left: 0;
    justify-content: flex-end;
    max-width: 720px;
    padding: 0 40px 44px;
}

/* На широкой карточке дата — пилюля с обводкой. Пустая дата оставляет
   место, но не рисует пустую пилюлю (:empty). */
.promo_card--big .promo_card__date {
    align-self: flex-start;
    min-height: 0;
    margin-bottom: 20px;
    padding: 12px 22px;
    border: 1px solid rgba(245, 245, 240, 0.5);
    border-radius: 30px;
    color: var(--promo-cream);
    font-size: 18px;
}

.promo_card--big .promo_card__date:empty {
    border-color: transparent;
}

/* Заголовок ограничен двумя строками, как на макете. Без ограничения длинное
   название вытягивает блок вверх и съедает зазор до бейджа. */
.promo_card--big .promo_card__title {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 18px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--promo-cream);
    font-size: 40px;
    line-height: 118%;
}

.promo_card--big .promo_card__text {
    -webkit-line-clamp: 2;
    color: var(--promo-cream);
    font-size: 20px;
}

/* Кнопка-стрелка в углу карточки — как .new .button на главной
   и .page_contacts .back: 72×72, радиус 28px, фон #e5e8da */
.promo_card--big .promo_card__arrow {
    position: absolute;
    right: 40px;
    bottom: 44px;
    z-index: 2;
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: #e5e8da;
    transition: 0.3s;
}

.promo_card--big:hover {
    transform: none;
    box-shadow: none;
}

.promo_card--big:hover .promo_card__arrow {
    background: var(--promo-green);
}

.promo_card--big:hover .promo_card__arrow svg path {
    fill: var(--promo-cream);
}

/* ---------- «Показать ещё» ---------- */

.promo_more_wrap {
    display: flex;
    justify-content: center;
    padding-top: 56px;
}

.promo_more {
    display: inline-flex;
    align-items: center;
    padding: 24px 56px;
    border: 1px solid var(--promo-green);
    border-radius: 30px;
    background: none;
    color: var(--promo-green);
    cursor: pointer;
    font-family: "Play", sans-serif;
    font-size: 20px;
    gap: 22px;
    line-height: 100%;
    transition: 0.25s;
}

.promo_more:hover {
    background: var(--promo-green);
    color: var(--promo-cream);
}

.promo_more:hover svg path {
    stroke: var(--promo-cream);
}

.promo_more.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================
   ДЕТАЛЬНАЯ СТРАНИЦА
   ============================================================ */

main .promo_single {
    padding-top: 40px;
    padding-bottom: 40px;
}

.promo_single__head {
    max-width: 1100px;
    margin: 0 auto 40px;
}

.promo_single__date {
    display: inline-block;
    margin-bottom: 24px;
    padding: 13px 24px;
    border: 1px solid var(--promo-green);
    border-radius: 30px;
    color: var(--promo-green);
    font-size: 18px;
    line-height: 100%;
}

.promo_single__title {
    margin: 0;
    color: var(--promo-text);
    font-family: "Play", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 112%;
}

.promo_single__media {
    overflow: hidden;
    border-radius: var(--promo-radius-lg);
}

.promo_single__media picture,
.promo_single__media img {
    display: block;
    width: 100%;
}

.promo_single__media img {
    aspect-ratio: 1400 / 585;
    object-fit: cover;
}

/* Текст акции — нативный редактор WordPress, поэтому стилизуем теги */
.promo_single__content {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 44px;
    color: var(--promo-text);
    font-size: 20px;
    line-height: 145%;
}

.promo_single__content p {
    margin: 0 0 16px;
}

.promo_single__content strong,
.promo_single__content b {
    font-weight: 700;
}

.promo_single__content h2,
.promo_single__content h3,
.promo_single__content h4 {
    margin: 32px 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
}

.promo_single__content a {
    color: var(--promo-green);
}

/* Выделение слов зелёным внутри текста акции.
   В редакторе: вкладка «Текст» → <span class="green">…</span>. */
.promo_single__content .green {
    color: var(--promo-green);
}

.promo_single__content ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.promo_single__content ul li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 34px;
}

.promo_single__content ul li::before {
    position: absolute;
    top: 11px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--promo-green);
    content: "";
}

.promo_single__content ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.promo_single__content ol li {
    margin-bottom: 12px;
}

/* Сноски: курсивом серым — клиент набирает их курсивом в редакторе */
.promo_single__content em,
.promo_single__content i {
    color: var(--promo-muted);
    font-style: italic;
}

.promo_single__cta-wrap {
    display: flex;
    justify-content: center;
    padding-top: 44px;
}

.promo_cta {
    display: inline-flex;
    align-items: center;
    padding: 26px 56px;
    border-radius: 30px;
    background: var(--promo-green);
    color: var(--promo-cream);
    font-size: 20px;
    gap: 26px;
    line-height: 100%;
    text-decoration: none;
    transition: 0.25s;
}

.promo_cta:hover {
    background: var(--promo-green-dark);
    color: var(--promo-cream);
}

/* ---------- Партнёры ---------- */

main .promo_partners {
    padding-top: 80px;
    padding-bottom: 40px;
}

/* Блок повторяет устройство .banks на страницах ЖК: скруглённая подложка
   с overflow: hidden, внутренние отступы на вложенном блоке, слайдер логотипов
   с overflow: visible и кнопки строкой справа под ним. */
.promo_partners__bg {
    max-width: calc(100% - 60px);
    margin: auto;
    overflow: hidden;
    border-radius: var(--promo-radius-lg);
    background: var(--promo-bg);
}

/* Отступы как у .banks .wrap_blocks */
.promo_partners__inner {
    padding: 110px 40px 80px 60px;
}

.promo_partners__subtitle {
    margin-bottom: 18px;
    color: var(--promo-green);
    font-size: 18px;
    line-height: 100%;
}

.promo_partners__title {
    max-width: 1100px;
    margin-bottom: 96px;
    color: var(--promo-text);
    font-size: 42px;
    font-weight: 700;
    line-height: 122%;
}

.promo_partners__slider-wrap {bl    position: relative;
}

.promo_partners__slider {
    overflow: visible;
}

.promo_partners__slider .swiper-slide {
    width: auto;
}

.promo_partners__slider .swiper-slide .img {
    display: flex;
    width: fit-content;
    height: 140px;
    align-items: center;
    padding: 0 20px;
    border-radius: 24px;
    transition: 0.3s;
}

.promo_partners__slider .swiper-slide:hover .img {
    background: rgba(35, 31, 32, 0.04);
}

/* Ограничения подобраны под контейнер .img (высота 140): по высоте логотип
   занимает 100px, по бокам остаётся воздух. Широкий «текстовый» логотип
   упрётся в max-width и станет ниже — так и должно быть, квадратный займёт
   все 100px. object-fit: contain не даёт ничего обрезать. */
.promo_partners__slider .swiper-slide img {
    width: auto;
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
}

/* Кнопки — как .banks .wrap_slider .buttons: справа под слайдером, 54×54,
   радиус 20px, тёмная подложка. :after гасим, иначе Swiper рисует свой глиф. */
.promo_partners__buttons {
    position: relative;
    display: flex;
    margin-top: 7px;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 5px;
}

.promo_partners__buttons div {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--promo-arrow);
    height: var(--promo-arrow);
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 20px;
    background: #464846;
    cursor: pointer;
}

.promo_partners__buttons div::after {
    display: none;
}

.promo_partners__buttons div svg {
    width: 14px;
}

.promo_partners__text {
    max-width: 1100px;
    padding-top: 44px;
    color: var(--promo-muted);
    font-size: 18px;
    line-height: 145%;
}

/* ============================================================
   СЛАЙДЕР БАННЕРОВ НА ГЛАВНОЙ
   Секция стоит первой, поэтому отступ под фикс-шапку теперь у неё,
   а .first_screen получает обычный межсекционный отступ.
   ============================================================ */

/* Отступ под фиксированную шапку — половина тематического.
   В покое шапка низкая: её нижний край ≈69px на десктопе и ≈60px на мобильном
   (класс .stick вешается только после прокрутки на 140px, см. script.js),
   поэтому исходные 290/258/174 дают лишний воздух.
   Второй селектор — случай, когда слайдера акций нет: тогда первым блоком
   идёт .first_screen и отступ под шапку достаётся ему. */
main .promo_banners,
main > .first_screen:first-child {
    padding-top: 145px;
}

main .promo_banners + .first_screen {
    padding-top: 100px;
}

.promo_banners__wrap {
    position: relative;
}

.promo_banners__slider {
    overflow: hidden;
    /* 44px — как у .first_screen_slide, прямого аналога этого баннера в теме */
    border-radius: var(--promo-radius-lg);
}

.promo_banner {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1760 / 690;
    min-height: 320px;
    background: var(--promo-text);
    color: var(--promo-cream);
    text-decoration: none;
}

.promo_banner picture,
.promo_banner img {
    display: block;
    width: 100%;
    height: 100%;
}

.promo_banner img {
    object-fit: cover;
}

/* Тот же градиент, что на широкой карточке списка */
.promo_banner::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(20, 22, 20, 0.78) 0%,
        rgba(20, 22, 20, 0.55) 38%,
        rgba(20, 22, 20, 0) 72%
    );
    content: "";
}

.promo_banner__content {
    position: absolute;
    top: 50%;
    left: 60px;
    z-index: 2;
    max-width: 760px;
    transform: translateY(-50%);
}

.promo_banner__badge {
    display: inline-block;
    margin-bottom: 28px;
    padding: 12px 24px;
    border-radius: 30px;
    background: var(--promo-green);
    color: var(--promo-cream);
    font-size: 18px;
    line-height: 100%;
}

.promo_banner__title {
    margin-bottom: 20px;
    font-size: 54px;
    font-weight: 700;
    line-height: 115%;
}

.promo_banner__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 22px;
    line-height: 140%;
}

/* Стрелки — один в один как у слайдера первого экрана главной:
   54×54, радиус 20px, полупрозрачная подложка с блюром, по умолчанию скрыты
   и выезжают с края при наведении на слайдер.
   Центрируем через top/bottom + margin: auto, а НЕ через translateY —
   transform здесь занят анимацией выезда.
   :after обязателен: иначе Swiper рисует свой глиф стрелки поверх иконки. */
.promo_banners__prev,
.promo_banners__next {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    display: flex;
    width: var(--promo-arrow);
    height: var(--promo-arrow);
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 20px;
    background: rgba(225, 228, 215, 0.6);
    backdrop-filter: blur(4.5px);
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
}

.promo_banners__prev {
    right: auto;
    left: -10px;
    transform: translateX(-20px);
}

.promo_banners__next {
    right: -10px;
    left: auto;
    transform: translateX(20px);
}

.promo_banners__wrap:hover .promo_banners__prev,
.promo_banners__wrap:hover .promo_banners__next {
    opacity: 1;
    transform: translateX(0);
}

.promo_banners__prev::after,
.promo_banners__next::after {
    display: none;
}

.promo_banners__prev svg,
.promo_banners__next svg {
    width: 15px;
}

/* Точки — ровно как у слайдеров темы (.first-pagination, .gallery-pager,
   .section-pager): серые кружки в светлой пилюле-контейнере, активный зелёный,
   прогресс автопрокрутки рисуется SVG-кольцом вокруг точки.

   Селектор обязательно с префиксом main .promo_banners: у Swiper есть правило
   .swiper-pagination-bullets.swiper-pagination-horizontal { left: 0; width: 100% },
   и оно специфичнее одиночного класса — контейнер растягивался на всю ширину
   и уезжал за край. Все три пагинации темы перебиты ровно так же.
   Пилюля прижата влево, как у .first-pagination. Отступ слева держим равным
   отступу .promo_banner__content, чтобы точки стояли по одной линии
   с бейджем и заголовком на каждом брейкпоинте.
   transform не используем: у .swiper-pagination свой translate3d. */
main .promo_banners .promo_banners__pager {
    position: absolute;
    z-index: 4;
    top: auto;
    right: auto;
    bottom: 24px;
    left: 60px;
    display: flex;
    width: fit-content;
    margin: 0;
    padding: 17px 20px;
    border-radius: 50px;
    background: rgba(229, 232, 218, 1);
    gap: 8px;
    transform: none;
}

main .promo_banners .promo_banners__pager .swiper-pagination-bullet {
    position: relative;
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    background: #a9b7b0;
    opacity: 1;
    transition: 0.5s;
}

main .promo_banners .promo_banners__pager .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: rgba(0, 152, 76, 1);
}

main .promo_banners .promo_banners__pager .swiper-pagination-bullet svg {
    --progress: 0;
    position: absolute;
    z-index: 10;
    top: -4px;
    left: -4px;
    width: 16px;
    height: 16px;
    margin: auto;
    fill: none;
    opacity: 0;
    stroke: #009048;
    stroke-dasharray: 125.6;
    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
    stroke-width: 4px;
    transform: rotate(-90deg);
}

main .promo_banners .promo_banners__pager .swiper-pagination-bullet.swiper-pagination-bullet-active svg {
    opacity: 1;
}

/* Одна акция — просто баннер: ни стрелок, ни точек (их и в разметке нет) */
.promo_banners--single .promo_banners__slider {
    cursor: default;
}

/* ============================================================
   АДАПТИВЫ

   Страница «Акции» и детальная — лестница calc.css («Как купить?»):
   1024–1439 / 768–1023 / ≤767. Те же точки, что у <picture> в
   newcity_promo_picture(), поэтому вёрстка и картинка переключаются вместе.

   Баннер на главной — лестница главной (media.css): 1520–1839 / 1200–1519 /
   770–1200 / ≤769. Там она обязательна: отступ секции повторяет
   main .first_screen, а он завязан на высоту фиксированной шапки.
   ============================================================ */

/* ------------------------------------------------------------
   СТРАНИЦА СПИСКА И ДЕТАЛЬНАЯ — лестница calc.css
   ------------------------------------------------------------ */

/* ----- 1024–1439 ----- */
@media screen and (max-width: 1439px) {
    .promo_intro__title,
    .promo_single__title { font-size: 40px; }

    .promo_card--big .promo_card__title { font-size: 34px; margin-bottom: 12px; }
    /* поджимаем вертикальные интервалы: карточка тут уже заметно ниже */
    .promo_card--big .promo_card__date { margin-bottom: 14px; }

    .promo_partners__title { font-size: 36px; }
    .promo_grid { gap: 24px; }
}

/* ----- 1200–1199: граница не по лестнице страницы, а по контейнеру темы.
   Ниже 1200px .container сужается с 1200 до 960px (дефолт Bootstrap), и при
   десктопной пропорции 1400/415 широкая карточка превращалась в полосу
   960×320 — заголовок с описанием в неё не помещались и обрезались.
   Поэтому пропорцию и кнопку-стрелку переключаем именно здесь. ----- */
@media screen and (max-width: 1199px) {
    .promo_card--big .promo_card__media {
        aspect-ratio: 900 / 420;
        min-height: 280px;
    }

    .promo_card--big .promo_card__arrow {
        width: 62px;
        height: 62px;
        border-radius: 24px;
    }
}

/* ----- 768–1023: сетка в одну колонку, широкая карточка становится обычной ----- */
@media screen and (max-width: 1023px) {
    .promo_grid { grid-template-columns: minmax(0, 1fr); }

    /* бейдж здесь на 24px от верха, высота 36px, зазор 16px → 76px */
    .promo_card--big .promo_card__body {
        top: 76px;
        max-width: none;
        padding: 0 32px 36px;
    }

    .promo_card--big .promo_card__badge { top: 24px; left: 28px; }
    .promo_card--big .promo_card__title { font-size: 30px; }
    .promo_card--big .promo_card__text { font-size: 18px; }

    /* размер кнопки задан выше, в блоке ≤1199 — здесь только положение */
    .promo_card--big .promo_card__arrow {
        right: 28px;
        bottom: 32px;
    }

    .promo_card__media { aspect-ratio: 760 / 300; }

    .promo_intro__title,
    .promo_single__title { font-size: 34px; }

    .promo_intro__text,
    .promo_single__content { font-size: 18px; }

    .promo_partners__bg { max-width: calc(100% - 30px); }
    .promo_partners__inner { padding: 64px 30px 56px 40px; }
    .promo_partners__title { margin-bottom: 56px; font-size: 30px; }
    .promo_partners__slider .swiper-slide .img { height: 110px; }
    .promo_partners__slider .swiper-slide img { max-width: 170px; max-height: 80px; }

    .promo_single__media img { aspect-ratio: 1000 / 480; }
}

/* ----- до 767 ----- */
@media screen and (max-width: 767px) {
    main .promo_intro { padding-top: 24px; }
    main .promo_list { padding-top: 36px; }

    .promo_intro__title,
    .promo_single__title { font-size: 28px; }

    .promo_intro__text { font-size: 16px; }

    .promo_grid { gap: 20px; }

    .promo_card__body { padding: 20px 20px 26px; }
    .promo_card__title { font-size: 20px; }
    .promo_card__text { font-size: 16px; }
    .promo_card__date { min-height: 14px; margin-bottom: 10px; font-size: 14px; }
    .promo_card__badge { top: 12px; left: 12px; padding: 8px 16px; font-size: 14px; }
    .promo_card__media { aspect-ratio: 430 / 200; }

    .promo_card--big .promo_card__media {
        aspect-ratio: 430 / 240;
        min-height: 0;
    }

    /* На телефоне широкая карточка складывается в обычную: текст возвращается
       в поток под картинку, поэтому градиент и белый текст здесь не нужны. */
    .promo_card--big .promo_card__media::after { display: none; }

    .promo_card--big .promo_card__body {
        position: static;
        max-width: none;
        padding: 20px 20px 26px;
        background: var(--promo-white);
    }

    .promo_card--big .promo_card__date {
        align-self: flex-start;
        margin-bottom: 10px;
        padding: 0;
        border: none;
        color: var(--promo-grey);
        font-size: 14px;
    }

    /* На телефоне карточка обычная, текст под картинкой — ограничение в две
       строки снимаем, чтобы заголовок вёл себя как у соседних карточек */
    .promo_card--big .promo_card__title {
        display: block;
        overflow: visible;
        color: var(--promo-text);
        font-size: 20px;
    }
    .promo_card--big .promo_card__text { color: var(--promo-muted); font-size: 16px; }
    .promo_card--big .promo_card__arrow { display: none; }

    .promo_more_wrap { padding-top: 36px; }
    .promo_more { padding: 18px 36px; font-size: 16px; gap: 16px; }

    .promo_single__head { margin-bottom: 24px; }
    .promo_single__date { margin-bottom: 16px; padding: 10px 18px; font-size: 15px; }
    .promo_single__content { padding-top: 28px; font-size: 16px; }
    .promo_single__content h2,
    .promo_single__content h3,
    .promo_single__content h4 { margin: 24px 0 12px; font-size: 20px; }
    .promo_single__media img { aspect-ratio: 430 / 260; }

    .promo_cta { padding: 18px 40px; font-size: 16px; gap: 18px; }

    main .promo_partners { padding-top: 48px; }
    .promo_partners__bg { max-width: calc(100% - 20px); }
    .promo_partners__inner { padding: 36px 20px 32px; }
    .promo_partners__subtitle { font-size: 15px; }
    .promo_partners__title { margin-bottom: 32px; font-size: 22px; }
    .promo_partners__text { padding-top: 28px; font-size: 15px; }
    .promo_partners__slider .swiper-slide .img { height: 92px; padding: 0 12px; }
    .promo_partners__slider .swiper-slide img { max-width: 140px; max-height: 64px; }
}

/* ------------------------------------------------------------
   БАННЕР НА ГЛАВНОЙ — лестница главной (media.css)

   padding-top секции повторяет main .first_screen на каждом брейкпоинте
   (290 / 258 / 258 / 174 / 94), иначе фиксированная шапка наедет на баннер.
   База ≥1840 задана выше по файлу.
   ------------------------------------------------------------ */

@media screen and (min-width: 1520px) and (max-width: 1839px) {
    main .promo_banners,
    main > .first_screen:first-child { padding-top: 129px; }

    .promo_banner__title { font-size: 44px; }
    .promo_banner__content { left: 44px; max-width: 620px; }
    main .promo_banners .promo_banners__pager { left: 44px; }
}

@media screen and (min-width: 1200px) and (max-width: 1519px) {
    main .promo_banners,
    main > .first_screen:first-child { padding-top: 129px; }

    .promo_banner__title { font-size: 44px; }
    .promo_banner__content { left: 44px; max-width: 620px; }
    main .promo_banners .promo_banners__pager { left: 44px; }
}

@media screen and (min-width: 770px) and (max-width: 1200px) {
    main .promo_banners,
    main > .first_screen:first-child { padding-top: 129px; }
    main .promo_banners + .first_screen { padding-top: 70px; }

    .promo_banner { aspect-ratio: 1000 / 520; }
    .promo_banner__content { left: 32px; max-width: none; padding-right: 32px; }
    .promo_banner__title { font-size: 34px; }
    .promo_banner__text { font-size: 18px; }
    main .promo_banners .promo_banners__pager { left: 32px; }

    /* Стрелки: размер и отступ от края в теме на адаптивах не меняются */
}

@media screen and (max-width: 769px) {
    /* Единственное место, где ровно половина не годится: 94/2 = 47px, а нижний
       край мобильной шапки на 60px (top: 6px + .wraps height: 54px) — контент
       ушёл бы под неё. 76px — минимум с небольшим запасом. */
    main .promo_banners,
    main > .first_screen:first-child { padding-top: 76px; }
    main .promo_banners + .first_screen { padding-top: 50px; }

    /* Шрифты уменьшаем под размер карточки, описание остаётся (решение клиента) */
    .promo_banner {
        aspect-ratio: 430 / 420;
        min-height: 0;
    }

    .promo_banner__content {
        top: auto;
        bottom: 56px;
        left: 20px;
        padding-right: 20px;
        transform: none;
    }

    /* На узком экране текст занимает низ баннера, поэтому градиент снизу вверх */
    .promo_banner::after {
        background: linear-gradient(
            180deg,
            rgba(20, 22, 20, 0.1) 0%,
            rgba(20, 22, 20, 0.55) 45%,
            rgba(20, 22, 20, 0.85) 100%
        );
    }

    .promo_banner__badge { margin-bottom: 16px; padding: 8px 16px; font-size: 14px; }
    .promo_banner__title { margin-bottom: 12px; font-size: 24px; }
    .promo_banner__text { -webkit-line-clamp: 2; font-size: 15px; }

    .promo_banners__prev,
    .promo_banners__next { display: none; }

    /* специфичность та же, что у базового правила — иначе перебьёт Swiper, а не нас */
    main .promo_banners .promo_banners__pager { bottom: 12px; left: 20px; padding: 12px 16px; }
}