/* 前端样式 — 横屏/竖屏/响应式通用
 *
 * 抖音 open.douyin.com/player 与 B 站不同:
 *   1) 父宽 < ~730px 时强制手机竖版布局
 *   2) 竖版在 iframe 内常把画面偏左, 右侧留约 15% 黑边
 *   3) 纯 9:16 高度不够, 会裁掉底部进度条 / 「去抖音」栏
 *
 * CSS 变量:
 *   --douyin-width         : 外层容器宽度. 默认 100%.
 *   --douyin-aspect        : 桌面 / 单模式高宽比
 *   --douyin-aspect-mobile : 响应式移动端高宽比 (默认比 9:16 更高)
 *   --douyin-mobile-width  : 响应式移动端宽度 (默认 324px)
 */
.douyin-embed {
  margin: 1.5em 0;
  padding: 0;
  display: block;
  width: var(--douyin-width, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.douyin-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--douyin-aspect, 9 / 16);
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: var(--douyin-max-h, none);
}

.douyin-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------------------------------- */
/* single 模式 —— 按 ratio 固定 */
/* ------------------------------------------------------- */

.douyin-embed--ratio-9-16,
.douyin-embed--ratio-9\/16,
.douyin-embed--ratio-3-4,
.douyin-embed--ratio-3\/4,
.douyin-embed--ratio-1-1,
.douyin-embed--ratio-1\/1 {
  margin-left: auto;
  margin-right: auto;
}

.douyin-embed--ratio-16-9,
.douyin-embed--ratio-16\/9,
.douyin-embed--ratio-4-3,
.douyin-embed--ratio-4\/3 {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------- */
/* responsive 模式 —— 桌面 16:9, 移动端竖屏 */
/* ------------------------------------------------------- */
.douyin-embed--mode-responsive {
  margin-left: auto;
  margin-right: auto;
}

/*
 * 移动端竖版:
 *   - 外层居中, 宽度默认 324px (与抖音内部手机画幅一致)
 *   - 比例略高于 9:16, 露出进度条 / 底部 CTA
 *   - 右侧黑边由 fit.js 按 324px scale 铺满消除 (勿再用 width:135% ——
 *     抖音会随 iframe 变宽同步留黑, 加宽无效)
 */
@media (max-width: 768px) {
  figure.douyin-embed.douyin-embed--mode-responsive {
    width: min(var(--douyin-mobile-width, 324px), 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
    float: none !important;
  }

  .douyin-embed--mode-responsive .douyin-embed__frame {
    aspect-ratio: var(--douyin-aspect-mobile, 9 / 19.5);
    overflow: hidden !important;
  }

  .douyin-embed--mode-responsive .douyin-embed__frame iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  figure.douyin-embed.douyin-embed--mode-single.douyin-embed--ratio-9-16,
  figure.douyin-embed.douyin-embed--ratio-9-16 {
    width: min(var(--douyin-vmax, 324px), 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
    float: none !important;
  }

  .douyin-embed--mode-single.douyin-embed--ratio-9-16 .douyin-embed__frame,
  .douyin-embed--ratio-9-16 .douyin-embed__frame {
    aspect-ratio: 9 / 19.5;
    overflow: hidden !important;
  }

  .douyin-embed--mode-single.douyin-embed--ratio-9-16 .douyin-embed__frame iframe,
  .douyin-embed--ratio-9-16 .douyin-embed__frame iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }
}

/* ------------------------------------------------------- */
/* 编辑器错误占位 */
/* ------------------------------------------------------- */
.douyin-embed-error {
  padding: 12px 16px;
  background: #fef8e7;
  border-left: 4px solid #d4a72c;
  border-radius: 2px;
  color: #604800;
  font-size: 14px;
}