/* LBV webcam stream gallery: main player + scrollable preview rail. */

.lbv-gallery{display:flex;gap:.6em;align-items:flex-start}
.lbv-gallery__main{flex:1 1 auto;min-width:0;position:relative}

/* Vertical preview rail next to the main player, capped to the player's height. */
.lbv-gallery__rail{flex:0 0 auto;width:clamp(120px,22%,220px);max-height:var(--lbv-main-h,100%);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.5em;padding-right:2px}
.lbv-gallery__rail:empty{display:none}

/* Preview thumbnail: a little bordered player box with snapshot, title and play button. */
.lbv-gallery__thumb{position:relative;display:block;width:100%;flex:0 0 auto;aspect-ratio:16/9;margin:0;padding:0;border:1px solid #cfd8df;border-radius:5px;overflow:hidden;background:#0a2233;cursor:pointer;outline-offset:2px}
.lbv-gallery__thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.lbv-gallery__thumb--noimg .lbv-gallery__thumb-img{display:none}
.lbv-gallery__thumb-title{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.35em .5em;font:600 12px/1.2 Arial,Helvetica,sans-serif;color:#fff;text-align:left;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72))}

/* Centered play button with a little hover/focus animation. */
.lbv-gallery__thumb-play{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:2.6em;height:2.6em;border-radius:50%;background:rgba(0,105,180,.9);box-shadow:0 .1em .4em rgba(0,0,0,.4);transition:transform .15s ease,background-color .15s ease;pointer-events:none}
.lbv-gallery__thumb-play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);width:0;height:0;border-style:solid;border-width:.42em 0 .42em .72em;border-color:transparent transparent transparent #fff}
.lbv-gallery__thumb:hover .lbv-gallery__thumb-play,
.lbv-gallery__thumb:focus-visible .lbv-gallery__thumb-play{background:#0069b4;transform:translate(-50%,-50%) scale(1.14)}

.lbv-gallery--empty{padding:1em;background:#0a2233;color:#fff;border-radius:5px;text-align:center}
.lbv-gallery__noscript{margin:0;padding-left:1.2em}

/* --- shared with the single-stream element (kept self-contained here) --- */

/* LBV-blue, round, centered main play button. */
.video-js.lbv-play-button .vjs-big-play-button{width:2em;height:2em;line-height:2em;margin:0;border:0;border-radius:50%;background-color:#0069b4;background-color:rgba(0,105,180,.85);box-shadow:0 .1em .5em rgba(0,0,0,.45);transform:translate(-50%,-50%);transition:background-color .2s ease,transform .2s ease}
.video-js.lbv-play-button:hover .vjs-big-play-button{background-color:#0069b4;background-color:rgba(0,105,180,.95);border:0}
.video-js.lbv-play-button .vjs-big-play-button:hover,
.video-js.lbv-play-button .vjs-big-play-button:focus{background-color:#0069b4;border:0;transform:translate(-50%,-50%) scale(1.08)}

/* Offline overlay over the main player. */
.video-js .lbv-stream-offline{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1em;text-align:center;background:rgba(0,38,68,.6)}
.video-js .lbv-stream-offline[hidden]{display:none}
.lbv-stream-offline__box{display:flex;flex-direction:column;align-items:center;gap:.7em;max-width:85%}
.lbv-stream-offline__logo{width:clamp(46px,9%,78px);height:auto;filter:brightness(0) invert(1)}
.lbv-stream-offline__text{margin:0;color:#fff;font-size:clamp(13px,2.4vw,19px);line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.video-js.lbv-is-offline .vjs-error-display{display:none}

/* Mobile: rail moves below the main player and scrolls horizontally. align-items must
   switch to stretch so the column children fill the width (flex-start keeps them narrow). */
@media (max-width:640px){
    .lbv-gallery{flex-direction:column;align-items:stretch}
    .lbv-gallery__rail{flex-direction:row;width:auto;max-height:none;overflow-x:auto;overflow-y:hidden;padding-right:0;padding-bottom:2px}
    .lbv-gallery__rail .lbv-gallery__thumb{flex:0 0 42%}
}