/**
 * Custom Video Block Styles
 */

/* Simple approach - target the class we're actually adding */
.wp-block-video.has-custom-video-height {
    overflow: hidden !important;
}

.wp-block-video.has-custom-video-height video {
    height: inherit !important;
    max-height: inherit !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Frontend styles for custom video height - using new class */
.wp-block-video.ven-custom-height,
.wp-block-video[data-ven-height] {
    height: var(--ven-height, auto) !important;
    max-height: var(--ven-height, auto) !important;
    overflow: hidden !important;
}

.wp-block-video.ven-custom-height video,
.wp-block-video[data-ven-height] video {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Preserve full width for alignfull blocks */
.wp-block-video.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.wp-block-video.alignfull video {
    width: 100% !important;
}

/* Legacy support */
.wp-block-video.has-custom-height {
    height: var(--video-height, auto) !important;
    max-height: var(--video-height, auto) !important;
    overflow: hidden !important;
}

.wp-block-video.has-custom-height video {
    height: var(--video-height, auto) !important;
    max-height: var(--video-height, none) !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Override any inline styles */
.wp-block-video.ven-custom-height video[style],
.wp-block-video.has-custom-height video[style] {
    height: 100% !important;
    max-height: 100% !important;
}

/* Editor styles for custom video height - New attributes */
/* Only apply to blocks in the main editor canvas, not in list view */
.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--ven-video-height"],
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] {
    height: var(--ven-video-height) !important;
    max-height: var(--ven-video-height) !important;
    overflow: hidden !important;
}

.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--ven-video-height"] figure.wp-block-video,
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] figure.wp-block-video {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--ven-video-height"] video,
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] video {
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Direct inline style overrides for editor - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="height:"] figure.wp-block-video {
    height: inherit !important;
    max-height: inherit !important;
}

.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="height:"] video {
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Target WordPress resizable box in editor - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"] .components-resizable-box__container {
    height: inherit !important;
    max-height: inherit !important;
}

.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="height:"] .components-resizable-box__container {
    height: inherit !important;
    max-height: inherit !important;
    overflow: hidden !important;
}

/* Force video to respect container height in editor */
.editor-styles-wrapper .wp-block-video[style*="height:"] video,
.block-editor-block-list__block.wp-block-video[style*="height:"] video {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Legacy editor styles - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--video-custom-height"] video,
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] video,
.block-editor-block-list__layout .wp-block[data-type="core/video"] figure.wp-block-video[style*="height"] video {
    height: inherit !important;
    max-height: inherit !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Target the figure container in editor - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--video-custom-height"] figure.wp-block-video,
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] figure.wp-block-video {
    height: var(--video-custom-height, auto) !important;
    max-height: var(--video-custom-height, none) !important;
    overflow: hidden !important;
}

/* Alternative editor selector for different Gutenberg versions */
.block-editor-block-list__block.wp-block-video[style*="--video-custom-height"] video,
.editor-styles-wrapper .wp-block-video[style*="--video-custom-height"] video {
    height: var(--video-custom-height, auto) !important;
    max-height: var(--video-custom-height, none) !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Override WordPress default video heights in editor - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"] video[style*="height"] {
    height: inherit !important;
    max-height: inherit !important;
}

/* Force override any inline styles on video when custom height is set - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] video[style],
.block-editor-block-list__layout .wp-block[data-custom-height] video,
.block-editor-block-list__layout figure.wp-block-video[style*="height"] video {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Ensure container respects height in editor - scoped to main editor only */
.block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--video-custom-height"],
.block-editor-block-list__layout .wp-block[data-type="core/video"][data-custom-height] {
    height: var(--video-custom-height, auto);
    overflow: hidden;
}

/* Ensure container respects height on frontend */
.wp-block-video.has-custom-height {
    height: var(--video-height, auto);
    overflow: hidden;
}

/* Editor preview container styles */
.block-editor-block-list__block.wp-block-video[style*="--video-custom-height"],
.editor-styles-wrapper .wp-block-video[style*="--video-custom-height"] {
    height: var(--video-custom-height, auto);
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-video.has-custom-height video {
        min-height: 300px;
    }

    .block-editor-block-list__layout .wp-block[data-type="core/video"][style*="--video-custom-height"] video {
        min-height: 200px;
    }
}