.probasket-video-facade {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--secondary, #202a25);
    border-radius: var(--radius, 8px);
    isolation: isolate;
}

.probasket-video-facade__poster,
.probasket-video-facade__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.probasket-video-facade__poster {
    object-fit: cover;
    transition: transform 180ms ease, opacity 180ms ease;
}

.probasket-video-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(32, 42, 37, 0.28);
    pointer-events: none;
}

.probasket-video-facade__play {
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 48px;
    padding: 1.2rem 1.8rem;
    border: 0;
    border-radius: var(--radius, 8px);
    color: var(--secondary, #202a25);
    background: var(--action, #ff9900);
    font: 700 1.6rem/1 "Roboto Condensed", sans-serif;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
}

.probasket-video-facade__play:hover {
    filter: brightness(1.04);
}

.probasket-video-facade__play:active {
    transform: translateY(1px);
}

.probasket-video-facade__play:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.probasket-video-facade__play-icon {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid currentColor;
}

.probasket-video-facade__fallback {
    position: absolute;
    z-index: 3;
    right: 1.2rem;
    bottom: 1.2rem;
    color: #ffffff;
}

.probasket-video-facade.is-loading::after,
.probasket-video-facade.is-playing::after {
    display: none;
}

@media (max-width: 767px) {
    .probasket-video-facade__play {
        min-height: 44px;
        padding: 1rem 1.4rem;
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .probasket-video-facade__poster,
    .probasket-video-facade__play {
        transition: none;
    }
}