/* 
 * Components CSS
 * Centralized styles for template components
 */

/* 

/* ==========================================================================
   Testimonials Slider Component (Elearning Template)
   ========================================================================== */
/* Swiper Active Slide Styling */
.testimonials-slider .swiper-wrapper {
    align-items: flex-end;
}
.testimonials-slider .swiper-slide {
    width: 280px; /* Adjusted to fit exactly 4 cards */
    transition: all 0.5s ease;
}
.testimonials-slider .swiper-slide-active {
    width: 420px; /* Wider for the active slide */
}

/* Inactive Card Styling */
.testimonials-slider .swiper-slide .testi-card {
    background-color: #F1EFEB;
    padding: 2rem;
    border-radius: 0.75rem;
    border-left: 0px solid transparent;
    transition: all 0.5s ease;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}
.testimonials-slider .swiper-slide .testi-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 2rem;
}
.testimonials-slider .swiper-slide .testi-author {
    font-size: 15px;
}

/* Active Card Styling */
.testimonials-slider .swiper-slide-active .testi-card {
    padding: 3rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 4px solid #6b7280; /* gray-500 */
    min-height: 480px;
}
.testimonials-slider .swiper-slide-active .testi-text {
    font-size: 18px;
    color: #444;
}
.testimonials-slider .swiper-slide-active .testi-author {
    font-size: 17px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .testimonials-slider .swiper-slide-active {
        width: 100%;
    }
    .testimonials-slider .swiper-slide {
        width: 85%;
    }
    .testi-header-absolute {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        margin-bottom: 2rem;
    }
    .testimonials-slider .swiper-wrapper {
        align-items: stretch;
    }
    .testimonials-slider .swiper-slide-active .testi-card,
    .testimonials-slider .swiper-slide .testi-card {
        min-height: auto;
    }
}