/* B2MV – video: uvod preko slajdera, mali plejer u desnoj koloni, ceo ekran na prelazak/tap */
.hvid{display:none;position:absolute;inset:0;z-index:4;background:linear-gradient(#fefefe 50%,#e4f5fc 50%)}
.hvid-on .hvid{display:block}
.hvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.hvid.gone{opacity:0;transition:opacity .5s ease;pointer-events:none}
.hvid-ctl{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:5}
.hvid-ctl button,.vfs-snd,.vfs-x{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;background:rgba(20,40,60,.78);color:#fff;font:600 .85rem/1 var(--display,system-ui,sans-serif);padding:9px 14px;border-radius:999px;min-height:40px}
.hvid-ctl button:hover,.vfs-snd:hover,.vfs-x:hover{background:rgba(20,40,60,.95)}
.hvid-ctl svg,.vfs-snd svg{width:18px;height:18px;fill:currentColor}
.snd-on{display:none}.zvuk .snd-on{display:inline}.zvuk .snd-off{display:none}

/* mala kartica u desnoj koloni */
.vidw{margin-top:14px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.vidth{display:block;position:relative;width:100%;padding:0;border:0;background:#fdfefe;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.vidth img{display:block;width:100%;height:100%;object-fit:cover}
.vidth .play,.vidfab .play{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;background:var(--cyan,#19b4e6);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .2s}
.vidth:hover .play{transform:scale(1.12)}
.vidth .play::after,.vidfab .play::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.vidth:focus-visible,.vidfab:focus-visible{outline:3px solid var(--cyan,#19b4e6);outline-offset:-3px}
.vidcap{display:block;padding:8px 14px 10px;font-size:.78rem;color:var(--muted,#5b6b7a)}
.vidw.flash{animation:railflash 1s ease 2}

/* plutajuća sličica (telefon i uski ekrani, gde desna kolona nije stalno vidljiva) */
.vidfab{display:none}
@media (max-width:1300px){
  .vidfab{display:block;position:fixed;z-index:6;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));width:128px;aspect-ratio:16/9;padding:0;border:0;border-radius:10px;overflow:hidden;background:#fdfefe;cursor:pointer;box-shadow:0 0 0 3px var(--cyan,#19b4e6),0 6px 18px rgba(0,0,0,.3)}
  .vidfab img{width:100%;height:100%;object-fit:cover;display:block}
  .vidfab .play{width:28px;height:28px;right:5px;bottom:5px}
  .hvid-on .vidfab{display:none}
  .vidw{display:none}
}

/* ceo ekran */
.vfs{position:fixed;inset:0;z-index:30;background:rgba(10,25,40,0);transition:background .3s}
.vfs[hidden]{display:none}
.vfs.open{background:rgba(10,25,40,.72)}
.vfs-box{position:fixed;background:#fdfefe;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);border-radius:6px;transition:left .32s ease,top .32s ease,width .32s ease,height .32s ease}
.vfs-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fdfefe}
.vfs-snd{position:absolute;left:12px;bottom:12px}
.vfs-x{position:absolute;right:10px;top:10px;padding:0;width:44px;height:44px;justify-content:center;font-size:1.6rem}
@media (hover:hover) and (min-width:1301px){.vfs-x{display:none}}
@media (prefers-reduced-motion:reduce){.vfs,.vfs-box,.hvid.gone{transition:none}.vidw.flash{animation:none}}
@media (max-width:700px){.hvid{bottom:auto;height:56.25vw}.hvid-ctl{top:auto;bottom:8px;right:8px}.hvid-ctl button{min-height:32px;padding:6px 10px;font-size:.75rem}}