/* ALLOut Video Manager — player wrapper + transcript panel styling. */

/* ---------------------------------------------------------------------------
 * The video frame — ONE definition, every surface.
 *
 * Rounded, hairlined and lifted off the page, so a video reads as a player well
 * rather than a bare black rectangle. This used to exist only on the premium
 * watch page (library.css, .allout-vm-watch--pro) which meant a shortcode on a
 * marketing page, an archive card's player and the watch page each framed their
 * video differently. It lives here now, on the wrapper the canonical Renderer
 * emits, so all of them match.
 *
 * The one deliberate copy is templates/share-landing.php (.avm-stage): that page
 * ships standalone inline CSS and never loads a stylesheet, by design. Keep the
 * two in step by eye — geometry and shadow are meant to be identical.
 * ------------------------------------------------------------------------- */
.allout-vm-player,
.allout-vm-embed-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 30, 71, .10),
        0 18px 48px -20px rgba(0, 30, 71, .40);
}

/* Fullscreen must never be clipped or rounded. Plyr's native path fullscreens an
   inner element, but its fallback pins .plyr--fullscreen-fallback to the viewport
   inside this wrapper, where overflow:hidden would crop it to the frame. */
.allout-vm-player:has(.plyr--fullscreen-fallback),
.allout-vm-player:fullscreen,
.allout-vm-embed-wrapper:fullscreen {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 600px) {
    .allout-vm-player,
    .allout-vm-embed-wrapper { border-radius: 8px; }
}

.allout-vm-player[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
.allout-vm-player[data-aspect="4:3"]  { aspect-ratio: 4 / 3; }
.allout-vm-player[data-aspect="21:9"] { aspect-ratio: 21 / 9; }
.allout-vm-player[data-aspect="9:16"] { aspect-ratio: 9 / 16; }
.allout-vm-player[data-aspect="1:1"]  { aspect-ratio: 1 / 1; }

.allout-vm-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/*
 * Poster backdrop for arbitrary-aspect featured images.
 *
 * The frame is a fixed shape (16:9 by default) but a featured image can be any
 * shape. Cropping it to fill (`cover`) lops the top and bottom off a portrait or
 * 4:3 still; showing it whole (`contain`) leaves hard bars around it. Instead we
 * paint a blurred, over-scaled copy of the SAME image across the whole frame and
 * lay the real poster, shown whole, on top — so nothing is cropped, there are no
 * dead bars, and a wrong-shaped image reads as intentional. --avm-poster is set
 * per-video by Embed\Renderer; with no poster the ::before paints nothing.
 */
.allout-vm-player::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--avm-poster, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(30px) saturate(1.15);
    transform: scale(1.15);
    pointer-events: none;
}

/* The player and its poster sit above the blurred backdrop. */
.allout-vm-player > .plyr,
.allout-vm-player > video {
    position: relative;
    z-index: 1;
}

/* Show the pre-play poster whole; let the blurred backdrop fill the gaps rather
   than Plyr's opaque black poster box. */
.allout-vm-player .plyr__poster {
    background-size: contain;
    background-color: transparent;
}

.allout-vm-embed {
    display: block;
    width: 100%;
}

.allout-vm-transcript {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    max-height: 22rem;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.45;
}

.allout-vm-transcript__loading {
    margin: 0;
    color: #6b7280;
    font-style: italic;
}

/* Transcript search box (built by player-init.js). */
.allout-vm-transcript__search {
    position: sticky;
    top: -1rem;
    margin: -1rem -1rem 0.75rem;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
    z-index: 1;
}

.allout-vm-transcript__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font: inherit;
    font-size: 0.9rem;
    background: #fff;
    color: #1f2937;
}

.allout-vm-transcript__search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.allout-vm-transcript__nomatch {
    margin: 0.5rem 0 0;
    color: #6b7280;
    font-style: italic;
}

.allout-vm-transcript__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.allout-vm-transcript__cue.is-filtered {
    display: none;
}

