/* ==========================================================================
   8 блок — «Кто стоит за проектом» — node 743:3011, y 18210–19700
   9 блок — «Наши клиенты» — node 743:3035, y 19952–20597
   Оба блока — коллаж: заголовок «лесенкой» 330px, поверх и вокруг него
   свободно расставлены карточки/логотипы. Координаты сняты с макета:
   по горизонтали в процентах от 12 колонок, по вертикали в rem от верха секции.
   ========================================================================== */

.team {
  position: relative;
  height: 88.6875rem; /* 1419px — до низа последнего портрета */
  margin-top: 17.1875rem; /* 275px от низа слайда 7 блока */
  padding-block: 0;
}

/* --- Карточка сотрудника --------------------------------------------------
   --x — отступ слева от границы секции. У трёх карточек это проценты, снятые
   с макета (свободный коллаж), у первой — calc: её левый край обязан совпадать
   с буквой «К» заголовка, а не «примерно там же».

   Слагаемых три: поле контейнера + --in-display (оптический вынос заголовка
   от линии колонки) + 0.5625rem — левый полуапрош «К» в Coolvetica на кегле
   330px. Полуапрош входит в бокс строки, но не в краску, поэтому без него
   фото вставало заподлицо с боксом и торчало на 9px левее самой буквы.
   Он задан в rem, чтобы сжиматься вместе с кеглем: 0.5625rem = 9px при
   --fs-display-xl 20.625rem. */
.team__card {
  position: absolute;
  left: var(--x);
  top: var(--t);
  display: flex;
  /* Низ фото и низ подписи — на одной линии. Равняем по БАЗОВОЙ линии
     последней строки, а не по её боксу: строка набрана капителью без
     выносных, и при align-items: flex-end она села бы на глубину нижнего
     выносного элемента шрифта выше края фото. В макете подпись стоит именно
     базовой линией на нижнем крае снимка.
     Первая строка — запас для движков без `last baseline`. */
  align-items: flex-end;
  align-items: last baseline;
  gap: 1.875rem; /* 30px от фото до подписи */
}

.team__photo {
  position: relative;
  flex: 0 0 auto;
  width: 17.625rem;  /* 282px */
  margin: 0;
}

.team__photo > img:not(.team__sign) {
  width: 100%;
  aspect-ratio: 282 / 396;
  object-fit: cover;
  filter: grayscale(1);
}

/* росчерк — на нижнем левом углу фото, с выносом наружу */
.team__sign {
  position: absolute;
  left: -0.3125rem;  /* -5px */
  top: 20.125rem;    /* 322px */
  width: var(--w);
  height: auto;
  pointer-events: none;
}

/* Подпись прижата к низу карточки (align-items: flex-end), а не отбита
   отступом сверху. Отступ был снят с макета под трёхстрочную должность
   Динара и у остальных ставил имя произвольно: у кого-то текст свисал ниже
   фото, у кого-то не доходил. Низ фото — единственная общая линия у всех
   четырёх карточек, по ней и равняемся. */
.team__info { margin-top: 0; }

.team__role { margin-top: 1.25rem; }    /* 40px от строки имени */

/* --- 9 блок: клиенты ------------------------------------------------------
   Коллаж из настоящих логотипов: белый заголовок «выбит» по фону, четыре
   лого разложены по координатам макета. Раньше блок стоял одним PNG. */
.clients {
  position: relative;
  margin-top: 20.1875rem;/* 323px от низа портретов */
  padding-block: 0;
}

/* Коробка макета: 1659x725 при 1920. Уже контейнера, поэтому центрируется;
   всё внутри — в rem, то есть тянется корневым кеглем вместе со страницей. */
.clients__block {
  position: relative;
  width: 103.6875rem;  /* 1659px */
  max-width: 100%;
  height: 45.3125rem;  /* 725px */
  margin-inline: auto;
}

.clients__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
}

/* Координаты — левый край и верх строки, как их отдаёт макет. */
.clients__line {
  position: absolute;
  top: var(--y);
  left: var(--x);
  white-space: nowrap;
}

