/*
 * Module: Testimonial Carousel
 *
 * Carousel card with navigation arrows, quote, author, dots.
 * Variants: default (blue bg), light (white bg + shadow)
 * Used on: Homepage (CTA banner), Facilitation (stats section)
 * Dependencies: tokens.css
 */

/* ── Card container ── */
.testimonial-card {
  background: var(--color-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: var(--space-xl) 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  overflow: hidden;
}

/* Light variant (white bg + shadow) */
.testimonial-card--light {
  background: #fff;
  padding: var(--space-xl) 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* Single testimonial — no arrows, centered */
.testimonial-card--single {
  justify-content: center;
}
.testimonial-card--single .testimonial-card__quote {
  max-width: 500px;
}

/* ── Navigation arrows ── */
.testimonial-card__nav {
  width: 55px; height: 55px; flex-shrink: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--color-success);
  color: #fff;
  font-size: 20px;
  transition: background 0.2s ease;
}
.testimonial-card__nav:hover {
  background: #029D6A;
}
.testimonial-card--light .testimonial-card__nav {
  background: var(--color-success);
  border: none;
  color: #fff;
}
.testimonial-card--light .testimonial-card__nav:hover {
  background: #029D6A;
}

/* ── Quote content ── */
.testimonial-card__quote {
  text-align: center; max-width: 673px;
  display: flex; flex-direction: column; align-items: center; gap: 25px;
}
.testimonial-card__quote-text {
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 28px;
  color: #fff;
  transition: opacity 0.3s ease;
}
.testimonial-card--light .testimonial-card__quote-text {
  color: #000; font-size: 22px;
}

.testimonial-card__quote-author {
  font-family: var(--font-heading); font-weight: 600; font-size: 22px;
  text-transform: uppercase; color: var(--color-accent);
  transition: opacity 0.3s ease;
}
.testimonial-card--light .testimonial-card__quote-author {
  color: var(--color-success);
}

.testimonial-card__quote-readmore {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #fff; opacity: 0.7;
  transition: opacity 0.3s ease;
}
.testimonial-card__quote-readmore:hover { opacity: 1; }

/* Fading transition */
.testimonial-card__quote--fading .testimonial-card__quote-text,
.testimonial-card__quote--fading .testimonial-card__quote-author,
.testimonial-card__quote--fading .testimonial-card__quote-readmore {
  opacity: 0;
}

/* ── Dot pagination ── */
.testimonial-card__dots {
  display: none;
  flex-direction: row; justify-content: center; align-items: center;
  gap: 8px;
}
.testimonial-card__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: background 0.3s ease; flex-shrink: 0;
}
.testimonial-card__dot.active { background: rgba(255,255,255,1); }

.testimonial-card--light .testimonial-card__dot {
  background: rgba(0,0,0,0.2);
}
.testimonial-card--light .testimonial-card__dot.active {
  background: var(--color-primary);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .testimonial-card { padding: 48px 24px; }
}
@media (max-width: 768px) {
  .testimonial-card {
    flex-wrap: wrap; justify-content: center;
    border-radius: var(--radius-lg); padding: 32px 16px;
  }
  .testimonial-card__nav { order: 3; width: 44px; height: 44px; margin: 0 8px; display: none; }
  .testimonial-card__nav:first-child { order: 3; }
  .testimonial-card__nav:last-child { order: 4; }
  .testimonial-card__quote { order: 1; width: 100%; margin-bottom: 20px; }
  .testimonial-card__quote-text { font-size: 16px; }
  .testimonial-card__dots { display: flex; }
}