.alster-video-feature,
.alster-video-feature * {
    box-sizing: border-box;
}

section.alster-video-feature {
    --alster-video-viewport: 100vh;
    --alster-video-ratio: .5625;
    --alster-video-aspect: 9 / 16;
    --alster-video-inset: 30px;
    --alster-video-admin-offset: 0px;

    --alster-video-available-height:
        calc(
            var(--alster-video-viewport)
            - var(--alster-video-admin-offset)
            - var(--alster-video-inset)
            - var(--alster-video-inset)
        );

    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;

    width: 100%;
    max-width: none;
    min-width: 0;

    height:
        calc(
            var(--alster-video-viewport)
            - var(--alster-video-admin-offset)
        );

    min-height: 0;

    margin: 0 !important;
    padding: var(--alster-video-inset) !important;

    overflow: hidden;

    border: 0 !important;
    border-radius: 0;

    box-shadow: none;

    background: #181818;

    color: #fff;

    font-family: "neue-haas-unica", sans-serif;
    font-weight: 400;
}


/* ==========================================================================
   Dynamic viewport height
   ========================================================================== */

@supports (height: 100dvh) {

    section.alster-video-feature {
        --alster-video-viewport: 100dvh;
    }
}


body.admin-bar section.alster-video-feature {
    --alster-video-admin-offset:
        var(
            --wp-admin--admin-bar--height,
            32px
        );
}


/* ==========================================================================
   Blurred background video
   ========================================================================== */

.alster-video-feature__background {
    position: absolute;

    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    background: #181818;
}


/*
 * This is a second copy of exactly the same video.
 *
 * The scale hides the transparent/soft edges caused by blur.
 * The video always fills the complete feature area.
 */
