/*! bundle-b-20260925.css —— 图片适配 / 2026 主题 / 首页 v3（主题条件文件之后加载）
 * 合并自（顺序即原层叠顺序）：image-fit.css , theme-2026-v2.css , home-v3.css
 * 原文件全部保留，回滚只需把 head 里的 link 换回原来的多行。
 */

/* ===== image-fit.css ===== */
/* ============================================================
   图片自动适配补丁（全主题通用）
   1. 产品卡片 & 详情主图：完整显示不裁剪（任意比例自动适配）
   2. 富文本内容图片：自动缩放、圆角、防溢出
   3. 全站图片兜底：超出父容器自动约束
   ============================================================ */

/* ---------- 产品列表卡片：白底衬板 + 完整显示（任何比例不裁剪） ---------- */
.product-grid .product-card .media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef2f6;                 /* 中性衬板：白底产品图有清晰边界 */
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-grid .product-card .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;                 /* 关键：完整显示，缩放居中，绝不裁剪 */
  object-position: center;
  padding: 8px;
  box-sizing: border-box;
}
.product-grid .product-card:hover .media img { transform: scale(1.03); }

/* ---------- 产品详情主图：容器 + 完整显示 ---------- */
.product-detail-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2f6;                 /* 固定中性浅灰，全主题统一衬板 */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  min-height: 240px;
  overflow: hidden;
}
/* 覆盖 about-split 的 5:4 硬裁剪：改为完整自适应 */
.about-split .visual.product-detail-visual img,
.product-detail-visual img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  background: #fff;
}

/* ---------- 产品列表卡片图片：统一尺寸 + 居中裁剪（防变形） ---------- */
.product-card .media img {
  object-position: center;
}

/* ---------- 相关产品推荐（详情页底部：白底图完整显示） ---------- */
.related-products .scene .media {
  background: #eef2f6;
  border-radius: var(--radius);
}
.related-products .scene .media img {
  object-fit: contain !important;
  padding: 6px;
  box-sizing: border-box;
}

/* ---------- 富文本内容图片（产品详情/新闻/案例正文） ---------- */
.article-body img,
.detail-body img,
.prose img,
.product-detail-content img,
.content-html img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 12px auto;
}
.article-body figure,
.detail-body figure,
.prose figure {
  max-width: 100%;
  margin: 12px auto;
}

/* ---------- 全站兜底：任何图片不得横向溢出 ---------- */
.article-body img,
.detail-body img,
.prose img,
.product-detail-content img,
.content-html img,
.about-split .visual img,
.news-detail .media img,
.case-detail .media img {
  max-width: 100%;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 767px) {
  .product-detail-visual { min-height: 180px; padding: 10px; }
  .product-detail-visual img { max-height: 380px; }
}


/* ===== theme-2026-v2.css ===== */
/* ============================================================
   美彦环保 · 主站现代主题层 v2（2026）
   基于 CSS 变量设计体系，最后加载覆盖旧样式；
   只做「视觉升级」，不改变布局结构与功能。
   v2：修正 hero 遮罩（左暗右透，避免大图被压暗）
   ============================================================ */
:root {
  --brand: #0b6e4f;
  --brand-2: #0f8a63;
  --brand-3: #14b8a6;
  --brand-grad: linear-gradient(135deg, #0b6e4f 0%, #0f8a63 55%, #14b8a6 100%);
  --ink: #14201c;
  --ink-2: #42534c;
  --ink-3: #6b7d76;
  --bg: #f7fbf9;
  --bg-soft: #eef7f3;
  --card-bg: #ffffff;
  --line: #e2efe9;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(11, 110, 79, .06);
  --shadow-md: 0 10px 30px rgba(11, 110, 79, .10);
  --shadow-lg: 0 22px 55px rgba(11, 110, 79, .16);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); }
a { transition: color .2s ease; }
a:hover { color: var(--brand); }

.header { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(11,110,79,.06), 0 8px 24px rgba(11,110,79,.05); }
.header .nav a { font-weight: 500; }
.header .nav a:hover { color: var(--brand); }

.btn, .btn--primary, .btn--light { border-radius: 999px !important; font-weight: 700; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease; }
.btn--primary, .btn { background: var(--brand-grad) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(11, 110, 79, .22); }
.btn--primary:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 110, 79, .28); }

