/*
  components/photo-quote.njk — фото слева + фейд + плоский заголовок +
  цитата с полосой слева. Зеркальный аналог cta-card__media/gradient (там
  фото справа, fade "to left"; здесь фото слева, fade "to right" — те же
  два стопа, посчитанные от противоположного края, см. комментарий в самих
  модификаторах ниже про пересчёт чисел из Figma).
*/
.photo-quote {
  background: var(--color-solutions-bg);
  padding: var(--pq-margin-top, 0) 30px var(--pq-margin-bottom, 0);
}

.photo-quote__card {
  position: relative;
  display: flex;
  min-height: var(--pq-min-height);
  overflow: hidden;
  border-radius: 50px;
  background: linear-gradient(var(--pq-card-angle, 115deg), var(--color-card-tint-1) 0%, var(--color-card-tint-2) 46.169%, var(--color-card-tint-1) 100%);
  max-width: var(--wide-content-width);
  margin-inline: auto;
}

.photo-quote__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--pq-media-width);
  overflow: hidden;
  pointer-events: none;
}

.photo-quote__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pq-object-position, 50% 100%);
}

/* Направление "to right" вместо "to left" у cta-card — фото здесь слева,
   фейд-в-фон должен быть у правого края (там, где текст), а не у левого. */
.photo-quote__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) var(--pq-gradient-stop), var(--color-card-tint-1) 100%);
}

.photo-quote__content {
  position: relative;
  z-index: 1;
  padding: var(--pq-pad-y) 40px var(--pq-pad-y) var(--pq-content-pad-left);
}

.photo-quote__heading {
  margin: 0 0 20px;
  max-width: var(--pq-heading-max-width, 667px);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
}

.photo-quote__accent {
  color: var(--color-accent);
}

.photo-quote__quote {
  position: relative;
  max-width: var(--pq-quote-max-width, 522px);
  padding-left: 20px;
}

.photo-quote__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 5px;
  background: var(--pq-quote-bar);
}

.photo-quote__quote p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}

/* Модификатор — блок «После поставки вы не остаётесь...» (159:5335). */
.service-support-highlight {
  --pq-margin-top: 60px;
  --pq-min-height: 450px;
  --pq-card-angle: 112.49deg;
  --pq-media-width: max(600px, 68%);
  --pq-object-position: 50% 50%;
  --pq-gradient-stop: 42%;
  --pq-content-pad-left: max(560px, 46%);
  --pq-pad-y: 75px;
  --pq-heading-max-width: 667px;
  --pq-quote-max-width: 522px;
  --pq-quote-bar: var(--color-quote-bar-support);
}

/* Модификатор — блок «Удобный канал связи с сервисной командой» (159:5259). */
.service-app-cta {
  --pq-margin-bottom: 90px;
  --pq-min-height: 360px;
  --pq-card-angle: 117.36deg;
  --pq-media-width: max(650px, 75%);
  --pq-object-position: 50% 32%;
  --pq-gradient-stop: 45%;
  --pq-content-pad-left: max(560px, 43%);
  --pq-pad-y: 65px;
  --pq-heading-max-width: 667px;
  --pq-quote-max-width: 522px;
  --pq-quote-bar: var(--color-quote-bar-app);
}

