/* Кнопки. В макете два вида: золотая (hero) и тёмная (оранжевая CTA-полоса). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  text-align: center;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  filter: brightness(1.08);
}

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

/* Hero: 187×49, #d99b2a, текст 22/500 белый (Figma 3016:7583/7584) */
.btn--gold {
  width: calc(187 * var(--u));
  height: calc(49 * var(--u));
  background: var(--color-gold-hero);
  color: var(--color-white);
  font-size: calc(22 * var(--u));
  font-weight: var(--fw-medium);
  line-height: calc(30 / 22);
}

/* CTA-полоса: 210×57, #2c2a28, текст 24/400 белый (Figma 3016:7604/7611) */
.btn--ink {
  width: calc(210 * var(--u));
  height: calc(57 * var(--u));
  background: var(--color-ink);
  color: var(--color-white);
  font-size: calc(24 * var(--u));
  font-weight: var(--fw-regular);
  line-height: calc(33 / 24);
}

@media (max-width: 767px) {
  .btn--gold {
    width: calc(200 * var(--u));
    height: calc(52 * var(--u));
    font-size: calc(20 * var(--u));
  }

  .btn--ink {
    width: calc(220 * var(--u));
    height: calc(56 * var(--u));
    font-size: calc(20 * var(--u));
  }
}