/*==========================================================
    TESTIMONIALS / تجربه کاربران — نورای
    استایل کامل کاروسل نظرات کاربران

    وابستگی‌ها (باید قبل از این فایل لود بشن):
    - variables.css   → رنگ‌ها، فونت‌ها، radius، shadow
    - responsive.css  → --container, --space-inline, .container
    - buttons.css     → (مستقیم استفاده نشده، فقط برای یکپارچگی توکن‌ها)

    منطق تعداد کارت‌های هم‌زمان (--testimonial-visible):
    ≥1400px (--bp-xxl) → ۴ کارت
    992–1399px         → ۳ کارت
    576–991px           → ۲ کارت
    <576px              → ۱ کارت + کمی نمای کارت بعدی (peek)

    چون custom property داخل شرط @media قابل استفاده نیست،
    مقدار --testimonial-visible داخل بدنه‌ی هر breakpoint
    دوباره تعریف شده و در calc() عرض کارت استفاده می‌شود.
==========================================================*/

.testimonials{

    position:relative;

    padding:var(--section-space) var(--space-inline);


    overflow:hidden;

}


/*==========================================================
    HEADER
==========================================================*/

.testimonial-header{

    max-width:768px;

    margin:0 auto clamp(44px,6vw,64px);

    text-align:center;

}


.section-tag{

    display:inline-block;

    color:var(--accent-strong);

    font-family:var(--font-body);

    font-size:var(--font-size-tag);

    letter-spacing:2px;

    font-weight:var(--heading-weight);

}


.testimonial-header h2{

    font-family:var(--font-heading);

    font-size:var(--h2-title-size);

    font-weight:var(--title-weight);

    margin:20px 0;

    color:var(--text);

    line-height:1.25;

}


.testimonial-header p{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    font-size:18px;

    line-height:1.8;

    color:var(--text-light);

}


/*==========================================================
    CAROUSEL SHELL
    فلش‌ها + track در یک ردیف flex؛ فلش‌ها عرض ثابت دارن،
    track فضای باقی‌مونده رو می‌گیره.
==========================================================*/

.testimonial-carousel{

    --testimonial-visible:3;
    --testimonial-gap:clamp(20px,2.4vw,30px);

    position:relative;

    display:flex;

    align-items:center;

    gap:clamp(10px,2vw,22px);

}


@media(min-width:1400px){

    .testimonial-carousel{

        --testimonial-visible:4;

    }

}


@media(max-width:992px){

    .testimonial-carousel{

        --testimonial-visible:2;

    }

}


@media(max-width:576px){

    .testimonial-carousel{

        --testimonial-visible:1.15;

        gap:8px;

    }

}


/*==========================================================
    TRACK — نوار قابل‌اسکرول کارت‌ها
==========================================================*/

.testimonial-track{

    flex:1 1 auto;

    min-width:0;

    display:flex;

    gap:var(--testimonial-gap);

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scroll-padding-inline:4px;

    padding:8px 4px 20px;

    margin:-8px -4px -20px;

    scrollbar-width:none;

    -ms-overflow-style:none;

}


.testimonial-track::-webkit-scrollbar{

    display:none;

}


/* برای دسترس‌پذیری کیبورد وقتی track خودش فوکوس می‌گیرد */

.testimonial-track:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(var(--accent-strong-rgb),.22);

    border-radius:var(--radius-lg);

}


/*==========================================================
    CARD
==========================================================*/

.testimonial-card{

    flex:0 0 calc(
        (100% - (var(--testimonial-visible) - 1) * var(--testimonial-gap))
        / var(--testimonial-visible)
    );

    scroll-snap-align:start;

    background:var(--background);

    border:1px solid var(--glass-border);

    border-radius:var(--radius-lg);

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow-md);

    transition:transform var(--transition), box-shadow var(--transition);

}


.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}


.testimonial-top{

    display:flex;

    flex-direction:column;

    align-items:center;

}


/* حلقه‌ی نرم دور آواتار — یادآور پرتوهای نور در آیکون‌های
   بخش سوالات متداول، برای هماهنگی بصری بین بخش‌های سایت */

.user-image{

    position:relative;

    width:120px;

    height:120px;

    border-radius:var(--radius-round);

    
   overflow:hidden;

}


.user-image img{

    display:block;

    width:100%;

    height:100%;

    border-radius:var(--radius-round);

    object-fit:cover;

    border:3px solid var(--background);

    box-sizing:border-box; /* این خط را اضافه کنید */

}


.stars{

    display:flex;

    justify-content:center;

    gap:4px;

    color:var(--warning);

    margin-top:18px;

}


.stars svg{

    width:16px;

    height:16px;

    fill:currentColor;

}


.testimonial-quote{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    line-height:1.9;

    color:var(--text-light);

    font-size:var(--font-size-p);

    margin-top:22px;

}


.testimonial-meta{

    margin-top:24px;

    padding-top:20px;

    border-top:1px solid var(--border);

}


.testimonial-meta h4{

    font-family:var(--font-heading);

    font-size:var(--font-size-h3);

    font-weight:var(--font-weight-h3);

    color:var(--text);

}


.testimonial-meta span{

    display:block;

    margin-top:4px;

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    font-size:14px;

    color:var(--text-muted);

}


/*==========================================================
    ARROWS
==========================================================*/

.testimonial-arrow{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:var(--radius-round);

    background:var(--background);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    color:var(--primary );

    cursor:pointer;

    transition:var(--transition);

}


.testimonial-arrow svg{

    display:block !important;

    width:22px;

    height:22px;

    fill:none;
    
    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}


.testimonial-arrow:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:rgb(var(--white-rgb));

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


.testimonial-arrow:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(var(--accent-strong-rgb),.22);

}


.testimonial-arrow.is-disabled{

    opacity:.35;

    cursor:default;

    pointer-events:none;

    box-shadow:none;

    transform:none;

}


@media(max-width:576px){

    .testimonial-arrow{

        width:40px;

        height:40px;

    }

    .testimonial-arrow svg{

        width:18px;

        height:18px;

    }

}


/*==========================================================
    DOTS — نشانگر وضعیت پیمایش
==========================================================*/

.testimonial-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:clamp(28px,4vw,40px);

}


.testimonial-dot{

    width:8px;

    height:8px;

    border-radius:var(--radius-round);

    background:var(--border);

    border:none;

    padding:0;

    cursor:pointer;

    transition:var(--transition);

}


.testimonial-dot:hover{

    background:var(--accent);

}


.testimonial-dot.is-active{

    width:26px;

    background:var(--primary);

}


.testimonial-dot:focus-visible{

    outline:none;

    box-shadow:0 0 0 3px rgba(var(--accent-strong-rgb),.3);

}


/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

    .testimonial-track{

        scroll-behavior:auto;

    }

    .testimonial-card,
    .testimonial-arrow,
    .testimonial-dot{

        transition:none !important;

    }

}