/* ═══════════════════════════════════════════════════════
   VSL Testimonial Carousel — Stylesheet
   Matches the design in the screenshot: light card, lime stars
═══════════════════════════════════════════════════════ */

/* ── Reset scope ── */
.vsl-tc-wrapper *,
.vsl-tc-wrapper *::before,
.vsl-tc-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Wrapper ── */
.vsl-tc-wrapper {
    --vsl-bg:       #f3f4f6;
    --vsl-card:     #ffffff;
    --vsl-star-on:  #a3c73a;
    --vsl-star-off: #e5e7eb;
    --vsl-text:     #1c1c1e;
    --vsl-sub:      #6b7280;
    --vsl-avatar:   #d4e89a;
    --vsl-avatar-t: #4a6b00;
    --vsl-dot:      #d1d5db;
    --vsl-dot-on:   #a3c73a;
    --vsl-btn-bg:   #ffffff;
    --vsl-btn-bdr:  #e5e7eb;
    --vsl-btn-hov:  #a3c73a;
    --vsl-radius:   18px;
    --vsl-gap:      24px;
    --vsl-per-row:  3;       /* overridden by JS / media queries */

    width: 100%;
    
    border-radius: 24px;
    padding: 48px 32px 36px;
    font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Track outer (clip) ── */
.vsl-track-outer {
    overflow: hidden;
    width: 100%;
}

/* ── Track (flex row of slides) ── */
.vsl-track {
    display: flex;
    gap: var(--vsl-gap);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ── Single slide ── */
.vsl-slide {
    flex: 0 0 calc(
        (100% - var(--vsl-gap) * (var(--vsl-per-row) - 1)) / var(--vsl-per-row)
    );
    min-width: 0;
}

/* ── Card ── */
.vsl-card {
    background: var(--vsl-card);
    border-radius: var(--vsl-radius);
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    box-shadow:
        0 2px 8px rgba(0,0,0,.04),
        0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .25s, transform .25s;
}

.vsl-card:hover {
    box-shadow:
        0 8px 28px rgba(0,0,0,.08),
        0 2px 6px rgba(0,0,0,.06);
    transform: translateY(-3px);
}

/* ── Stars ── */
.vsl-stars {
    display: flex;
    gap: 3px;
}

.vsl-star {
    font-size: 20px;
    color: var(--vsl-star-off);
    line-height: 1;
    transition: color .2s;
}

.vsl-star--filled {
    color: var(--vsl-star-on);
}

/* ── Quote ── */
.vsl-quote {
    font-size: 15px;
    line-height: 1.65;
    color: var(--vsl-text);
    flex: 1;
}

/* ── Author row ── */
.vsl-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* ── Avatar circle ── */
.vsl-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vsl-avatar);
    color: var(--vsl-avatar-t);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

/* ── Author text ── */
.vsl-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vsl-author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--vsl-text);
    line-height: 1.3;
}

.vsl-author-sub {
    font-size: 12.5px;
    color: var(--vsl-sub);
    line-height: 1.3;
}

/* ── Navigation row ── */
.vsl-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}

/* ── Arrow buttons ── */
.vsl-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--vsl-btn-bdr);
    background: var(--vsl-btn-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    transition: border-color .2s, background .2s, color .2s, transform .15s;
    flex-shrink: 0;
}

.vsl-btn svg {
    width: 18px;
    height: 18px;
}

.vsl-btn:hover {
    border-color: var(--vsl-btn-hov);
    background: var(--vsl-btn-hov);
    color: #fff;
    transform: scale(1.08);
}

.vsl-btn:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* ── Dots ── */
.vsl-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vsl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vsl-dot);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .25s;
}

.vsl-dot--active {
    background: var(--vsl-dot-on);
    transform: scale(1.35);
}

.vsl-dot:hover:not(.vsl-dot--active) {
    background: #b0c8a0;
}

/* ══ RESPONSIVE ══════════════════════════════════════ */

/* 3 cards: default (>= 900px) handled by CSS var above */

@media (max-width: 899px) {
    .vsl-tc-wrapper {
        --vsl-per-row: 2;
        padding: 36px 20px 28px;
    }
}

@media (max-width: 580px) {
    .vsl-tc-wrapper {
        --vsl-per-row: 1;
        padding: 28px 14px 22px;
        border-radius: 16px;
    }

    .vsl-card {
        padding: 22px 20px 20px;
    }

    .vsl-quote {
        font-size: 14.5px;
    }

    .vsl-btn {
        width: 36px;
        height: 36px;
    }

    .vsl-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ── Focus ring for keyboard nav ── */
.vsl-btn:focus-visible,
.vsl-dot:focus-visible {
    outline: 3px solid var(--vsl-dot-on);
    outline-offset: 2px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .vsl-track        { transition: none; }
    .vsl-card         { transition: none; }
    .vsl-btn          { transition: none; }
    .vsl-dot          { transition: none; }
}