/* =========================
   TESTIMONIALS — БАЗА
   ========================= */
.section-testimonials{
  /* ширина слайда адаптивная: от 320 до 700, с центром ~60vw */
  --slide-w: clamp(320px, 60vw, 700px);
  --slide-gap: 24px;
}

/* Вьюпорт: full-bleed без 100vw, режем только по оси X */
.testimonials__viewport[data-slider]{
  position: relative;

  /* full-bleed: вытягиваем из контейнера до краёв окна */
  /* ширину явную НЕ задаём — это убирает "дрожание" от 100vw */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* скролл по X убиваем, по Y — даём тени жить */
  overflow-x: hidden;
  overflow-y: visible;

  /* центрируем активный относительно ЭКРАНА */
  padding-inline: calc((100vw - var(--slide-w)) / 2);

  /* небольшой зазор под тень карточки */
  padding-bottom: 12px;
}

/* если браузер поддерживает "clip", используем его вместо hidden (ещё надёжнее) */
@supports (overflow: clip){
  .testimonials__viewport[data-slider]{ overflow-x: clip; }
}



/* ====== Трек/слайды ====== */
.testimonials__track[data-slider-track]{
  margin-top: var(--gap-xxl);
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
  transition: transform .35s ease;
  gap: var(--slide-gap);
}

.testimonials__track [data-slider-slide]{
  flex: 0 0 auto;
  width: var(--slide-w);
  height: 100%;
  display: flex;
  transform: scale(.92);
  opacity: .65;
  transition: transform .35s ease, opacity .35s ease;
}
.testimonials__track [data-slider-slide].is-active{
  transform: scale(1);
  opacity: 1;
}
.testimonials__track [data-slider-slide].is-prev,
.testimonials__track [data-slider-slide].is-next{
  transform: scale(.95);
  opacity: .82;
}

