/**
 * 正文渲染样式（配合 content-render.js）。
 * 用于动态详情、作品详情、教程详情、首页卡片详情等「文案 + 素材」展示区。
 */

/* 教程卡片的「查看详情」入口：与时长标签并排，不干扰点击播放。 */
.tutorial-detail-link {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 4px 10px;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  background: #000000a6;
  color: #f2f2f2;
  font-size: 12px;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.tutorial-detail-link:hover {
  border-color: #f87171;
  color: #fff;
}

.animation-card .video-card-duration { z-index: 2; }

.content-render {
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-secondary, #d4d4d8);
  overflow-wrap: anywhere;
}

.content-render .content-figure {
  margin: 8px 0;
  text-align: center;
}

/* 独占一行的图片在列内居中。
   注意用 max-width 而不是 width:100%：宽图（长图）会自动占满整列，
   而小图保持原始尺寸，不会被强行拉伸糊掉。 */
.content-render .content-figure img {
  max-width: 100%;
  border-radius: 8px;
}

.content-render img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

/* 分隔线：与 LibLib 活动页一致，用于把多张长图隔开。 */
.content-render hr {
  height: 0;
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--border-color, #2b2b2b);
}

.content-render figcaption {
  margin-top: 8px;
  color: var(--text-muted, #8b8b93);
  font-size: 13px;
  line-height: 1.6;
}

.content-render a {
  color: #f87171;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-render a:hover {
  color: #fca5a5;
}

/* 嵌入块：PDF 用浏览器自带阅读器，HTML 走 sandbox iframe。 */
.content-render .embed-block {
  margin: 24px 0;
}

.content-render .embed-block iframe {
  display: block;
  width: 100%;
  height: min(70vh, 620px);
  border: 1px solid var(--border-color, #2b2b2b);
  border-radius: 10px;
  background: #fff;
}

.content-render .embed-fallback {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .content-render { font-size: 15px; line-height: 1.85; }
  .content-render .embed-block iframe { height: 60vh; }
}

/* ========== 首页卡片详情弹窗 ========== */

.card-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #000000b8;
}

.card-detail-panel {
  width: min(880px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color, #2b2b2b);
  border-radius: 16px;
  background: var(--bg-card, #0f0f0f);
  box-shadow: 0 28px 80px #000c;
}

.card-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color, #2b2b2b);
}

.card-detail-head h2 {
  margin: 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.card-detail-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--border-color, #2b2b2b);
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary, #bbb);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.card-detail-close:hover { color: #fff; border-color: #555; }

.card-detail-body {
  padding: 22px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .card-detail-modal { padding: 12px; }
  .card-detail-body { padding: 16px; }
}
.full-html-frame {
  display: block;
  width: 100%;
  min-height: 72vh;
  border: 0;
  background: #fff;
}