:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video {
    overflow: hidden;
    background: #000;
}

/* Hide existing per-post mp4 overlays only for the slide that has selected stream active. */
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container:not(.live-url-video) {
    display: none !important;
}

/* Show only the injected live player on target slide. */
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video > picture,
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video > img {
    display: none !important;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
    pointer-events: none;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video.stream-crop-mode-crop .video-container.live-url-video video,
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video.is-crop video {
    object-fit: cover;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video.stream-crop-mode-no-crop .video-container.live-url-video,
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video.is-no-crop {
    background: #000;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video.stream-crop-mode-no-crop .video-container.live-url-video video,
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video.is-no-crop video {
    object-fit: contain;
}

/* Hide native controls/play overlays where browser allows it. */
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video video::-webkit-media-controls,
:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .video-container.live-url-video video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .live-audio-toggle {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1002;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: transparent;
    /*background: linear-gradient(180deg, #4f7da6 0%, #3c678e 100%);*/
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .live-audio-toggle:hover {
    background: linear-gradient(180deg, #5a89b2 0%, #44749d 100%);
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .live-audio-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .live-audio-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    :is(.home-clone, .home) .hero .hero-slide .card--image.has--live-url-video .live-audio-toggle {
        left: 10px;
        bottom: 10px;
        width: 48px;
        height: 48px;
    }
}