/* «הכי טוב לשמוע מאחרים» — Figma y 2490–3363 (h 873).
   Фото бейт-мидраша + navy-оверлей @0.8, три speech-bubble (белая заливка,
   оранжевый контур — SVG-пары из Figma), внизу ссылка «לכל התגובות». */

.testimonials {
  position: relative;
  height: calc(873 * var(--u));
  overflow: hidden;
  background: var(--color-navy);
  isolation: isolate; /* stacking context: фото с z-index:-1 остаётся над фоном секции */
}

/* Фото сдвинуто влево на 210px (Figma 3016:7623, 1785×873) */
.testimonials__photo {
  position: absolute;
  left: calc(-210 * var(--u));
  top: 0;
  width: calc(1785 * var(--u));
  max-width: none; /* фото шире канвы по макету — глобальный img-reset не должен клампить */
  height: calc(873 * var(--u));
  object-fit: cover;
  direction: ltr;
  z-index: -1; /* фото в канве, оверлей на секции: держим фото под оверлеем */
}

.testimonials__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-navy);
}

.testimonials__title {
  position: absolute;
  top: calc(138 * var(--u));
  left: 0;
  width: 100%;
  color: var(--color-white);
  line-height: calc(115.6 / 85);
}

/* ---------- Баблы. Контейнер — точный box контурного SVG из Figma,
   внутренние элементы — в процентах от контейнера (масштабируются на мобиле). */
.bubble {
  position: absolute;
}

.bubble__outline,
.bubble__fill {
  position: absolute;
}

.bubble__outline {
  inset: 0;
  width: 100%;
  height: 100%;
}

.bubble__text {
  position: absolute;
  text-align: center;
  color: var(--color-black);
}

.bubble__quote {
  font-size: calc(24 * var(--u));
  font-weight: var(--fw-light);
  line-height: 1.36;
}

.bubble__name {
  display: block;
  margin-top: calc(8 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: var(--fw-light);
}

/* Правый бабл — שגיא לניאדו (428×344 на (954,305)) */
.bubble--r { left: calc(954 * var(--u)); top: calc(305 * var(--u)); width: calc(428 * var(--u)); height: calc(344 * var(--u)); }
.bubble--r .bubble__fill { left: 7.94%; top: 8.14%; width: 86.9%; height: 83.4%; }
.bubble--r .bubble__text { left: 21.96%; top: 15.1%; width: 61.7%; }

/* Центральный бабл — דניאל נבון (448×321 на (496,309)) */
.bubble--c { left: calc(496 * var(--u)); top: calc(309 * var(--u)); width: calc(448 * var(--u)); height: calc(321 * var(--u)); }
.bubble--c .bubble__fill { left: 4.69%; top: 4.67%; width: 91.1%; height: 85.1%; }
.bubble--c .bubble__text { left: 16.96%; top: 17.76%; width: 68.75%; }

/* Левый бабл — גל אחרק (461×356 на (33,279)) */
.bubble--l { left: calc(33 * var(--u)); top: calc(279 * var(--u)); width: calc(461 * var(--u)); height: calc(356 * var(--u)); }
.bubble--l .bubble__fill { left: 6.07%; top: 7.58%; width: 87.6%; height: 85.4%; }
.bubble--l .bubble__text { left: 21.26%; top: 23.88%; width: 64.2%; }

/* Ссылка «לכל התגובות» — 20/300 белый, плашка tan (Figma 3016:7681/7682) */
.testimonials__link-row {
  position: absolute;
  top: calc(708 * var(--u));
  left: 0;
  width: 100%;
  text-align: center;
}

.testimonials__link {
  font-size: calc(20 * var(--u));
  font-weight: var(--fw-light);
  color: var(--color-white);
  transition: opacity var(--transition-fast);
}

.testimonials__link:hover {
  opacity: 0.8;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .testimonials {
    height: auto;
    padding: calc(52 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u));
  }

  .testimonials__photo {
    left: 0;
    width: 100%;
    height: 100%;
  }

  .testimonials__title {
    position: relative;
    top: auto;
    color: var(--color-white);
  }

  .bubble {
    position: relative;
    left: auto;
    top: auto;
    margin: calc(28 * var(--u)) auto 0;
  }

  .bubble--r { width: calc(336 * var(--u)); height: auto; aspect-ratio: 428 / 344; }
  .bubble--c { width: calc(348 * var(--u)); height: auto; aspect-ratio: 448 / 321; }
  .bubble--l { width: calc(352 * var(--u)); height: auto; aspect-ratio: 461 / 356; }

  .bubble__quote {
    font-size: calc(17 * var(--u));
    line-height: 1.4;
  }

  .bubble__name {
    font-size: calc(14 * var(--u));
    margin-top: calc(6 * var(--u));
  }

  .testimonials__link-row {
    position: relative;
    top: auto;
    margin-top: calc(36 * var(--u));
  }

  .testimonials__link {
    font-size: calc(16 * var(--u));
  }
}