.solutions {
  padding: 100px 0 40px;
  background: var(--color-solutions-bg);
  overflow: hidden;
}

.solutions__head {
  max-width: 915px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  text-align: center;
}

.solutions__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
}

.solutions__subtitle {
  margin: 15px auto 0;
  max-width: 483px;
  font-size: var(--fs-section-subtitle);
  line-height: var(--lh-section-subtitle);
  color: var(--color-slider-ink);
}

.solutions__subtitle-accent {
  color: var(--color-accent);
}

/* Слайдер */
.solutions-slider {
  position: relative;
}

.solutions-slider__viewport {
  width: 100%;
  /* max-width должен совпадать с .solutions-slider__track ниже — иначе
     клип-рамка (viewport) шире самого трека, несжимаемые (flex:0 0 Npx)
     карточки вылезают за края трека и остаются видны внутри более
     широкого viewport вместо того, чтобы обрезаться по его краю (баг:
     "5 карточек на весь экран", стрелки не на месте — они принадлежат
     верно отцентрованному .solutions-slider, а не сместившемуся треку). */
  max-width: var(--bleed-width);
  /* overflow-x:hidden + overflow-y:visible НЕ работает как "режь только
     по горизонтали": как только у элемента любая ось overflow не visible,
     он становится scroll-container и клипует по ОБЕИМ осям (box-shadow
     всё равно обрезался бы). Вместо этого держим overflow:hidden как есть,
     но специально увеличиваем сам клип-бокс по вертикали (padding), а
     добавленное место компенсируем отрицательным margin, чтобы это не
     сдвигало соседние элементы (заголовок сверху, точки снизу) —
     тени карточек просто попадают внутрь увеличенного бокса и не режутся. */
  padding: 100px 0;
  margin: -100px auto;
  overflow: hidden;
}

/* Число 1700px = --bleed-width (var() нельзя в media query, тот же приём,
   что в product-samples.css). Фейд виден только когда viewport реально
   шире кэпа и по бокам трека есть настоящий зазор — на ноутбучных
   ширинах (<1700px) трек = 100% доступной ширины, обрезать нечего. */
@media (min-width: 1700px) {
  .solutions-slider__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
    mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  }
}

.solutions-slider__track {
  display: flex;
  align-items: center;
  gap: var(--slider-track-gap);
  max-width: var(--bleed-width);
  margin: 0 auto;
  /* min-height, не height: базовый расчёт (карточка стандартной высоты)
     держит тот же скачок-фикс при обычной transition-анимации, что и
     раньше (см. .slider-card ниже) — но если контент карточки из будущей
     WP-админки станет выше стандартного (лишний тег-repeater, заголовок
     в 2 строки вместо 1), трек имеет право вырасти вместе с карточкой,
     а не обрезать её. Компромисс: transition чуть менее гладкая именно
     в момент роста контента сверх нормы — редкий edge case, не обычная
     анимация переключения слайдов. */
  min-height: calc(var(--slider-card-active-height) + var(--slider-track-pad-y) * 2);
  padding: 39px var(--page-gutter) 40px;
  list-style: none;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.solutions-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-slider-nav-arrow);
  box-shadow: var(--shadow-slider-nav);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Ховер (правки 2026-08-05, п.6): +10% от центра и стрелка краснеет за 0,2 с;
   тень при этом не меняется. Стрелка красится через color — SVG
   icons/chevron-arrow рисуется stroke="currentColor".
   .is-hover-target — наведение на соседнюю карточку в эту сторону
   (см. main.js), визуально имитирует :hover самой стрелки. */
.solutions-slider__nav:hover,
.solutions-slider__nav.is-hover-target {
  transform: translateY(-50%) scale(1.1);
  color: var(--color-accent);
}

.solutions-slider__nav:active {
  transform: translateY(-50%) scale(0.97);
}

.solutions-slider__nav--prev {
  left: calc(50% - 192px);
}

.solutions-slider__nav--next {
  right: calc(50% - 192px);
}

.solutions-slider__nav--next .icon--chevron-arrow {
  transform: scaleX(-1);
}

/* Карточка.
   Все размерные свойства, которые различаются у активной/неактивной
   карточки (width/height/font-size/margin/padding), анимируются через
   transition с ОДНОЙ и той же длительностью — иначе часть свойств меняется
   мгновенно, пока остальные плавно едут, и получается дёрганый вид
   (например текст резко перено­сится на другую строку раньше, чем
   карточка закончит увеличиваться). */
