/* Custom video player overlay styles */
/* Make wrapper match the intended video size so the button centers correctly */
.video-wrapper { position:relative; display:inline-block; width:50%; max-width:550px; }
/* Video fills its wrapper, which carries the layout sizing */
.video-wrapper video { width:100%; height:auto; display:block; background:#000; }
.video-wrapper .play-pause-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90px; height:90px; border-radius:50%; border:none; background:rgba(0,0,0,0.55); color:#fff; font-size:38px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .3s ease, background .3s; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:2; pointer-events:none; }
.video-wrapper:hover .play-pause-btn, .video-wrapper .play-pause-btn:focus-visible { opacity:1; pointer-events:auto; }
.video-wrapper .play-pause-btn:focus-visible { outline:3px solid #fff; }
.video-wrapper .play-pause-btn:hover { background:rgba(0,0,0,0.75); }
/* When autoplay blocked we force show */
.video-wrapper .play-pause-btn.show { opacity:1; pointer-events:auto; }

@media (max-width: 600px){
  .video-wrapper .play-pause-btn { width:64px; height:64px; font-size:30px; }
}

/* Match responsive behavior from subpage layout for videos */
@media (max-width: 992px){
  .video-wrapper { width:100%; max-width:100%; }
}