@charset "UTF-8";

/* ============================================================
   ТОКЕНЫ БЛОКА (вшиты для деплоя, §3.1 листа интеграции 24.06).
   Значения = боевая палитра Дбрус. Скоуп на .video-reviews —
   не конфликтует с глобальным :root бандла styles.css.
   ============================================================ */
.video-reviews {
  --white-base: #fff;
  --brand-main-base: #373d42;            /* тёмный графит — текст/постер */
  --brand-main-mid: rgba(55, 61, 66, .7);
  --brand-main-low: rgba(55, 61, 66, .1);
  --brand-second-mid: #ebd3af;
  --brand-third-base: #e6e1db;
  --yellow-base: #fabf35;                /* жёлтый акцент — активная «пилюля» */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", "RobotoMono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =========================================================
   video-reviews.css — секция «Видеообзоры на построенные дома»
   ----
   НОВОЕ · Figma (фрейм «Видеообзоры»). На сайте dbrus.ru пока
   НЕ встречается — имена наши, помечать как новое.

   Только обвязка секции. Внутри переиспользуются живые компоненты:
     • заголовок   → .section-title (живой)
     • переключатель источника → .source-tabs / .source-tab (source-tabs.css)
     • карточка ролика → .video-player / .video-poster / .video-caption +
       .player-control / .player-timecode / .player-timeline (player.css)
     • стрелки слайдера → .nav-btn + .icon-slider_arrow (button.css)
     • CTA «Все видео» → .btn-arrow + .icon-btn_arrow (button.css)

   Раскладка по макету:
     Заголовок (на всю ширину)
     ┌───────────────┬──────────────────────────────────────┐
     │  Мета-колонка │  Слайдер: крупный 16:9 ролик +        │
     │  • Выберите   │  «выглядывающий» следующий            │
     │    плеер      │  ───────────────────────────────────  │
     │  • source-tabs│  точки слева ·············· стрелки    │
     │  • лид-текст  │                                        │
     └───────────────┴──────────────────────────────────────┘
     Подвал: «Подписывайтесь на канал …»  ·············  CTA

   Активный слайд (.is-active) раскрыт во всю ширину видео-области,
   остальные сжаты в «превью». Переход — translateX трека (JS считает
   смещение по измеренным ширинам), ширины анимируются параллельно.
   Острые углы, акценты (жёлтый) — точка/стрелка/CTA, как в проектном
   слайдере. Переключение VK/YouTube — локальный обработчик [data-tabs].
   ========================================================= */

.video-reviews {
  /* Ширины слайдов слайдера (переопределяются по брейкпойнтам).
     Пропорции 1:1 с Figma: крупный ролик ≈ 45% контейнера,
     «выглядывающий» сосед ≈ 27%. */
  --vr-feat: 64.8rem; /* крупный (активный) ролик — 1:1 c Figma (648px ≈ 45% контейнера) */
  --vr-thumb: 33rem;  /* «превью» соседа — половина крупного, 1:1 с макетом (330px) */
  color: var(--brand-main-base);
}
.video-reviews .section-title {
  max-width: 100rem;
  margin: 0;
  text-transform: uppercase;
}
@media (max-width: 575px) {
  .video-reviews .section-title { max-width: 35rem; }
}

/* ---- Две колонки: мета слева, слайдер справа ----
   Колонки взяты у боевой темы: `.home-advantages .full-column` собран как
   `39.5rem calc(100% - 39.5rem - 2.4rem)` при gap 2.4rem — та же раскладка
   «узкая мета слева, слайдер справа». Свои 30rem + 3rem сдвигали слайдер
   на 90px левее соседних секций: блок читался как выпадающий из сетки. */
.video-reviews__layout {
  display: grid;
  grid-template-columns: 39.5rem minmax(0, calc(100% - 39.5rem - 2.4rem));
  column-gap: 2.4rem;
  align-items: start;
  margin-top: 8rem;
}
@media (max-width: 992px) {
  .video-reviews__layout {
    grid-template-columns: 100%;
    row-gap: 4rem;
    margin-top: 5.6rem;
  }
}
@media (max-width: 575px) {
  .video-reviews__layout { margin-top: 4rem; row-gap: 3.2rem; }
}

/* ---- Мета-колонка ---- */
.video-reviews__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 3.2rem;
}
.video-reviews__player {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.6rem;
}
@media (max-width: 575px) {
  /* Контрол во всю ширину экрана не растягиваем — по макету он компактный,
     обе половины равной ширины (владелец 12.08). */
  .video-reviews__player { width: auto; }
}
/* Видимой подписи «Выберите плеер» в блоке нет (решение владельца 13.08) — её текст
   живёт в `aria-label` группы табов. Правило `.video-reviews__player-label` удалено
   вместе с разметкой; вернуть можно из git (пакет _deploy-video-reviews-shrift-podpisey). */