.page-hero, .home-hero, .hero { background: radial-gradient(1000px 420px at 85% -10%, rgba(20,184,166,.30), transparent 60%), radial-gradient(800px 380px at 0% 110%, rgba(11,110,79,.24), transparent 60%), linear-gradient(150deg, #09251b 0%, #0b3a2b 60%, #0f5a3f 100%) !important; color: #fff; }
.page-hero h1, .home-hero h1, .hero h1 { font-weight: 800; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.page-hero .crumbs a { color: #9fe8d2; }

.section-head .eyebrow { letter-spacing: .22em; color: var(--brand); font-weight: 700; }
.section-head h2 { font-weight: 800; letter-spacing: .01em; }

.card, .product-card, .scene, .news-card, .feature { border-radius: 16px; border: 1px solid var(--line); background: var(--card-bg); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover, .product-card:hover, .scene:hover, .news-card:hover, .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #bfe8da; }
.card .media img, .product-card .media img, .scene .media img, .news-card .media img { transition: transform .4s ease; }
.card:hover .media img, .product-card:hover .media img { transform: scale(1.04); }

.footer { background: linear-gradient(180deg, #0a1f17 0%, #06130e 100%); }
.footer a { color: #b9d8cc; transition: color .2s ease; }
.footer a:hover { color: #fff; }

.section--soft { background: var(--bg-soft); }

html { scroll-behavior: smooth; }
h1, h2, h3 { letter-spacing: .01em; }
.page-hero { padding: 84px 0 72px; }
.section { padding: 64px 0; }
.tag, .eyeBrow, .eyebrow { letter-spacing: .12em; font-weight: 600; }
.card .tag, .product-card .tag { background: rgba(11, 110, 79, .08); color: var(--brand); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.card h3, .product-card h3 { font-weight: 700; }
.card p, .product-card p { color: var(--ink-3); }
.divider, .section-head h2 { color: var(--ink); }

@keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.slide-content .hero-badge, .slide-content h1, .slide-content h2.slide-title, .slide-content .slide-sub, .slide-content .hero-actions,
.page-hero .crumbs, .page-hero h1, .page-hero p, .page-hero .hero-actions { animation: heroFadeUp .7s ease both; }
.slide-content .hero-badge { animation-delay: .05s; }
.slide-content h1, .slide-content h2.slide-title { animation-delay: .15s; }
.slide-content .slide-sub { animation-delay: .3s; }
.slide-content .hero-actions { animation-delay: .45s; }
.mist-layer span, .hero-carousel .mist-layer span { filter: blur(6px); mix-blend-mode: screen; }
.hero-badge .dot { animation: badgePulse 2.4s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,.5); } 50% { box-shadow: 0 0 0 7px rgba(20,184,166,0); } }
.hero-waves svg path { animation: waveDrift 9s ease-in-out infinite alternate; }
@keyframes waveDrift { from { transform: translateX(-8px); } to { transform: translateX(8px); } }

/* hero 遮罩：左侧暗保证文字可读，右侧透出大图（v2 修正） */
.hero-slide-mask { background: linear-gradient(90deg, rgba(6,18,28,.58) 0%, rgba(6,18,28,.22) 45%, rgba(6,18,28,.02) 100%); }

.city-hero { position: relative; overflow: hidden; }
.city-hero .mist-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.city-hero .mist-layer span { position: absolute; width: 46%; height: 110px; background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.18), transparent 70%); filter: blur(8px); }
.city-hero .mist-layer .m1 { bottom: 10%; left: -20%; animation: mistDrift 22s ease-in-out infinite alternate; }
.city-hero .mist-layer .m2 { bottom: 22%; right: -26%; animation: mistDrift 28s ease-in-out infinite alternate-reverse; }
.city-hero .mist-layer .m3 { bottom: 36%; left: 16%; width: 36%; animation: mistDrift 18s ease-in-out infinite alternate; }
.city-hero > .wrap, .city-hero > div { position: relative; z-index: 1; }
.city-hero .hero-fade > * { animation: heroFadeUp .7s ease both; }
.city-hero .hero-fade > *:nth-child(2) { animation-delay: .15s; }
.city-hero .hero-fade > *:nth-child(3) { animation-delay: .3s; }
.city-hero .hero-fade > *:nth-child(4) { animation-delay: .45s; }

:root { --brand-grad: linear-gradient(135deg, #0b6e4f 0%, #0f8a63 45%, #14b8a6 100%); }
.btn--primary, .btn { background: var(--brand-grad) !important; }
.card .link-more, .product-card .link-more { font-weight: 600; color: var(--brand); }
.btn--ghost-light { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); transition: all .2s; }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.card .media img, .product-card .media img { border-radius: 16px 16px 0 0; }
.product-grid .product-card .window-frame { border-radius: 12px 12px 0 0; }

/* ---- 顶部导航自适应：菜单项变多后压缩间距，避免在 1280px 下折行 ---- */
.header .nav { gap: 2px; }
.header .nav a { padding: 8px 11px; font-size: 15px; }
@media (max-width: 1400px) {
  .header .nav a { padding: 8px 9px; font-size: 14.5px; }
}
@media (max-width: 1180px) {
  .header .nav a { padding: 8px 8px; font-size: 14px; }
}


/* ===== home-v3.css ===== */
/* =====================================================================
 * 首页 v3 —— 整屏大图 + 数据/案例前置 + 模块顺序按天轮换
 * 作用域全部限定在 .home-v3 / .hv3- 内，不影响其它页面与分站模板。
 * 背景/文字颜色沿用站点主题变量，不写死颜色。
 * ===================================================================== */

/* ① 整屏 Hero：手机上用 svh，避免地址栏导致的 100vh 跳动 */
.home-v3 .hv3-hero {
  height: calc(100svh - var(--header-h, 72px));
  min-height: 600px;
}
@supports not (height: 100svh) {
  .home-v3 .hv3-hero { height: calc(100vh - var(--header-h, 72px)); }
}
.home-v3 .hv3-hero .slide-content { max-width: 780px; }
.home-v3 .hv3-hero-center .slide-content { margin-left: auto; margin-right: auto; text-align: center; }
.home-v3 .hv3-hero-center .hero-actions { justify-content: center; }
.home-v3 .hv3-hero-center .hero-slide-mask {
  background: linear-gradient(180deg, rgba(6,18,28,.32) 0%, rgba(6,18,28,.62) 100%);
}
.home-v3 .hv3-hero .slide-sub { font-size: 17px; line-height: 1.9; }

/* ② 数据条（前置）：一行数字，移动端 2 列 */
.home-v3 .hv3-proof { padding-top: 54px; }
.home-v3 .hv3-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 26px 22px;
  border-radius: 16px;
  background: var(--soft, #f4f7f5);
  border: 1px solid rgba(0, 0, 0, .06);
}
.home-v3 .hv3-stat { text-align: center; position: relative; }
.home-v3 .hv3-stat + .hv3-stat::before {
  content: "";
  position: absolute; left: -7px; top: 14%; height: 72%; width: 1px;
  background: rgba(0, 0, 0, .08);
}
.home-v3 .hv3-stat b {
  display: block;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.01em;
}
.home-v3 .hv3-stat b i { font-style: normal; font-size: 19px; margin-left: 2px; }
.home-v3 .hv3-stat span { display: block; margin-top: 6px; font-size: 13.5px; color: #5f706a; line-height: 1.6; }

/* ③ 案例前置：卡片图片更高，移动端单列 */
.home-v3 .hv3-cases .media { height: 230px; }
.home-v3 .hv3-more {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 30px;
}

/* ④ 轮换带来的节奏差异：偶数套给首屏数据条加一点强调 */
.home-v3 .hv3-proof.p1 .hv3-stats { padding: 30px 24px; }
.home-v3 .hv3-proof.p1 .hv3-stat b { font-size: 38px; }

@media (max-width: 1024px) {
  .home-v3 .hv3-stats { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .home-v3 .hv3-stat + .hv3-stat::before { display: none; }
}
@media (max-width: 768px) {
  .home-v3 .hv3-hero { height: 76svh; min-height: 480px; }
  .home-v3 .hv3-hero .slide-content { max-width: 100%; }
  .home-v3 .hv3-hero .slide-sub { font-size: 15px; line-height: 1.85; }
  .home-v3 .hv3-proof { padding-top: 34px; }
  .home-v3 .hv3-stats { grid-template-columns: repeat(2, 1fr); padding: 20px 14px; gap: 16px 10px; }
  .home-v3 .hv3-stat b { font-size: 27px; }
  .home-v3 .hv3-stat b i { font-size: 15px; }
  .home-v3 .hv3-stat span { font-size: 12.5px; }
  .home-v3 .hv3-cases .media { height: 200px; }
  .home-v3 .hv3-more { margin-top: 22px; }
  .home-v3 .hv3-more .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 420px) {
  .home-v3 .hv3-hero { height: 72svh; min-height: 440px; }
  .home-v3 .hv3-stats { grid-template-columns: repeat(2, 1fr); }
}
/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .home-v3 .mist-layer span { animation: none !important; }
}