/* ============================================================
   Testimonial Slider Pro — Frontend CSS
   ============================================================ */

:root {
    --tsp-accent:       #1a3a8f;
    --tsp-accent-light: #e8edf8;
    --tsp-text:         #1c1c1c;
    --tsp-muted:        #6b7280;
    --tsp-border:       #e5e7eb;
    --tsp-bg:           #ffffff;
    --tsp-shadow:       0 4px 24px rgba(26, 58, 143, 0.08);
    --tsp-radius:       12px;
    --tsp-transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --tsp-line-height:  1.7;
}

/* ── Container ────────────────────────────────────────────── */
.tsp-slider {
    position:   relative;
    max-width:  960px;
    margin:     0 auto;
    padding:    0 0 52px;
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── Track ────────────────────────────────────────────────── */
.tsp-track-wrap {
    overflow: hidden;
}

.tsp-track {
    position: relative;
    min-height: 200px;
}

/* ── Slide ────────────────────────────────────────────────── */
.tsp-slide {
    display:    none;
    gap:        24px;
    flex-wrap:  wrap;
}

.tsp-slide.is-active {
    display:        flex;
    animation:      tspFadeIn 0.4s ease both;
}

@keyframes tspFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Card ─────────────────────────────────────────────────── */
.tsp-card {
    flex:           1 1 280px;
    display:        flex;
    align-items:    flex-start;
    gap:            28px;
    background:     var(--tsp-bg);
    border:         1px solid var(--tsp-border);
    border-radius:  var(--tsp-radius);
    padding:        32px 36px;
    box-shadow:     var(--tsp-shadow);
    position:       relative;
    transition:     box-shadow var(--tsp-transition);
}

.tsp-card:hover {
    box-shadow: 0 8px 40px rgba(26, 58, 143, 0.13);
}

/* Barra accent sinistra */
.tsp-card::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        20px;
    bottom:     20px;
    width:      3px;
    background: var(--tsp-accent);
    border-radius: 0 2px 2px 0;
    opacity: 0.7;
}

/* ── Logo ─────────────────────────────────────────────────── */
.tsp-card__logo {
    flex-shrink: 0;
    width:       80px;
    display:     flex;
    align-items: center;
    justify-content: center;
}

.tsp-card__logo img {
    max-width:  80px;
    max-height: 64px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
}

.tsp-card__logo-placeholder {
    width:          64px;
    height:         64px;
    background:     var(--tsp-accent-light);
    color:          var(--tsp-accent);
    border-radius:  8px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      28px;
    font-weight:    700;
    letter-spacing: -1px;
}

/* ── Body ─────────────────────────────────────────────────── */
.tsp-card__body {
    flex: 1;
    min-width: 0;
}

.tsp-card__quote-icon {
    font-size:      52px;
    line-height:    0.8;
    color:          var(--tsp-accent);
    opacity:        0.18;
    margin-bottom:  8px;
    font-family:    Georgia, serif;
    user-select:    none;
}

/* ── Review text ──────────────────────────────────────────── */
.tsp-review {
    margin-bottom: 20px;
}

.tsp-review__text {
    font-size:      1rem;
    line-height:    var(--tsp-line-height);
    color:          var(--tsp-text);
    font-style:     italic;
    overflow:       hidden;
}

/* Stato clamped: applicato dal markup, usa --tsp-lines */
.tsp-review__text.is-clamped {
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--tsp-lines, 3);
    line-clamp:         var(--tsp-lines, 3);
    overflow:           hidden;
}

/* ── Toggle ───────────────────────────────────────────────── */
.tsp-review__toggle {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    margin-top:     10px;
    background:     none;
    border:         none;
    padding:        0;
    cursor:         pointer;
    color:          var(--tsp-accent);
    font-size:      0.875rem;
    font-family:    inherit;
    font-weight:    600;
    letter-spacing: 0.01em;
    transition:     opacity var(--tsp-transition);
}

.tsp-review__toggle:hover {
    opacity: 0.75;
}

.tsp-review__toggle.is-hidden {
    display: none;
}

.tsp-review__toggle-icon {
    width:      16px;
    height:     16px;
    flex-shrink: 0;
    transition: transform var(--tsp-transition);
}

.tsp-review__toggle[aria-expanded="true"] .tsp-review__toggle-icon {
    transform: rotate(180deg);
}

/* ── Footer / Autore ──────────────────────────────────────── */
.tsp-card__footer {
    border-top:     1px solid var(--tsp-border);
    padding-top:    16px;
    margin-top:     4px;
}

.tsp-card__author {
    display:    flex;
    flex-direction: column;
    gap:        2px;
}

.tsp-card__name {
    font-size:      0.95rem;
    font-weight:    700;
    color:          var(--tsp-text);
    font-style:     normal;
    font-family:    system-ui, -apple-system, sans-serif;
}

.tsp-card__company {
    font-size:      0.85rem;
    color:          var(--tsp-muted);
    font-style:     normal;
    font-family:    system-ui, -apple-system, sans-serif;
}

.tsp-card__course {
    font-size:      0.78rem;
    color:          var(--tsp-accent);
    font-style:     normal;
    font-family:    system-ui, -apple-system, sans-serif;
    font-weight:    500;
    background:     var(--tsp-accent-light);
    display:        inline-block;
    padding:        2px 8px;
    border-radius:  20px;
    margin-top:     4px;
}

/* ── Nav buttons ──────────────────────────────────────────── */
.tsp-nav {
    position:       absolute;
    top:            50%;
    transform:      translateY(calc(-50% - 26px));
    background:     var(--tsp-bg);
    border:         1px solid var(--tsp-border);
    border-radius:  50%;
    width:          40px;
    height:         40px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    z-index:        10;
    transition:     background var(--tsp-transition), border-color var(--tsp-transition);
    box-shadow:     0 2px 8px rgba(0,0,0,0.08);
}

.tsp-nav svg {
    width:  18px;
    height: 18px;
    color:  var(--tsp-accent);
}

.tsp-nav:hover {
    background:     var(--tsp-accent);
    border-color:   var(--tsp-accent);
}
.tsp-nav:hover svg {
    color: #fff;
}

.tsp-nav--prev { left:  -52px; }
.tsp-nav--next { right: -52px; }

.tsp-nav:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Dots ─────────────────────────────────────────────────── */
.tsp-dots {
    position:   absolute;
    bottom:     16px;
    left:       0;
    right:      0;
    display:    flex;
    justify-content: center;
    gap:        8px;
}

.tsp-dot {
    width:          10px;
    height:         10px;
    border-radius:  50%;
    border:         2px solid var(--tsp-accent);
    background:     transparent;
    cursor:         pointer;
    padding:        0;
    transition:     background var(--tsp-transition), transform var(--tsp-transition);
}

.tsp-dot.is-active {
    background:     var(--tsp-accent);
    transform:      scale(1.2);
}

/* ── Empty ────────────────────────────────────────────────── */
.tsp-empty {
    color:      var(--tsp-muted);
    font-style: italic;
    text-align: center;
    padding:    32px 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
    .tsp-slider   { padding: 0 0 48px; }
    .tsp-nav--prev { left:  -8px; }
    .tsp-nav--next { right: -8px; }

    .tsp-card {
        flex-direction: column;
        padding:        24px 20px;
        gap:            16px;
    }

    .tsp-card::before {
        top: 0; bottom: auto;
        left: 20px; right: 20px;
        width: auto; height: 3px;
        border-radius: 0 0 2px 2px;
    }

    .tsp-card__logo {
        width: 100%;
        justify-content: flex-start;
    }
}