.video-reviews__intro {
  max-width: 34rem;
  /* +10px ниже плеера/табов (поверх row-gap колонки .video-reviews__meta) */
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 135%;
  letter-spacing: -0.01em;
  color: var(--brand-main-mid);
}
@media (max-width: 992px) {
  .video-reviews__intro { max-width: 52rem; }
}

/* ---- Слайдер (правая колонка) ---- */
.video-reviews__panel { display: none; }
.video-reviews__panel.is-active { display: block; }

/* Окно слайдера: прячет «вынос» соседних роликов вправо.
   min-height резервирует высоту КРУПНОГО (featured) ролика. Без него при анимации
   ширины слайдов (активный растёт 40→64.8rem, прошлый сжимается) в середине перехода
   ни один слайд не на полной ширине → высота слайдера проседает и возвращается → ряд
   навигации/подвал «бунсят», а из-за скачка скроллбара дёргается вся страница (верхние
   блоки тоже). Резерв = высота постера 16:9 при --vr-feat + блок подписи (≈4.8rem). */
.video-reviews__viewport {
  overflow: hidden;
  min-height: calc(var(--vr-feat) * 9 / 16 + 4.8rem);
  /* Горизонтальный жест забирает слайдер, вертикальный остаётся странице.
     Без этого браузер успевает начать собственную прокрутку или «шаг назад»
     раньше, чем сработает наш обработчик. */
  touch-action: pan-y;
}

