/* ============================================
   CTA Banner Component (rd-cta-banner)
   Shared marketing banner used on the course preview + category pages.
   Markup: src/Template/partials/cta-banner.php
   ============================================ */

.rd-cta-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: var(--rd-spacing-lg);
    margin: var(--rd-spacing-xxx-lg) 0;
    color: white;
}

.rd-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/src/img/2024/cta-banner-bg.jpg') center / cover no-repeat;
    z-index: 0;
}

.rd-cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(71.6deg, rgb(26, 46, 73) 48.56%, rgba(26, 46, 73, 0.7) 62.2%, rgba(26, 46, 73, 0) 100%),
        linear-gradient(90deg, rgba(59, 63, 89, 0.5), rgba(59, 63, 89, 0.5));
    z-index: 1;
}

.rd-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rd-cta-content {
    max-width: 600px;
}

.rd-cta-eyebrow {
    color: var(--rd-primary-active);
    font-size: var(--rd-fontsize-5);
    margin: 0 0 var(--rd-spacing-x-sm);
}

.rd-cta-headline {
    font-size: var(--rd-fontsize-8);
    color: var(--rd-font-light);
    font-weight: var(--rd-fontweights-open-sans-1);
    margin: 0 0 var(--rd-spacing-x-sm);
}

.rd-cta-subtitle {
    font-size: var(--rd-fontsize-5);
    margin: 0 0 var(--rd-spacing-x-big);
}

.rd-cta-logo {
    margin-right: var(--rd-spacing-xxx-lg);

    img {
        max-width: 236px;
        height: auto;
    }
}

.rd-cta-benefits {
    margin: 0 0 var(--rd-spacing-lg);
}

.rd-cta-benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-5);
    margin-bottom: var(--rd-spacing-x-sm);
}

.rd-cta-benefits li:last-child {
    margin-bottom: 0;
}

.rd-cta-check {
    flex-shrink: 0;
}

/* ─── Responsive ─── */
@media (max-width: 991px) {
    .rd-cta-banner {
        padding: var(--rd-spacing-xxx-big);
        padding-top: var(--rd-spacing-xx-lg);
    }

    .rd-cta-inner {
        flex-direction: column-reverse;
    }

    .rd-cta-logo {
        margin-right: 0;
        margin-bottom: var(--rd-spacing-lg);
    }

    .rd-cta-content {
        align-items: flex-start;
    }

    .rd-cta-banner::after {
        background:
            linear-gradient(0deg, rgb(26, 46, 73) 40%, rgba(26, 46, 73, 0.85) 70%, rgba(26, 46, 73, 0.6) 100%),
            linear-gradient(90deg, rgba(59, 63, 89, 0.5), rgba(59, 63, 89, 0.5));
    }

    .rd-cta-inner .rd-primary-btn {
        width: 100%;
    }
}