/* ============================================================
   Testimonial Slider — Frontend Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500;600&display=swap');

.tsl-wrap {
  --tsl-accent : #3C007C;
  --tsl-text   : #1a1a1a;
  --tsl-muted  : #6b6b6b;
  --tsl-border : #e5e5e5;
  --tsl-bg     : #fafafa;

  font-family : 'DM Sans', sans-serif;
  padding     : 60px 20px;
  max-width   : 1100px;
  margin      : 0 auto;
  box-sizing  : border-box;
}

.tsl-wrap * { box-sizing: border-box; }

/* ── Header ─────────────────────────────── */
.tsl-header {
  text-align    : center;
  margin-bottom : 48px;
}

.tsl-eyebrow {
  display       : inline-block;
  background    : var(--tsl-accent);
  color         : #1a1a1a;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding       : 5px 14px;
  border-radius : 2px;
  margin-bottom : 14px;
}

.tsl-header h2 {
  font-family : 'Playfair Display', serif;
  font-size   : clamp(26px, 4vw, 42px);
  color       : var(--tsl-text);
  line-height : 1.2;
  margin      : 0;
}

/* ── Card ────────────────────────────────── */
.tsl-card {
  display        : grid;
  grid-template-columns: 1fr 1fr;
  gap            : 56px;
  align-items    : center;
  padding        : 44px 52px;
  border         : 1px solid var(--tsl-border);
  border-radius  : 16px;
  background     : var(--tsl-bg);
  position       : relative;
  overflow       : hidden;
  min-height     : 280px;
  transition     : opacity .3s ease, transform .3s ease;
}

.tsl-card::before {
  content      : '';
  position     : absolute;
  top: 0; left: 0;
  width        : 5px;
  height       : 100%;
  background   : var(--tsl-accent);
  border-radius: 16px 0 0 16px;
}

.tsl-card.tsl-fade-out {
  opacity  : 0;
  transform: translateY(12px);
}

/* Photo column */
.tsl-photo-col img {
  width        : 100%;
  aspect-ratio : 4/3;
  object-fit   : cover;
  border-radius: 12px;
  display      : block;
}

.tsl-photo-placeholder {
  width           : 100%;
  aspect-ratio    : 4/3;
  border-radius   : 12px;
  background      : linear-gradient(135deg,#e2e2e2,#cacaca);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 42px;
  font-weight     : 700;
  color           : #888;
  letter-spacing  : .05em;
}

/* Content column */
.tsl-quote-icon {
  font-size     : 80px;
  line-height   : 1;
  color         : var(--tsl-accent);
  font-family   : Georgia, serif;
  display       : block;
  margin-bottom : -18px;
}

.tsl-quote-text {
  font-size   : 15.5px;
  line-height : 1.78;
  color       : #3a3a3a;
  margin      : 0 0 22px;
}

.tsl-name {
  font-family   : 'Playfair Display', serif;
  font-size     : 21px;
  font-weight   : 700;
  color         : var(--tsl-text);
  margin-bottom : 4px;
}

.tsl-role {
  font-size     : 12.5px;
  font-weight   : 600;
  color         : var(--tsl-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom : 14px;
}

.tsl-stars {
  color      : var(--tsl-accent);
  font-size  : 20px;
  letter-spacing: 2px;
}

/* ── Thumbnails nav ──────────────────────── */
.tsl-thumbs {
  display        : flex;
  justify-content: center;
  align-items    : center;
  gap            : 16px;
  margin-top     : 32px;
  flex-wrap      : wrap;
}

.tsl-thumb {
  width          : 56px;
  height         : 56px;
  border-radius  : 50%;
  overflow       : hidden;
  cursor         : pointer;
  border         : 3px solid transparent;
  transition     : border-color .25s, transform .25s, box-shadow .25s;
  background     : #ddd;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  font-weight    : 700;
  color          : #888;
  flex-shrink    : 0;
  user-select    : none;
}

.tsl-thumb img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

.tsl-thumb:hover {
  transform: scale(1.1);
}

.tsl-thumb.tsl-active {
  border-color: #e3156b;
  transform   : scale(1.18);
  box-shadow  : 0 0 0 3px rgba(224,32,32,.18);
}

/* ── Counter ─────────────────────────────── */
.tsl-counter {
  text-align    : right;
  font-size     : 12px;
  color         : var(--tsl-muted);
  font-weight   : 600;
  letter-spacing: .06em;
  margin-top    : 12px;
}

/* ── Empty state ─────────────────────────── */
.tsl-empty {
  text-align : center;
  padding    : 40px;
  color      : #888;
  font-style : italic;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 680px) {
  .tsl-card {
    grid-template-columns: 1fr;
    gap    : 24px;
    padding: 28px 24px;
  }

  .tsl-photo-col img,
  .tsl-photo-placeholder {
    aspect-ratio: 16/9;
  }
}