.video-detail-header {
  text-align: center;
}

.video-embed-grid {
  display: grid;
  gap: var(--space-md);
}

.video-embed-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--header-bg, rgba(11, 15, 20, 0.95));
  backdrop-filter: blur(10px);
  padding: 0.7rem;
  width: 100%;
}

.video-embed-placeholder {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius-lg) - 0.2rem);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 42%),
    var(--color-bg-soft);
  overflow: hidden;
}

.video-embed-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.24;
}

.video-embed-frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  border: 0;
  border-radius: calc(var(--radius-lg) - 0.2rem);
  background: #000;
}

.video-embed-media {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  border: 0;
  border-radius: calc(var(--radius-lg) - 0.2rem);
  background: #000;
  object-fit: contain;
}

.video-embed-media[data-video-lazy]:not([src]) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 42%),
    #000;
}

@media (min-width: 900px) {
  .video-embed-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: start;
  }

  .video-embed-grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: start;
  }

  .video-embed-grid.three-columns .video-embed-card:nth-child(n + 4) {
    margin-top: clamp(8rem, 14vh, 12rem);
  }

  .video-embed-card {
    max-width: min(100%, 28vw);
    margin: 0 auto;
  }

  .video-embed-grid.three-columns .video-embed-card {
    max-width: min(100%, 28vw);
  }
}

@media (min-width: 900px) and (max-height: 900px) {
  .video-embed-card {
    max-width: min(100%, 24vw);
  }

  .video-embed-grid.three-columns .video-embed-card {
    max-width: min(100%, 24vw);
  }

  .video-embed-grid.three-columns .video-embed-card:nth-child(n + 4) {
    margin-top: clamp(6rem, 10vh, 8rem);
  }
}