/*
  Сквозной компонент «кнопка». Разметка — components/button.njk (макрос).
  Варианты добавляются модификатором .btn--<variant> по мере вёрстки
  новых блоков (пока в макете встретилась только тёмная pill-кнопка).
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn__icon {
  transition: transform 0.2s ease, color 0.2s ease;
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* Ховер: белая линия прорисовывается слева направо вдоль всего текста
   за 0,3 с (правки 2026-08-05, п.7). scaleX от левого края, а не
   анимация width — не заставляет браузер пересчитывать раскладку. */
.btn__label {
  position: relative;
}

.btn__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--color-surface);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.btn:hover .btn__label::after {
  transform: scaleX(1);
}

.btn:active {
  transform: translateY(1px);
}

/* Тёмная pill-кнопка (например, «Подобрать решение» в хедере) */
.btn--dark {
  padding: 16px 25px 19px;
  background: linear-gradient(to bottom, var(--color-dark-800), var(--color-dark-900));
  color: var(--color-surface);
}

.btn--dark:hover {
  background: linear-gradient(to bottom, #2c3543, var(--color-dark-900));
}

.btn--dark:hover .btn__icon {
  color: var(--color-accent);
}

/* Крупная акцентная pill-кнопка (например, «Каталог оборудования» в CTA-блоке консультации) */
.btn--accent {
  height: 70px;
  padding: 0 40px;
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: var(--fs-button-lg);
}

/* Ховера у .btn--accent/.btn--accent-compact своего нет: заливка на ховере не
   меняется вообще (правки 2026-08-05, п.7 — приёмка). Раньше был
   filter:brightness(0.92), он остался с прежнего ховера и заметно притемнял
   красный; весь отклик теперь общий для всех вариантов — белая линия под
   текстом и сдвиг стрелки (см. .btn__label::after выше). */

/* Компактная акцентная pill-кнопка — та же сплошная заливка и высота
   70px, что у .btn--accent, но горизонтальный padding меньше (30px, не
   40px) — уже сверено с Figma-узлом 159:5460 (контактная страница;
   тот же вариант используется и в hero сервисной страницы, 159:5331 —
   кнопка стоит прямо на фоне, не внутри белой pill-подложки actions). */
.btn--accent-compact {
  height: 70px;
  padding: 0 30px;
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: var(--fs-button-lg);
}

/*
  Белая пилюля-кнопка карточки с круглой стрелкой (443:3408 — карточка
  модели). Геометрия ровно та же, что у кнопки карточки каталога
  (.product-card__cta) и карточки слайдера главной: высота 65, отступы
  0 20 0 30, обводка --color-slider-pill-border, кегль 13/26. Там она
  написана прямо в стилях этих блоков; здесь заведена вариантом сквозной
  кнопки, чтобы новый блок не стал третьей копией.

  min-height, а не height: редактор впишет свою надпись, и длинная должна
  переноситься, увеличивая пилюлю, а не вылезать из неё (отсюда же
  white-space:normal вместо базового nowrap).
*/
.btn--card {
  justify-content: space-between;
  width: 100%;
  min-height: 65px;
  padding: 0 20px 0 30px;
  border: 1px solid var(--color-slider-pill-border);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  white-space: normal;
  transition: border-color 0.35s ease;
}

.btn--card .btn__label {
  line-height: 26px;
}

/* Белая линия под текстом (базовый ховер .btn) на светлой пилюле не
   видна — у этого варианта отклик другой, см. ховер в model-card.css. */
.btn--card .btn__label::after {
  content: none;
}

.btn--card .btn__icon {
  display: flex;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}