/*
 * Встраивание видео (VK video_ext.php) на детальных страницах возможностей
 * продукта (product-feature-detail) — секции с pfd_section_video_url
 *
 * Для чего: Классов .video/.video--flex-start/.video__frame/.video--wrapper
 *           НЕТ вообще ни в каком виде в скомпилированном бандле
 *           itv-compiled.css (даже со scope-атрибутом) — в отличие от
 *           breadcrumbs/anchor-menu, у видео нет исходной реализации для
 *           переноса, поэтому весь CSS написан с нуля
 * Как: Стандартный приём «резиновый iframe» — внешний блок с
 *      padding-top:56.2222% (соотношение сторон видео) держит пропорцию,
 *      iframe абсолютно позиционирован внутри на 100% ширины/высоты.
 *      Без этого CSS iframe рендерится с дефолтным маленьким размером
 *      браузера, игнорируя inline style="width:900px" на родителе
 */

.video--wrapper {
    display: flex;
}

.video.video--flex-start {
    display: flex;
    justify-content: flex-start;
    max-width: 100%;
}

/* Внутренний блок с inline style="padding-top:calc(56.2222%)" — держит
   пропорции видео (900×506 ≈ 16:9), должен быть position:relative, чтобы
   iframe мог абсолютно позиционироваться относительно него, а не всей страницы */
.video.video--flex-start > div {
    position: relative;
    width: 100%;
}

.video__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

@media (max-width: 1023px) {
    /* На мобильных inline width:900px шире экрана — принудительно сжимаем
       до ширины контейнера, пропорция сохраняется через padding-top */
    .video.video--flex-start {
        width: 100% !important;
    }
}