.video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.video-item {
  position: relative;
  background: var(--card-bg, #0a1f44);
  border: 1px solid var(--border, #343a40);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Thumbnail layer fills the card */

.video-item .thumb {
  position: absolute;
  inset: 0;
  background: #111 center/cover no-repeat;
  filter: brightness(.96);
}

/* Nice skeleton while thumbnail is loading */

.video-item.loading .thumb {
  background-image: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,0.06), transparent 45%), linear-gradient(135deg, rgba(255,255,255,0.06), transparent);
  animation: thumbPulse 1.1s ease-in-out infinite alternate;
}

@keyframes thumbPulse {
  from {
    filter: brightness(.9);
  }
  to {
    filter: brightness(1);
  }
}

.video-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px var(--shadow);
  border-color: var(--secondary);
}

/* Make the iframe fill its container (container controls aspect-ratio) */

.video-item iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Subtle play overlay */

.play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-item:hover .play-overlay {
  opacity: 1;
}

.play-overlay .play-icon {
  font-size: 2.5rem;
  line-height: 1;
  color: #fff;
  user-select: none;
}

/* ---- Layout hints (columns + aspect ratios) ----
       We let rows auto-place; JS computes row spans.
       Keep aspect ratios so the item height is deterministic. */

.A {
  grid-column: 1 / 3;
  aspect-ratio: 16 / 9;
}

.B {
  grid-column: 1 / 3;
  aspect-ratio: 16 / 9;
}

.C {
  grid-column: 3;
  aspect-ratio: 9 / 16;
}

.D {
  grid-column: 4;
  aspect-ratio: 9 / 16;
}

.E {
  grid-column: 1;
  aspect-ratio: 9 / 16;
}

.F {
  grid-column: 2;
  aspect-ratio: 9 / 16;
}

.G {
  grid-column: 3 / 5;
  aspect-ratio: 16 / 9;
}

/* spans columns 3-4 */

.H {
  /*grid-column: 1 / 3;*/
  /*aspect-ratio: 16 / 9;*/
  aspect-ratio: 16 / 9;
  grid-column: 3 / 5;
}

.I {
  grid-column: 3;
  aspect-ratio: 9 / 16;
}

/* Responsive: collapse to 2 cols / 1 col */

@media (max-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .A, .B, .G, .H {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .C, .D, .E, .F, .I {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .A, .B, .C, .D, .E, .F, .G, .H, .I {
    grid-column: span 1;
  }
}

/* ---- Pop modal styles used by your popCard() ---- */

/* The modal is JUST the video area now */

.pvs-pop-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.pvs-pop-video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pvs-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}

.pvs-close-button:hover {
  transform: rotate(90deg);
  opacity: 1;
}