/* ============================================================
   fix.css — 正好生物官网视觉修复覆盖样式
   加载位置：header.htm 顶部（style.css / home.css 之后，保证覆盖生效）
   版本：20261030-2（更新本文件后请同步修改 header.htm 中的 ?v= 版本号）
   ------------------------------------------------------------
   问题编号对照：
   [P2] 导航白字 / 轮播文字压图对比度不足 → header 深色渐变 scrim + 文字 text-shadow
   [A1] 移动端首屏轮播箭头压字且不可见 → ≤768px 隐藏箭头，文字区加 padding
   [P3] .btn-primary 绿渐变白字对比度踩线 → 改纯色 #2E7D32（5.1:1），hover #256429
   [P4] 三张轮播图风格割裂、遮罩发脏 → 统一深绿遮罩覆盖所有 slide
   [A4] 成功案例单卡靠左、右侧空白 → 单卡居中（:only-child 方案）
   ============================================================ */

/* ---------- 设计 token（P2） ---------- */
:root {
  --color-scrim: rgba(30, 52, 34, .45);        /* 统一深绿遮罩色 */
  --color-scrim-strong: rgba(18, 32, 20, .55); /* header 顶部渐变起色 */
}

/* ---------- [P2] 全站头部：顶部深色渐变 scrim ----------
   header.transparent 仅在首页未滚动时生效；
   :not(.scrolled):not(.inner-header) 确保滚动后白底头部、内页白色头部不受影响 */
header.transparent:not(.scrolled):not(.inner-header) {
  background: linear-gradient(180deg, var(--color-scrim-strong) 0%, rgba(18, 32, 20, 0) 100%);
}

/* ---------- [P2] 轮播文字对比度：加深文字投影 ----------
   配合 [P4] 的统一遮罩，白字在任何底图上可达 ≥4.5:1
   [SEO] 首页轮播标题已由 h2 改为 h1，样式同步兼容 */
.hero-slide-content h1,
.hero-slide-content h2 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 12px rgba(0, 0, 0, .25);
}
.hero-slide-content p {
  opacity: 1; /* 原为 .9，叠加遮罩后进一步拉满对比 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* ---------- [P4] 轮播统一深绿遮罩 ----------
   原遮罩为绿黑渐变（偏青灰、发脏）且依赖图片本身色调；
   统一替换为固定深绿 scrim，三张 slide 视觉风格一致 */
.hero-slider .swiper-slide::before {
  background: linear-gradient(180deg,
    rgba(30, 52, 34, .52) 0%,
    var(--color-scrim) 45%,
    rgba(30, 52, 34, .55) 100%);
}

/* ---------- [P3] 主按钮对比度修复 ----------
   原绿渐变白字 4.44:1 踩线 → 纯色 #2E7D32（白字 5.1:1，AA 通过） */
.btn-primary {
  background: #2E7D32;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: #256429;
}
/* 无障碍补充：键盘聚焦时给可见轮廓 */
.btn-primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(46, 125, 50, .45);
}

/* ---------- [A4] 成功案例：单卡时居中 ----------
   grid 四列布局下仅 1 张卡时靠左留大片空白；
   :only-child 让其跨满整行并限制宽度居中，区块高度自然收敛 */
.case-grid {
  justify-content: center;
}
.case-grid .case-card:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================================
   移动端（断点与原 home.css 保持一致：768px）
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- [A1] 隐藏首屏左右箭头 ----------
     移动端箭头压住副标题且对比度过低，滑动操作由手势 +
     底部分页器承担，直接隐藏最稳妥 */
  .hero-btn-prev,
  .hero-btn-next {
    display: none !important;
  }

  /* ---------- [A1] 文字区左右留出安全边距 ---------- */
  .hero-slide-content {
    padding: 0 48px;
  }

  /* ---------- [P3] 移动端同步纯色按钮 ---------- */
  .btn-primary {
    background: #2E7D32;
  }
  .btn-primary:hover {
    background: #256429;
  }
}