.video-reviews__track {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 10px — расстояние между роликами по макету (было 1.6rem) */
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Слайд: по умолчанию «превью», активный — крупный. */
.video-reviews__slide {
  flex: 0 0 auto;
  width: var(--vr-thumb);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-reviews__slide.is-active { width: var(--vr-feat); }
.video-reviews__slide > .video-player { width: 100%; }

/* Постер 16:9; кнопка play и таймлайн масштабируются под состояние. */
.video-reviews__slide .video-poster { aspect-ratio: 16 / 9; }
/* new_design: превью обёрнуто в <picture> (webp+jpg через phpthumbon), поэтому <img>
   НЕ прямой потомок .video-poster и базовый селектор player.css
   `.video-poster > .video-poster__img { position:absolute; inset:0; object-fit:cover }`
   не срабатывает → картинка осталась бы в потоке внутри padding (градиентная «рамка»).
   Восстанавливаем заливку для случая с <picture>. */
.video-reviews__slide .video-poster > picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.video-reviews__slide .video-poster picture > .video-poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-reviews__slide .player-control { width: 5.6rem; height: 5.6rem; }
.video-reviews__slide.is-active .player-control { width: 8rem; height: 8rem; }

/* Таймкод + таймлайн — только на активном (крупном) ролике. */
.video-reviews__slide .video-poster__timeline { display: none; }
.video-reviews__slide.is-active .video-poster__timeline { display: flex; }

/* Подпись ролика — только заголовок (как в макете), 14px моно.
   Гарнитуру и вес НЕ перекрываем: они наследуются от общего player.css
   (`var(--font-mono)` 500). Примерка 13.08 — Inter 400 → 500 → 600, затем кегли
   16 и 15 — владельцем отклонена целиком: «оставляем как было, моно 14». Своё
   у блока здесь только уменьшенный кегль и обрезка в две строки. */
.video-reviews__slide .video-caption { padding: 1.6rem 0 0; }
.video-reviews__slide .video-caption__title {
  font-size: 1.4rem;
  /* Фиксируем подпись ровно в 2 строки: высота слайда НЕ зависит от длины
     заголовка → ряд навигации (точки/стрелки) и подвал секции не «прыгают»
     при листании. Длинный заголовок обрезается многоточием (полный — в
     data-title / aria-label / подписи лайтбокса). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.08rem; /* 2 строки: 1.4rem × line-height 110% × 2 */
}

/* ---- Ряд навигации: точки слева, стрелки справа ----
   Ширина = крупный ролик, поэтому стрелки садятся к его правому краю. */
.video-reviews__nav {
  display: flex;
  /* Не center: стрелки опущены так, чтобы их ВЕРХНЯЯ граница шла по линии точек
     (просьба владельца 13.08). При выравнивании по верху ряда точки и кнопки
     начинаются с одной черты, а точке до её середины остаётся половина высоты —
     эти 0.6rem и добавлены кнопкам ниже. */
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 2rem;
  width: var(--vr-feat);
  max-width: 100%;
  /* было 2.4rem; −20px по просьбе владельца 21.06 — ряд навигации и подвал
     (он ниже по потоку) поднимаются на 20px, расстояние между ними сохраняется */
  margin-top: 0.4rem;
}
/* Пагинация — ТИПОВАЯ для DS: контейнер .slider-pagination + буллеты .bullet
   (+ боевой .swiper-pagination-bullet), как в projects-slider / houses-slider /
   equipment. Имена общие → ложатся на CSS Swiper-пагинации у разработчика;
   стилизуем scoped под секцию (глобального правила .bullet в DS нет). */
.video-reviews .slider-pagination {
  display: flex;
  align-items: center;
  gap: 1rem; /* десктоп: крупнее; на ≤992 возвращается к 0.8rem */
  margin: 0;
  padding: 0;
  list-style: none;
}
.video-reviews .slider-pagination .bullet,
.video-reviews .slider-pagination .swiper-pagination-bullet {
  display: block;
  width: 1.2rem; /* десктоп: крупнее (на ≤992 → 0.8rem) */
  height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: 2rem;
  background-color: var(--brand-main-low);
  cursor: pointer;
  transition: width 0.3s, background-color 0.3s;
  appearance: none;
  -webkit-appearance: none;
}
.video-reviews .slider-pagination .bullet.is-active,
.video-reviews .slider-pagination .swiper-pagination-bullet-active {
  width: 2.8rem; /* активная «пилюля» (на ≤992 → 1.6rem) */
  background-color: var(--yellow-base);
}

/* Точки опущены к середине стрелок (просьба владельца 13.08): при выравнивании ряда
   по верху они стояли выше кнопок. Отступ = margin стрелок (0.6rem) + половина высоты
   кнопки (4.8rem / 2) − половина высоты точки (1.2rem / 2). Центры точек и кнопок
   сходятся, положение стрелок относительно ролика и подвала не меняется.
   ПОРЯДОК ВАЖЕН: правило стоит ПОСЛЕ `.video-reviews .slider-pagination { margin: 0 }` —
   специфичность у них одинаковая, и выше по файлу оно молча обнулялось (поймано
   замером на стенде: центры расходились на 24 px при внешне правильном CSS). */
.video-reviews__nav .slider-pagination {
  margin-top: 2.4rem;
}

/* Нижний отступ до следующей секции.
   На главной его даёт сама «Экскурсия»: `.consultation-section.main-page { margin-top: 32rem }`
   (в медиа 15rem и 9rem). Класс `main-page` есть только у секций главной, поэтому на
   карточке построенного дома блок примыкал к заголовку «Экскурсии» вплотную — замер
   13.08: 0 px против 320 на главной. Здесь блок рисует отступ сам, ровно в ритме
   соседней `.info-section` (padding 20rem, без медиа-переопределений в бандле). */
.video-reviews:not(.main-page) {
  padding-bottom: 20rem;
}
/* Ритм соседней `.info-section` меняется по брейкпоинтам (20rem → 15rem → 8rem) —
   повторяем его, иначе на узком экране под блоком встанет двойная пустота:
   базовый кегль темы там растёт (rem 10.4px), и 20rem дали бы 208 px против 83 у соседа. */
@media (max-width: 992px) {
  .video-reviews:not(.main-page) { padding-bottom: 15rem; }
}
@media (max-width: 575px) {
  .video-reviews:not(.main-page) { padding-bottom: 8rem; }
}

.video-reviews__arrows {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /* половина высоты точки (1.2rem / 2): верх кнопок ложится ровно на линию точек */
  margin-top: 0.6rem;
}

/* Стрелки. Класс .nav-btn на боевом живой, но КАЖДОЕ его правило скоупнуто под
   свою секцию (.houses-section .title-row .slider-navigation .nav-btn,
   .home-advantages …, .tags-section …) — вне этих корней остаётся голая кнопка
   25×22 без фона, срезанных углов и зеркального «назад». Замер на стенде 12.08
   показал ровно это. Поэтому оформление повторено здесь 1:1 с версией
   houses-section (ближайшая по смыслу: слайдер внутри секции), скоуп — свой. */
.video-reviews .nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border: 0;
  font-size: 2rem;
  line-height: 2rem;
  clip-path: polygon(0.8rem 0%, 100% 0, 100% 0, 100% calc(100% - 0.8rem), calc(100% - 0.8rem) 100%, 0 100%, 0 100%, 0% 0.8rem);
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
  cursor: pointer;
  transition: background-color 0.3s;
  appearance: none;
  -webkit-appearance: none;
}
.video-reviews .nav-btn.prev-btn {
  transform: scale(-1, 1); /* та же иконка, отражённая — как во всех слайдерах сайта */
}
.video-reviews .nav-btn:hover {
  background-color: var(--yellow-base);
}

/* ---- Подвал: подписка (в одну строку) + CTA ----
   Подписка выровнена под слайдером (пустая мета-ячейка слева). */
.video-reviews__foot {
  display: grid;
  grid-template-columns: 39.5rem minmax(0, calc(100% - 39.5rem - 2.4rem)); /* те же колонки, что у layout */
  column-gap: 2.4rem;
  align-items: center;
  /* Подвал опущен на 64px от ряда навигации (было 48): просьба владельца 13.08 —
     «эти элементы нужно пониже, немного». Высоты самих элементов не тронуты:
     кнопка `.btn-arrow` — общий компонент темы (жёлтый квадрат 5rem), он держит
     одинаковый рост во всех секциях сайта. На ≤992 отступ прежний (4rem): там
     подвал уже перестроен в одну колонку и воздуха достаточно. */
  margin-top: 6.4rem;
}
.video-reviews__foot-inner {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 4rem;
}
@media (max-width: 992px) {
  .video-reviews__foot { grid-template-columns: 100%; margin-top: 4rem; }
  .video-reviews__foot-inner { grid-column: 1; }
}
@media (max-width: 575px) {
  .video-reviews__foot-inner {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 2.4rem;
  }
  /* лейбл занимает всю строку → ссылки YouTube · VK Видео переносятся под него */
  .video-reviews__subscribe { row-gap: 1.2rem; }
  .video-reviews__subscribe-label { flex-basis: 100%; }
}

/* Шрифт задаётся всей строке подписки, а не одному лейблу: название канала стоит
   в ней же, и разные гарнитуры в одной строке дают разнобой (решение владельца 13.08). */
.video-reviews__subscribe {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 100%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
/* скрытый вариант источника (JS переключает подписку вместе с табом плеера) */
.video-reviews__subscribe[hidden] { display: none; }
.video-reviews__subscribe-label { color: var(--brand-main-mid); }
.video-reviews__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--brand-main-base);
}
/* Кликабельный канал: ведёт на страницу канала, ховер — лёгкое затемнение. */
a.video-reviews__channel { cursor: pointer; transition: color 0.2s; }
a.video-reviews__channel:hover,
a.video-reviews__channel:focus-visible { color: var(--brand-main-mid); }
.video-reviews__channel-dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: var(--brand-main-mid);
}

