/* Card / thumbnail */
/* .new-card { max-width:760px; margin: 0 auto; } */
.video-thumb {
  position: relative;
  cursor: pointer;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(10,20,40,0.08);
  /* background: #000; */
}
.video-thumb .thumb {
  /* display:block; */
  width:100%;
  height:100%;
  object-fit:cover;
  vertical-align: middle;
  transition: transform .35s ease;
}
.video-thumb:focus { outline: 3px solid rgba(37,99,235,0.25); outline-offset: 4px; }
.video-thumb:hover .thumb { transform: scale(1.03); }

/* Play button center */
.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* clicks handled by container */
  transition: transform .2s ease, opacity .25s ease;
  opacity: 1;
}
.video-thumb:active .play-btn { transform: translate(-50%,-50%) scale(.98); }

/* caption styling */
.video-thumb caption {
  display:block;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
}
.video-thumb caption strong { display:block; margin-bottom:4px; font-size:16px; }
.video-thumb .muted { color: #6b7280; font-size:13px; }

/* Modal layout */
.video-modal {
  position: fixed;
  inset: 0;
  display: none; /* shown via .open */
  z-index: 1200;
  align-items: center;
  justify-content: center;
}
.video-modal.open { display: flex; }

/* Backdrop */
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

/* Panel */
.video-modal-panel {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  width: min(1100px, 96%);
  margin: auto;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(10,20,40,0.5);
  background: #000; /* black behind video */
  overflow: hidden;
}

/* Video element responsive */
#modalVideo {
  width: 100%;
  height: 100%;
  max-height: calc(92vh - 40px);
  display: block;
  background: #000;
  border-radius: 6px;
  object-fit: contain;
}

/* Close button */
.video-modal-panel .modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:hover { background: rgba(255,255,255,0.14); }

/* small screens fine-tuning */
@media (max-width:640px){
  .modal-close { width:36px; height:36px; font-size:20px; top:6px; right:6px; }
  .play-btn svg { width:56px; height:56px; }
}