/* === из сниппета №71 «Video layout – YouTube + Self-host» (CSS) — блок .video-landing.wp-block-video === */
/* =========================================================
   VIDEO STYLES (LEGACY – WITHOUT CHANGES)
   ========================================================= */

/* Видео-лендинги: вертикальное видео по центру */
.video-landing.wp-block-video {
  display: flex;
  justify-content: center;
}

.video-landing.wp-block-video video {
  height: 75vh;
  width: auto;
  max-width: 420px;
  display: block;
}

/* Мобилка */
@media (max-width: 768px) {
  .video-landing.wp-block-video video {
    height: 65vh;
    max-width: 100%;
  }
}

/* === из сниппета №71 — блок .video-text-container + CTA === */
/* Контейнер текста на видео-страницах */
.video-text-container {
  display: block;
  width: 100%;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

/* Если контейнер внутри flex */
.video-text-container {
  flex: 0 1 860px;
  align-self: center;
}

/* Кнопка под видео в этом же контейнере*/
/* Центрирование кнопки (Gutenberg way) */
.video-text-container .wp-block-button.video-cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Внешний вид кнопки */
.video-text-container .wp-block-button.video-cta .wp-block-button__link {
  background-color: #659B00;
  color: #fff;

  border-radius: 6px;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 500;

  transition: all .25s ease;
}

/* Hover */
.video-text-container .wp-block-button.video-cta .wp-block-button__link:hover {
  background-color: #000;
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 600px) {
  .video-text-container .wp-block-button.video-cta .wp-block-button__link {
    width: 100%;
    max-width: 360px;
    text-align: center;
    font-size: 16px;
  }
}

/* === из сниппета №71 — блок figure.video-landing __desktop/__mobile переключение === */
/* Вывод разных видео на мобильном и десктопе */
/* Default: desktop only */
figure.video-landing .video-landing__desktop {
  display: block !important;
}

figure.video-landing .video-landing__mobile {
  display: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  figure.video-landing .video-landing__desktop {
    display: none !important;
  }
  figure.video-landing .video-landing__mobile {
    display: block !important;
  }
}

/* === из сниппета №71 — generic .video-desktop/.video-mobile + .product-video-wrapper margin ===
   ВНИМАНИЕ: этот же блок продублирован в assets/css/product-page.css (товарный enqueue-контекст).
   Обслуживает 7 страниц (page/post) здесь + 191 товар там — два разных enqueue-контекста без пересечения. === */
/* По умолчанию: desktop */
.video-mobile {
  display: none !important;
}

.video-desktop,
.video-mobile {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 14px;
}

/* Desktop 16:9 */
.video-desktop {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-desktop iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Mobile: vertical 9:16 */
@media (max-width: 768px) {
  .video-desktop {
    display: none !important;
  }

  .video-mobile {
    display: block !important;
    max-width: 420px;
  }

  .video-mobile {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
  }

  .video-mobile iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }
}

.product-video-wrapper {
  margin: 18px 0 24px;
}

/* === из сниппета №77 «Контейнер» === */
/* =========================================================
   VIDEO-TEXT CONTAINER — HARD FIX
   ========================================================= */
.page .entry-content .video-text-container,
.single .entry-content .video-text-container{
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}

/* Если внутри попадались Gutenberg alignwide/alignfull — прибиваем их */
.page .entry-content .video-text-container .alignwide,
.page .entry-content .video-text-container .alignfull{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}