/* ===== ПРОМО-КАРТОЧКИ ===== */
.promo-section {
    padding: 40px 0 56px;
    background-color: var(--color-bg);
}

.promo-section__title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
}

.promo-grid {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* ===== КАРТОЧКА ===== */
.promo-card {
    width: 300px;
    height: 470px;
    border-radius: 20px;
    overflow: visible;  
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

/* Фон — отдельный слой, который при ховере уменьшается вниз */
.promo-card__bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-radius 0.4s ease;
    transform-origin: bottom center;
}
.promo-card:hover .promo-card__bg {
    transform: scaleY(0.84);
    border-radius: 20px 20px 24px 24px;
}

/* Контент поверх фона */
.promo-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: visible;                 /* ← добавить */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.promo-card:hover .promo-card__content {
    transform: translateY(-20px);
}

/* Картинка */
.promo-card__img {
    width: 297px;
    height: 227px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
}

/* Текстовая часть */
.promo-card__body {
    padding: 30px 20px 0;
    flex: 1;
}

.promo-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.promo-card__subtitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    opacity: 0.75;
}

/* Кнопка — скрыта, выплывает снизу */
.promo-card__btn-wrap {
    padding: 0 20px 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease 0.05s,
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
    margin-top: auto;
    text-align: center;               
}
.promo-card:hover .promo-card__btn-wrap {
    opacity: 1;
    transform: translateY(0);
}

.promo-card__btn {
    display: block;
    width: 100%;                  
    max-width: 280px;               
    margin: 0 auto;                 
    height: 52px;
    border-radius: 9px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
    line-height: 52px;
    text-decoration: none;
}

.promo-card__btn:hover { opacity: 0.85; }

/* ===== ЦВЕТА КАРТОЧЕК ===== */
/* Карточка 1 — тёмно-зелёная, белый текст */
.promo-card--1 .promo-card__bg  { background-color: #11692480; }
.promo-card--1 .promo-card__title,
.promo-card--1 .promo-card__subtitle { color: #fff; }
.promo-card--1 .promo-card__btn { background: linear-gradient(to right, #0DD149, #3eff7e); color: #fff; }

/* Карточка 2 — светло-зелёная, серый текст */
.promo-card--2 .promo-card__bg  { background-color: #c3f4d3; }
.promo-card--2 .promo-card__title  { color: #444444; }
.promo-card--2 .promo-card__subtitle { color: #383838; }
.promo-card--2 .promo-card__btn { background: linear-gradient(to right, #00AFFF, #0DD149); color: #fff; }

/* Карточка 3 — тёмно-синяя, белый текст */
.promo-card--3 .promo-card__bg  { background-color: #00143a; }
.promo-card--3 .promo-card__title,
.promo-card--3 .promo-card__subtitle { color: #fff; }
.promo-card--3 .promo-card__btn { color: #fff; }

/* Карточка 4 — оранжевая, белый текст */
.promo-card--4 .promo-card__bg  { background-color: #b94611d7; }
.promo-card--4 .promo-card__title,
.promo-card--4 .promo-card__subtitle { color: #fff; }


.promo-card--2 .promo-card__btn{
    border: none;
}

.promo-card--1 .promo-card__btn{
    border: none;
}


@media (max-width: 991px) {
    .promo-section {
        padding: 32px 0 44px;
    }

    .promo-grid {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        gap: 12px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .promo-card {
        width: 280px;
        height: 450px;
        flex: 0 0 280px;
        scroll-snap-align: start;
    }

    .promo-card__img {
        width: 280px;
    }
}