/* ===== Общие стили ===== */

/* Фиксируем ширину, предотвращаем горизонтальный скролл */
body {
  overflow-x: hidden; /* Отключаем горизонтальный скролл */
}

#yt-block {
  max-width: 100%; /* Предотвращаем выход блока за пределы */
  margin: 0 auto; /* Центрируем */
  margin-top: 20px; /* Отступ сверху */
}

/* ===== Стили карусели ===== */

/* Карусель */
#yt-carousel.owl-carousel {
  display: block;
  width: 100%;
  position: relative; /* Для навигации */
  overflow: hidden; /* Предотвращаем выход контента */
}

/* ===== Навигация ===== */

/* Контейнер стрелок */
#yt-carousel .owl-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* Клики только на кнопки */
}

/* Общие стили для каждой кнопки */
#yt-carousel .owl-buttons div {
  pointer-events: auto; /* Включаем клики */
  background: #fff; /* Белый фон */
  border: none; /* Без границы */
  border-radius: 6px; /* Квадрат с закруглением */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Тень */
  width: 40px; /* Размер кнопки */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* Курсор "рука" */
}

/* Левая кнопка */
#yt-carousel .owl-buttons .owl-prev {
  position: absolute;
  left: 12px; /* Отступ от края */
}

/* Правая кнопка */
#yt-carousel .owl-buttons .owl-next {
  position: absolute;
  right: 12px; /* Отступ от края */
}

/* Иконки стрелок */
#yt-carousel .owl-buttons .owl-prev:before,
#yt-carousel .owl-buttons .owl-next:before {
  content: "";
  width: 24px;
  height: 24px;
  background: #000; /* Цвет стрелки */
  mask-size: 24px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 24px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Левая стрелка */
#yt-carousel .owl-buttons .owl-prev:before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23000" d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23000" d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"/></svg>');
}

/* Правая стрелка */
#yt-carousel .owl-buttons .owl-next:before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23000" d="m8.59 16.59L10 18l6-6l-6-6l-1.41 1.41L13.17 12z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23000" d="m8.59 16.59L10 18l6-6l-6-6l-1.41 1.41L13.17 12z"/></svg>');
}

/* ===== Точки пагинации ===== */

#yt-carousel .owl-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#yt-carousel .owl-pagination .owl-page span {
  width: 36px;
  height: 6px;
  border-radius: 6px;
  background: #e6e6e6;
  display: block;
  transition: 0.2s;
}

#yt-carousel .owl-pagination .owl-page.active span {
  background: #c1c1c1;
}

/* ===== Карточки контента ===== */

/* ===== Карточки контента ===== */

#yt-block .ytcard {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}

#yt-block .ytcard__thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #f3f3f3;
}

#yt-block .ytcard__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кнопка Play в стиле YouTube */

/* Hover эффект — красный фон */
.ytcard__thumb:hover .ytcard__play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Кнопка Play в стиле YouTube */
.ytcard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.ytcard__play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px; /* чуть смещаем вправо */
}

/* Hover эффект — красный фон */
.ytcard__thumb:hover .ytcard__play {background: #ff0000;transform: translate(-50%, -50%) scale(1.1);}
#yt-block .ytcard__play {position: absolute;background: rgb(228 15 15 / 65%);color: #fff;padding: 4px 7px;font-weight: 700;font-size: 13px;bottom: 60px;border-radius: 12px 12px;height: 42px;}
img.ytube {width: 221px;}
#yt-block .ytcard__meta {padding: 12px 14px;}
#yt-block .ytcard__title {font-weight: 700;line-height: 1.28;max-height: 2.56em;overflow: hidden;font-size: 16px;}
#yt-block .ytcard__date {opacity: 0.6;font-size: 13px;margin-top: 6px;}

/* ===== Адаптив ===== */

@media (max-width: 768px) {
  #yt-carousel .owl-buttons {
    display: flex; /* Отображаем стрелки */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  #yt-carousel .owl-buttons .owl-prev,
  #yt-carousel .owl-buttons .owl-next {
    width: 32px; /* Уменьшаем размер стрелок */
    height: 32px;
    box-shadow: none; /* Убираем лишнюю тень */
    background: rgba(255, 255, 255, 0.8); /* Прозрачный фон */
  }

  #yt-carousel .owl-buttons .owl-prev:before,
  #yt-carousel .owl-buttons .owl-next:before {
    width: 16px;
    height: 16px;
    background: #000; /* Цвет стрелки */
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    zoom: 3;
  }
}