.slider-card {
  --slide-transition: 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);

  flex: 0 0 var(--slider-card-width);
  width: var(--slider-card-width);
  /* min-height, не height: раньше карточка была строго фиксированной
     высоты, и если редактор в WP добавит 4-й тег в slide.tags (обычный
     repeater) или напишет заголовок на строку длиннее, .slider-card__image
     (flex:1; min-height:0) сжимался вплоть до почти нулевой высоты —
     фото товара визуально пропадало. С min-height карточка вместо этого
     просто становится выше нормы, изображение не мнётся. */
  min-height: var(--slider-card-height);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgba(15, 15, 20, 0.05);
  transition: flex-basis var(--slide-transition), width var(--slide-transition),
    min-height var(--slide-transition), border-radius var(--slide-transition),
    box-shadow var(--slide-transition);
}

.slider-card.is-active {
  flex-basis: var(--slider-card-active-width);
  width: var(--slider-card-active-width);
  min-height: var(--slider-card-active-height);
  border-radius: 25px;
  box-shadow: 0 25px 60px rgba(15, 15, 20, 0.16);
}

.slider-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 27px;
  color: inherit;
  transition: padding var(--slide-transition);
}

.slider-card.is-active .slider-card__link {
  padding: 30px;
}

.slider-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  opacity: 0.5;
  transition: opacity var(--slide-transition);
}

.slider-card.is-active .slider-card__body {
  opacity: 1;
}

.slider-card__title {
  margin: 0 0 13px;
  font-size: 21px;
  line-height: 29px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-slider-ink);
  transition: font-size var(--slide-transition), line-height var(--slide-transition),
    margin var(--slide-transition);
}

.slider-card.is-active .slider-card__title {
  margin-bottom: 15px;
  font-size: 24px;
  line-height: 32px;
}

.slider-card__badge {
  margin: 0 0 9px;
  font-size: 11px;
  color: var(--color-slider-ink);
  transition: font-size var(--slide-transition), margin var(--slide-transition);
}

.slider-card.is-active .slider-card__badge {
  margin-bottom: 10px;
  font-size: 12px;
}

.slider-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  transition: margin var(--slide-transition);
}

.slider-card.is-active .slider-card__tags {
  margin-bottom: 20px;
}

.slider-card__tag {
  padding: 8px 12px;
  border: 1px solid var(--color-slider-border);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--color-slider-ink);
  white-space: nowrap;
  transition: font-size var(--slide-transition);
}

.slider-card.is-active .slider-card__tag {
  font-size: 12px;
}

.slider-card__image {
  flex: 1;
  min-height: 0;
  margin-bottom: 18px;
  border-radius: 18px;
  overflow: hidden;
  transition: margin var(--slide-transition), border-radius var(--slide-transition);
}

.slider-card.is-active .slider-card__image {
  margin-bottom: 20px;
  border-radius: 20px;
}

.slider-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 58px;
  /* Правый отступ равен верхнему/нижнему (центрирующему иконку по высоте
     58px - 22px иконка = 36px / 2 = 18px), а не произвольным 8px. */
  padding: 0 18px 0 20px;
  border: 1px solid var(--color-slider-pill-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  transition: height var(--slide-transition), padding var(--slide-transition),
    border-color 0.35s ease;
}

.slider-card.is-active .slider-card__cta {
  height: 65px;
  /* (65px - 25px иконка) / 2 = 20px сверху/снизу — столько же справа */
  padding: 0 20px 0 30px;
}

/* Hover (правки 2026-08-05, п.5): заливка пилюли и цвет текста не меняются
   вообще, обводка светло-серая → чуть темнее, а эллипс со стрелкой растёт на
   15% от центра и доворачивается на 45° вправо. Всё за 0,35 с. Только у
   активной карточки — у соседних вместо этого подсвечивается стрелка
   навигации (см. .is-hover-target выше). */
.slider-card.is-active .slider-card__link:hover .slider-card__cta {
  border-color: var(--color-slider-pill-border-hover);
}

.slider-card__cta-label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-slider-ink);
  transition: font-size var(--slide-transition);
}

.slider-card.is-active .slider-card__cta-label {
  font-size: 13px;
}

.slider-card__cta .icon--card-cta {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: width var(--slide-transition), height var(--slide-transition),
    transform 0.35s ease;
}

.slider-card.is-active .slider-card__cta .icon--card-cta {
  width: 25px;
  height: 25px;
}

/* rotate(45deg) — иконка рисует стрелку вверх-вправо (↗), поворот по часовой
   доводит её до горизонтальной (→). Крутится весь SVG, а не только путь
   стрелки: круг вписан в вьюбокс ровно по центру и при повороте вокруг
   центра визуально не меняется. */
