/* Переменные приходят инлайном на .textbanner через style="--var: value" */
.textbanner__text p {
    margin: 0;
}

.textbanner{
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--tb-radius, 10px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  color: var(--tb-color, #fff);
  isolation: isolate;
  margin-bottom: 25px;

  /* Анимированный градиент */
  background: linear-gradient(135deg,
    var(--tb-grad-from, #008198),
    var(--tb-grad-mid,  #29b8cf),
    var(--tb-grad-to,   #008198));
  background-size: 300% 300%;
  animation: tbGradient 12s ease-in-out infinite;

  transition: box-shadow .2s ease, transform .2s ease;
}
.textbanner:hover,
.textbanner:focus-within{
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transform: translateY(-1px);
}

/* Уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .textbanner{ animation: none; }
}
@keyframes tbGradient{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Ссылка растягивается на весь блок */
.textbanner__link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 76px;
  padding: var(--tb-padding-y, 14px) var(--tb-padding-x, 18px);
  color: inherit;
  text-decoration: none;
}

/* Фикс цвета (не даём теме красить в зелёный) */
.textbanner__link,
.textbanner__link:visited,
.textbanner__link:hover,
.textbanner__link:focus,
.textbanner__link:active{
  color: var(--tb-color, #fff) !important;
  text-decoration: none !important;
}

/* Иконка Font Awesome слева */
.textbanner__fa{
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  margin-right: .6rem;
  vertical-align: middle;
  color: currentColor;
}

/* Текст */
.textbanner__text{
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  letter-spacing: .2px;
  font-size: clamp(16px, 2.2vw, 22px);
}
.textbanner__text .brand{
  font-weight: 800;
  white-space: nowrap;
}

/* Стрелка справа */
.textbanner__icon{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  opacity: .9;
}
@media (max-width: 420px){
  .textbanner__icon{ display: none; }
}

/* Доступность при клавиатуре */
.textbanner__link:focus-visible{
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 2px;
  border-radius: var(--tb-radius, 10px);
}