/* ACF Block Video Panel Styles */

/* Убираем overflow у всех родителей блока */
#content,
#content > *,
.single-content,
.single-content > *,
article.single-content,
.container {
    overflow: visible !important;
}

.acf-block-video-panel-sticky {
    position: relative !important;
    height: 300vh !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100vw !important;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: -2px;
}

/* Предотвращаем горизонтальный скролл, не ломая sticky */
body {
    overflow-x: hidden !important;
    position: relative !important;
}

.acf-block-video-panel-container {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #000 !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

.acf-block-video-panel-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.acf-block-video-panel-video-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.acf-block-video-panel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.acf-block-video-panel-panel-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.acf-block-video-panel-img {
    width: 950px;
    height: auto;
    max-width: 95vw;
    object-fit: contain;
}

.acf-block-video-panel-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 70%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    z-index: 5;
}

.acf-block-video-panel-text.visible {
    opacity: 1;
}

/* Мобильные устройства */
@media (max-width: 768px) {
    .acf-block-video-panel-text {
        font-size: 22px;
    }
}

.acf-block-video-panel-text-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    z-index: 15;
    pointer-events: none;
}

.acf-block-video-panel-bottom-text {
    color: white;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}

.acf-block-video-panel-text-bottom {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 40px 20px;
    text-align: center;
    background: #000;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 100;
    width: calc(100% - 40px);
    pointer-events: none;
}

.acf-block-video-panel-text-bottom p {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
}

.acf-block-video-panel-text-bottom.visible {
    opacity: 1;
    visibility: visible;
}

/* Для экранов 2К (2560px и выше) */
@media (min-width: 1921px) and (max-width: 3839px) {
    .acf-block-video-panel-text-bottom {
        bottom: 140px;
    }
}

/* Для экранов 4К (3840px и выше) */
@media (min-width: 3840px) {
    .acf-block-video-panel-text-bottom {
        bottom: 240px;
    }
}