/* PromoBanner (Figma 131:32799) — адаптивные пропорции по брейкпоинтам */
.PromoBanner--hero {
    aspect-ratio: 1208 / 389;
    background: linear-gradient(110deg, var(--brand-red) 0%, var(--primary-pressed) 45%, var(--text-primary) 100%);
}

.PromoBanner--hero .PromoBanner__cta {
    padding: 0 0 24px 0;
    max-width: 420px;
}

/* CTA в правой части баннера по макету (desktop/tablet). На мобиле — на всю ширину снизу. */
.PromoBanner--hero .PromoBanner__cta--right {
    align-self: flex-end;
    padding-right: 12px;
}

.PromoBanner__cta .Button {
    min-width: 302px;
}

.PromoBanner__ad {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
}

.PromoBanner__ad-tag {
    min-height: 16px;
    padding: 1px 4px;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
}

.PromoBanner__ad-tag:hover,
.PromoBanner__ad-tag:active {
    background: #fff;
}

.PromoBanner__ad .Tooltip__bubble {
    min-width: 220px;
    max-width: min(320px, calc(100vw - 48px));
}

@media (max-width: 799px) {
    .PromoBanner--hero .PromoBanner__cta--right,
    .PromoBanner--hero .PromoBanner__cta {
        padding:0 12px 12px;
    }

    .PromoBanner__ad {
        top: 8px;
        right: 8px;
        bottom: auto;
        left: auto;
    }

    .PromoBanner__ad .Tooltip__bubble {
        top: calc(100% + 8px);
        right: 0;
        bottom: auto;
        left: auto;
        transform: none;
    }

    .PromoBanner__ad .Tooltip__bubble::after {
        top: 0;
        right: 16px;
        left: auto;
        transform: translateY(-50%) rotate(45deg);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }
}

@media (max-width: 599px) {
    .PromoBanner--hero .PromoBanner__cta--right {
        align-self: stretch;
        padding: 0 12px 12px;
    }
}

@media (max-width: 1199px) {
    .PromoBanner--hero {
        aspect-ratio: 1040 / 337;
    }
}

@media (max-width: 799px) {
    .PromoBanner--hero {
        aspect-ratio: 720 / 234;
    }
}

@media (max-width: 599px) {
    .PromoBanner--hero {
        aspect-ratio: 328 / 224;
    }

    .PromoBanner--hero .PromoBanner__cta {
        max-width: none;
        padding-bottom: 12px;
    }

    .PromoBanner--hero .PromoBanner__cta .Button {
        min-width: 100%;
    }
}