/* ==========================================================================
   少长集 · 全站响应式补丁 (responsive.css)
   必须在各页面自有 <style> / 其它 CSS 之后引入，以便覆盖固定栅格。
   断点：1024px 平板 / 860px 小平板 / 640px 手机 / 380px 小屏手机
   ========================================================================== */

/* ---------- 基础防溢出 ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
table { display: block; max-width: 100%; overflow-x: auto; }
pre { overflow-x: auto; }

/* ==========================================================================
   ≤1024px 平板
   ========================================================================== */
@media (max-width: 1024px) {
  /* 双栏图文区 → 单栏 */
  .hero-grid, .feat, .about-intro, .what-grid, .contact-grid, .tech-grid { grid-template-columns: 1fr !important; }
  .feat { gap: 36px !important; margin-bottom: 24px !important; }
  .hero-grid { gap: 34px !important; }

  /* 三栏卡片 → 两栏 */
  .val-grid, .story-grid, .step-grid, .res-grid, .fit-grid,
  .flex-grid, .feature-grid, .benefit-grid, .flow-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 四栏 → 两栏 */
  .svc-grid, .app-grid, .impact-grid, .stats-grid, .safe-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 五、六栏 → 三栏 */
  .stat-grid, .partner-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* 多列流程图的横向虚线连接装饰在换行后失效，隐藏 */
  .flow-grid::before, .step-grid::before { display: none !important; }

  /* 2026-08-18：footer 已统一为简洁版（居中 1 列），移动端与桌面同款；旧 footer-grid 类兼容隐藏 */

  /* 大标题收敛 */
  .hero h1, .hero-inner h1, .hero-text h1 { font-size: 38px !important; letter-spacing: -.5px; }
  .sec-head h2, .cta h2 { font-size: 32px !important; }
  /* page-hero 页面(about/contact/services/stories)无 body padding-top，
     顶部内边距必须 ≥ 固定导航高度(86px) 才不被遮挡 */
  .page-hero { padding: 108px 24px 60px !important; border-radius: 0 0 40px 40px !important; }
  .nav-inner { padding: 14px 20px !important; }
}

/* ==========================================================================
   ≤860px 小平板
   ========================================================================== */
@media (max-width: 860px) {
  .tips-grid, .scenario-grid, .testi-grid { grid-template-columns: 1fr !important; }
  .hero h1, .hero-inner h1, .hero-text h1 { font-size: 34px !important; }
  .sec-head h2, .cta h2 { font-size: 28px !important; }
  .stat-item .num { font-size: 36px !important; }
  .benefit-card .big { font-size: 42px !important; }
}

/* ==========================================================================
   ≤640px 手机
   ========================================================================== */
