/* =========================================================
 * OneNav · Medium 风格中轴阅读模式（文章页）
 * 仅作用于单篇文章：.single-post
 * ======================================================= */

/* ===== A. 外层：卡片不再“顶到边”，而是中轴 + 轻卡片 ===== */
.single-post .io-article-card{
  max-width: 1260px;
  margin: 0 auto;
  border-radius: 3px;
}

/* 卡片主体：视觉上更像 Medium 的纸面 */
.single-post .io-article-body{
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 36px;
  padding-right: 36px;
}

/* ===== B. 中轴：标题/Meta/正文/页脚统一限制在阅读宽度 ===== */
.single-post .io-article-header,
.single-post .io-article-content,
.single-post .io-article-footer{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== C. 标题区：更像 Medium 的克制风格 ===== */
.single-post .io-article-title{
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 650;
  margin-bottom: 14px;
}

/* Meta：变成“中轴下的一行细信息” */
.single-post .io-article-meta{
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-size: 13px;
  line-height: 1.6;
}

.single-post .io-article-meta-left,
.single-post .io-article-meta-right{
  gap: 10px;
}

.single-post .io-article-meta a{
  text-decoration: none;
}

.single-post .io-article-meta a:hover{
  color: var(--theme-color, #3b82f6);
}

/* =========================================================
 * Fix: 顶部 meta 小工具（浏览/评论/收藏）错位
 * 原因：内容过长时 flex 撑爆，右侧被挤乱
 * ======================================================= */
.single-post .io-article-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.single-post .io-article-meta-left{
  flex: 1 1 auto;
  min-width: 0;             /* 关键：允许收缩 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.single-post .io-article-meta-right{
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;        /* 右侧不拆行 */
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}

/* 空间不足：右侧掉到下一行仍右对齐 */
@media (max-width: 992px){
  .single-post .io-article-meta-right{
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* 可选：限制长文本（分类/作者）避免挤爆 */
.single-post .io-article-author a,
.single-post .io-article-cat a{
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px){
  .single-post .io-article-author a,
  .single-post .io-article-cat a{
    max-width: 160px;
  }
}

/* ===== D. 正文排版 ===== */
.single-post .io-article-content{
  font-size: 16px;
  line-height: 1.95;
  color: #111827;
}

.single-post .io-article-content p{
  margin: 18px 0;
}

.single-post .io-article-content h2{
  margin: 50px 0 18px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
}

.single-post .io-article-content h3{
  margin: 40px 0 16px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 650;
}

.single-post .io-article-content ul,
.single-post .io-article-content ol{
  padding-left: 22px;
  margin: 18px 0;
}

.single-post .io-article-content li{
  margin: 8px 0;
}

.single-post .io-article-content blockquote{
  margin: 26px 0;
  padding: 14px 18px;
  background: rgba(15,23,42,.04);
  border-left: 3px solid rgba(15,23,42,.22);
  border-radius: 3px;
  color: rgba(15,23,42,.82);
}

.single-post .io-article-content pre{
  margin: 26px 0;
  padding: 18px 20px;
  border-radius: 3px;
  overflow-x: auto;
  font-size: 13px;
}

/* ===== E. 图片与宽图 ===== */
.single-post .io-article-content img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px auto;
  border-radius: 12px;
}

.single-post .io-article-content .alignwide,
.single-post .io-article-content figure.alignwide{
  max-width: 980px;
  margin-left: calc(50% - 490px);
  margin-right: calc(50% - 490px);
}

.single-post .io-article-content .alignfull,
.single-post .io-article-content figure.alignfull{
  max-width: 1120px;
  margin-left: calc(50% - 560px);
  margin-right: calc(50% - 560px);
}

/* ===== F. 页脚 ===== */
.single-post .io-article-footer{
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* 上下篇导航：宽度跟文章卡片一致 */
.single-post .near-navigation.io-article-near-nav{
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 36px;
  padding-right: 36px;
  box-sizing: border-box;
  border-radius: 3px;
}

/* ===== H. 暗黑模式 ===== */
.io-black-mode .single-post .io-article-card{
  background: rgba(41,41,41,.90);
}

.io-black-mode .single-post .io-article-title{
  color: rgba(255,255,255,.92);
}

.io-black-mode .single-post .io-article-content{
  color: rgba(255,255,255,.86);
}

.io-black-mode .single-post .io-article-meta{
  border-bottom-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}

.io-black-mode .single-post .io-article-footer{
  border-top-color: rgba(255,255,255,.10);
}

.io-black-mode .single-post .io-article-content blockquote{
  background: rgba(41,41,41,1);
  border-left-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
}

.io-black-mode .single-post .near-navigation.io-article-near-nav{
  background: rgba(41,41,41,.90);
}

.io-black-mode .single-post .near-navigation.io-article-near-nav .border-color{
  border-color: rgba(255,255,255,.10) !important;
}

/* ===== I. 移动端 ===== */
@media (max-width: 768px){
  .single-post .io-article-body{
    padding-left: 22px;
    padding-right: 22px;
  }
  .single-post .io-article-header,
  .single-post .io-article-content,
  .single-post .io-article-footer,
  .single-post .io-article-near-nav{
    max-width: 100%;
  }
  .single-post .io-article-title{
    font-size: 22px;
    line-height: 1.3;
  }
  .single-post .io-article-content .alignwide,
  .single-post .io-article-content figure.alignwide,
  .single-post .io-article-content .alignfull,
  .single-post .io-article-content figure.alignfull{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* 小屏更容易挤：右侧直接换行右对齐 */
  .single-post .io-article-meta-right{
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}