/* ====== Карточка 50/50 ====== */
.testi-card{
  position: relative;
  display: flex; align-items: stretch; gap: 24px;
  background: #eaf2ff;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  width: 100%; height: 100%;
}
.testi-card__media{
  flex: 0 0 50%; max-width: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#2e3192 0%, #1b88ff 55%, #1bffff 100%);
}
.testi-card__img{ width: 100%; height: 100%; object-fit: cover; }
.testi-card__placeholder{ width:56px; height:56px; border-radius:12px; border:2px solid #fff; opacity:.85; }

.testi-card__body{
  flex: 1; max-width: 50%;
  display: flex; flex-direction: column;
  padding: 24px 28px;
  color: #13223a;
  padding-top: 56px; /* под звёзды */
}
.testi-card__text{ font-size:16px; line-height:1.6; margin:0 0 10px; }

/* звёзды */
.testi-card__stars{
  position: absolute; top:14px; right:16px;
  color:#ffc107; pointer-events:none;
}
.testi-card__stars .star{ opacity:.35; margin-left:2px; }
.testi-card__stars .star.filled{ opacity:1; }

/* автор */
.testi-card__author{
  margin-top: auto;
  margin-bottom: var(--fs-md);
  padding-top: 0;
  border-top: 0;
  font-weight: 400; color:#0c2a4a; font-size: 10px;
}

/* лайк */
.testi-like{
  position: absolute; right:16px; bottom:12px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background: transparent; border: 0;
  color:#e69300; cursor: pointer;
  transition: transform .15s, opacity .2s;
}
.testi-like:hover{ transform: translateY(-1px); opacity: .9; }
.testi-like svg path{ fill:transparent; stroke: currentColor; stroke-width: 2px; }
.testi-like.is-liked svg path{ fill: currentColor !important; stroke-width: 0 !important; }


.section-testimonials .heading-accent {
	display: flex; justify-self: center;
}

/* ====== Навигация (вне вьюпорта) ====== */
.section-testimonials .testi-nav{
  position: relative;
  margin: 20px auto 0;
  height: 60px;
  width: var(--slide-w);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Контейнер для позиционирования навигации относительно карточки */
.section-testimonials .testi-nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Десктопные точки - по левому краю карточки */
.section-testimonials .hero__dots--desktop{ 
  position: absolute; 
  left: 0;
  top: 70%;
  transform: translateY(-50%);
  display: flex; 
  gap: 40px; 
  z-index: 2;
}

/* Мобильные точки и навигация - скрыты по умолчанию */
.section-testimonials .hero__dots--mobile,
.section-testimonials .hero__nav--mobile{
  display: none;
}

/* Стили для мобильных точек */
.section-testimonials .hero__dots--mobile button{
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; 
  height: 30px; /* точно такой же размер как у стрелок */
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: .9;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  position: relative;
}

/* Внутренний кружок для точек */
.section-testimonials .hero__dots--mobile button::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: background-color .15s ease;
}
.section-testimonials .hero__dots--mobile button:hover,
.section-testimonials .hero__dots--mobile button:focus-visible{
  transform: scale(1.1); outline: none; opacity: 1;
}
.section-testimonials .hero__dots--mobile button[aria-selected="true"],
.section-testimonials .hero__dots--mobile button[aria-current="true"]{
  background: var(--accent);
  border: 0;
  width: 8px; height: 8px;
}
.section-testimonials .hero__dots button{
  all: unset;
  display: inline-flex;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  opacity: .9;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.section-testimonials .hero__dots button:hover,
.section-testimonials .hero__dots button:focus-visible{
  transform: scale(1.1); outline: none; opacity: 1;
}
.section-testimonials .hero__dots button[aria-selected="true"],
.section-testimonials .hero__dots button[aria-current="true"]{
  background: transparent;
  border: 6px solid var(--accent);
  width: 10px; height: 10px;
}
.section-testimonials .hero__dots button:first-child:not([aria-selected]){
  background: transparent;
  border: 6px solid #fff;
  width: 10px; height: 10px;
}

/* Десктопные стрелки: по правому краю карточки */
.section-testimonials .hero__arrows--desktop{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex; 
  gap: 0;
  z-index: 3;
  align-items: center;
}

/* Мобильные стрелки: скрыты по умолчанию */
.section-testimonials .hero__arrows--mobile{
  display: none;
}

/* база (назад) */
.section-testimonials .navmol{
  position: relative;
  width: 112px; height: 59px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='112' height='59' viewBox='0 0 112 59'>\
  <path fill-rule='evenodd' clip-rule='evenodd' d='M112 29.5C112 45.7924 99.1425 59 83.2821 59C71.5331 59 61.432 51.7524 56.9845 41.3721L56.7729 41.295C52.2539 39.6474 47.2156 40.3847 43.3499 43.2596L38.6428 46.7601C34.5385 50.6933 29.0301 53.1 22.9744 53.1C10.286 53.1 0 42.5339 0 29.5C0 16.4661 10.286 5.9 22.9744 5.9C30.0448 5.9 36.3693 9.18094 40.5837 14.3416L41.3686 15.0238C45.6646 18.7579 51.5616 19.8453 56.8156 18.0302C61.1722 7.43534 71.3818 0 83.2821 0C99.1425 0 112 13.2076 112 29.5Z' fill='%23dddddd'/>\
  <path d='M27.8 30H16.7M16.7 30L22.26 35.7M16.7 30L22.26 24.3' stroke='%232A5273' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/>\
</svg>");
}

/* синий чип (вперёд), лежит поверх базы */
.section-testimonials .navchip{
  position: absolute;
  width: 60px; height: 60px;
  right: -3px; bottom: -36px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  z-index: 4;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'>\
  <circle cx='30' cy='30' r='30' fill='%232A5273'/>\
  <g transform='translate(30,30) scale(1.3) translate(-30,-30)'>\
    <path d='M26 30H37M37 30L31.5 24.3M37 30L31.5 35.7' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/>\
  </g>\
</svg>");
}

/* ховеры */
.section-testimonials .navmol--prev:hover { filter: brightness(0.98); }
.section-testimonials .navchip:hover      { filter: brightness(1.05); }

/* ====== Адаптив ====== */
@media (max-width:1200px){
  .section-testimonials{ --slide-w: 82vw; --slide-gap: 20px; }
  .testimonials__viewport[data-slider]{ 
    padding-inline: clamp(0px, calc((100% - var(--slide-w)) / 2), 2000px);
    height: 360px;
  }
}
@media (max-width:768px){
  .testimonials__viewport[data-slider]{ padding-inline: 0; height:auto; }
  .testimonials__track [data-slider-slide]{ height:auto; }
  .testi-card{ flex-direction: column; height:auto; }
  .testi-card__media{ 
    flex: 0 0 auto; 
    max-width:100%; 
    height:350px; 
    position: relative; /* для позиционирования звездочек */
  }
  .testi-card__body{ max-width:100%; padding-top:20px; } /* убираем отступ под звездочки */
  .section-testimonials .hero__arrows{ gap:8px; }
  
  /* Звездочки в мобильной версии - внутри синего поля (медиа) */
  .testi-card__stars{
    position: absolute; 
    top: 16px; 
    right: 16px;
    color: #ffc107; 
    pointer-events: none;
    z-index: 2;
  }
}

/* ===== Testimonials: ≤1024 — точки по центру, стрелки накладываются на крайние точки ===== */
@media (max-width:1024px){
  .section-testimonials .testi-nav{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    gap: 0; /* навигация управляется через .hero__dots */
  }

  /* линия точек — якорь для стрелок */
  .section-testimonials .hero__dots{
    position: relative;          /* ключевое: контейнер для абсолютных стрелок */
    display: inline-flex;
    gap: 25px;
    align-items: center;
    top: 3px;
    left: 8px;
    z-index:2;
  }
  .section-testimonials .hero__dots button[aria-selected="true"]{    
    background: var(--accent);
    border: 0;
    width: 8px;
    height: 8px;
  }

  /* Скрываем десктопную навигацию на мобиле */
  .section-testimonials .hero__dots--desktop,
  .section-testimonials .hero__arrows--desktop{
    display: none;
  }

  /* Показываем мобильную навигацию */
  .section-testimonials .hero__nav--mobile{ 
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 30px; /* фиксированная высота */
  }

  /* Мобильные точки */
  .section-testimonials .hero__dots--mobile{
    display: flex;
    gap: 20px;
    align-items: center;
    height: 30px; /* такая же высота как у контейнера */
  }

  /* Мобильные стрелки - точно такой же размер как у точек */
  .section-testimonials .navmol--mobile,
  .section-testimonials .navchip--mobile{
    position: relative;
    display: flex;
	top: 2px;
    left: 6px;
    width: 30px; 
    height: 30px; /* точно такой же размер как у точек */
    cursor: pointer;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='19' height='22' viewBox='0 0 19 22' fill='none'>\
<path d='M17.0861 9.27815C18.3961 10.0523 18.3961 11.9477 17.0861 12.7219L3.5205 20.7379C1.83168 21.7358 -0.134923 19.959 0.687114 18.1779L3.61318 11.8381C3.85862 11.3063 3.85862 10.6937 3.61318 10.1619L0.687116 3.82208C-0.13492 2.041 1.83167 0.264169 3.52049 1.26211L17.0861 9.27815Z' fill='%23446A81'/></svg>");
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  /* Ховер эффект для мобильных стрелок */
  .section-testimonials .navmol--mobile:hover,
  .section-testimonials .navchip--mobile:hover{
    background-color: rgba(68, 106, 129, 0.1);
  }

  /* Левая мобильная стрелка */
  .section-testimonials .navmol--mobile{
    transform: rotate(180deg);
  }

  /* активная точка без «кольца» — как просил */
  .section-testimonials .hero__dots [aria-selected="true"],
  .section-testimonials .hero__dots [aria-current="true"]{
    background: var(--accent);
    border: 0;
    width: 8px; height: 8px;
  }
}

/* ===== Testimonials: ≤768 — ещё компактнее ===== */
@media (max-width:768px){
  .section-testimonials .hero__arrows{margin-top: 12px; }
  .section-testimonials .navmol,
  .section-testimonials .navchip{ 
    width: 16px; height: 18px; top: -14px;
        left: -2px;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 19 22' fill='none'>\
<path d='M17.0861 9.27815C18.3961 10.0523 18.3961 11.9477 17.0861 12.7219L3.5205 20.7379C1.83168 21.7358 -0.134923 19.959 0.687114 18.1779L3.61318 11.8381C3.85862 11.3063 3.85862 10.6937 3.61318 10.1619L0.687116 3.82208C-0.13492 2.041 1.83167 0.264169 3.52049 1.26211L17.0861 9.27815Z' fill='%23446A81'/></svg>");
  }
  button.navchip.navchip--next.navchip--mobile{top: 3px;}
  .section-testimonials .hero__dots{bottom: -6px; }
}


/* Дополнительные стили для мобильных устройств */
@media (max-width:425px){
  .testi-card__media{ height: 300px; }
  .testi-card__body{ padding: 20px 20px 18px; }
  .testi-card__text{ font-size: 15px; line-height: 1.5; }
  .testi-card__author{ font-size: 11px; }
  
  /* Звездочки для очень маленьких экранов */
  .testi-card__stars{
    top: 12px; 
    right: 12px;
    font-size: 14px;
  }
  
  /* Сердечко для маленьких экранов */
  .testi-like{
    width: 30px; 
    height: 30px;
    right: 12px; 
    bottom: 10px;
  }
}