/**
 * Uno LMS — course-player-video child block.
 *
 * The block paints no own surround: background is transparent and color
 * inherits, so a sectioned wrapper (core/group / core/columns Block Style
 * Variation) projects through. The root selector is wrapped in :where() so
 * theme + user overrides win without !important; nested rules keep normal
 * specificity to preserve the internal cascade for the locked / error /
 * loading states.
 *
 * Stage-internal literals (#000 stage background, #cfd3d8 empty-state copy,
 * rgba(255,255,255,*) skeleton + spinner colors, rgba(0,0,0,0.25) overlay
 * shadow) intentionally stay scoped: the stage is a black rectangle by
 * design and the spinner is rendered against it, so token-izing those
 * would invite contrast regressions on themes that flip foreground colors.
 */
:where(.wp-block-uno-lms-course-player-video) {
    box-sizing: border-box;
    background: transparent;
    color: inherit;
    padding: 0;
    min-width: 0;
    /* Grid-stack the outer wrapper so the feedback banner overlays the
       video grid rather than pushing it down. No PHP change required. */
    display: grid;
    grid-template-areas: "stack";
}

.wp-block-uno-lms-course-player-video > .uno-lms-course-player-video__advance-badge,
.wp-block-uno-lms-course-player-video > .uno-lms-course-player-video__feedback,
.wp-block-uno-lms-course-player-video > .uno-lms-course-player-video__grid {
    grid-area: stack;
    min-width: 0;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__advance-badge {
    align-self: start;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: var(--wp--preset--spacing--20, 0.75rem);
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, #fff 24%, transparent);
    border-radius: var(--wp--custom--uno-lms--surface--radius, 8px);
    background: rgba(0, 0, 0, 0.82);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.25;
    z-index: 7;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__advance-badge[hidden] {
    display: none;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__advance-cancel {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: calc(var(--wp--custom--uno-lms--surface--radius, 8px) / 1.5);
    padding: 0.32rem 0.6rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__advance-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__advance-cancel:focus-visible {
    outline: var(--wp--custom--uno-lms--focus--ring-width, 1px) solid
        var(--wp--custom--uno-lms--focus--ring-color, #fff);
    outline-offset: 2px;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__feedback {
    align-self: start;
    justify-self: stretch;
    margin: var(--wp--preset--spacing--20, 0.75rem);
    padding: 0.6rem 0.75rem;
    z-index: 5;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__feedback.is-loading {
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__feedback.is-error {
    background: color-mix(in srgb, var(--wp--custom--uno-lms--state--error, #8a2424) 15%, transparent);
    color: var(--wp--custom--uno-lms--state--error, #8a2424);
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__retry {
    border: 0;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    background: var(--wp--custom--uno-lms--state--error, #8a2424);
    color: #fff;
}

/* Grid stacking: stage, skeleton, and enroll overlay share the same cell. */
.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__grid {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__stage,
.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__locked-backdrop,
.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__overlay {
    grid-area: stack;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__stage {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 120ms ease;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__stage iframe,
.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__stage video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__empty-state {
    margin: 0;
    color: #cfd3d8;
    text-align: center;
    padding: 1rem;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__locked-backdrop {
    background: var(--wp--custom--uno-lms--state--locked-backdrop, linear-gradient(135deg, #1f2933 0%, #3e4c59 100%));
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__skeleton-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Visibility toggles driven by data-uno-lms-video-locked. */
.wp-block-uno-lms-course-player-video[data-uno-lms-video-locked="false"] .uno-lms-course-player-video__stage {
    z-index: 2;
}

.wp-block-uno-lms-course-player-video[data-uno-lms-video-locked="false"] .uno-lms-course-player-video__locked-backdrop {
    display: none;
}

.wp-block-uno-lms-course-player-video[data-uno-lms-video-locked="false"] .uno-lms-course-player-video__overlay {
    display: none;
}

.wp-block-uno-lms-course-player-video[data-uno-lms-video-locked="true"] .uno-lms-course-player-video__stage {
    display: none;
}

.wp-block-uno-lms-course-player-video[data-uno-lms-video-locked="true"] .uno-lms-course-player-video__overlay {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wp-block-uno-lms-course-player-video[data-uno-lms-video-locked="true"] .uno-lms-course-player-video__overlay .wp-block-uno-lms-course-enroll {
    width: 100%;
    max-width: 34rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Stage is cleared (innerHTML = '') on EVERY lesson transition by the view
   script — locked, success, error, and popstate — to guarantee that any prior
   <iframe> (YouTube/Vimeo) is unmounted and stops streaming. CSS `display:
   none` on an iframe does NOT stop embedded playback, so the JS unmount is
   the source of truth. The stage's #000 background above renders the empty
   state as a black rectangle under the locked overlay (z-index:3), the CSS
   spinner (z-index:4), and the feedback banner (z-index:5). */
.wp-block-uno-lms-course-player-video.is-loading .uno-lms-course-player-video__stage {
    opacity: 0.85;
}

/* Deferred CSS-only spinner — JS injects it into .__grid after ~300 ms of
   in-flight fetching and removes it on settle. Matches the visual of
   @wordpress/components <Spinner /> without the dependency. */
.wp-block-uno-lms-course-player-video .uno-lms-course-player-video__spinner {
    grid-area: stack;
    align-self: center;
    justify-self: center;
    width: calc(var(--wp--preset--font-size--medium, 1rem) * 1.125);
    aspect-ratio: 1;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    /* Scoped literal: the stage background is #000 so currentColor would
       inherit dark theme foregrounds and disappear. A translucent white
       stays legible; future themes that override the stage background can
       remap this to currentColor in a single line. */
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 4;
    animation: uno-lms-course-player-video-spin 1.1s linear infinite;
}

@keyframes uno-lms-course-player-video-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-uno-lms-course-player-video .uno-lms-course-player-video__spinner {
        animation: none;
    }
}

/*
 * Mobile: edge-to-edge video inside constrained themes (alignwide / layout
 * padding). Keeps `.__grid` 16:9; only horizontal breakout. Parent player uses
 * `overflow: visible` in `uno-lms-course-player.css` so this is not clipped.
 */
@media (max-width: 900px) {
    .wp-block-uno-lms-course-player .wp-block-uno-lms-course-player-video {
        box-sizing: border-box;
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
        position: relative;
    }
}