/*
 * Reviews — бірюзова картка поруч із формою.
 * Figma desktop 39:975 (688×811), mobile 44:2995 (375×750).
 * Desktop: overflow hidden, radius 16; контент (1086 завширшки, ширше за
 *   картку — бокові слайди обрізаються) по центру на top: calc(50% − 61px), gap 64.
 *   Title 32/1.0 Medium, білий, ширина 637.
 *   Слайди: активний 376×277, бокові 339×250, gap 16, radius 20.
 *   Пагінація: точки 8, gap 4, неактивні білі 20%.
 *   Рейтинг: зірки 100×20 + «4.9 from 100+ customers» 18/1.1, gap 12.
 *   Градієнтні смуги по краях 83×836 (top −25), права віддзеркалена.
 *   Знизу біла плашка 648 (bottom 20): текст 18 + кнопка-телефон.
 * Mobile: висота 750, radius 20 зверху; слайди 282×208 / 255×188, gap 12;
 *   gap 48, py 48; смуги 42×474 (top 190); нижньої плашки немає.
 */
.reviews {
  position: relative;
  flex-shrink: 0;
  width: 688px;
  min-height: 811px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-white);
}

.reviews__content {
  position: absolute;
  top: calc(50% - 61px);
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 1086px;
  transform: translate(-50%, -50%);
}

.reviews__title {
  width: 637px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.reviews__title span {
  display: block;
}

.reviews__slider {
  --review-unit: min(
    calc(1210px * var(--review-scale) / var(--max-w, 800)),
    calc(var(--review-viewport) / var(--review-active) / var(--card-h, 700))
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/*
 * Картки однакові: ширина з макета (1210 × --review-scale = 351 px),
 * висота — за найвищою карткою, але не вища за місце під слайдер
 * (--review-viewport ÷ збільшення активної). Скріншоти відгуків (обрізані:
 * без «Respond» і смуги прокрутки) — в одному масштабі --review-unit,
 * тому текст у всіх картках однакового розміру. Масштаб — найбільший, за
 * якого найширший скріншот влазить по ширині, а найвища картка — по висоті;
 * --max-w і --card-h (у пікселях скріншота) виставляє js/reviews-slider.js.
 * Активна картка збільшується через scale (376/339 ≈ 1.11, як у макеті).
 */
.reviews {
  --review-scale: 0.29;
  --review-active: 1.11;
  --review-viewport: 330px;
  --card-w: 688px;  /* ширина бірюзової картки — для маски розчинення */
  --fade-w: 83px;   /* зона розчинення біля країв (Figma 44:1682) */
}

@media (max-width: 1199px) {
  .reviews {
    --card-w: calc(100vw - 2 * var(--gutter));
  }
}

.reviews__viewport {
  width: 100%;
  height: var(--review-viewport);
  overflow: visible;
  touch-action: pan-y;
  /* Бокові картки розчиняються у фон біля країв бірюзової картки (замість
     картинок-смуг 44:1682/44:1684 — ті були залиті бірюзовим і проступали
     на світлих плямах). Контент ширший за картку: 1086 vs 688 → край картки
     за 199 px від країв viewport, зона розчинення — 83 px (як у макеті). */
  --fade-edge: calc((100% - var(--card-w)) / 2);
  -webkit-mask-image: linear-gradient(to right, transparent var(--fade-edge), #000 calc(var(--fade-edge) + var(--fade-w)), #000 calc(100% - var(--fade-edge) - var(--fade-w)), transparent calc(100% - var(--fade-edge)));
  mask-image: linear-gradient(to right, transparent var(--fade-edge), #000 calc(var(--fade-edge) + var(--fade-w)), #000 calc(100% - var(--fade-edge) - var(--fade-w)), transparent calc(100% - var(--fade-edge)));
}

.reviews__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 36px;
  height: 100%;
  transition: transform 0.55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* Нижчі відгуки — по центру картки, вужчі — по центру по горизонталі.
   Короткі відгуки скрипт склеює по два в одну картку (див. img + img). */
.reviews__slide {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(1210px * var(--review-scale));
  height: calc(var(--card-h, 700) * var(--review-unit));
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-white);
  cursor: pointer;
  opacity: 0.75;
  transition: scale 0.55s cubic-bezier(.22, .61, .36, 1), opacity 0.4s ease, box-shadow 0.4s ease;
}

/* Непомітний перестрибок з копії на оригінал (зациклення) — без анімацій */
.reviews__track.is-jumping,
.reviews__track.is-jumping .reviews__slide {
  transition: none;
}

.reviews__slide.is-active {
  z-index: 1;
  scale: var(--review-active);
  opacity: 1;
  cursor: default;
  box-shadow: 0 12px 32px rgba(33, 40, 42, 0.12);
}

/* Ширина/висота — з атрибутів width/height зображення × --review-unit
   (js/reviews-slider.js переносить їх у змінні --w / --h) */
.reviews__slide img {
  display: block;
  width: calc(var(--w, 800) * var(--review-unit));
  height: calc(var(--h, 600) * var(--review-unit));
  pointer-events: none;
  user-select: none;
}

/* Роздільник між двома склеєними короткими відгуками. Відступи — у пікселях
   скріншота (масштабуються разом з ним); сума 2 × 24 + лінія = DIVIDER у JS. */
.reviews__slide img + img {
  box-sizing: content-box;
  margin-top: calc(24 * var(--review-unit));
  padding-top: calc(24 * var(--review-unit));
  border-top: 1px solid var(--color-divider);
}

.reviews__dots {
  display: flex;
  gap: 4px;
}

.reviews__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white-20);
  transition: background-color 0.2s ease;
}

.reviews__dot[aria-current='true'] {
  background: var(--color-white);
}

.reviews__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.1;
}

.reviews__rating img {
  width: 100px;
  height: 20px;
}

.reviews__rating strong {
  font-weight: 600;
}

/* Розмиті плями — 44:1703…44:1705 */
.reviews__glow {
  position: absolute;
  z-index: 1;
  max-width: none;
  pointer-events: none;
}

.reviews__glow--1 {
  left: -308.7px;
  top: 493.5px;
  width: 449.878px;
  height: 532.468px;
  transform: rotate(-18deg);
}

.reviews__glow--2 {
  left: 468.6px;
  top: -167.3px;
  width: 414.668px;
  height: 353.832px;
  transform: rotate(-46.68deg);
}

.reviews__glow--3 {
  left: -88.7px;
  top: 603.5px;
  width: 449.878px;
  height: 532.468px;
  transform: rotate(-90.78deg);
}

/* Нижня плашка — 68:1218 */
.reviews__cta {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 648px;
  padding: 20px;
  border-radius: 16px;
  background: var(--color-white);
  color: var(--color-black);
  transform: translateX(-50%);
}

.reviews__cta-text {
  position: relative;
  flex: 1 0 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-text-secondary);
}