.alster-video-feature
.alster-video-feature__background-video {
    position: absolute;

    left: 50%;
    top: 50%;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;
    max-width: none;

    margin: 0;

    border: 0;

    object-fit: cover;
    object-position: center;

    transform:
        translate(-50%, -50%)
        scale(1.15);

    transform-origin: center;

    /*
     * Strong blur requested for the feature background.
     */
    filter:
        blur(48px)
        saturate(.9)
        brightness(.78);

    opacity: .95;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;

    -webkit-user-drag: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/*
 * Very large displays need slightly more blur because the
 * video itself becomes much larger.
 */
@media (min-width: 1400px) {

    .alster-video-feature
    .alster-video-feature__background-video {
        filter:
            blur(60px)
            saturate(.9)
            brightness(.78);

        transform:
            translate(-50%, -50%)
            scale(1.18);
    }
}


/* ==========================================================================
   Foreground frame
   ========================================================================== */

.alster-video-feature__frame {
    position: relative;

    z-index: 1;

    width:
        min(
            100%,
            calc(
                var(--alster-video-available-height)
                * var(--alster-video-ratio, .5625)
            )
        );

    aspect-ratio:
        var(
            --alster-video-aspect,
            9 / 16
        );

    max-height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #111;
}


/* ==========================================================================
   Format
   ========================================================================== */

/*
 * Format and sizing are independent.
 * Legacy landscape markup keeps its width layout.
 */
section.alster-video-feature--landscape {
    --alster-video-ratio: 1.7777777778;
    --alster-video-aspect: 16 / 9;
}


/* ==========================================================================
   Width sizing
   ========================================================================== */

section.alster-video-feature--size-width,
section.alster-video-feature--landscape:not(
    .alster-video-feature--size-height
) {
    width: 100%;

    height: auto;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;
}


.alster-video-feature--size-width
.alster-video-feature__frame,
.alster-video-feature--landscape:not(
    .alster-video-feature--size-height
)
.alster-video-feature__frame {
    width: 100%;

    max-height: none;
}


/* ==========================================================================
   Main video
   ========================================================================== */

.alster-video-feature
.alster-video-feature__video {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;

    border: 0;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================================
   Controls
   ========================================================================== */

.alster-video-feature
.alster-video-feature__controls {
    position: absolute;

    z-index: 2;

    right: clamp(8px, 2vh, 16px);
    bottom: clamp(8px, 2vh, 16px);

    display: flex;
    align-items: center;

    gap: 6px;
}


.alster-video-feature button {
    appearance: none;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .5);

    border-radius: 50%;

    box-shadow: none;

    background:
        rgba(0, 0, 0, .48);

    color: #fff !important;

    font: inherit;

    font-size: 14px;
    line-height: 20px;

    letter-spacing: normal;

    text-transform: none;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color .2s,
        border-color .2s;

    -webkit-tap-highlight-color: transparent;
}


.alster-video-feature
.alster-video-feature__controls
button {
    width: clamp(28px, 5vh, 44px);
    height: clamp(28px, 5vh, 44px);

    flex: 0 0 auto;
}


.alster-video-feature button:hover,
.alster-video-feature button:focus-visible {
    border-color: #fff;

    background:
        rgba(0, 0, 0, .78);
}


.alster-video-feature button:focus-visible {
    outline: 2px solid #fff;

    outline-offset: 3px;
}


.alster-video-feature button:disabled {
    opacity: .45;

    cursor: default;
}


.alster-video-feature button::before,
.alster-video-feature button::after {
    display: none !important;

    content: none !important;
}


.alster-video-feature button svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


/* ==========================================================================
   Manual start button
   ========================================================================== */

.alster-video-feature
.alster-video-feature__start {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 50%;

    width: max-content;

    max-width:
        calc(
            100% - 24px
        );

    min-height: 44px;

    padding: 10px 18px;

    border-radius: 999px;

    transform:
        translate(
            -50%,
            -50%
        );

    text-align: center;

    white-space: normal;
}


/* ==========================================================================
   Error message
   ========================================================================== */

.alster-video-feature
.alster-video-feature__message {
    position: absolute;

    z-index: 2;

    left: 12px;
    right: 12px;

    top:
        calc(
            50% + 38px
        );

    margin: 0 !important;

    color: #fff !important;

    font: inherit;

    font-size: 14px;
    line-height: 20px;

    text-align: center;
}


/* ==========================================================================
   Screenreader status
   ========================================================================== */

.alster-video-feature
.alster-video-feature__status {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;

    border: 0 !important;
}


.alster-video-feature [hidden] {
    display: none !important;
}


/* ==========================================================================
   WPBakery full-width helper
   ========================================================================== */

/*
 * Apply this class only to the dedicated
 * full-width WPBakery feature row.
 */
.alster-video-feature-row.grve-section,
.alster-video-feature-row > .grve-section,
.alster-video-feature-row
> .grve-section
> .grve-container,
.alster-video-feature-row.grve-section
> .grve-container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


.alster-video-feature-row .grve-row,
.alster-video-feature-row .grve-column,
.alster-video-feature-row .grve-column-wrapper,
.alster-video-feature-row .wpb_column,
.alster-video-feature-row .vc_column-inner,
.alster-video-feature-row .wpb_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}


.alster-video-feature-row
.grve-element:last-child,
.alster-video-feature-row
.wpb_content_element:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   WordPress admin bar
   ========================================================================== */

@media (max-width: 782px) {

    body.admin-bar
    section.alster-video-feature {
        --alster-video-admin-offset:
            var(
                --wp-admin--admin-bar--height,
                46px
            );
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {

    section.alster-video-feature {
        --alster-video-inset: 15px;
    }


    /*
     * Slightly reduce blur on phones.
     * It still reads as a strongly blurred background
     * but is less expensive for the GPU.
     */
    .alster-video-feature
    .alster-video-feature__background-video {
        filter:
            blur(34px)
            saturate(.9)
            brightness(.78);

        transform:
            translate(-50%, -50%)
            scale(1.18);
    }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .alster-video-feature button {
        transition: none;
    }
}