/**
 * Pride Trust Section - Frontend Styles
 */

/* Main Container */
.pride-trust-section {
    max-width: var(--section-max-width, 1400px);
    width: 100%;
    margin: 0 auto;
    padding: var(--section-padding-top, 16px) 0 var(--section-padding-bottom, 0);
}

/* Header Section */
.pride-trust-header {
    text-align: left;
    margin-bottom: var(--header-margin-bottom, 32px);
    padding: 0 1rem;
}

.pride-trust-title {
    font-size: var(--title-font-size, 40px);
    font-weight: var(--title-font-weight, 500);
    color: var(--title-color, #1a1a1a);
    line-height: var(--title-line-height, 1.2);
    margin: 0 0 2rem 0;
}

/* Patient Avatars Row */
.pride-avatars-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pride-avatars-group {
    display: flex;
    align-items: center;
}

.pride-avatar {
    width: var(--avatar-size, 48px);
    height: var(--avatar-size, 48px);
    border-radius: 50%;
    border: 2px solid white;
    margin-left: calc(-1 * var(--avatar-overlap, 12px));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.pride-avatar:first-child {
    margin-left: 0;
}

.pride-customer-count {
    font-size: var(--customer-count-font-size, 15px);
    color: var(--customer-count-color, #666);
    font-weight: 500;
}

/* Testimonials Wrapper - Full viewport width for infinite scroll */
.pride-testimonials-wrapper {
    position: relative;
    overflow: hidden;
    /* Add padding so cards and shadows aren't cut off at edges */
    padding: 8px 0;
    /* Break out of container to full viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
}

/* Fade gradient masks at edges for smooth transition */
.pride-testimonials-wrapper::before,
.pride-testimonials-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.pride-testimonials-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.pride-testimonials-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Scrolling Row Container */
.pride-scroll-row {
    display: flex;
    gap: var(--card-gap, 24px);
    margin: calc(var(--row-gap, 24px) / 2) 0;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.pride-scroll-row:first-child {
    margin-top: 0;
}

.pride-scroll-row:last-child {
    margin-bottom: 0;
}

/* Animations
   Loop distance comes from --scroll-to, which script.js sets to the exact
   measured width of one card set. An older percentage-based copy of these
   keyframes used to sit here commented out; its opening marker had been
   deleted while the closing one was left behind, and an unmatched comment
   terminator swallows the rule that follows it, which silently dropped the
   scrollRight definition below. Removed rather than re-commented. */
@keyframes scrollRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--scroll-to, -50%)); }
}

@keyframes scrollLeft {
    0% { transform: translateX(var(--scroll-to, -50%)); }
    100% { transform: translateX(0); }
}

/* Row 1: Scroll Right (content moves left) */
.pride-scroll-row-right {
    animation: scrollRight var(--animation-duration-desktop, 30s) linear infinite;
}

/* Row 2: Scroll Left (content moves right) */
.pride-scroll-row-left {
    animation: scrollLeft var(--animation-duration-desktop, 30s) linear infinite;
}

/* Testimonial Card */
.pride-testimonial-card {
    min-width: var(--card-min-width, 350px);
    max-width: var(--card-max-width, 450px);
    background: var(--card-bg-color, #ffffff);
    border-radius: var(--card-border-radius, 16px);
    padding: var(--card-padding, 32px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    flex-shrink: 0;
}

.pride-testimonial-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pride-testimonial-quote {
    font-size: var(--quote-font-size, 20px);
    color: var(--quote-color, #1a1a1a);
    line-height: var(--quote-line-height, 1.6);
    margin: 0 0 1rem 0;
    font-weight: var(--quote-font-weight, 500);
}

/* Author Section */
.pride-testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pride-author-avatar {
    width: var(--author-avatar-size, 40px);
    height: var(--author-avatar-size, 40px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pride-author-name {
    font-size: var(--author-name-font-size, 16px);
    color: var(--author-name-color, #1a1a1a);
    font-weight: var(--author-name-font-weight, 600);
}



/* Author info wrapper (keeps classic layout unchanged) */
.pride-author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

/* Fade masks now respect page background */
.pride-testimonials-wrapper::before {
    background: linear-gradient(to right, var(--fade-color, #fff) 0%, transparent 100%);
}
.pride-testimonials-wrapper::after {
    background: linear-gradient(to left, var(--fade-color, #fff) 0%, transparent 100%);
}

/* ============ SPLIT CARD STYLE ============ */
.pride-card-style-split .pride-testimonial-card {
    padding: 0;
    background: var(--card-bg-color, #EFEFEC);
    display: flex;
    row-gap: 1rem;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
}

.pride-card-style-split .pride-testimonial-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.pride-card-style-split .pride-testimonial-quote {
    padding: var(--card-padding, 20px);
    margin: 0;
    flex: 1;
}

.pride-card-style-split .pride-testimonial-footer {
    background: #ffffff;
    padding: 6px 10px;
    margin: 0 8px 8px 8px;
    border-radius: max(calc(var(--card-border-radius, 16px) - 8px), 4px);
    display: flex;
    align-items: end;
    gap: 5px;
}

.pride-author-initial {
    width: var(--author-avatar-size, 40px);
    height: var(--author-avatar-size, 40px);
    background: #161615;
    color: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.pride-author-meta {
    font-size: 10px;
    color: #6b6b6b;
    font-weight: 500;
}

.pride-testimonial-time {
    margin-left: auto;
    padding-left: 12px;
    font-size: 10px;
    color: #9a9a9a;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .pride-card-style-split .pride-testimonial-quote {
        padding: var(--card-mobile-padding, 18px);
    }

    /* Cancel the classic mobile card padding override in split mode */
    .pride-card-style-split .pride-testimonial-card {
        padding: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pride-trust-header {
        padding: 0 1rem;
    }

    .pride-trust-title {
        font-size: var(--title-mobile-font-size, 30px);
    }

    .pride-avatar {
        width: var(--avatar-mobile-size, 40px);
        height: var(--avatar-mobile-size, 40px);
        margin-left: calc(-1 * var(--avatar-overlap, 12px) + 2px);
    }

    .pride-testimonial-card {
        min-width: var(--card-mobile-min-width, 200px);
        max-width: var(--card-mobile-max-width, 280px);
        padding: var(--card-mobile-padding, 24px);
    }

    .pride-testimonial-quote {
        font-size: var(--quote-mobile-font-size, 17px);
    }

    .pride-avatars-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    /* Use mobile animation duration */
    .pride-scroll-row-right {
        animation-duration: var(--animation-duration-mobile, 20s);
    }

    .pride-scroll-row-left {
        animation-duration: var(--animation-duration-mobile, 20s);
    }
}

/* Smooth entrance animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pride-trust-section {
    animation: fadeInUp 0.8s ease;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .pride-scroll-row,
    .pride-scroll-row-right,
    .pride-scroll-row-left {
        animation: none;
    }

    .pride-trust-section {
        animation: none;
    }
}