/* CTA «Все видео» = .btn-arrow по токену: inline-flex по содержимому.
   НЕ растягиваем на всю ширину на мобайле (см. правило в button.css);
   на ≤575 подвал переходит в колонку и кнопка садится слева по контенту. */
.video-reviews__cta { flex: 0 0 auto; }

/* =========================================================
   Планшет / мобайл (≤992): одна колонка, ролики РАВНОГО размера
   в ряд с выносом вправо, по центру только точки (без стрелок) —
   как обычный режим projects-slider. Активный слайд НЕ раскрывается.
   ========================================================= */
@media (max-width: 992px) {
  .video-reviews { --vr-card: min(55rem, 86vw); /* @kind spacing */ }

  /* равные карточки не анимируют ширину → высота не проседает, резерв высоты не нужен */
  .video-reviews__viewport { min-height: 0; }

  /* равные карточки — активный не растягивается */
  .video-reviews__slide,
  .video-reviews__slide.is-active { width: var(--vr-card); }

  /* кнопка play — единый средний размер */
  .video-reviews__slide .player-control,
  .video-reviews__slide.is-active .player-control { width: 6.4rem; height: 6.4rem; }

  /* таймкод/таймлайн на планшете не показываем (чистый постер) */
  .video-reviews__slide.is-active .video-poster__timeline { display: none; }

  /* Описание идёт сразу за заголовком, переключатель плеера — под ним
     (решение владельца 12.08 по живому виду: на узком экране кнопки между
     заголовком и текстом разрывали чтение). На десктопе порядок прежний. */
  .video-reviews__intro { order: -1; margin-top: 0; }

  /* Стрелок на узком экране нет — так задумано макетом (владелец 12.08, после
     примерки вернулся к исходному варианту). Листание: свайп и точки, точки по центру. */
  .video-reviews__nav { width: 100%; justify-content: center; }
  .video-reviews__arrows { display: none; }
  /* Отступ точек считался от стрелок — без них он превратился бы в пустую полосу. */
  .video-reviews__nav .slider-pagination { margin-top: 0; }

  /* Переключатель плеера компактнее десктопного — по макету мобильной
     и планшетной версий: контрол по содержимому, не во всю ширину. */
  .video-reviews .source-tabs--boxed { padding: 0.3rem; }
  .video-reviews .source-tabs--boxed .source-tab {
    height: 3.6rem;
    min-width: 12.5rem;  /* половины равной ширины, как в макете */
    padding: 0.8rem 1.6rem;
    font-size: 1.5rem;
  }

  /* точки возвращаются к компактному размеру (крупнее — только на десктопе) */
  .video-reviews .slider-pagination { gap: 0.8rem; }
  .video-reviews .slider-pagination .bullet,
  .video-reviews .slider-pagination .swiper-pagination-bullet { width: 0.8rem; height: 0.8rem; }
  .video-reviews .slider-pagination .bullet.is-active,
  .video-reviews .slider-pagination .swiper-pagination-bullet-active { width: 1.6rem; }
}
@media (max-width: 575px) {
  .video-reviews { --vr-card: min(40rem, 82vw); /* @kind spacing */ }
  .video-reviews__slide .player-control,
  .video-reviews__slide.is-active .player-control { width: 4.8rem; height: 4.8rem; }
}