/*
 * Блок «Видео» (`.video-embed`) — универсальный: один вид, стили не зависят от страницы; все тексты, постер и ролик — аргументы
 * партиала template-parts/video-section.php, воспроизведение — js/video-block.js («фасад»: до клика только постер и кнопка).
 *
 * Figma: Full HD 2577:41363 (рамка 1856×900), Desktop 2577:41304 (1376×700), Tablet 2577:41349 (776×440), Mobile 2577:41356
 * (360×240). Рамка: поле 8, обводка 1, радиус 40 (на мобильной 16), подложка surface-3, blur 4; внутри окно с обводкой 2 и
 * радиусом 32 (на мобильной 8); кнопка play 64×56, радиус 12, оранжевая, иконка 36, тень 0 8 8 rgba(0,0,0,.3).
 * Высоту задаёт aspect-ratio каждого макета (на ширинах макета совпадает с Figma, между ними — плавно); iframe при подмене
 * занимает всё окно, поэтому высота блока не меняется.
 */
.video-embed.video-embed {
    padding-top: 32px;
    padding-bottom: 32px;
    background: var(--nv-surface-1);
}

.video-embed .container {
    max-width: 1920px;
    padding-left: 32px;
    padding-right: 32px;
}

.video-embed__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    text-align: center;
}

.video-embed__title,
.video-embed__lead {
    margin: 0;
}

.video-embed__frame {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1856 / 900;
    padding: 8px;
    border: 1px solid var(--nv-surface-4);
    border-radius: 40px;
    background: var(--nv-surface-3);
    backdrop-filter: blur(4px);
}

.video-embed__player {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 2px solid var(--nv-surface-4);
    border-radius: 32px;
    background: var(--nv-surface-2);
    overflow: hidden;
}

/* Постер целиком: кадр 16:9 заполняет окно, лишнее (на широких пропорциях) уходит вниз — верх с шапкой сайта остаётся. */
.video-embed__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.video-embed__play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 64px;
    height: 56px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--nv-surface-4);
    border-radius: 12px;
    background: var(--nv-primary);
    color: var(--nv-constant-1);
    cursor: pointer;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3));
    backdrop-filter: blur(10px);
    appearance: none;
    transition: background-color .2s ease;
}

.video-embed__play:hover {
    background: var(--nv-primary-hover, #e55f00);
}

.video-embed__play:focus-visible {
    outline: 2px solid var(--nv-constant-1);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--nv-primary);
}

.video-embed__play-icon {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

.video-embed__iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* После клика постер и кнопка скрыты, остаётся iframe. */
.video-embed__frame.is-playing .video-embed__poster,
.video-embed__frame.is-playing .video-embed__play {
    display: none;
}

.video-embed__caption {
    margin: 16px 0 0;
    color: var(--nv-object-2);
    font-size: 16px;
    line-height: 150%;
    text-align: center;
}

@media (max-width: 1599.98px) {
    .video-embed__frame {
        aspect-ratio: 1376 / 700;
    }
}

@media (max-width: 991.98px) {
    .video-embed__frame {
        aspect-ratio: 776 / 440;
    }
}

@media (max-width: 767.98px) {
    .video-embed.video-embed {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .video-embed .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .video-embed__frame {
        aspect-ratio: 360 / 240;
        border-radius: 16px;
    }

    .video-embed__player {
        border-radius: 8px;
    }
}