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

/* ===========================
   Trending Courses 1
   =========================== */

.trending-courses1 {

    .container-fluid {
        max-width: 1600px;
    }

    &__wrap {
        background: vars.$color-black;
        border-radius: 30px;
    }

    // ── Card Wrapper (card body + button together) ──────────────────────
    &__card-wrap {
        display: flex;
        flex-direction: column;
        border-radius: vars.rem(16);
        overflow: hidden;

        &--active {
            .trending-courses1__card {
                background-color: #fff;

                .trending-courses1__card-title {
                    color: vars.$color-heading;
                }

                .trending-courses1__card-description {
                    color: #6b7280;
                }
            }
        }
    }

    // ── Card Body ──────────────────────────────────────────────────────
    &__card {
        background-color: #302F3B;
        border-radius: 15px;
        overflow: hidden;
        flex: 1;

        &--active {
            background-color: #fff;

            .trending-courses1__card-title {
                color: vars.$color-heading;
            }

            .trending-courses1__card-description {
                color: #6b7280;
            }
        }
    }

    // ── Card Top: icon (left) + thumb (right) ──────────────────────────
    &__card-top {
        position: relative;
        display: flex;
        align-items: stretch;
        min-height: vars.rem(130);
    }

    &__card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: vars.rem(33) vars.rem(30);
        flex-shrink: 0;

        img {
            width: vars.rem(75);
            height: vars.rem(75);
            object-fit: contain;
        }
    }

    &__card-thumb {
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
        border-radius: 16px;
        width: 260px;
        height: 110px;

        @media (max-width: 992px) {
            width: 180px;
            height: 100px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    // ── Card Content: title + desc ─────────────────────────────────────
    &__card-content {
        padding: vars.rem(10) vars.rem(24) vars.rem(24);
    }

    &__card-title {
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(22);
        line-height: 1.2;
        letter-spacing: -1%;
        color: vars.$color-white;
        margin-bottom: vars.rem(10);
    }

    &__card-description {
        font-family: vars.$font-family-base;
        font-weight: 500;
        font-size: vars.rem(16);
        line-height: 28px;
        letter-spacing: 0%;
        color: #9DA6AE;
        margin: 0;

        @media (max-width: 1099px) {
            font-size: 14px;
            line-height: 24px;
        }
    }

    // ── Button Row ─────────────────────────────────────────────────────
    &__card-button {
        position: relative;
        display: flex;
        align-items: stretch;
        text-decoration: none;
        border-radius: vars.rem(14);
        margin-top: vars.rem(8);
        overflow: hidden;
        border: 2px solid vars.$color-primary;
        transition: border-color 0.3s ease;

        &:hover,
        &--active {
            .trending-courses1__btn-label {
                background-color: vars.$footer-accent;
            }

            .trending-courses1__btn-chevrons {
                img:first-child {
                    opacity: 0; // hide btn-shape.png
                    display: none !important;
                }

                img:last-child {
                    opacity: 1; // show btn-shape2.png
                    display: flex !important;
                }
            }
        }

    }

    &__btn-label {
        position: relative;
        z-index: 8;
        display: flex;
        align-items: center;
        gap: vars.rem(10);
        padding: vars.rem(19) vars.rem(22);
        background-color: #2a2935;
        color: vars.$color-white;
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(16);
        line-height: 100%;
        letter-spacing: 2%;
        text-transform: uppercase;
        flex-shrink: 0;
        transition: background-color 0.3s ease;
        overflow: hidden;
        border-radius: vars.rem(8);

        i {
            color: vars.$color-white;
            font-size: vars.rem(13);
        }
    }

    &__btn-text {
        white-space: nowrap;
    }

    &__btn-chevrons {
        position: absolute;
        top: 0;
        right: -7%;
        bottom: 0;
        z-index: 0;
        background-color: #2a2935;
        overflow: hidden;
        border-radius: vars.rem(8);

        img {

            object-fit: cover;
            object-position: left center;
            display: block;
            transition: opacity 0.35s ease;

            // btn-shape.png — visible by default
            &:first-child {
                opacity: 1;
                display: flex !important;
            }

            // btn-shape2.png — hidden by default
            &:last-child {
                opacity: 0;
                display: none !important;
            }
        }
    }

    // ── Responsive ─────────────────────────────────────────────────────
    @media (max-width: 767px) {
        &__card-top {
            min-height: vars.rem(110);
        }

        &__card-icon {
            width: vars.rem(76);
            padding: vars.rem(16) vars.rem(14);

            img {
                width: vars.rem(44);
                height: vars.rem(44);
            }
        }
    }
}