.reviews__cta .btn {
  flex: 1 0 0;
}

.reviews__sparkle {
  position: absolute;
  max-width: none;
  pointer-events: none;
  transform: rotate(-9.44deg);
}

.reviews__sparkle--big-tl {
  left: -30.02px;
  top: -26.92px;
  width: 31.745px;
  height: 31.745px;
}

.reviews__sparkle--small-tl {
  left: -4.06px;
  top: -26.06px;
  width: 12.991px;
  height: 12.991px;
}

.reviews__sparkle--big-br {
  right: 2.13px;
  bottom: -9.87px;
  width: 31.745px;
  height: 31.745px;
}

.reviews__sparkle--small-br {
  right: -5.1px;
  bottom: 7.1px;
  width: 12.991px;
  height: 12.991px;
}

/* Копія плашки для мобільного (під формою) — на десктопі прихована */
.reviews__cta--standalone {
  display: none;
}

/* Зірочки переливаються, коли плашка з'являється на екрані (js/reviews-sparkles.js).
   Анімуємо scale/opacity/filter — нахил −9.44° тримає transform. */
.reviews__cta.is-twinkling .reviews__sparkle {
  animation: sparkle-twinkle 1.4s ease-in-out 3;
}

.reviews__cta.is-twinkling .reviews__sparkle--small-tl,
.reviews__cta.is-twinkling .reviews__sparkle--small-br {
  animation-delay: 0.35s;
}

.reviews__cta.is-twinkling .reviews__sparkle--big-br {
  animation-delay: 0.2s;
}

@keyframes sparkle-twinkle {
  0%, 100% {
    scale: 1;
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  30% {
    scale: 1.35;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
  }
  55% {
    scale: 0.75;
    opacity: 0.55;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  80% {
    scale: 1.15;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  }
}

@media (max-width: 1199px) {
  .reviews {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .reviews {
    min-height: 750px;
    height: 750px;
    border-radius: 20px 20px 0 0;
  }

  .reviews__content {
    top: 50%;
    gap: 48px;
    padding: 48px 0;
  }

  .reviews__title {
    width: 100%;
    max-width: 351px;
  }

  .reviews {
    --review-scale: 0.215;
    --review-viewport: 250px;
    --card-w: 100vw;
    --fade-w: 42px;  /* mobile, Figma 44:3011 */
  }


  .reviews__track {
    gap: 24px;
  }

  .reviews__slide {
    border-radius: 15px;
  }

  .reviews__rating {
    gap: 4px;
    font-size: 16px;
  }

  .reviews__rating img {
    width: 80px;
    height: 16px;
  }


  .reviews__cta {
    display: none;
  }

  /* Під формою, вертикально: текст, під ним кнопка-телефон на всю ширину.
     margin: у .estimate__inner gap 100 — зменшуємо до 48 зверху й 60 знизу */
  .reviews__cta.reviews__cta--standalone {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: auto;
    margin: -52px var(--gutter) -40px;
    padding: 20px;
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(33, 40, 42, 0.06);
    transform: none;
  }

  .reviews__cta--standalone .reviews__cta-text {
    flex: none;
    font-size: 16px;
  }

  .reviews__cta--standalone .btn {
    flex: none;
  }
}