/* ============================================================================
   SIGVIN — Block 9 «Opinie / Clienci o współpracy z Nami» (Figma 450:7975, 1440×865)
   Тёмный блок (как block 6): СЛЕВА переключатель фирм (окно из 3 карточек + счётчик
   01/05), СПРАВА меняется отзыв (проект / период / стоимость / цитата / автор + фото).
   Все обводки = Linear 8% (дефолтный gframe, как block 6). Логика — reviews.js.
   Схема-чередование: блок RECESSED (z-index 1) — блок 8 наезжает сверху.
   ========================================================================== */

.reviews {
  position: relative;
  z-index: 1;                          /* под блоком 8 (он выступает) */
  width: var(--frame-w);
  max-width: 100%;
  /* тянется на весь экран: видимая тёмная полоса = высота − 144 (наезд блока 8
     сверху + блока 10 снизу по 72px) ≥ 100vh, поэтому на фуллскрине виден ТОЛЬКО
     чёрный блок без белых кромок соседей; минимум 800px */
  min-height: max(800px, calc(100vh + 144px));
  margin: -72px auto 0;                /* наезд предыдущего блока сверху */
  border-radius: var(--r-card);        /* 40 */
  background: var(--dark-black);
  overflow: hidden;
  isolation: isolate;
}
.reviews__grid {
  position: absolute;
  inset: 0;                            /* паттерн по центру всего блока, за контентом */
  background: url('/assets/ui/grid-dark.svg') center / 1440px auto no-repeat;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
/* контент по ЦЕНТРУ ВИДИМОЙ части блока: сверху наезжает блок 8, снизу — блок 10
   (по 72px), поэтому компенсируем оба наезда вертикальным padding 72/72 и центруем —
   контент ровно по середине видимой тёмной полосы (без перекоса к низу/верху). */
.reviews__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  padding: 72px 80px;
}

/* ---- header -------------------------------------------------------- */
.reviews__head {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.reviews__heading { color: var(--light-white); white-space: nowrap; }

/* ---- body ---------------------------------------------------------- */
.reviews__body {
  position: relative;
  width: 1280px; max-width: 100%;
  height: 432px;
  display: flex; gap: 25px;
}

/* ---- слева: переключатель фирм -------------------------------------- */
.reviews__nav { width: 325px; flex: none; display: flex; flex-direction: column; gap: 26px; }
.reviews__cards { height: 370px; overflow: hidden; }
.reviews__track {
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.review-tab {
  flex: none;
  height: 118px;
  padding: 8px;
  border-radius: 20px;
  background: var(--dark-light);
  cursor: pointer;
  text-align: left;
}
.review-tab__inner {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 12px;
  background: var(--dark-32);
  overflow: hidden;
  transition: background-color .4s ease;
}
.review-tab.is-active .review-tab__inner { background: var(--dark-black); }
.review-tab__num {
  position: absolute; top: 12px; right: 16px;
  color: var(--light-32);
  transition: color .4s ease;
}
.review-tab.is-active .review-tab__num { color: var(--light-white); }
.review-tab__logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  max-height: 64px;                 /* высокие лого (PROJPRZEM) не перерастают карточку */
  object-fit: contain;              /* НЕ растягивать: сохраняем пропорции (фикс PROJPRZEM) */
  filter: brightness(0) invert(1);  /* лого БЕЛОЕ, как в Figma */
  opacity: .38;
  transition: opacity .4s ease;
}
.review-tab.is-active .review-tab__logo { opacity: 1; }

.reviews__counter { width: 100%; justify-content: center; }
.reviews__counter b { color: var(--light-white); font-weight: inherit; }
.reviews__counter i { color: var(--light-32); font-style: normal; }

/* ---- справа: панель отзыва ------------------------------------------ */
.reviews__panel {
  position: relative;
  flex: 1 0 0; min-width: 0;
  height: 432px;
  border-radius: 24px;
  background: var(--dark-light);
  overflow: hidden;
}
.reviews__content {
  position: relative; z-index: 1;
  width: 604px;
  height: 100%;
  padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.reviews__top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 508px; }
.reviews__project {
  width: 100%;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 16px;
  background: var(--dark-black);
}
.reviews__project-label { color: var(--light-48); }
.reviews__project-name { color: var(--light-white); }
.reviews__meta { display: flex; flex-direction: column; gap: 8px; }
.reviews__meta-row { display: flex; align-items: center; gap: 16px; color: var(--light-48); }
.reviews__meta-row b { color: var(--light-white); font-weight: inherit; }
.reviews__quote {
  width: 509px; max-width: 100%;
  color: var(--light-white);
  font: 700 28px/32px "adineue PRO Cyr", sans-serif;
  letter-spacing: 0.02em;
}
.reviews__author { display: flex; align-items: center; gap: 16px; color: var(--light-48); }
.reviews__dot {
  flex: none; width: 4px; height: 4px;
  background: var(--light-white);
  border-radius: 0 1.5px 0 1.5px;
}

/* попап с фото проекта */
.reviews__popup {
  position: absolute; left: 604px; top: 12px;
  width: 314px; height: 408px;
  border-radius: 12px;
  background: var(--dark-black);
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 12px;
  align-items: center;
}
.reviews__photo {
  flex: 1 0 0; width: 100%; min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}
.reviews__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reviews__photo:hover .reviews__photo-img { transform: scale(1.06); }   /* зум фото на ховере */
.reviews__cta { display: flex; align-items: center; gap: 8px; color: var(--light-white); white-space: nowrap; }
.reviews__cta svg { width: 20px; height: 20px; transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1); }
.reviews__cta:hover svg { transform: rotate(-45deg); }   /* стрелка → ↗ */