.slider-card.is-active .slider-card__link:hover .slider-card__cta .icon--card-cta {
  transform: scale(1.15) rotate(45deg);
}

/* Базовые цвета иконки — после правки п.5 они постоянные, ховер их не трогает. */
.icon--card-cta__circle {
  fill: var(--color-accent);
  transition: fill 0.25s ease;
}

.icon--card-cta__arrow {
  stroke: var(--color-surface);
  transition: stroke 0.25s ease;
}

/* Пагинация */
.solutions-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}

.solutions-slider__dot {
  position: relative;
  width: 50px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--color-slider-dot);
  cursor: pointer;
  transition: background 0.25s ease;
}

/* Увеличенная область клика поверх видимой полоски 50×3px — целиться
   в 3 пикселя неудобно, но раздувать видимый размер точки не нужно. */
.solutions-slider__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 24px;
  transform: translate(-50%, -50%);
}

.solutions-slider__dot:hover {
  background: #c7c7d1;
}

.solutions-slider__dot.is-active {
  background: var(--color-accent);
}

/* Режимы блока (правка 13.1 от 2026-08-11). Режим выбирает main.js по числу
   карточек и ширине окна и выставляет его атрибутом data-slider-mode на
   секции; разбор всех трёх режимов — в шапке solutionsSliderMode() там же.
   Здесь только то, чего JS не делает.

   «static» — блок перестаёт быть слайдером (до трёх карточек на ПК, а одна
   карточка — на любой ширине). Стрелки и точки не «выключены», а не рисуются
   вовсе, поэтому их нет и в дереве доступности. Ряд встаёт по центру: трек
   тянется до --bleed-width, карточки несжимаемые (flex: 0 0 …), и без
   justify-content они прижались бы к левому краю полосы. Размеры карточек в
   этом режиме задаёт тот же .is-active — main.js вешает его на все карточки
   разом, второго набора правил здесь намеренно нет. */
.solutions[data-slider-mode="static"] .solutions-slider__nav,
.solutions[data-slider-mode="static"] .solutions-slider__dots {
  display: none;
}

.solutions[data-slider-mode="static"] .solutions-slider__track {
  justify-content: center;
}

/* Один кадр без анимаций на время пересборки блока при пересечении границы
   600px — тот же приём и та же причина, что у html.is-rescaling в base.css.
   Без него приход .is-active сразу на все карточки статичного режима
   разыгрывался бы как рост 300 → 335 за 0,45 с прямо на глазах у посетителя.
   Специфичность (0,2,0) перебивает и transition самих карточек, и правило
   reduce-motion ниже. */
.solutions.is-rebuilding * {
  transition: none !important;
}

