/* =========================================================
   TESTIMONIALS SECTION
   Uses CSS variables from style.css (:root tokens)
========================================================= */

/* Section */
.testi {
  position: relative;
  padding: 6rem 0;
}

.testi__container {
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Header */
.testi__header {
  max-width: var(--container-2xl);
}

.testi__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest, .1em);
  text-transform: uppercase;
  color: var(--primary);
}

.testi__title {
  margin-top: .75rem;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--foreground);
}

@media (min-width: 640px) {
  .testi__title { font-size: var(--text-4xl); }
}

@media (min-width: 768px) {
  .testi__title { font-size: var(--text-5xl); }
}

/* Carousel wrapper */
.testi__carousel {
  margin-top: 3rem;
  position: relative;
  width: 100%;
}

.testi__track-wrap {
  overflow: hidden;
}

.testi__track {
  display: flex;
  gap: 0;
  transition: transform .4s ease;
}

/* Individual slide */
.testi__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-left: 1.25rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .testi__slide { flex: 0 0 50%; }
}

@media (min-width: 1024px) {
  .testi__slide { flex: 0 0 33.3333%; }
}

/* Card */
.testi__card {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Stars */
.testi__stars {
  display: flex;
  gap: .2rem;
  color: var(--accent);
}

.testi__stars svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Quote */
.testi__quote {
  margin-top: .75rem;
  font-size: var(--text-sm);
  color: var(--foreground);
  opacity: .9;
  line-height: 1.6;
  flex: 1;
}

/* Caption */
.testi__caption {
  margin-top: 1rem;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.testi__name {
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

/* Navigation buttons */
.testi__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  box-shadow: 0 1px 3px oklch(0% 0 0 / .3);
  z-index: 2;
}

.testi__btn svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  flex-shrink: 0;
}

.testi__btn:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
}

.testi__btn:disabled {
  pointer-events: none;
  opacity: .5;
}

.testi__btn--prev {
  left: .5rem;
}

.testi__btn--next {
  right: .5rem;
}

@media (min-width: 640px) {
  .testi__btn--prev { left: -1rem; }
  .testi__btn--next { right: -1rem; }
}

/* Visually hidden helper (sr-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}