/* auto-img.css - 基于中撰咨询网站风格的图片样式库 */
/* 一、配色系统（提取自官网） */
:root {
  /* 主色 */
  --primary-dark: #003366;    /* 深蓝主色 */
  --primary-main: #004099;    /* 深蓝交互色 */
  --primary-light: #002a66;   /* 深蓝暗调 */
  /* 辅助色 */
  --gold-main: #ffcc00;       /* 金色主色 */
  --gold-light: #ffd700;      /* 金色高亮 */
  /* 中性色 */
  --gray-100: #f8faff;        /* 浅灰背景 */
  --gray-200: #f5f7fc;        /* 表单背景 */
  --gray-300: #f0f4fa;        /* 标签背景 */
  --gray-400: #eef2f6;        /* 图片占位背景 */
  --gray-500: #e9ecf0;        /* 标题栏背景 */
  --gray-600: #d9e2ef;        /* 边框色 */
  --gray-700: #ccd9f0;        /* 悬停边框 */
  --gray-800: #6c7a8e;        /* 次要文字 */
  --gray-900: #4a5568;        /* 正文文字 */
  /* 文本色 */
  --text-primary: #222;       /* 主文本 */
  --text-secondary: #555;     /* 次要文本 */
  --text-white: #fff;         /* 白色文本 */
  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 14px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 30px rgba(0,51,102,0.1);
  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 40px;
  --radius-circle: 50%;
  /* 过渡 */
  --transition-base: 0.25s ease;
  --transition-hover: 0.3s ease;
}

/* 二、通用图片基础样式 */
img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  font-style: italic;
  background-color: var(--gray-400);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform var(--transition-base), box-shadow var(--transition-hover);
}

/* 三、图片容器通用样式 */
.img-container {
  position: relative;
  overflow: hidden;
  display: block;
}

/* 四、不同场景图片样式 */
/* 1. Logo图片 */
.logo-img {
  height: 50px; /* 电脑端 */
  width: auto;
  max-width: 180px;
  border-radius: var(--radius-sm);
}
@media (max-width: 768px) {
  .logo-img {
    height: 40px; /* 移动端 */
  }
}
.logo-img:hover {
  transform: scale(1.02);
}

/* 2. 资讯列表图片 */
.news-img {
  width: 260px;
  height: 180px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
@media (max-width: 768px) {
  .news-img {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
.news-img:hover {
  transform: scale(1.03);
}

/* 3. 二维码图片 */
.qr-img {
  width: 100%;
  max-width: 100px;
  border-radius: var(--radius-md);
  border: 3px solid rgba(255,255,255,0.2);
}
.qr-img:hover {
  box-shadow: var(--shadow-md);
}

/* 4. 弹窗图片 */
.modal-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
}

/* 5. 案例展示图片 */
.case-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.case-img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* 五、图片懒加载样式 */
.img-lazy {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.img-lazy.loaded {
  opacity: 1;
}

/* 六、图片占位符样式 */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-800);
  font-size: 14px;
  font-weight: 400;
}
/* 占位符图标 */
.img-placeholder::before {
  content: "🖼️";
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.7;
}

/* 七、响应式图片适配 */
/* 大屏适配 */
@media (min-width: 1200px) {
  .img-lg {
    height: 280px;
  }
}
/* 中屏适配 */
@media (min-width: 768px) and (max-width: 1199px) {
  .img-md {
    height: 240px;
  }
}
/* 小屏适配 */
@media (max-width: 767px) {
  .img-sm {
    height: 200px;
  }
  /* 移动端图片全屏宽度 */
  .img-fluid-mobile {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
  }
}

/* 八、图片特效样式 */
/* 圆角图片 */
.img-rounded {
  border-radius: var(--radius-md);
}
/* 圆形图片 */
.img-circle {
  border-radius: var(--radius-circle);
  object-fit: cover;
}
/* 带边框图片 */
.img-bordered {
  border: 1px solid var(--gray-600);
  padding: 4px;
}
.img-bordered:hover {
  border-color: var(--primary-main);
}
/* 阴影图片 */
.img-shadow {
  box-shadow: var(--shadow-md);
}
.img-shadow-hover:hover {
  box-shadow: var(--shadow-lg);
}

/* 九、图片排版样式 */
/* 左对齐 */
.img-left {
  float: left;
  margin: 0 16px 16px 0;
}
/* 右对齐 */
.img-right {
  float: right;
  margin: 0 0 16px 16px;
}
/* 居中 */
.img-center {
  display: block;
  margin: 0 auto 16px;
}
/* 图文环绕 */
.img-wrap {
  float: left;
  margin: 8px 16px 8px 0;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

/* ===== 十、图片加载失败样式 - 修复版 ===== */
/* 移除了绝对定位的伪元素，改用更友好的占位符方式 */
img[alt][src=""],
img[alt]:not([src]),
img[alt][src*="404"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background-color: var(--gray-400);
  color: var(--gray-800);
  font-size: 14px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

img[alt][src=""]::before,
img[alt]:not([src])::before,
img[alt][src*="404"]::before {
  content: "🖼️ " attr(alt) " (图片加载失败)";
  display: block;
  color: var(--gray-800);
}