.allout-vm-transcript__cue {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.allout-vm-transcript__cue:hover,
.allout-vm-transcript__cue:focus {
    background: #e5e7eb;
    outline: none;
}

.allout-vm-transcript__cue.is-active {
    background: #fde68a;
    font-weight: 600;
}

/* Embed placeholder (login required / unavailable) variants.
   Same geometry as the player frame — it occupies the video's square, so it must
   not change the page's layout or its rhythm. The fill stays light and the border
   dashed on purpose: this is the absence of a video, and it should not be mistaken
   for a player that failed to start. */
.allout-vm-embed-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #4b5563;
    text-align: center;
    padding: 1rem;
}

@media (max-width: 600px) {
    .allout-vm-embed-placeholder { border-radius: 8px; }
}

.allout-vm-embed-placeholder__message {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

.allout-vm-embed-placeholder__actions {
    margin: 0;
}

/* Front-end CTA. The template used to carry `button button-primary` — wp-admin
   classes that are never loaded on the public site, so the link came out as bare
   underlined text. This is the plugin's own button so it looks the same on every
   surface the placeholder appears on. */
.allout-vm-embed-placeholder__cta {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    background: linear-gradient(150deg, #f0555f, #d11f2c);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(209, 31, 44, .6);
    transition: transform .15s ease, box-shadow .15s ease;
}

.allout-vm-embed-placeholder__cta:hover,
.allout-vm-embed-placeholder__cta:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(209, 31, 44, .7);
}

@media (prefers-reduced-motion: reduce) {
    .allout-vm-embed-placeholder__cta { transition: none; }
    .allout-vm-embed-placeholder__cta:hover { transform: none; }
}

/* Chapter list rendered under the player (Embed\Chapters::renderNav). */
.allout-vm-chapters {
    margin-top: 0.75rem;
}

.allout-vm-chapters__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.allout-vm-chapters__jump {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #1f2937;
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.allout-vm-chapters__jump:hover,
.allout-vm-chapters__jump:focus {
    background: #e5e7eb;
    border-color: #9ca3af;
    outline: none;
}

.allout-vm-chapters__time {
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

/* ---------------------------------------------------------------------------
 * Idle-hover affordance, echoing SharePoint's own player.
 *
 * While a video has not started (.plyr--stopped) or is paused (.plyr--paused),
 * hovering lifts the poster a touch and grows the play button, so the frame reads
 * as something you can play rather than a still image. Nothing happens once it is
 * playing — .plyr--playing is excluded, so the effect never fights the controls.
 *
 * Plyr clips its own box (.plyr--video { overflow: hidden }), so the poster scale
 * cannot spill past the frame. The overlaid control is centred with
 * translate(-50%,-50%); any transform here must carry that or it jumps.
 *
 * Pointer-gated: on touch there is no hover, and a sticky :hover state left the
 * poster zoomed after a tap.
 * ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .allout-vm-player .plyr__poster {
        transition: transform .32s cubic-bezier(.2, .7, .2, 1), filter .32s ease;
    }

    .allout-vm-player .plyr--stopped:hover .plyr__poster,
    .allout-vm-player .plyr--paused:hover .plyr__poster {
        transform: scale(1.025);
        filter: brightness(1.05);
    }

    .allout-vm-player .plyr--stopped:hover .plyr__control--overlaid,
    .allout-vm-player .plyr--paused:hover .plyr__control--overlaid {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1;
    }
}

/* A11y: respect the viewer's reduced-motion preference — drop the decorative
   transitions on the player's interactive surfaces. (Autoplay is separately
   cancelled in player-init.js when this preference is set.) */
@media (prefers-reduced-motion: reduce) {
    .allout-vm-transcript__cue,
    .allout-vm-chapters__jump,
    .allout-vm-player .plyr__poster {
        transition: none;
    }

    /* Keep the brightness cue, drop the movement. */
    .allout-vm-player .plyr--stopped:hover .plyr__poster,
    .allout-vm-player .plyr--paused:hover .plyr__poster {
        transform: none;
    }
    .allout-vm-player .plyr--stopped:hover .plyr__control--overlaid,
    .allout-vm-player .plyr--paused:hover .plyr__control--overlaid {
        transform: translate(-50%, -50%);
    }
}