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

/* ============================================================
   Testimonial 3 (Dynamic Card Stack & Large Profile)
   ============================================================ */
.testimonial3 {
    background-color: #121117;
    position: relative;
    overflow: hidden;

    &__slider {
        height: 536px;

        @media (max-width: 1024px) {
            height: 565px;
        }

        @media (max-width: 767px) {
            height: auto;
        }

        .swiper-slide {
            height: auto !important;
        }
    }

    &__bg {
        position: absolute;
        inset: 0;
        z-index: 0;

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

    }

    .container {
        position: relative;
        z-index: 2;
    }

    &__subtitle {
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(16);
        color: #fff;
        display: block;
        margin-bottom: vars.rem(12);
        letter-spacing: 0.05em;
    }

    &__title {
        font-family: vars.$font-family-base;
        font-weight: 800;
        font-size: clamp(vars.rem(28), 5vw, vars.rem(48));
        line-height: 1.2;
        color: #fff;
        margin-bottom: vars.rem(50);
    }

    /* ── Navigation ── */
    &__nav {
        display: flex;
        align-items: center;
        width: fit-content;

        @media (min-width: 992px) {
            position: absolute;
            top: vars.rem(0);
            right: vars.rem(0);
            z-index: 999;
        }

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

        .nav-btn {
            width: vars.rem(100);
            height: vars.rem(70);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: vars.rem(18);
            border: none;
            box-shadow: 0px 0px 30px 0px #00000026;


            @media (max-width: 1024px) {
                width: vars.rem(70);
                height: vars.rem(50);
            }

            &--prev {
                background-color: vars.$color-white;
                color: vars.$color-black;
                border-radius: 0 vars.rem(50) vars.rem(50) 0;
            }

            &--next {
                background-color: #0073E6;
                color: vars.$color-white;
                border-radius: vars.rem(50) 0 0 vars.rem(50);
                box-shadow: 0px 0px 30px 0px #00000026;

            }

            &:hover {
                transform: scale(1.05);
            }
        }
    }


    &__card {
        background-color: #fff;
        border-radius: vars.rem(12);
        padding: vars.rem(0) vars.rem(0) vars.rem(0) vars.rem(0);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        border: 2px solid #0073E6;

        &--active {}
    }

    &__card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: vars.rem(20);
        background: #EFF3FA;
        padding: 8px 8px 8px 25px;

        @media (max-width: 575px) {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    &__quote-group {
        display: flex;
        align-items: center;
        gap: vars.rem(35);
    }

    &__quote-icon {
        width: vars.rem(75);
        height: vars.rem(75);
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        img {
            max-width: vars.rem(45);
        }
    }

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

    &__stars {
        color: #0073E6;
        font-size: vars.rem(13);
        display: flex;
        gap: vars.rem(2);
    }

    &__rating-val {
        font-size: vars.rem(13);
        font-weight: 700;
        color: vars.$color-black;
        text-transform: uppercase;
    }

    /* ── User Pill ── */
    &__user-box {
        display: flex;
        align-items: center;
        padding: vars.rem(6) vars.rem(6) vars.rem(6) vars.rem(25);
        border-radius: vars.rem(100);
        background-color: #191825;
        border: 1px solid #eee;
        transition: all 0.4s ease;

        .label {
            font-size: vars.rem(10);
            font-weight: 700;
            text-transform: uppercase;
            display: block;
            margin-bottom: vars.rem(2);
        }

        .name {
            font-size: vars.rem(18);
            font-weight: 800;
            display: block;
        }

        img {
            width: vars.rem(80);
            height: vars.rem(80);
            border-radius: 50%;
            margin-left: vars.rem(12);
            object-fit: cover;
            border: 2px solid vars.$color-white;
        }

        .label {
            color: rgba(255, 255, 255, 0.6);
        }

        .name {
            color: vars.$color-white;
        }

        img {
            border-color: transparent;
        }

    }

    &__card--active &__user-box {
        background-color: #fff;
        border-color: transparent;
        box-shadow: 0px 8px 30px 0px #00000014;


        .label {
            color: vars.$color-text2;
        }

        .name {
            color: vars.$color-black;
        }

        img {
            border: 2px solid vars.$color-white;
        }
    }

    &__card-text {
        margin-top: vars.rem(25);
        font-size: vars.rem(15);
        line-height: 1.8;
        color: vars.$color-text2;
        text-align: center;
        padding: 0 vars.rem(30);

        @media (max-width: 1024px) {
            padding: 0 vars.rem(20);
            font-size: vars.rem(14);
        }

        @media (max-width: 575px) {
            padding: 0 10px;
            text-align: left;
        }
    }

    /* ── Profile Scene ── */
    &__thumb-wrap {
        position: relative;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: -200px;

        @media (max-width: 991px) {
            display: none;
        }
    }

    &__shapes {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    &__shape-stripe {
        position: absolute;
        bottom: 0;
        right: -10%;
        width: 100%;
        height: 120%;
        background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 45%, #191825 45%, #191825 55%, transparent 55%),
            linear-gradient(135deg, transparent 65%, #0073E6 65%, #0073E6 85%, transparent 85%);
        z-index: 1;
        transform: skewX(-15deg);
    }

    &__student-img {
        position: relative;
        z-index: 2;
        max-width: 130%;
        margin-right: -30%;
        pointer-events: none;

        img {
            display: block;
            width: 100%;
        }
    }
}