/* =============================================================
   雷赛眼科 · 移动端适配层（第三版现代极简）
   在 home.css / inner.css 之后加载，作为窄屏的最终校准。
   断点：960(平板) / 768(手机) / 560(小屏)
   ============================================================= */

/* ---------- 基础安全：防横向溢出 ---------- */
/* 用 clip 而非 hidden：hidden 会把 body 变成二级滚动容器，导致右侧出现多余滚动条；
   clip 只裁剪、不生成滚动容器，现代浏览器均支持 */
html, body { overflow-x: clip; }

/* ---------- 汉堡按钮（默认隐藏，移动端显示） ---------- */
.o-burger {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  margin-left: 8px; padding: 0; background: transparent; border: 0; cursor: pointer;
}
.o-burger span {
  display: block; width: 22px; height: 2px; background: #16365c; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.o-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.o-burger.is-open span:nth-child(2) { opacity: 0; }
.o-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 移动端 off-canvas 导航抽屉 ---------- */
.o-mnav {
  position: fixed; inset: 0; z-index: 200; background: rgba(12,24,45,.42);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease;
  overflow: hidden; /* 裁剪关闭态 translateX(100%) 推出的面板，避免其撑宽 body 引出右侧滚动条 */
}
.o-mnav.open { opacity: 1; visibility: visible; pointer-events: auto; }
.o-mnav-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 86%; max-width: 340px; background: #fff;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; box-shadow: 0 0 44px rgba(12,24,45,.28);
}
.o-mnav.open .o-mnav-panel { transform: translateX(0); }
.o-mnav-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #e8ecf3;
}
.o-mnav-brand { font-size: 17px; font-weight: 700; color: #16365c; }
.o-mclose {
  width: 36px; height: 36px; flex: none; border: 0; background: #f1f4f8; color: #16365c;
  font-size: 20px; line-height: 1; border-radius: 8px; cursor: pointer;
}
.o-mnav-links { flex: 1; overflow: auto; padding: 8px 10px; }
.o-mlink {
  display: block; font-size: 16px; font-weight: 600; color: #1c2b3a;
  padding: 13px 14px; border-radius: 8px; text-decoration: none;
}
.o-mlink.is-on { color: #16365c; background: #eef3fb; }
.o-msub {
  display: grid; gap: 2px; padding: 2px 8px 10px 14px;
  border-left: 2px solid #e8ecf3; margin-left: 14px;
}
.o-msub-link { display: block; font-size: 14px; color: #5a6b7d; padding: 8px 12px; border-radius: 6px; text-decoration: none; }
.o-mnav-foot { display: grid; gap: 10px; padding: 14px 16px 22px; border-top: 1px solid #e8ecf3; }
.o-mcta {
  display: block; text-align: center; background: #16365c; color: #fff;
  padding: 13px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.o-mtel {
  display: block; text-align: center; border: 1px solid #d7deea; color: #16365c;
  padding: 12px; border-radius: 8px; font-weight: 600; text-decoration: none;
}

/* =============================================================
   平板  ≤960px
   ============================================================= */
@media (max-width: 960px) {
  .o-header .o-tel { display: none; }
  .o-header .o-cta { display: inline-flex; }
  .o-burger { display: inline-flex; }

  /* 首页 hero：两栏 → 单栏 */
  .o-hero .wrap { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  .o-hero p.lead { max-width: 100%; }
  .o-hero .acts { flex-direction: column; align-items: stretch; gap: 12px; }
  .o-hero .acts .btn { width: 100%; justify-content: center; }

  /* 首页四栏目 / 为什么选我们 */
  .o-hert .wrap { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .o-why .split { grid-template-columns: 1fr; gap: 28px; }

  /* 首页卡片固定高度 → 自适应 */
  .o-photo-card { height: 280px; }
  .doc .port { height: 210px; }
  .o-why .media { height: 240px; }
  .t-card .ph { height: 150px; }
  .o-num, .o-hert .t .n { white-space: normal; }

  /* 内页栅格降列 */
  .dept-grid { grid-template-columns: repeat(3, 1fr); }
  .tech-grid, .team-grid, .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .split2 { grid-template-columns: 1fr; gap: 28px; }
  .news-grid, .honor-grid, .env-grid, .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-list { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .doc-detail { grid-template-columns: 1fr; gap: 28px; }

  .page-hero .lead { max-width: 100%; }
}

/* =============================================================
   手机  ≤768px
   ============================================================= */
@media (max-width: 768px) {
  .o-header .wrap { height: 64px; gap: 20px; }
  .o-header .o-cta { display: none; }
  .o-burger { display: inline-flex; }

  .dept-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid, .team-grid, .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-list { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .news-grid, .honor-grid, .env-grid, .sitemap-grid { grid-template-columns: 1fr; }
  .o-hert .wrap { grid-template-columns: 1fr 1fr; }

  .o-foot-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   小屏  ≤560px
   ============================================================= */
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .o-hert .wrap { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr 1fr; }
  .tech-grid, .team-grid, .rel-grid { grid-template-columns: 1fr; }
  .o-photo-card { height: 230px; }
  .doc .port { height: 190px; }
  .o-why .media { height: 200px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  /* 统计大数字在窄屏把两列网格撑破(网格项默认 min-width:auto 按最宽内容扩列)→右侧溢出滚动条；
     允许网格项收缩 + 数字按视口缩，保证数字不越过 .stat 边框 */
  .stat { min-width: 0; }
  .stat b { font-size: clamp(34px, 9vw, 46px); }
  /* 团队轮播箭头在手机竖屏略缩，避免遮住单列卡片 */
  .team-nav button.t-prev, .team-nav button.t-next { width: 34px; height: 34px; font-size: 18px; }
  .team-nav button.t-prev { margin-left: 6px; }
  .team-nav button.t-next { margin-right: 6px; }
}