/*
  Мобильная адаптация (600px,
  база 390px). Структурная перестройка обоих мест использования (блоки 3 и
  7 макета): на десктопе фото слева/текст справа (media — absolute слева,
  content — со сдвигом padding-left); на мобильном текст сверху в карточке,
  фото — отдельная полоса СНИЗУ, с наездом на нижнюю часть карточки (у
  support-highlight ещё и торчит ниже её края — card остаётся overflow:visible,
  чтобы не обрезать протуберанец, а скругление снизу берёт на себя сам
  .photo-quote__media). Геометрия (высота карточки/фото, наезд) у двух
  модификаторов своя — переменные --pq-mobile-* на классах ниже.
*/
@media (max-width: 599.98px) {
  .photo-quote {
    padding-left: min(10px, calc(10 / 390 * 100vw));
    padding-right: min(10px, calc(10 / 390 * 100vw));
  }

  /* На десктопе headingLines разбит на строки под ДЕСКТОПНУЮ ширину — на
     мобильном (330px, другой font-size) та же жёсткая разбивка ломается
     ещё раз внутри себя. Заголовок должен течь одним потоком с
     естественными переносами — жёсткий <br> между группами скрываем. */
  .photo-quote__linebreak {
    display: none;
  }

  .photo-quote__card {
    display: block;
    position: relative;
    overflow: visible;
    min-height: var(--pq-mobile-card-height);
    max-width: min(370px, calc(370 / 390 * 100vw));
    margin-inline: auto;
    border-radius: min(30px, calc(30 / 390 * 100vw));
    background: linear-gradient(94deg, var(--color-card-tint-1) 0%, var(--color-card-tint-2) 46.169%, var(--color-card-tint-1) 100%);
  }

  .photo-quote__media {
    display: block;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--pq-mobile-media-bottom, 0px);
    width: 100%;
    height: var(--pq-mobile-media-height);
    border-radius: 0 0 min(30px, calc(30 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }

  .photo-quote__media img {
    object-position: var(--pq-mobile-object-position, 50% 50%);
  }

  .photo-quote__content {
    padding: min(50px, calc(50 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) 0;
  }

  .photo-quote__heading {
    max-width: none;
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
    font-size: var(--pq-mobile-heading-fs);
    line-height: var(--pq-mobile-heading-lh);
  }

  /* padding-left 15px, не 20: бокс цитаты = 310 − padding, а строке «Через
     мобильное приложение Pharmaservice» нужно 291.8px — при 20px не хватало
     1.8px и строка переносилась после «приложение» (5 строк вместо
     макетных 4). Второй потребитель компонента (support-highlight) к ширине
     бокса в диапазоне 290–300px нечувствителен, его раскладка не едет. */
  .photo-quote__quote {
    max-width: none;
    padding-left: min(15px, calc(15 / 390 * 100vw));
  }

  .photo-quote__quote::before {
    width: min(3px, calc(3 / 390 * 100vw));
  }

  .photo-quote__quote p {
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
  }

  /* Блок «После поставки вы не остаётесь...» (226:6013). Фото торчит ниже
     нижнего края карточки на 44px (не заподлицо, как у app-cta ниже) —
     bottom отрицательный. Отрицательное значение — max(), не min()
     (поправка формулы для
     отрицательных чисел). */
  .service-support-highlight {
    --pq-margin-top: min(60px, calc(60 / 390 * 100vw));
    --pq-margin-bottom: min(54px, calc(54 / 390 * 100vw));
    --pq-mobile-card-height: min(699px, calc(699 / 390 * 100vw));
    --pq-mobile-media-height: min(398px, calc(398 / 390 * 100vw));
    --pq-mobile-media-bottom: max(-44px, calc(-44 / 390 * 100vw));
    --pq-mobile-object-position: 0% 50%;
    /* 28px, не 30: контент-бокс 310px (370 − 30 − 30), а фильтр typo
       склеивает предлог неразрывным пробелом — токен «С ОБОРУДОВАНИЕМ» при
       30px это 320.7px, шире бокса, переносить нечего и строка торчала
       наружу. 29px (ровно 310.0px) не берём — нулевой запас, движки
       расходятся в замере текста на ~3%. line-height 46px не трогать:
       под него посчитана высота карточки (699px). */
    --pq-mobile-heading-fs: min(28px, calc(28 / 390 * 100vw));
    --pq-mobile-heading-lh: min(46px, calc(46 / 390 * 100vw));
  }

  .service-support-highlight .photo-quote__media::after {
    background: linear-gradient(
      180deg,
      var(--color-photo-quote-fade-support) 0%,
      rgba(238, 238, 245, 0) 28%,
      rgba(238, 238, 245, 0) 77%,
      var(--color-photo-quote-fade-support) 100%
    );
  }

  /* Блок «Удобный канал связи с сервисной командой» (226:6156). Фото
     заканчивается заподлицо с низом карточки (bottom:0, без торчания) —
     фейд только сверху, точные проценты/цвет взяты из макета как есть. */
  .service-app-cta {
    --pq-margin-bottom: min(60px, calc(60 / 390 * 100vw));
    --pq-mobile-card-height: min(684px, calc(684 / 390 * 100vw));
    --pq-mobile-media-height: min(433px, calc(433 / 390 * 100vw));
    --pq-mobile-media-bottom: 0px;
    /* Дефолтные 50% 50%: прежние 20% по вертикали не работали (при рамке
       370×433 cover даёт минимально возможный зум, фото совпадает с
       контейнером по высоте в ноль — обрезать нечего). Кроп этого блока
       целиком на transform ниже; два механизма кропа на одном элементе —
       известные грабли проекта, не наслаивать. */
    --pq-mobile-object-position: 50% 50%;
    /* 26px, не 27: строка «СВЯЗИ С СЕРВИСНОЙ» при 27px = 300.8px против
       бокса 310px — запас 3%, на нём движки расходятся и макетная раскладка
       в 3 строки срывается на 4. При 26px строка 289.6px (93% бокса).
       line-height 39px не трогать: под него посчитана высота карточки. */
    --pq-mobile-heading-fs: min(26px, calc(26 / 390 * 100vw));
    --pq-mobile-heading-lh: min(39px, calc(39 / 390 * 100vw));
  }

  /* Приближение кадра телефона к макету (в макете фото примерно в 1.5 раза
     крупнее, сдвинуто вправо, низ телефона уходит за нижний край карточки).
     object-position здесь бессилен — см. комментарий выше; обрезка
     бесплатная, у .photo-quote__media уже стоит overflow:hidden и на нём же
     скругление нижних углов. Проценты/scale безразмерны — формула
     min(N, calc(N/390*100vw)) не нужна, масштабируется само.
     Правится только множитель, шагом 0.05; transform-origin не трогать. */
  .service-app-cta .photo-quote__media img {
    transform: scale(1.5);
    transform-origin: 4% 0;
  }

  .service-app-cta .photo-quote__media::after {
    background: linear-gradient(180deg, var(--color-photo-quote-fade-app) 0%, rgba(237, 237, 245, 0) 38%);
  }
}