/* =========================
   TESTIMONIALS — PRO
========================= */

.testimonials{
  position: relative;
  padding: clamp(70px, 6vw, 100px) 0;

  /* переход между секциями */
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f5f6f7 72%,
    #f5f6f7 100%
  );
}

.testimonials::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:54px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0));
  pointer-events:none;
}

.testimonials__header{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.testimonials__title{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f2937;
}

.testimonials__subtitle{
  margin: 0 auto;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31,41,55,0.72);
}

/* wrap with arrows */
.t-wrap{
  position: relative;
}

/* arrows */
.t-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(17,24,39,0.10);
  box-shadow: 0 14px 40px rgba(17,24,39,0.12);

  cursor: pointer;
  z-index: 5;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.t-nav:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(249,115,22,0.25);
  box-shadow: 0 18px 52px rgba(17,24,39,0.16);
}

.t-nav span{
  font-size: 26px;
  line-height: 1;
  color: rgba(17,24,39,0.75);
  user-select: none;
}

.t-nav--prev{ left: -14px; }
.t-nav--next{ right: -14px; }

@media (max-width: 900px){
  .t-nav{ display:none; } /* на мобилке не нужно */
}

/* slider */
.t-slider{
  position: relative;
}

/* ВАЖНО: тут убираем “общий другой фон”
   — делаем трек прозрачным и чистым, только паддинги */
.t-track{
  --gap: 18px;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3);
  gap: var(--gap);

  overflow-x: auto;       /* ✅ ДОЛЖНО БЫТЬ AUTO */
  overflow-y: hidden;
  scroll-behavior: smooth;

  /* по желанию: чтобы красиво “приклеивалось” */
  scroll-snap-type: x mandatory;

  padding: 8px 6px 18px;
  background: transparent;

  scrollbar-width: none;
}
.t-track::-webkit-scrollbar{ display:none; }

.t-card{ scroll-snap-align: start; }

/* планшет: 2 */
@media (max-width: 1024px){
  .t-track{
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
}
/* телефон: 1 */
@media (max-width: 560px){
  .t-track{
    grid-auto-columns: 100%;
  }
}


/* cards */
.t-card{
  scroll-snap-align: start;

  /* единый фон карточки (без серого оттенка) */
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 24px;
  padding: 22px 22px 22px;

  box-shadow: 0 18px 56px rgba(17,24,39,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.t-card:hover{
  transform: translateY(-4px);
  border-color: rgba(249,115,22,0.22);
  box-shadow: 0 30px 90px rgba(17,24,39,0.10);
}

.t-top{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.t-avatar{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  object-fit: cover;
  background: #e5e7eb;
  border: 1px solid rgba(17,24,39,0.10);
}

.t-meta{ min-width: 0; }

.t-name{
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.t-loc{
  font-size: 13px;
  color: rgba(31,41,55,0.62);
  margin-top: 4px;
}

.t-stars{
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #f97316;
  user-select: none;
}

.t-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(31,41,55,0.78);
}

.testimonials__hint{
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(31,41,55,0.58);
}

@media (max-width: 560px){
  .t-track{
    grid-auto-columns: 88%;
  }
}