/* Правки кейса MTX Connect по обновлённому макету
   (Figma 46eqDt9RtOKbGDFZiEJm71, нода 517:2293, правки АД 19.08).
   Подключается только на /portfolio/mtx-connect. Токены и шрифты приходят
   из /nav-astro.css. */

/* ─── Основной текст ─────────────────────────────────────────────────────
   В макете абзацы Factor A Regular 22 с интерлиньяжем 130% (28.6px), а на
   странице webflow ставил 120% (26.4px) — текст шёл слишком плотно. */
body .case-paragraph {
  line-height: 1.3;
}

/* ─── Карусель баннеров ──────────────────────────────────────────────────
   Макетная лента (Figma 517:7876): высота 400, баннеры 399.74 (квадратные) и
   761.27 (широкий), зазор 32, скругление 24. На странице было 589 по высоте,
   зазор 16 и прямые углы.
   Селектор :not(._2nd) — вторая лента ниже (скролл сайта) не баннерная,
   её размеры и скорость трогать нельзя. */
/* Ленту двигали ДВЕ петли одновременно: webflow-интеракция IX2 писала треку
   inline transform (≈135 px/с и рывок в начало на каждом обороте) и поверх шла
   CSS-анимация ряда (carousel-scroll). Отсюда и скачки кадров, и то, что
   замедление CSS-петли почти не влияло на видимую скорость (157 px/с).
   Оставляем одну петлю — CSS-анимацию ряда; движение трека снимаем. Здесь
   !important обязателен: он перебивает inline-стиль от IX2. */
.carousel.long {
  transform: none !important;
}

/* Зазор — через margin-right у картинок, а не gap, и без боковых паддингов у
   ленты (правка АД 19.08: цикл дёргался). Анимация webflow сдвигает ленту ровно
   на 50% её ширины, а период повторения контента был на 8px больше: половину
   давал левый паддинг 16, половину — зазор между двумя копиями, который gap
   ставит один раз. С margin-right хвостовой зазор входит в «след» каждой
   картинки, поэтому 50% ширины = длина одной копии и стык незаметен. */
.carousel.images {
  gap: 0 !important;
  padding: 0 !important;
}
.carousel-image.mtx {
  margin-right: 32px;
}
.carousel.images._2nd .carousel-image {
  margin-right: 16px;
}
/* !important — у webflow высота ленты задана селектором с большей
   специфичностью (.carousel.images .carousel-image), иначе 400 не применяется.
   Высоту сбрасываем и на обёртках, иначе под баннерами остаётся пустая полоса
   от прежних 589. Обёртку баннерной ленты отбираем по :has: у второй ленты
   (скролл сайта) те же классы, различаются только картинки внутри. */
.carousel-image.mtx {
  height: 400px !important;
  width: auto !important;
  border-radius: 24px;
}
.carousel.long:has(.carousel-image.mtx),
.carousel.images:not(._2nd) {
  height: 400px !important;
}

/* ─── Блок Team на мобилке ───────────────────────────────────────────────
   Правка АД 19.08: содержимое было прижато к левому краю. Причина — колонка
   Motka Design (.lsp-people-2) выкладывает карточки людей по ширине контента
   (100–140px) при align-items: flex-start, тогда как у колонки MTX карточки
   растянуты классом .center.notleft. Центруем саму колонку. */
@media (max-width: 768px) {
  .lsp-people-2,
  .lsp-people { align-items: center; }
}

/* Десктоп: скорость баннерной ленты — как у карусели на первом экране
   /subscription (≈22 px/с). Анимация webflow сдвигает ленту на 50% её ширины,
   поэтому длительность считается от ширины: 4184/2 / 22 ≈ 96s (было 35s ≈ 85 px/с).
   Галерею сайта не трогаем — у неё остаётся webflow-овская длительность. */
.carousel.images:not(._2nd) {
  animation-duration: 96s !important;
}

/* Мобилка (правка АД 19.08): обе ленты — и баннеры, и галерея сайта в блоке
   «A strategic redesign» — по 240px в высоту. Скорость задана выше единой
   длительностью, поэтому на узком экране лента едет медленнее сама. */
@media (max-width: 768px) {
  .carousel-image.mtx,
  .carousel.images._2nd .carousel-image { height: 240px !important; width: auto !important; }
  /* селектор с .mtx повторяет десктопный один в один: у :has() специфичность
     считается по аргументу, и без него правило было слабее 400px выше */
  .carousel.long:has(.carousel-image.mtx),
  .carousel.long:has(.carousel-image),
  .carousel.images:not(._2nd),
  .carousel.images._2nd { height: 240px !important; }
  .carousel-image.mtx { margin-right: 20px; }
  /* Скорость на мобилке (правка АД 19.08): оборот баннерной ленты 60s,
     галереи сайта — 50s. На узком экране ленты короче, поэтому это ≈21 и
     ≈19 px/с — медленнее десктопных. */
  .carousel.images:not(._2nd) { animation-duration: 60s !important; }
  .carousel.images._2nd { animation-duration: 50s !important; }
}