/*
    Video Player
*/

.video-player {
    position: relative;
    height: 100%;
    max-width: 100%;
}

.video-player:focus { outline: none; }
.video-player:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }

.video-player-viewport {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-player-video {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    cursor: pointer;
}

.video-player[data-controls="false"] .video-player-video { cursor: default; }
.video-player[data-controls="false"] .video-player-controls,
.video-player[data-controls="false"] .video-player-overlay-play { display: none; }

.video-player.is-idle .video-player-video { cursor: none; }

/*
    Center play overlay (only when paused and not autoplay)
*/

.video-player-overlay-play {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: white;
    transition: opacity 250ms ease;
    z-index: 2;
}

.video-player[data-paused="false"] .video-player-overlay-play {
    opacity: 0;
    pointer-events: none;
}

.video-player-overlay-play svg {
    width: 3rem;
    height: 3rem;
    filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.6));
    transition: transform 200ms ease;
}

.video-player-overlay-play svg * { fill: white; }
.video-player-overlay-play:hover svg { transform: scale(1.08); }

/*
    Controls bar — floating overlay
*/

.video-player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.35rem 0.25rem;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    z-index: 5;
}

.video-player:hover .video-player-controls,
.video-player:focus-within .video-player-controls,
.video-player[data-paused="true"] .video-player-controls {
    opacity: 1;
    pointer-events: auto;
}

.video-player.is-idle .video-player-controls {
    opacity: 0;
    pointer-events: none;
}

/*
    Buttons + icon switching
*/

.video-player-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 150ms ease, transform 150ms ease;
}

.video-player-button:hover { opacity: 1; }
.video-player-button:active { transform: scale(0.94); }

.video-player-icon {
    display: none;
    align-items: center;
    justify-content: center;
}

.video-player-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.video-player-icon svg * { fill: white; }

/* Play / pause */
.video-player[data-paused="true"]  .video-player-icon--play  { display: inline-flex; }
.video-player[data-paused="false"] .video-player-icon--pause { display: inline-flex; }

/* Volume / mute */
.video-player[data-muted="true"]  .video-player-icon--muted  { display: inline-flex; }
.video-player[data-muted="false"] .video-player-icon--volume { display: inline-flex; }

/* Fullscreen */
.video-player[data-fullscreen="true"] .video-player-icon--fullscreen-exit { display: inline-flex; }
.video-player:not([data-fullscreen="true"]) .video-player-icon--fullscreen-enter { display: inline-flex; }

/*
    Time labels
*/

.video-player-time {
    font-size: 0.65rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
    min-width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
    user-select: none;
}

/*
    Range inputs (progress + volume)

    Pattern: a wrapper div paints the track (::before for the unplayed base,
    ::after for the played fill driven by --progress / --volume on the player root).
    The native <input type="range"> sits invisibly on top, contributing only its
    thumb. This avoids relying on the WebKit shadow ::-webkit-slider-runnable-track
    inheriting custom properties — which it does not, consistently.
*/

.video-player {
    --track-height: 2px;
    --thumb-size: 10px;
    --progress: 0%;
    --volume: 100%;
}

.video-player-progress,
.video-player-volume-track {
    position: relative;
    display: flex;
    align-items: center;
    height: 1rem;
}

.video-player-progress { flex-grow: 1; min-width: 0; }

.video-player-progress::before,
.video-player-volume-track::before,
.video-player-progress::after,
.video-player-volume-track::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--track-height);
    border-radius: 999px;
    pointer-events: none;
}

.video-player-progress::before,
.video-player-volume-track::before {
    right: 0;
    background: rgba(255, 255, 255, 0.3);
}

.video-player-progress::after    { width: var(--progress); background: white; }
.video-player-volume-track::after { width: var(--volume);   background: white; }

.video-player input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.video-player input[type="range"]:focus { outline: none; }

.video-player input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: var(--track-height);
    border: 0;
}
.video-player input[type="range"]::-moz-range-track {
    background: transparent;
    height: var(--track-height);
    border: 0;
}

.video-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    background: white;
    border: 0;
    margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
    transition: transform 150ms ease;
}

.video-player input[type="range"]::-moz-range-thumb {
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    background: white;
    border: 0;
    transition: transform 150ms ease;
}

.video-player input[type="range"]:hover::-webkit-slider-thumb,
.video-player input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
.video-player input[type="range"]:hover::-moz-range-thumb,
.video-player input[type="range"]:focus-visible::-moz-range-thumb    { transform: scale(1.2); }

/*
    Sound cluster
*/

.video-player-sound {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.video-player-volume-track {
    width: 0;
    opacity: 0;
    pointer-events: none;
    margin-left: 0;
    overflow: hidden;
    transition: width 200ms ease, opacity 200ms ease, margin-left 200ms ease;
}

.video-player-sound:hover .video-player-volume-track,
.video-player-sound:focus-within .video-player-volume-track {
    width: 3.5rem;
    opacity: 1;
    pointer-events: auto;
    margin-left: 0.35rem;
}

/*
    Slideshow integration — lift slideshow arrows above the controls
*/

.slideshow:has(.video-player-controls) .slideshow-arrow {
    bottom: var(--slideshow-controls-bottom, 0);
}

/*
    Caption
*/

.video-player-caption {
    padding: 0.5rem 0;
}