/* position: fixed (not overflow: hidden) — overflow on body breaks the sticky
   header (see base.css), and on iOS Safari overflow: hidden alone doesn't even
   stop touch-scrolling. `top` is set inline in JS to the negative scroll offset. */
.no-scroll {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.no-scroll--soft {
  overflow: hidden;
  touch-action: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-semibold);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  white-space: nowrap;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

.btn--link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
  font-family: var(--font-body-semibold);
  font-size: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
  line-height: 100%;
}

.btn--link__text {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-block; /* Потрібно для коректної роботи transform */
  transition: transform 0.3s ease; /* Робить збільшення плаmatching */
}

.btn--link__arrow {
  height: clamp(1rem, 0.725rem + 1.375vw, 2.375rem);
}

@media (min-width: 961px) {
  .btn--link {
    line-height: 2.563rem;
  }
}