@media (max-width: 640px) {
  /* --- 容器与间距 --- */
  .wrap, .container { padding-left: 16px !important; padding-right: 16px !important; }
  section { padding-top: 44px !important; padding-bottom: 44px !important; }
  .section { padding: 44px 16px !important; }
  .service-block { padding: 24px 20px !important; border-radius: 20px !important; margin-bottom: 22px !important; }
  .service-block-icon { font-size: 2.4rem !important; }
  .service-block h2 { font-size: 1.35rem !important; }
  .cta-service { padding: 32px 20px !important; border-radius: 20px !important; }
  .cta-service h2 { font-size: 1.35rem !important; }
  .cta-service p { font-size: 1rem !important; }
  .btn-service, .btn-white { padding: 12px 26px !important; font-size: .95rem !important; }
  .content-hero, .content-body { padding: 28px 20px !important; }
  .team-section, .boundary-section, .story-card { padding: 24px 20px !important; }
  .page-hero { padding: 102px 18px 40px !important; border-radius: 0 0 28px 28px !important; }
  .page-hero p { font-size: 1rem !important; }
  .nav-inner { padding: 14px 16px !important; }

  /* --- 栅格全部收敛 --- */
  .val-grid, .story-grid, .step-grid, .res-grid, .fit-grid,
  .flex-grid, .feature-grid, .benefit-grid, .flow-grid,
  .ben-grid, .testi-grid, .tech-grid, .tips-grid, .scenario-grid,
  .contact-grid, .about-intro, .what-grid,
  .form-row { grid-template-columns: 1fr !important; }

  /* 小卡片保持两列更紧凑（impact 为大数字卡，单列避免溢出） */
  .svc-grid, .app-grid, .stats-grid, .safe-grid,
  .stats, .cp-stats, .stat-grid, .partner-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .impact-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  .footer { padding: 32px 16px 22px !important; }
  /* 页脚链接（扩大可点区域到 ≥34px，便于拇指点击；统一 footer-nav li 与底部链接） */
  .footer-nav a, .footer-bottom a { display: inline-block; padding: 10px 2px !important; }
  .footer-nav li { margin: 0 !important; }
  /* health-plan 装饰浮动卡：手机端收窄出血并裁剪，避免贴边被切断 */
  .hero-img { overflow: hidden !important; }
  .hero-img .float-card.f1 { left: 8px !important; top: 14px !important; }
  .hero-img .float-card.f2 { right: 8px !important; bottom: 18px !important; }
  /* 行内链接（story-link 等）：扩大可点区域 */
  .story-link { padding: 9px 2px !important; }

  /* --- 字号 --- */
  .hero h1, .hero-inner h1, .hero-text h1 { font-size: 27px !important; line-height: 1.25 !important; }
  .hero p, .hero-text p, .hero-inner p { font-size: 15px !important; }
  .sec-head h2, .cta h2 { font-size: 23px !important; }
  .sec-head p { font-size: 14px !important; }
  .stat-item .num { font-size: 30px !important; }
  .benefit-card .big { font-size: 34px !important; }
  .noexp-icon { font-size: 44px !important; }
  .fit-ico, .app-ico { font-size: 34px !important; }
  /* 徽标类小字不低于 12px，保证手机可读 */
  .elder-card-tag, .project-card-badge, .highlight-tag { font-size: 12px !important; }

  /* --- 表单：16px 防 iOS 聚焦缩放 --- */
  input, select, textarea,
  .reg-input, .form-input, .form-select, .form-textarea { font-size: 16px !important; }
  .reg-card { padding: 20px !important; }
  .reg-wrap { padding: 26px 14px 44px !important; }
  .reg-area-sel { min-width: 100% !important; flex: 1 1 100% !important; }
  .reg-area-add { width: 100%; height: 44px; }
  .reg-custom-row { flex-wrap: wrap; }
  .reg-custom-add { width: 100%; padding: 12px 18px; }

  /* --- 弹窗 --- */
  .modal-overlay { padding: 12px !important; }
  .modal { max-height: 90vh !important; }

  /* --- 按钮组：竖排并撑满，便于拇指点击 --- */
  .hero-actions, .actions, .hero-cta { flex-direction: column !important; align-items: stretch !important; width: 100%; }
  .hero-actions > a, .hero-actions > button,
  .actions > a, .actions > button,
  .hero-cta > a, .hero-cta > button { width: 100% !important; justify-content: center !important; text-align: center; }
  .btn-service, .btn-white { display: block; width: 100%; text-align: center; }
  .cta-service { flex-wrap: wrap; }
}

/* ==========================================================================
   ≤380px 小屏手机
   ========================================================================== */
@media (max-width: 380px) {
  /* footer 简洁版（小屏手机保持居中 1 列，6 个链接行内紧凑） */
  .footer-nav { gap: 14px !important; }
  .footer-logo { font-size: 1.4rem !important; }
  .hero h1, .hero-inner h1, .hero-text h1 { font-size: 24px !important; }
  .sec-head h2, .cta h2 { font-size: 21px !important; }
  .svc-grid, .app-grid, .impact-grid, .stats-grid, .safe-grid,
  .stats, .cp-stats, .stat-grid, .partner-grid { gap: 10px !important; }
  .wrap, .container { padding-left: 13px !important; padding-right: 13px !important; }
}

/* ==========================================================================
   PC 版式（≥768px 生效）—— 2026-08-18 一套代码响应式
   断点规则：≥768px 启用 PC 版式；<768px 保持移动端版式（向 APP 样式靠拢）
   本段落必须在其它规则之后，覆盖各页面自带固定宽度/窄弹窗。
   ========================================================================== */
