@use "../abstracts/variables" as vars;

/* ============================================================
   Trending Courses 3 (Dual-Pill / Overlay Card Design)
   ============================================================ */
.trending-courses3 {
    background-color: #F9FBFF; // Light airy background

    .section-title {
        margin-bottom: vars.rem(50);

        @media (max-width: 991px) {
            margin-bottom: vars.rem(30);
        }

        &__subtitle {
            font-size: vars.rem(16);
            font-weight: 700;
            color: vars.$footer-accent;
            text-transform: uppercase;
            letter-spacing: vars.rem(1);
            display: block;
            margin-bottom: vars.rem(10);
        }

        &__title {
            font-size: clamp(vars.rem(32), 4vw, vars.rem(48));
            font-weight: 800;
            color: vars.$color-black;
            margin: 0;
        }
    }

    &__card {
        border-radius: vars.rem(24);
        overflow: hidden;
        background-color: vars.$color-black; // Default for side cards
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
        border: none;

        &:hover {
            transform: translateY(vars.rem(-10));
            box-shadow: 0 vars.rem(30) vars.rem(60) rgba(0, 0, 0, 0.15);
        }

        &--active {
            background-color: vars.$footer-accent;
        }
    }

    &__thumb {
        width: 100%;
        height: vars.rem(300);
        overflow: hidden;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
    }

    &__card:hover &__thumb img {
        transform: scale(1.1);
    }

    &__content {
        background-color: vars.$color-white;
        border-radius: vars.rem(20);
        margin: vars.rem(-110) vars.rem(20) 0;
        padding: vars.rem(30) vars.rem(25);
        position: relative;
        z-index: 2;
        box-shadow: 0 vars.rem(10) vars.rem(30) rgba(0, 0, 0, 0.05);
        flex-grow: 1;

        @media (max-width: 1399px) {
            padding: vars.rem(25) vars.rem(20);
        }
    }

    &__card-title {
        font-size: vars.rem(24);
        font-weight: 700;
        line-height: 1.3;
        color: vars.$color-black;
        margin-bottom: vars.rem(15);
        padding-right: vars.rem(90); // Space for badge

        @media (max-width: 1399px) {
            font-size: vars.rem(20);
        }
    }

    &__price-badge {
        position: absolute;
        top: vars.rem(30);
        right: vars.rem(25);
        background-color: vars.$footer-accent;
        color: vars.$color-white;
        border-radius: vars.rem(10);
        padding: vars.rem(10) vars.rem(15);
        text-align: center;
        min-width: vars.rem(85);

        @media (max-width: 1399px) {
            font-size: vars.rem(18);
            min-width: vars.rem(75);
            padding: vars.rem(8) vars.rem(12);
        }

        .amount {
            display: block;
            font-size: vars.rem(22);
            font-weight: 800;
            line-height: 1;
        }

        .text {
            display: block;
            font-size: vars.rem(10);
            font-weight: 700;
            text-transform: uppercase;
            margin-top: vars.rem(4);
            opacity: 0.9;

            @media (max-width: 1399px) {
                font-size: vars.rem(8);
            }
        }
    }

    &--active &__price-badge,
    &__card--active &__price-badge {
        background-color: vars.$color-heading;
    }

    &__desc {
        font-size: vars.rem(15);
        line-height: 1.7;
        color: vars.$color-text2;
        margin-bottom: 0;

        @media (max-width: 1399px) {
            font-size: vars.rem(14);
        }
    }

    &__footer {
        padding: vars.rem(25) vars.rem(30);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;

        @media (max-width: 1399px) {
            padding: vars.rem(20) vars.rem(25);
        }
    }

    &__meta-info {
        display: flex;
        flex-direction: column;
        gap: vars.rem(8);
    }

    &__meta-item {
        display: flex;
        align-items: center;
        gap: vars.rem(10);
        color: vars.$color-white;
        font-size: vars.rem(16);
        font-weight: 700;

        @media (max-width: 1399px) {
            font-size: vars.rem(14);
        }

        i {
            font-size: vars.rem(14);
            color: rgba(255, 255, 255, 0.7);
        }
    }

    &__btn {
        width: vars.rem(75);
        height: vars.rem(50);
        background-color: #FFFFFF26;
        border-radius: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: vars.$color-white;
        font-size: vars.rem(18);
        transition: all 0.3s ease;
        text-decoration: none;

        @media (max-width: 1399px) {
            font-size: vars.rem(16);
            width: vars.rem(65);
            height: vars.rem(40);
        }

        &:hover {
            background-color: vars.$color-white;
            color: vars.$footer-accent;
        }
    }

    &__card--active &__btn {
        background-color: #3b9bff; // Lighter blue from reference
    }

    &__card--active &__btn:hover {
        background-color: vars.$color-white;
        color: vars.$footer-accent;
    }

    /* Responsive Adjustments */
    @media (max-width: 991px) {
        &__content {
            margin-top: vars.rem(-90);
            padding: vars.rem(25) vars.rem(20);
        }

        &__card-title {
            font-size: vars.rem(20);
            padding-right: vars.rem(80);

            @media (max-width: 575px) {
                font-size: vars.rem(18);
                padding-right: vars.rem(75);
            }
        }

        &__price-badge {
            top: vars.rem(25);
            right: vars.rem(20);
            min-width: vars.rem(75);

            .amount {
                font-size: vars.rem(18);
            }
        }
    }

    @media (max-width: 575px) {
        &__thumb {
            height: vars.rem(240);
        }

        &__footer {
            padding: vars.rem(20);
        }
    }
}