/* декоративные кавычки */
.reviews__qmark {
  position: absolute; z-index: 0;
  width: 77px; height: 65px;
  background: var(--light-8);
  -webkit-mask: url('/assets/reviews/quote-mark.svg') center / contain no-repeat;
          mask: url('/assets/reviews/quote-mark.svg') center / contain no-repeat;
  pointer-events: none;
  transition: opacity .4s ease, filter .4s ease, transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.reviews__qmark--open  { left: 16px;  top: 197px; }
.reviews__qmark--close { left: 480px; top: 351px; transform: rotate(180deg); }   /* левее, чтобы не наезжать на фото */

/* смена контента: fade + blur (как block 6) */
.reviews__project, .reviews__meta, .reviews__quote, .reviews__author, .reviews__photo-img {
  transition: opacity .4s ease, filter .4s ease, transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.reviews__panel.is-switching .reviews__project,
.reviews__panel.is-switching .reviews__meta,
.reviews__panel.is-switching .reviews__quote,
.reviews__panel.is-switching .reviews__author,
.reviews__panel.is-switching .reviews__photo-img {
  opacity: 0; filter: blur(10px); transform: translateY(10px);
}
/* кавычки тоже появляются при переключении (#1) — сохраняем rotate у закрывающей */
.reviews__panel.is-switching .reviews__qmark--open  { opacity: 0; filter: blur(10px); transform: translateY(10px); }
.reviews__panel.is-switching .reviews__qmark--close { opacity: 0; filter: blur(10px); transform: rotate(180deg) translateY(10px); }

@media (prefers-reduced-motion: reduce) {
  .reviews__track, .review-tab__inner, .review-tab__num, .review-tab__logo, .reviews__qmark,
  .reviews__project, .reviews__meta, .reviews__quote, .reviews__author, .reviews__photo-img { transition: none; }
}

/* ---- мобайл (≤767, фрейм 375 — node 463:5886): в колонку ---- */
@media (max-width: 1024px) {
  .reviews { width: 100%; min-height: 0; height: auto; margin-top: 0; }
  .reviews__inner { position: static; padding: 48px 16px; gap: 32px; }
  .reviews__heading { white-space: normal; font-size: 40px; line-height: 48px; text-wrap: balance; }   /* balance — 3 сбалансированные строки вместо 4 с висячим «o» */
  .reviews__body { flex-direction: column; width: 100%; height: auto; gap: 24px; }
  /* переключатель фирм — горизонтальный скролл */
  .reviews__nav { width: 100%; }
  .reviews__cards { height: auto; overflow-x: auto; overflow-y: hidden; }
  .reviews__cards::-webkit-scrollbar { display: none; }
  .reviews__track { flex-direction: row; gap: 8px; transform: none !important; }
  /* #8 плашки-фирмы 276px. Плашка активного = ТЁМНАЯ (как было, дефолт .is-active),
     белеет САМО лого (дефолт: filter brightness(0) invert(1), opacity .38→1) — не трогаем. */
  .review-tab { flex: 0 0 276px; height: 96px; }
  .reviews__counter { display: none; }

  /* #9 панель отзыва 1:1 с Figma 463:5942: тёмная rounded-24, контент → карточка-фото снизу,
     кавычки видимы (декор за контентом) */
  .reviews__panel {
    width: 100%; height: auto; min-height: 0; flex: none;
    display: flex; flex-direction: column; gap: 24px;
    padding: 24px 12px 12px;
  }
  .reviews__content {
    position: relative; z-index: 1;
    width: 100%; height: auto; padding: 0 12px; gap: 16px;
    justify-content: flex-start;
  }
  .reviews__top { width: 100%; }
  .reviews__quote { width: 100%; font-size: 20px; line-height: 28px; }
  /* карточка-фото снизу (была скрыта) */
  .reviews__popup {
    position: static; left: auto; top: auto;
    width: 100%; height: 190px;
  }
  /* кавычки-скобки видимы, позиции по Figma (декор, за контентом) */
  .reviews__qmark { display: block; }
  .reviews__qmark--open  { left: 16px;  top: 196px; }
  .reviews__qmark--close { left: 244px; top: 350px; transform: rotate(180deg); }
}