/* HT Testimonials — style.css | Author: Harsh Tiwari | https://in.linkedin.com/in/tiwari-harsh- */

/* ── BASE ──────────────────────────────────────────────── */
.ht-testi-wrapper {
    font-family: var(--ht-font);
    background:  var(--ht-bg);
    color:       var(--ht-text);
    padding:     40px 24px 32px;
    border-radius: 16px;
    max-width:   900px;
    margin:      0 auto;
    box-sizing:  border-box;
    position:    relative;
}

/* ── FEATURED SECTION ───────────────────────────────────── */
.ht-featured-section {
    position:    relative;
    display:     flex;
    align-items: center;
    gap:         12px;
    min-height:  200px;
}

.ht-featured-track-wrap {
    flex:     1;
    overflow: hidden;
    position: relative;
    min-height: 160px;
}

.ht-featured-track {
    position: relative;
    width:    100%;
}

.ht-featured-slide {
    position:   absolute;
    top:        0; left: 0;
    width:      100%;
    opacity:    0;
    transform:  translateX(40px);
    transition: opacity var(--ht-transition, 600ms) ease,
                transform var(--ht-transition, 600ms) ease;
    pointer-events: none;
    text-align: center;
    padding:    0 12px;
    box-sizing: border-box;
}

.ht-featured-slide.ht-active {
    opacity:        1;
    transform:      translateX(0);
    position:       relative;
    pointer-events: auto;
}

.ht-featured-slide.ht-slide-left {
    opacity:   0;
    transform: translateX(-50px);
}

.ht-featured-slide.ht-slide-right {
    opacity:   0;
    transform: translateX(50px);
}

/* Stars */
.ht-stars, .ht-small-stars { margin-bottom: 10px; }
.ht-star        { color: #d1d5db; font-size: 20px; }
.ht-star.ht-filled { color: var(--ht-star); }

/* Quote */
.ht-quote-big {
    font-size:   var(--ht-fs-big);
    font-weight: var(--ht-fw-body);
    line-height: 1.7;
    margin:      0 0 20px;
    quotes:      none;
    color:       var(--ht-text);
}

.ht-quote-mark {
    font-size:   2.8em;
    line-height: 0;
    vertical-align: -0.35em;
    color:       var(--ht-primary);
    font-family: Georgia, serif;
}
.ht-qm-open  { margin-right: 3px; }
.ht-qm-close { margin-left:  3px; }

/* Author row */
.ht-author-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin-top:      8px;
}

/* ── AVATAR (shared) ─────────────────────────────────────── */
.ht-avatar,
.ht-small-avatar {
    border-radius: 50% !important;
    object-fit:    cover;
    flex-shrink:   0;
}

.ht-avatar {
    width:  56px;
    height: 56px;
    border: 2px solid var(--ht-primary);
}

.ht-avatar-fallback {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--ht-primary);
    color:           #fff;
    font-weight:     700;
}

.ht-author-info {
    display:        flex;
    flex-direction: column;
    text-align:     left;
}

.ht-author-name {
    font-size:   15px;
    font-weight: var(--ht-fw-name);
    color:       var(--ht-text);
}

.ht-author-pos {
    font-size: 12px;
    color:     #6b7280;
    margin-top: 2px;
}

/* ── ARROWS ─────────────────────────────────────────────── */
.ht-arrow {
    background:    var(--ht-primary);
    color:         #fff;
    border:        none;
    width:         40px;
    height:        40px;
    border-radius: 50%;
    font-size:     24px;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    filter 0.2s, transform 0.15s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 2px 8px rgba(0,0,0,.18);
}
.ht-arrow:hover { filter: brightness(1.15); transform: scale(1.08); }

/* ── DOTS ───────────────────────────────────────────────── */
.ht-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    margin:          18px 0 10px;
}

.ht-dot {
    width:         10px; height: 10px;
    border-radius: 50%;
    border:        2px solid var(--ht-primary);
    background:    transparent;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, transform 0.2s;
}
.ht-dot.ht-dot-active { background: var(--ht-primary); transform: scale(1.3); }

/* ── SMALL CARDS — 1 ROW ONLY ───────────────────────────── */
.ht-small-strip {
    margin-top: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.ht-small-strip::-webkit-scrollbar { display: none; }

.ht-small-track {
    display:         flex;
    flex-wrap:       nowrap;   /* force single row */
    gap:             14px;
    width:           max-content;
    padding-bottom:  4px;
}

.ht-small-card {
    background:    var(--ht-card-bg);
    border:        1px solid #e5e7eb;
    border-radius: 12px;
    padding:       14px;
    width:         200px;          /* fixed width — single row */
    flex-shrink:   0;
    cursor:        pointer;
    transition:    border-color 0.25s, box-shadow 0.25s, transform 0.2s;
    box-sizing:    border-box;
}
.ht-small-card:hover {
    border-color: var(--ht-primary);
    box-shadow:   0 4px 14px rgba(0,0,0,.08);
    transform:    translateY(-2px);
}
.ht-small-card.ht-small-active {
    border-color: var(--ht-primary);
    box-shadow:   0 0 0 2px var(--ht-primary);
}

.ht-small-top {
    display:       flex;
    align-items:   center;
    gap:           9px;
    margin-bottom: 8px;
}

.ht-small-avatar {
    width:  36px;
    height: 36px;
    border: 1.5px solid var(--ht-primary);
}

/* fallback circle for small cards */
.ht-small-avatar.ht-avatar-fallback {
    font-size: 15px;
}

.ht-small-meta { overflow: hidden; }

.ht-small-name {
    display:       block;
    font-size:     var(--ht-fs-small);
    font-weight:   var(--ht-fw-name);
    color:         var(--ht-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.ht-small-pos {
    display:       block;
    font-size:     11px;
    color:         #9ca3af;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* TEXT — exactly 1 line */
.ht-small-text {
    font-size:     var(--ht-fs-small);
    font-weight:   var(--ht-fw-body);
    color:         #4b5563;
    margin:        0 0 8px;
    line-height:   1.4;
    display:       -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   normal;
}

.ht-small-stars .ht-star { font-size: 12px; }

/* ── NO RESULTS ─────────────────────────────────────────── */
.ht-no-testi { color:#6b7280; font-style:italic; text-align:center; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .ht-testi-wrapper { padding: 24px 14px; }
    .ht-featured-section { gap: 6px; }
    .ht-arrow { width:32px; height:32px; font-size:20px; }
    .ht-small-card { width: 170px; }
}