/* =========================================================
   article-detail.css  (终极移动端防溢出版)
   - 强制移动端一列
   - 处理 flex/grid/min-width/100vw 导致的横向滚动
   - 正文媒体/长链接/表格/代码块兜底
   ========================================================= */

/* 0) 全局兜底：任何情况下不允许横向滚动（最关键） */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 可选：某些浏览器会把 100vw 带来的滚动条算进去，这里加一层兜底 */
body {
  position: relative;
}

/* 1) 外层容器 */
.article-container {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* 2) 布局：PC 两列 */
.article-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;

  /* ✅ 关键兜底：允许换行，防止某些元素把 flex 撑爆 */
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}

/* ✅ flex 子项防溢出关键 */
.article-main {
  flex: 1 1 0%;
  min-width: 0;            /* 必须有 */
  max-width: 100%;
  box-sizing: border-box;

  /* ✅ 再兜底：避免内部元素撑出横向滚动 */
  overflow-x: hidden;
}

/* 侧边栏 */
.article-sidebar {
  width: 300px;
  flex: 0 0 300px;         /* 明确固定列宽 */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 3) 面包屑 */
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;
}

.article-breadcrumb::before {
  content: "";
  width: 3px;
  height: 18px;
  background: #ff6a00;
  display: inline-block;
}

.article-breadcrumb .crumb-link {
  color: #ff6a00;
  text-decoration: none;
  font-weight: 600;
}

.article-breadcrumb .crumb-link:hover {
  text-decoration: underline;
}

.article-breadcrumb .crumb-current {
  color: #ff6a00;
  font-weight: 600;
}

.article-breadcrumb .crumb-separator {
  color: #999;
}

/* 4) ✅ 正文：防止移动端长词/符号/URL 撑破 */
.content-text {
  max-width: 100%;
  box-sizing: border-box;

  overflow-wrap: anywhere;     /* 最强断行 */
  word-break: break-word;
  white-space: normal;

  /* 关键：不要让内部出现横向滚动把页面撑开 */
  overflow-x: hidden;
}

/* 富文本所有子元素：强制不超过容器 */
.content-text * {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ✅ 链接：长 URL 强制断行 */
.content-text a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ✅ 媒体元素自适应 */
.content-text img,
.content-text video,
.content-text iframe,
.content-text embed,
.content-text object {
  max-width: 100% !important;
  height: auto !important;

  /* 避免图片/iframe 自带 display:inline 导致奇怪空隙 */
  display: block;
}

/* ✅ 表格：不删除的话必须横向滚动，不可撑破页面 */
.content-text table {
  max-width: 100% !important;
  width: 100% !important;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ✅ 代码块：允许内部滚动，但不撑破页面 */
.content-text pre,
.content-text code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 5) 侧边栏样式 */
.sidebar-block {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fafafa;
}

.sidebar-block h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #333;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px dashed #e6e6e6;
}

.sidebar-list li:last-child {
  border-bottom: none;
}

.sidebar-list a {
  color: #333;
  text-decoration: none;
}

.sidebar-list a:hover {
  color: #ff4757;
}

.sidebar-list .meta {
  font-size: 12px;
  color: #999;
}

.sidebar-list .empty {
  color: #999;
  padding: 8px 0;
}

/* 6) ✅ 关键：移动端强制一列（用 !important 压住其它 CSS） */
@media (max-width: 960px) {
  .article-layout {
    display: block !important;     /* 强制取消两列 */
    width: 100% !important;
    max-width: 100% !important;
  }

  .article-main,
  .article-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 侧边栏如果在别处被 sticky/fixed，这里强制还原 */
  .article-sidebar {
    position: static !important;
    flex: none !important;
  }
}

/* 7) ✅ 手机再优化：减少左右 padding */
@media (max-width: 600px) {
  .article-container {
    margin: 16px auto;
    padding: 14px;
    border-radius: 10px;

    /* ✅ 防止外层被某些 100vw 影响：锁死为 100% */
    width: 100% !important;
    max-width: 100% !important;
  }

  .content-text {
    font-size: 16px;
    line-height: 1.75;
  }
}
/* ===== chinaqw 图集正文（figure/figcaption） ===== */
.content-text figure{
  margin: 16px 0;
  padding: 0;
}

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

/* 图注更舒服：断行 + 行距 */
.content-text figure figcaption{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  opacity: .9;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 可选：让图注像“卡片”一样（想要就取消注释） */
/*
.content-text figure figcaption{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
}
*/