@media (min-width: 768px) {

  /* ---- 内容容器：统一 1000px 居中，两侧留白，不铺满显示器 ---- */
  .wrap, .container, .sq-section, .sq-hero .wrap, .footer .wrap,
  .cp-hero .wrap, .ol-hero .wrap, .dm-hero .wrap,
  .hero .wrap, .hero-inner, .content-body, .page-hero .wrap {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 订单详情 / 预约详情（原 680px 移动端窄页）→ PC 适度放大 */
  .page { max-width: 880px !important; }

  /* 登录 / 注册卡片：PC 端适度放大，避免过窄 */
  .login-card { max-width: 480px !important; padding: 52px 48px 46px !important; }
  .reg-card { padding: 34px 40px !important; }

  /* ---- 全局弹窗：大屏自适应放大 + 合理最大宽度 ---- */
  .bk-modal, .modal, .content-modal, .modal-box, .sq-modal, .cp-modal,
  .rv-mask .bk-modal, .rm-mask .bk-modal {
    max-width: 760px !important;
  }
  /* 资料 / 升级 / 接单设置类弹窗略窄，避免过宽难读 */
  #pfMask .bk-modal, #upgMask .bk-modal, #vpMask .bk-modal,
  #szyouAvailMask .bk-modal { max-width: 720px !important; }
  /* 预约表单双列排布，充分利用 PC 宽度 */
  .bk-row { flex-direction: row !important; }

  /* ---- 按钮：鼠标适配，不缩小 ---- */
  .bk-submit { padding: 15px 22px !important; font-size: 1.02rem !important; }
  .sq-btn, .sq-cp-btn, .pf-book-actions button, .pf-book-actions a,
  .sq-loc-refresh, .sq-loc-sel, .sq-loc-btn {
    min-height: 40px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .pf-edit-btns button { padding: 13px !important; font-size: .95rem !important; }
  .modal-info-item, .modal-highlights { font-size: .95rem !important; }

  /* ---- 文本行宽适中，避免长行阅读负担 ---- */
  .bk-head p, .bk-note, .sq-panel-note, .sq-d-sub,
  .modal-desc, .modal-body p, .pf-banner {
    max-width: 62ch;
    line-height: 1.75 !important;
  }

  /* ---- 陪伴广场：PC 双栏卡片留白与间距更舒展 ---- */
  .sq-layout { gap: 26px !important; }
  .sq-panel { padding: 26px !important; border-radius: 18px !important; }
  .sq-demand, .sq-cp { padding: 18px 20px !important; }
  .sq-cp-avatar { width: 58px !important; height: 58px !important; font-size: 24px !important; }

  /* ---- 个人中心（bk-modal 内）PC 观感 ---- */
  .pf-cat-item { padding: 12px 14px !important; font-size: .98rem !important; }
  .pf-row { font-size: .98rem !important; padding: 11px 0 !important; }
  .pf-edit-grid { gap: 14px !important; }
}

/* ==========================================================================
   首页（index.html）移动端特化 2026-08-20
   仅作用于 <body class="home-page">，其它页面不受影响。
   需求：受众带/关怀卡 手机端双列；图文行(feat) 手机端保持左右并排
   ========================================================================== */
@media (max-width: 1024px) {
  body.home-page .feat { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  body.home-page .feat.rev .feat-img { order: 2 !important; }
  body.home-page .aud-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  body.home-page .feat-img img { height: 320px !important; }
  body.home-page .feat-text h2 { font-size: 28px !important; }
  body.home-page .feat-text p { font-size: 15px !important; }
}
@media (max-width: 640px) {
  body.home-page .feat { grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-bottom: 26px !important; }
  body.home-page .feat-img img { height: 185px !important; border-radius: 14px !important; }
  body.home-page .feat-text h2 { font-size: 18px !important; margin: 8px 0 10px !important; line-height: 1.25 !important; }
  body.home-page .feat-text p { font-size: 12.5px !important; margin-bottom: 12px !important; line-height: 1.55 !important; }
  body.home-page .feat-text .btn { padding: 8px 14px !important; font-size: .8rem !important; }
  body.home-page .feat-text .btn-ghost { margin-left: 6px !important; }
  body.home-page .ftag { font-size: 10px !important; letter-spacing: 1px !important; }
  body.home-page .val-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  body.home-page .val-card { padding: 16px 13px !important; border-radius: 14px !important; }
  body.home-page .val-ico { width: 46px !important; height: 46px !important; border-radius: 12px !important; margin-bottom: 10px !important; }
  body.home-page .val-ico svg { width: 25px !important; height: 25px !important; }
  body.home-page .val-card h3 { font-size: 15.5px !important; margin-bottom: 6px !important; }
  body.home-page .val-card p { font-size: 12px !important; line-height: 1.5 !important; }
  body.home-page .val-cta { margin-top: 18px !important; }
  body.home-page .aud-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 18px !important; }
  body.home-page .aud-card { padding: 14px 11px !important; border-radius: 13px !important; }
  body.home-page .aud-card h3 { font-size: 15px !important; margin-bottom: 5px !important; }
  body.home-page .aud-card p { font-size: 11.5px !important; margin-bottom: 8px !important; line-height: 1.5 !important; }
  body.home-page .aud-ico { font-size: 26px !important; margin-bottom: 8px !important; }
  body.home-page .aud-go { font-size: 12px !important; }
  body.home-page .story-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  body.home-page .story-media { height: 130px !important; }
  body.home-page .story-body { padding: 12px 12px 16px !important; }
  body.home-page .story-body .who { font-size: 12.5px !important; margin-bottom: 5px !important; }
  body.home-page .story-body p { font-size: 12px !important; margin-bottom: 10px !important; line-height: 1.5 !important; }
}
@media (max-width: 380px) {
  body.home-page .feat-img img { height: 155px !important; }
  body.home-page .feat-text h2 { font-size: 16px !important; }
  body.home-page .feat-text p { font-size: 11.5px !important; }
}