/* embed.css 嵌入容器样式：
   render/embed.go 输出的视频/音频/播客容器统一外观，
   16:9 响应式 + 暗色对比 + 触摸友好的播放器尺寸。 */

/* ---------- 视频通用：16:9 等比 ---------- */
.video-embed {
  position: relative;
  width: 100%;
  margin: 1.25rem 0;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  aspect-ratio: 16 / 9;
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 不支持 aspect-ratio 的旧浏览器降级（padding-bottom 占位） */
@supports not (aspect-ratio: 16 / 9) {
  .video-embed {
    height: 0;
    padding-bottom: 56.25%;
  }
}

/* youtube 与 bilibili 容器无差，仅留 hook 以便后续覆盖 */
.video-youtube,
.video-bilibili,
.video-self {
  background: #000;
}

/* ---------- 音频：直链段落 ---------- */
.audio-embed {
  margin: 1.25rem 0;
  padding: 12px 14px;
  background: var(--bg-soft, #f6f7f9);
  border: 1px solid var(--border, #e3e5ea);
  border-radius: 6px;
}

.audio-embed audio {
  width: 100%;
  display: block;
  min-height: 40px;
}

/* ---------- 播客单集：列表内的播放器更紧凑 ---------- */
.audio-podcast {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.audio-podcast audio {
  width: 100%;
  height: 44px;
}

/* ---------- 暗色主题适配 ---------- */
@media (prefers-color-scheme: dark) {
  .video-embed {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  }
  .audio-embed {
    background: #1c1f24;
    border-color: #2a2e35;
  }
}

/* 显式暗色类（部分项目用 .theme-dark 切换） */
.theme-dark .audio-embed {
  background: #1c1f24;
  border-color: #2a2e35;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 600px) {
  .video-embed {
    margin: 1rem -8px; /* 紧贴文章左右内边距 */
    border-radius: 0;
  }
  .audio-embed,
  .audio-podcast audio {
    height: 48px;
  }
}