/* ==========================================================================
   Отзыв (Figma: Страница объекта → Отзыв).
   Ноды: 1920 `78:15795`, 1440 `78:15961`, 1024 `78:16127`, 375 `98:8746`.

   Раскладка из макета:
     375  — колонка: плашка логотипа, цитата с подписью, письмо;
     1024 — две колонки: слева логотип и текст, справа письмо;
     1440 — слева только текст, справа плашка логотипа и письмо рядом.

   Все размеры и кегли — из макета, поэтому здесь много «сырых» px:
   своих ступеней в шкале под 22/28/36/60 и под плашки 320×405 / 440×557 нет.
   ========================================================================== */


.section.case-review {
  margin-top: 10px;
}

.case-review__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 20px;
  background-color: var(--color-grey);
  border-radius: 10px;
}

.case-review__left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- Плашки логотипа ------------------------------------------------------
   Два разных компонента макета: «Логотип компании» (до 1024, в левой колонке)
   и «image logo» (с 1440, во всю высоту правой колонки). */
.case-review__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: 10px;
}

.case-review__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.case-review__logo--inline {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 164px;
  height: 68px;
  padding: 20px 10px;
}

.case-review__logo--box { display: none; }

/* --- Цитата и подпись -----------------------------------------------------*/
.case-review__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.case-review__quote {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-dark-blue);
}

.case-review__sign {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-review__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-dark-blue);
}

.case-review__role {
  font-size: 14px;
  color: var(--text-muted);
}

/* --- Письмо ---------------------------------------------------------------
   Пропорции карточки (440/557) уже заданы в .card-letter, задаём только ширину. */
.case-review__media {
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-review__letter { width: 100%; }

/* --- Планшет 1024 ---------------------------------------------------------*/
@media (min-width: 768px) {
  .case-review__card {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    padding: 30px;
  }

  .case-review__left {
    flex: 0 1 514px;
    justify-content: space-between;
    gap: 60px;
  }

  .case-review__logo--inline {
    width: 193px;
    height: 80px;
  }

  .case-review__text { gap: 36px; }

  .case-review__role { font-size: 16px; line-height: 20px; }

  .case-review__media { flex: 0 0 315px; }
}

/* --- Ноутбук 1440: логотип переезжает в правую колонку отдельной плашкой ---*/
@media (min-width: 1025px) {
  .case-review__card { padding: 40px 50px; }

  .case-review__left { padding-block: 20px; }

  .case-review__logo--inline { display: none; }

  .case-review__logo--box {
    display: flex;
    flex: 0 0 auto;
    width: 320px;
    height: 405px;
  }

  /* Логотип внутри плашки занимает 84,65% её ширины (из макета) */
  .case-review__logo--box img { width: 84.65%; max-width: 84.65%; }

  /* Цитата вверху, подпись прижата к низу колонки */
  .case-review__text {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 60px;
  }

  .case-review__quote { font-size: 24px; line-height: normal; }
  .case-review__name { font-size: 24px; line-height: normal; }
  .case-review__role { font-size: 18px; line-height: 22px; }
  .case-review__sign { gap: 8px; }

  .case-review__media { flex: 0 0 650px; }
  .case-review__letter { width: 320px; }
}

/* --- Десктоп 1920 ---------------------------------------------------------*/
@media (min-width: 1441px) {
  .case-review__left { flex-basis: 696px; }

  .case-review__quote { font-size: 32px; }
  .case-review__name { font-size: 32px; }
  .case-review__role { font-size: 24px; line-height: 30px; }
  .case-review__sign { gap: 12px; }

  .case-review__media { flex: 0 0 912px; gap: 32px; }

  .case-review__logo--box { width: 440px; height: 557px; }
  .case-review__letter { width: 440px; }
}