/*
Theme Name: Ribbon Child
Template: ribbon
Author: polzagid.ru
*/
@import url("../ribbon/style.css");

/* Контейнер Rutube: фиксируем высоту через padding, чтобы верстка не прыгала */
.rutube-lazy-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 — высота всегда есть, даже до загрузки iframe */
  overflow: hidden;
  width: 100%;
  background: #000;
}

/* Обёртки для превью и кнопки — на всю площадь контейнера */
.rutube-preview-img,
.rutube-play-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Превью-картинка */
.rutube-preview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Кнопка воспроизведения */
.rutube-play-btn button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 28px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  /* Спокойный голубой цвет кнопки */
  background-color: #4facf5;          /* основной голубой */
  color: #0a2e5a;                     /* тёмно‑синий текст для контраста */

  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(79, 172, 245, 0.4); /* тень в тон кнопки */
  z-index: 10;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rutube-play-btn button:hover {
  /* При наведении — более тёмный синий */
  background-color: #2b6cb0;
  color: #ffffff;                    /* белый текст при наведении для читаемости */

  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 6px 16px rgba(43, 108, 176, 0.5);
}

/* Контейнер iframe: скрыт, но занимает место */
.rutube-iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.rutube-iframe-container.active {
  opacity: 1;
  visibility: visible;
}