.clients__logo {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: auto;
  z-index: var(--z, 0);
}

/* --- Мобильный макет, 8 блок (952:754, y 12898…13754) ---------------------
   Коллаж остаётся коллажем: карточки абсолютные, координаты свои —
   --xm/--tm рядом с десктопными --x/--t (inline-стиль медиазапросом не
   перебить). Отсчёт от ПОЛЯ секции, как в 5 и 7 блоках, поэтому координаты
   макета идут как есть, без вычитания --container-pad.

   Портреты стоят в шахматном порядке, и у правых подпись идёт ЛЕВЕЕ фото и
   выключена вправо — отсюда team__card--right с row-reverse.

   Вертикаль по макету (от верха секции 12898):
       0…144      заголовок, 2 строки 100/72
       115        Ильгам   288  Динар   461  Руслан   634  Рустам
       (фото 141×198, подпись через 15…17 от фото)
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .team {
    height: 53.5rem;   /* 856px: 12898…13754 (низ росчерка Рустама) */
    margin-top: 0;     /* 7 блок уже довёл страницу до 12898 */
  }

  /* Заголовок делаем слоем, чтобы его координаты считались так же, как у
     карточек, — от поля секции. */
  .team__title {
    position: absolute;
    inset-inline: 0;
    top: 0;
  }

  .team__title > span { display: block; margin-inline: 0; }

  .team__title > span > span {
    display: block;
    width: auto;
    margin-left: var(--mx, 0);
    padding-left: 0;
  }

  .team__card {
    position: absolute;
    left: var(--xm, var(--x));
    top: var(--tm, var(--t));
    gap: 0.9375rem;    /* 15px от фото до подписи */
    margin-top: 0;
  }

  /* У правых карточек подпись слева от фото и выключена вправо */
  .team__card--right {
    flex-direction: row-reverse;
    gap: 1.0625rem;    /* 17px */
    text-align: right;
  }

  .team__photo { width: 8.8125rem; }   /* 141px */

  .team__sign {
    display: block;
    left: var(--sxm);
    top: var(--sym);
    width: var(--swm);
  }

  /* Низ подписи совпадает с низом фото — как на десктопе (align-items:
     flex-end у .team__card). Прежний поштучный отступ сверху (--im на
     карточке) убран вместе с переменной. */
  .team__info { margin-top: 0; }

  /* Должность: строка через одну от имени, ширина своя у каждого — от неё
     зависит перенос (в макете он получается шириной, а не руками). */
  .team__role {
    width: var(--mw, auto);
    margin-top: 0.9375rem;   /* 15px: имя 15 + пустая строка = шаг 30 */
  }

  .team__card--right .team__role { margin-left: auto; }

  .team__role br { display: none; }

/* --- Мобильный макет, 9 блок (952:777, y 13911…14364) ---
   Коллаж собирается и на мобилке — в макете он есть, просто плотнее:
   логотипы стоят между строками белого заголовка. Координаты свои
   (--xm/--ym/--wm), отсчёт от левого края .clients__block, а тот лежит
   внутри .container с полем 15 — поэтому из координаты макета вычтено 15. */
  .clients {
    height: auto;
    margin-top: 9.8125rem;   /* 157px: низ 8 блока 13754 → верх лого АЗС 13911 */
  }

  .clients__block {
    width: 100%;
    height: 28.3125rem;      /* 453px: 13911…14364 */
    margin-inline: 0;
  }

  /* «наши» и «Клиенты» на мобилке набраны кеглем 150, а класс t-display-xl
     даёт 100 — тот же случай, что «Контакты» и «5-7 %». */
  .clients__title {
    position: absolute;
    inset: 0;
    font-size: var(--fs-display-2xl);
  }

  .clients__line {
    position: absolute;
    left: var(--xm, var(--x));
    top: var(--ym, var(--y));
  }

  .clients__logo {
    position: absolute;
    left: var(--xm, var(--x));
    top: var(--ym, var(--y));
    width: var(--wm, var(--w));
    height: auto;
    max-width: none;
  }
}