/* ---------------------------------------------------------- информер baku.ws (эфир + новости)
   Общий для всей семьи tut.az — использует переменные хоста (--surf, --line,
   --tx*, --red, --r, --f-disp, --shadow), поэтому подхватывает палитру
   любого сайта без изменений. */
.newsbar { background: var(--surf); border-bottom: 1px solid var(--line); }
/* padding-block, а не padding: короткая запись обнуляла боковые отступы .wrap
   и текст информера прилипал к краю экрана на мобильных */
.newsbar__row { display: flex; align-items: center; gap: 18px; min-height: 56px; flex-wrap: wrap; padding-block: 8px; }
.newsbar__live {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 6px 13px; border-radius: 999px; background: var(--red); color: #fff;
  font-family: var(--f-disp); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.newsbar__live:hover { filter: brightness(1.08); color: #fff; }
.newsbar .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); animation: nb-ping 2.2s infinite;
}
@keyframes nb-ping { 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
/* по центру, а не по базовой линии: у окна бегущей строки своей базовой линии
   нет (заголовки внутри абсолютные), и подпись съезжала вниз */
.newsbar__item { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--tx); flex: 1; }
.newsbar__lbl { flex-shrink: 0; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }

/* Бегущая строка: заголовки сменяют друг друга, уезжая вверх.
   Окно высотой в --rows строк, сами заголовки лежат друг на друге. */
.newsbar__ticker { position: relative; flex: 1; min-width: 0; overflow: hidden; --fz: .95rem; --rows: 1; height: calc(var(--rows) * 1.3 * var(--fz)); }
.newsbar__t {
  position: absolute; left: 0; right: 0; top: 0;
  font-family: var(--f-disp); font-size: var(--fz); font-weight: 600; line-height: 1.3; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform: translateY(110%); opacity: 0; pointer-events: none;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s;
}
.newsbar__t.is-on  { transform: translateY(0);     opacity: 1; pointer-events: auto; }
.newsbar__t.is-out { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.newsbar__t:hover { color: var(--brand); }
/* один заголовок — крутить нечего, показываем как есть */
.newsbar__ticker:only-child .newsbar__t:first-child:last-child { position: static; transform: none; opacity: 1; }
.newsbar__all { margin-inline-start: auto; flex-shrink: 0; font-size: .82rem; font-weight: 700; color: var(--tx-2); }
.newsbar__all:hover { color: var(--brand); }
@media (max-width: 760px) {
  .newsbar__row { padding-block: 10px; gap: 9px; min-height: 0; }
  .newsbar__item { flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 1px; order: 3; }
  /* заголовок переносится, но не длиннее двух строк — иначе информер съедает пол-экрана */
  /* в колонке flex:1 задаёт основной размер по вертикали и схлопнул бы
     окно в ноль — высоту здесь держит только height */
  .newsbar__ticker { flex: none; --fz: .9rem; --rows: 2; }
  .newsbar__t {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .newsbar__live { order: 1; }
  .newsbar__all { order: 2; margin-inline-start: auto; }
}

.livebtn-hdr {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 999px;
  background: var(--red); color: #fff; font-family: var(--f-disp); font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.livebtn-hdr:hover { filter: brightness(1.08); color: #fff; }

.live { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r); background: #000; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow); }
.live img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .3s, transform .6s; }
.live video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.live__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; display: block; font: inherit; }
.live__btn:hover img { opacity: .78; transform: scale(1.02); }
.live__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%;
  background: var(--red); display: grid; place-items: center; box-shadow: 0 14px 40px -10px var(--red); transition: transform .2s;
}
.live__btn:hover .live__play { transform: translate(-50%, -50%) scale(1.07); }
.live__play svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.live__badge {
  position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--red); color: #fff; font-family: var(--f-disp); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.live__ch { position: absolute; right: 14px; top: 14px; padding: 6px 12px; border-radius: 8px; background: rgba(10, 10, 10, .7); color: #fff; font-size: .74rem; font-weight: 700; }
.live__fail { position: absolute; inset: 0; display: none; place-content: center; text-align: center; padding: 24px; background: rgba(10, 10, 10, .92); color: #fff; }
.live.is-fail .live__fail { display: grid; }
.live__fail p { margin: 0 0 14px; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.livebar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.livemeta { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.livemeta dt { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.livemeta dd { margin: 3px 0 0; font-size: .92rem; }
.livebar .btn { margin-left: auto; }

/* Пользователь просил меньше движения — показываем только первый заголовок. */
@media (prefers-reduced-motion: reduce) {
  .newsbar__t { transition: none; }
}