@charset "UTF-8";
/* =========================================================
   source-tabs.css — переключатель источника видео
   ----
   НОВОЕ · Figma (фрейм «Source Tab States»). Имена наши,
   на сайте dbrus.ru пока НЕ встречаются — помечать как «новое».

   Ряд табов над/под плеером: каждый таб — кнопка-источник
   (YouTube, VK Видео…). Активный источник заливается пшеничным,
   неактивный — прозрачный, на наведении — тёплый кремовый.
   Острые углы (бренд), без скруглений и теней.

   Цвета 1:1 с макетом:
     idle  · текст --brand-main-base, фон прозрачный
     hover · фон  --brand-third-base (#e6e1db)
     active· фон  --brand-second-mid (#ebd3af)

   Markup (рабочий контракт — атрибут data-tab, его читает video-reviews.js):
     <div class="source-tabs" role="tablist" aria-label="Источник видео" data-tabs="video-source">
       <button class="source-tab is-active" type="button"
               role="tab" aria-selected="true" data-tab="vk">
         <span class="source-tab__label">VK Видео</span>
       </button>
       <button class="source-tab" type="button"
               role="tab" aria-selected="false" data-tab="youtube">
         <span class="source-tab__label">YouTube</span>
       </button>
     </div>

   Состояние (активный таб) = `.is-active` + `aria-selected="true"`.
   Переключение — локальный обработчик [data-tabs="video-source"] в
   video-reviews.js (читает data-tab, НЕ data-source).
   ========================================================= */

/* ---- Ряд табов ---- */
.source-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 0.4rem;
  /* Базовая линия под табами — таб-бар «садится» на хайрлайн. */
  border-bottom: 0.1rem solid var(--brand-main-low);
}

/* ---- Одиночный таб-источник ---- */
.source-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  height: 6rem; /* 60px @ полный масштаб; rem — чтобы скейлилось с --size-index */
  padding: 1.2rem 2.4rem;
  margin: 0;
  border: 0;
  border-radius: 0; /* острые углы — бренд */
  background-color: transparent;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 110%;
  letter-spacing: -0.04em;
  color: var(--brand-main-base);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.25s, color 0.25s;
}

.source-tab__label {
  display: block;
}

/* hover / клавиатурный фокус — тёплый кремовый фон */
.source-tab:hover,
.source-tab:focus-visible {
  background-color: var(--brand-third-base);
  outline: none;
}

/* активный источник — пшеничная заливка, держится без наведения */
.source-tab.is-active,
.source-tab[aria-selected="true"] {
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
}
.source-tab.is-active:hover,
.source-tab[aria-selected="true"]:hover {
  background-color: var(--brand-second-mid);
}

/* ---- Модификатор: боксовый сегментный переключатель ----
   Вариант из фрейма «Видеообзоры»: вместо нижнего хайрлайна — тонкая
   рамка вокруг всего контрола с внутренним отступом 4px. Активный таб
   так же пшеничный, неактивный прозрачный. Используется в .video-reviews. */
.source-tabs--boxed {
  border-bottom: 0;
  border: 0.1rem solid var(--brand-main-low);
  padding: 0.4rem;
}
/* Боксовый вариант компактнее: контрол целиком 48px
   (4rem таб + 2×0.4rem внутр. отступ = 4.8rem). */
.source-tabs--boxed .source-tab {
  height: 4rem;
}

/* недоступный источник (нет ролика) */
.source-tab:disabled,
.source-tab.is-disabled {
  color: var(--brand-main-mid);
  cursor: not-allowed;
  background-color: transparent;
}

/* ---- Адаптив ---- */
@media (max-width: 575px) {
  .source-tabs {
    width: 100%;
  }
  .source-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 5.2rem; /* 52px @ полный масштаб */
    padding: 1.2rem 1.6rem;
    font-size: 1.6rem;
  }
}