/* 前端样式 — 横屏/竖屏/响应式通用 */
.bili-embed {
  margin: 1.5em 0;
  padding: 0;
  display: block;
  width: var(--bili-width, 100%);
  max-width: 100%;
  margin-left: var(--bili-align, auto);
  margin-right: var(--bili-align, auto);
  box-sizing: border-box;
}

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

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

/* ------------------------------------------------------- */
/* 固定 / 响应式：均按「画面比例」显示（横屏 16:9，竖屏 9:16） */
/* ------------------------------------------------------- */

.bili-embed--portrait,
.bili-embed--ratio-9-16,
.bili-embed--ratio-9\/16 {
  margin-left: auto;
  margin-right: auto;
}

.bili-embed--landscape,
.bili-embed--ratio-16-9,
.bili-embed--ratio-16\/9 {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.bili-embed--mode-responsive {
  max-width: 100%;
}

/* 移动端：比例跟 --bili-aspect-mobile（= 编辑器所选画面比例），不再写死 9:16 */
@media (max-width: 768px) {
  .bili-embed--mode-responsive.bili-embed--landscape {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .bili-embed--mode-responsive.bili-embed--portrait {
    width: var(--bili-mobile-width, 380px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .bili-embed--mode-responsive .bili-embed__frame {
    aspect-ratio: var(--bili-aspect-mobile, var(--bili-aspect, 16 / 9));
  }
}

@media (max-width: 480px) {
  .bili-embed {
    max-width: 100%;
  }

  .bili-embed--portrait,
  .bili-embed--ratio-9-16 {
    max-width: min(320px, 100%);
  }
}

.bili-embed-error {
  padding: 12px 16px;
  background: #fef8e7;
  border-left: 4px solid #d4a72c;
  border-radius: 2px;
  color: #604800;
  font-size: 14px;
}