/* ============================================================
   ВИДЕО — список роликов
   Дописать в конец style.css.
   Старые классы .item__photo-video, .item-flex__photo-video,
   .desc-item__photo-video не используются: страница была
   на старом шаблоне сайта.

   Блок .tabs общий со списком фотоальбомов — если style-photo.css
   уже подключён, удалить его отсюда.
   ============================================================ */

/* ---------- Переключатель Фото / Видео ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.tabs__link {
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--c-btn-bg);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--c-heading);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs__link:hover { background: var(--c-tint); }
.tabs__link.is-active { background: var(--c-heading); color: var(--c-white); }

/* ---------- Сетка роликов ---------- */
.videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

.video-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Превью 16:9 */
.video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--c-bg-soft);
  box-shadow: var(--shadow-menu);
  transition: box-shadow var(--dur) var(--ease);
}
.video-card__link:hover .video-card__media,
.video-card__link:focus-visible .video-card__media { box-shadow: var(--shadow-photo); }

.video-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.video-card__link:hover .video-card__media img { transform: scale(1.04); }

/* Кнопка воспроизведения */
.video-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.video-card__play svg { width: 30px; height: 30px; fill: var(--c-heading); }

.video-card__link:hover .video-card__play,
.video-card__link:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--c-white);
}

/* Подпись */
.video-card__body { display: flex; flex-direction: column; gap: 6px; }

.video-card__title {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-heading);
}

.video-card__date {
  font-size: var(--fs-caption);
  color: var(--c-text);
  opacity: .7;
}

.list-nav { margin-top: 48px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
}

@media (max-width: 600px) {
  .videos { grid-template-columns: 1fr; }
  .tabs__link { padding: 10px 20px; font-size: var(--fs-caption); }
  .video-card__play { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-card__media,
  .video-card__media img,
  .video-card__play { transition: none; }
}


/* ============================================================
   ПРОИГРЫВАТЕЛЬ ВО ВСПЛЫВАЮЩЕМ ОКНЕ
   ============================================================ */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.vmodal[hidden] { display: none; }

.vmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 45, .82);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.vmodal__dialog {
  position: relative;
  width: min(1000px, 100%);
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--shadow-photo);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.vmodal.is-open .vmodal__backdrop { opacity: 1; }
.vmodal.is-open .vmodal__dialog { opacity: 1; transform: none; }

.vmodal__title {
  margin: 0 48px 14px 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-heading);
}
.vmodal__title:empty { display: none; }

.vmodal__close {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-btn-bg);
  transition: background-color var(--dur) var(--ease);
}
.vmodal__close:hover { background: var(--c-tint); }
.vmodal__close svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--c-heading);
  stroke-width: 2;
}

.vmodal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-media);
  overflow: hidden;
  background: #000;
}
.vmodal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.vmodal-open { overflow: hidden; }

@media (max-width: 560px) {
  .vmodal { padding: 12px; }
  .vmodal__dialog { padding: 14px; }
  .vmodal__title { margin-right: 42px; font-size: var(--fs-body-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .vmodal__backdrop,
  .vmodal__dialog { transition: none; }
}