/*
  Мобильная адаптация (600px, база
  390px). Листание свайпом/точками, стрелки скрыты — правило .solutions-slider__nav
  ниже переехало сюда из @media (max-width:960px), снесённого в правках
  2026-08-05, п.18, этап 2. Карточка на мобильном одного размера всегда (без
  активного/неактивного состояния) — вместо дублирования всех модификаторов
  на .slider-card.is-active по отдельности, снимаем разницу целиком:
  is-active отличается от обычной карточки только степенью затемнения
  (.slider-card__body opacity, не трогаем) и активной ссылкой/точкой.
*/
@media (max-width: 599.98px) {
  .solutions-slider__nav {
    display: none;
  }

  .solutions {
    padding-top: min(70px, calc(70 / 390 * 100vw));
  }

  .solutions__head {
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  /* Исключение: градиент-текст появляется только на мобильном (на
     десктопе — плоский --color-ink), тот же приём, что у hero__title-main. */
  .solutions__title {
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(43px, calc(43 / 390 * 100vw));
    --heading-gradient-angle: 103.7deg;
    background: linear-gradient(
      var(--heading-gradient-angle),
      var(--color-heading-dark) 0%,
      var(--color-heading-mid) 40%,
      var(--color-heading-dark) 85%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .solutions__subtitle {
    max-width: min(292px, calc(292 / 390 * 100vw));
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(23px, calc(23 / 390 * 100vw));
    color: var(--color-slider-ink-mobile);
  }

  .solutions__subtitle-accent {
    color: var(--color-slider-accent-mobile);
  }

  /* touch-action:pan-y — на том же элементе, на котором висит обработчик
     жеста (правки 2026-08-05, п.19.1: раньше стояло на треке, а слушатель
     переехал на viewport). Браузеру явно разрешена только вертикальная
     жестовая прокрутка, горизонтальную обрабатывает JS. Именно viewport,
     а не трек: у viewport сверху и снизу padding:100px, трека там нет, и
     свайп, начатый в этих полосах, раньше не ловился вовсе. Треку своё
     правило не нужно — эффективное значение считается пересечением со
     всеми предками, pan-y у viewport накрывает и его. */
  .solutions-slider__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    touch-action: pan-y;
  }

  .solutions-slider__track {
    gap: min(20px, calc(20 / 390 * 100vw));
    padding: min(39px, calc(39 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) min(40px, calc(40 / 390 * 100vw));
  }

  .solutions-slider__dots {
    margin-top: min(25px, calc(25 / 390 * 100vw));
  }

  .slider-card,
  .slider-card.is-active {
    flex-basis: min(280px, calc(280 / 390 * 100vw));
    width: min(280px, calc(280 / 390 * 100vw));
    min-height: min(477px, calc(477 / 390 * 100vw));
    border-radius: min(25px, calc(25 / 390 * 100vw));
  }

  .slider-card__link,
  .slider-card.is-active .slider-card__link {
    padding: min(30px, calc(30 / 390 * 100vw));
  }

  .slider-card__title,
  .slider-card.is-active .slider-card__title {
    margin-bottom: min(15px, calc(15 / 390 * 100vw));
    font-size: min(20px, calc(20 / 390 * 100vw));
    line-height: min(30px, calc(30 / 390 * 100vw));
  }

  .slider-card__badge,
  .slider-card.is-active .slider-card__badge {
    margin-bottom: min(10px, calc(10 / 390 * 100vw));
    font-size: min(12px, calc(12 / 390 * 100vw));
  }

  .slider-card__tags,
  .slider-card.is-active .slider-card__tags {
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
  }

  .slider-card__tag,
  .slider-card.is-active .slider-card__tag {
    font-size: min(12px, calc(12 / 390 * 100vw));
  }

  .slider-card__image,
  .slider-card.is-active .slider-card__image {
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
    border-radius: min(20px, calc(20 / 390 * 100vw));
  }

  .slider-card__cta,
  .slider-card.is-active .slider-card__cta {
    height: min(65px, calc(65 / 390 * 100vw));
    padding: 0 min(20px, calc(20 / 390 * 100vw)) 0 min(30px, calc(30 / 390 * 100vw));
  }

  .slider-card__cta-label,
  .slider-card.is-active .slider-card__cta-label {
    font-size: min(13px, calc(13 / 390 * 100vw));
  }

  .slider-card__cta .icon--card-cta,
  .slider-card.is-active .slider-card__cta .icon--card-cta {
    width: min(25px, calc(25 / 390 * 100vw));
    height: min(25px, calc(25 / 390 * 100vw));
  }

  .solutions-slider__dot {
    width: min(50px, calc(50 / 390 * 100vw));
    height: 2px;
  }
}

/* Правки 2026-08-05, п.2. Перелистывание слайдера — не декоративная
   анимация, а единственный признак того, что слайд сменился: трек
   двигается исключительно CSS-переходом (.solutions-slider__track выше),
   и когда глобальное правило base.css обнуляет длительность у всего
   (@media prefers-reduced-motion, «Уменьшение движения» в системных
   настройках ОС), карточки меняются мгновенно и это читается как
   «слайдер сломан». Автопрокрутки здесь нет, движение запускает только
   сам пользователь, поэтому под reduce-motion не отключаем его совсем,
   а укорачиваем. Специфичность .class (0,1,0) бьёт * (0,0,0) при равном
   !important, поэтому порядок подключения файлов роли не играет.
   Инлайновый transition:none из applyTransform(false) (main.js) это
   правило НЕ перебивает — там обнуляется transition-property, а не
   duration, — и беззвучный перескок клонов остаётся мгновенным, как и
   задумано. */
@media (prefers-reduced-motion: reduce) {
  .solutions-slider__track {
    transition-duration: 0.25s !important;
  }
}

/* Правки 2026-08-05, п.11.3 (решение пользователя — распространить и на
   слайдер главной): трек тянется за зажатой мышью. Пока идёт жест —
   курсор «хватает», выделение текста подавлено, иначе вместо
   перетаскивания тянется выделение по карточкам. Класс вешает/снимает
   main.js на время жеста. Селектор с потомками (0,2,0) нужен, чтобы
   перебить cursor:pointer у ссылок карточек. */
.solutions-slider__track.is-dragging,
.solutions-slider__track.is-dragging * {
  cursor: grabbing;
  user-select: none;
}