/**
 * Testimonials Styles
 * Auto-sliding testimonial cards with infinite scroll animation
 */

/* Track wrapper */
.testimonials-track-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

/* Fade edges effect */
.testimonials-track-wrapper::before,
.testimonials-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
}

.testimonials-track-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgb(249, 250, 251), transparent);
}

.testimonials-track-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgb(249, 250, 251), transparent);
}

/* Scrolling track container */
.testimonials-track {
    display: flex;
    gap: 32px;
    animation: scroll-left 50s linear infinite;
    width: fit-content;
}

/* Pause on hover */
.testimonials-track:hover {
    animation-play-state: paused;
}

/* Individual card */
.testimonial-card {
    flex: 0 0 450px;
    width: 450px;
}

/* Card inner container with fixed height */
.testimonial-card .bg-white {
    height: 240px; /* Fixed height untuk semua card */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
}

/* Content spacing */
.testimonial-card .flex-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.testimonial-card p {
    line-height: 1.6;
}

/* Scroll animation right to left */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .testimonial-card {
        flex: 0 0 380px;
        width: 380px;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 320px;
        width: 320px;
    }
    
    .testimonial-card .bg-white {
        height: 220px; /* Fixed height untuk mobile */
    }
    
    .testimonials-track-wrapper::before,
    .testimonials-track-wrapper::after {
        width: 50px;
    }
    
    .testimonials-track {
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        flex: 0 0 280px;
        width: 280px;
    }
    
    .testimonial-card .bg-white {
        height: 240px; /* Fixed height untuk small mobile */
    }
    
    .testimonials-track {
        gap: 20px;
    }
}

/* Text truncation for long content */
.testimonial-card p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}