/* ==========================================================================
   Компонент: кнопка «Записаться»
   Используется в hero (07-hero), в секции 07-cta-mid и 13-cta-final.
   Класс-неймспейс .stlk-cta, чтобы не конфликтовать с другими кнопками сайта.
   ========================================================================== */

.stlk-cta {
  --_bg: var(--stlk-accent);
  --_bg-hover: var(--stlk-accent-dark);
  --_fg: var(--stlk-white);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--stlk-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--stlk-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 18px 34px;
  box-shadow: 0 10px 24px rgba(100, 114, 82, 0.35);
  /* Отклик на pointer-down, не на release — apple-design §1 */
  transition: transform var(--stlk-dur-fast) var(--stlk-ease-standard),
              box-shadow var(--stlk-dur-fast) var(--stlk-ease-standard),
              background var(--stlk-dur-fast) var(--stlk-ease-standard);
  will-change: transform;
}

.stlk-cta:hover {
  background: var(--_bg-hover);
  box-shadow: 0 14px 30px rgba(100, 114, 82, 0.42);
  transform: translateY(-2px);
}

.stlk-cta:active {
  transform: scale(0.97) translateY(0);
  box-shadow: 0 6px 16px rgba(100, 114, 82, 0.32);
  transition-duration: 90ms;
}

.stlk-cta:focus-visible {
  outline: 3px solid var(--stlk-yellow);
  outline-offset: 3px;
}

.stlk-cta__icon {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform var(--stlk-dur-standard) var(--stlk-ease-bounce);
}

.stlk-cta:hover .stlk-cta__icon {
  transform: translateX(3px);
}

/* Второстепенный вариант — на светлой подложке (в hero поверх фото) */
.stlk-cta--ghost {
  --_bg: rgba(255, 255, 255, 0.14);
  --_fg: var(--stlk-white);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.stlk-cta--ghost:hover {
  --_bg-hover: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.stlk-cta--large {
  padding: 20px 44px;
  font-size: 1.1875rem;
}

@media (max-width: 480px) {
  .stlk-cta {
    width: 100%;
    padding: 16px 24px;
  }
}