/* 自定义图片样式 - 保持宽高比且统一显示效果 */

/* 默认图片样式 - 所有img标签的基础样式 */
.markdown-section img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e4e8;
  background-color: #f8f9fa;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 鼠标悬停效果 */
.markdown-section img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* 大图样式 - 适合蓝图、架构图、详细截图 */
.img-large {
  max-width: 90% !important;
  max-height: 600px !important;
  width: auto !important;
}

/* 中图样式 - 适合界面截图、功能演示 */
.img-medium {
  max-width: 70% !important;
  max-height: 450px !important;
  width: auto !important;
}

/* 小图样式 - 适合图标、按钮、小截图 */
.img-small {
  max-width: 40% !important;
  max-height: 300px !important;
  width: auto !important;
  margin: 10px 0 !important;
}

/* 超小图样式 - 适合图标、emoji等 */
.img-tiny {
  max-width: 150px !important;
  max-height: 150px !important;
  width: auto !important;
  margin: 5px 0 !important;
  border-radius: 4px !important;
}

/* 全宽图样式 - 适合横向很长的截图 */
.img-full {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* 固定比例图样式 - 16:9 比例 */
.img-16-9 {
  max-width: 80%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  width: auto;
}

/* 固定比例图样式 - 4:3 比例 */
.img-4-3 {
  max-width: 70%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: auto;
}

/* 精确像素尺寸类 - 常用尺寸 */
.img-200px { max-width: 200px !important; height: auto !important; }
.img-250px { max-width: 250px !important; height: auto !important; }
.img-300px { max-width: 300px !important; height: auto !important; }
.img-350px { max-width: 350px !important; height: auto !important; }
.img-400px { max-width: 400px !important; height: auto !important; }
.img-450px { max-width: 450px !important; height: auto !important; }
.img-500px { max-width: 500px !important; height: auto !important; }
.img-600px { max-width: 600px !important; height: auto !important; }
.img-700px { max-width: 700px !important; height: auto !important; }
.img-800px { max-width: 800px !important; height: auto !important; }

/* 自定义尺寸支持 - 使用CSS变量 */
.img-custom {
  max-width: var(--img-width, 400px) !important;
  max-height: var(--img-height, auto) !important;
  width: auto !important;
  height: auto !important;
}

/* 固定宽度，不限制高度 */
.img-width-only {
  max-width: var(--img-width, 400px) !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
}

/* 固定高度，不限制宽度 */
.img-height-only {
  max-height: var(--img-height, 300px) !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
}

/* 精确尺寸（同时限制宽度和高度） */
.img-exact {
  width: var(--img-width, 400px) !important;
  height: var(--img-height, 300px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* 内联图片样式 - 与文字同行显示 */
.img-inline {
  display: inline-block !important;
  margin: 0 5px !important;
  max-height: 1.5em !important;
  width: auto !important;
  vertical-align: middle !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}

/* 居中图片样式 - 特殊场景下需要居中显示 */
.img-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 居中图片说明文字 */
.img-caption-center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 响应式图片 - 在不同屏幕尺寸下自适应 */
@media (max-width: 768px) {
  .markdown-section img {
    max-width: 95% !important;
    margin: 10px 0 !important;
  }
  
  .img-large, .img-medium {
    max-width: 90% !important;
    max-height: 400px !important;
  }
  
  .img-small {
    max-width: 60% !important;
    max-height: 250px !important;
  }
}

@media (max-width: 480px) {
  .markdown-section img {
    max-width: 100% !important;
    margin: 8px 0 !important;
  }
  
  .img-large, .img-medium, .img-small {
    max-width: 95% !important;
  }
}

/* 图片加载失败时的样式 */
.markdown-section img[alt]:after {
  content: " (图片加载失败: " attr(alt) ")";
  display: block;
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 20px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* 图片组合样式 - 多图并排显示 */
.img-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20px 0;
}

.img-group img {
  flex: 1;
  min-width: 200px;
  max-width: 45%;
}

/* 图片说明文字样式 */
.img-caption {
  text-align: left;
  font-style: italic;
  color: #666;
  font-size: 0.9em;
  margin: -10px 0 20px 0;
  max-width: 80%;
}