/* Sopify_Refactored/css/components/testimonials.css */

.testimonials {
    padding: 80px 0;
    background: var(--bg-light-gray); /* Match acceptance rate section background */
    overflow-x: hidden; /* Prevent horizontal scrollbar on the section itself */
}

.testimonials-title { /* Was .testimonials h2 */
    text-align: center;
    font-size: var(--font-size-h2);
    margin-bottom: 3rem;
    color: var(--text-dark-contrast);
}
/* .highlight-alt is defined in base.css */

.testimonial-scroller-wrapper {
    width: 100%;
    overflow: hidden; /* This creates the viewport for the scrolling animation */
    position: relative; /* For potential ::before/::after fades if needed, like carousel */
    /* Optional: Add fading edges like the carousel if desired
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    */
}

.testimonial-grid {
    display: flex; /* Key for horizontal layout */
    width: fit-content; /* Allow it to be as wide as its content */
    /* The animation will be applied here by JS or directly if content is duplicated */
    animation: scrollTestimonials 40s linear infinite; /* Adjust duration as needed */
    gap: 1.5rem; /* Space between cards */
    padding: 1rem 0; /* Vertical padding for shadow visibility */
}

/* Pause animation on hover */
.testimonial-scroller-wrapper:hover .testimonial-grid {
    animation-play-state: paused;
}

.testimonial-card {
    background: var(--bg-card-white);
    padding: 1.75rem; /* 28px */
    border-radius: var(--border-radius-medium); /* 12px */
    box-shadow: var(--shadow-card);
    width: 340px; /* Fixed width for uniform cards */
    flex-shrink: 0; /* Prevent cards from shrinking */
    display: flex;
    flex-direction: column;
    /* transition: transform 0.3s ease; No hover transform if it's auto-scrolling */
}

/* Removed ::before quote, using profile image instead */

.testimonial-profile {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.testimonial-profile-img {
    width: 50px; /* Size of profile image */
    height: 50px;
    border-radius: 50%; /* Circular image */
    object-fit: cover;
    margin-right: 1rem;
    background-color: #e2e8f0; /* Placeholder background */
}

.testimonial-author { /* This div will now wrap name and affiliation if separated */
    font-weight: 600; /* Bolder author name */
    color: var(--color-primary);
    font-size: var(--font-size-sm); /* 14px */
    line-height: 1.4;
}
.testimonial-author span.affiliation { /* For the part after comma */
    display: block;
    font-weight: 400;
    font-size: var(--font-size-xs); /* 12px */
    color: var(--text-color-subtle);
}


.testimonial-text {
    font-style: italic;
    color: var(--text-color-medium);
    font-size: var(--font-size-sm); /* 14px */
    line-height: var(--line-height-base);
    flex-grow: 1; /* Allow text to take available space */
    margin-bottom: 1rem; /* Space before author if profile is not used or separate */
}

/* CSS Animation for continuous scroll */
@keyframes scrollTestimonials {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Scroll by the width of the original set of items.
           JS will duplicate items, so this effectively scrolls one full set. */
        transform: translateX(-50%); /* If content is duplicated once */
    }
}


@media (max-width: 768px) {
    .testimonials {
        padding: 60px 0;
    }
    .testimonials-title {
        font-size: 1.75rem;
        margin-bottom: 2.5rem;
    }
    .testimonial-grid {
        gap: 1rem;
        animation-duration: 30s; /* Faster scroll on mobile perhaps */
    }
    .testimonial-card {
        width: 300px; /* Slightly smaller cards on mobile */
        padding: 1.5rem;
    }
    .testimonial-profile-img {
        width: 40px;
        height: 40px;
    }
}