/**
 * Mobile Responsive Fixes
 * 移动端响应式修复 - 图片和代码块自适应
 */

/* 图片响应式 - 确保在移动端不会溢出 */
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 代码块响应式 - 处理 Hexo 生成的 figure.highlight 表格结构 */
.article-content figure.highlight {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  margin: 15px 0;
}

.article-content figure.highlight table {
  max-width: 100%;
  table-layout: fixed; /* 强制表格遵循父容器宽度 */
  border-collapse: collapse;
}

.article-content figure.highlight table td {
  padding: 0;
  border: none;
}

.article-content figure.highlight table td.code {
  width: 100%;
  max-width: 100%;
}

.article-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  margin: 0;
  padding: 12px;
  white-space: pre; /* 保持代码格式 */
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: normal; /* 不强制换行，允许横向滚动 */
}

.article-content code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word; /* 长代码自动换行（主要用于行内代码） */
  word-break: break-all; /* 强制断行，防止溢出（主要用于行内代码） */
}

/* 行内代码特殊处理 */
.article-content :not(pre) > code {
  word-break: break-all;
  white-space: normal; /* 行内代码正常换行 */
  overflow-wrap: break-word;
}

/* 代码块内的代码不自动换行，保持原格式 */
.article-content pre code {
  display: block;
  overflow-x: auto;
  white-space: pre; /* 保持代码格式 */
  word-break: normal; /* 不强制断行 */
  overflow-wrap: normal;
  font-size: inherit;
  padding: 0;
  margin: 0;
}

/* 移动端优化（屏幕宽度小于 768px） */
@media (max-width: 768px) {
  /* 图片进一步优化 */
  .article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* 移动端圆角更友好 */
  }

  /* 代码块移动端优化 */
  .article-content figure.highlight {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 4px;
  }

  .article-content pre {
    font-size: 12px; /* 稍小字体 */
    line-height: 1.4;
    padding: 10px;
    overflow-x: auto;
    border-radius: 4px;
    max-width: 100%;
  }

  .article-content pre code {
    font-size: 12px;
    overflow-x: auto;
  }

  /* 行内代码样式 */
  .article-content :not(pre) > code {
    font-size: 12px;
    word-break: break-all;
    white-space: normal;
    background: var(--card);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid var(--border);
    overflow-wrap: break-word;
  }
}

/* 超小屏幕（小于 480px） */
@media (max-width: 480px) {
  .article-content pre {
    font-size: 11px; /* 更小字体 */
    padding: 8px;
    margin: 8px 0;
    overflow-x: auto;
  }

  .article-content code {
    font-size: 11px;
  }

  .article-content pre code {
    font-size: 11px;
  }

  /* 图片超小屏幕优化 */
  .article-content img {
    max-width: 100%;
    height: auto;
  }

  .article-content :not(pre) > code {
    font-size: 11px;
    padding: 2px 3px;
  }
}