/* =============================================================================
   jianc16 · 内页 Hero 响应式图片 Banner（hero16.css）
   - 断点图片源由模板 <picture> 提供：手机 750x420 / 平板 1200x500 / 桌面 1920x600
     （手机、平板另备 @2x；WebP 优先，JPG fallback）
   - 叠加深色渐变保证白色文字对比度 ≥ 4.5:1
   - 加载策略：模板对 LCP hero 使用 loading="eager" + fetchpriority="high"
   ============================================================================= */

/* 兜底底色：图片加载失败时仍保持深色品牌观感 */
.svisual-wrap {
  background: linear-gradient(135deg, #0d3f37 0%, #0f6b5d 60%, #0b2f2a 100%);
}

.svis { min-height: 220px; }

/* 图片盒：由 shun.css 提供 object-fit:cover，这里补充过渡与图层顺序 */
.svis .img-box { z-index: 0; }
.svis .img-box img { transition: opacity var(--dur-slow) var(--ease-out); }

/* 叠加层：左深右浅 + 底部压暗，保证标题可读 */
.svisual-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6, 38, 33, .78) 0%,
      rgba(6, 38, 33, .46) 42%,
      rgba(6, 38, 33, .10) 78%,
      rgba(6, 38, 33, .18) 100%),
    linear-gradient(180deg,
      rgba(6, 38, 33, 0) 55%,
      rgba(6, 38, 33, .28) 100%);
}

/* 文案层 */
.svis .txt-box {
  position: relative;
  z-index: 2;
  min-height: 300px;
  align-items: center;
}
.txt-pkg { gap: var(--sp-2); }
.txt-eng {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-note);
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .72);
}
.txt-eng::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-primary-light);
  border-radius: var(--r-pill);
}
.txt {
  font-size: 40px;
  text-shadow: 0 2px 12px rgba(6, 38, 33, .45);
}

/* 平板：769 - 1200 */
@media (max-width: 1200px) {
  .svis .txt-box { min-height: 260px; }
  .txt { font-size: 34px; }
}

/* 手机：≤ 768 */
@media (max-width: 768px) {
  .svis .txt-box { min-height: 180px; }
  .txt { font-size: 28px; }
  .txt-eng { letter-spacing: 2px; }
}

/* 超小屏：≤ 480 */
@media (max-width: 480px) {
  .svis .txt-box { min-height: 150px; }
  .txt { font-size: 24px; }
}

/* 打印：隐藏装饰横幅，节省纸张 */
@media print {
  .svisual-wrap { display: none; }
}