/* 小屏适配 + 与 Mantine 全局 reset 共存的盒模型归一化。
 *
 * 加载顺序（见 app/(main)/layout.tsx）：
 *   common.css → site-fixes.css → responsive.css → 各栏目页面 CSS
 * 页面 CSS 在本文件之后加载，所以测试服务相关的布局规则统一加
 * `.news-theme.tests-page .wrapper .content .html` 之类的前缀来提高选择器权重，
 * 既能压过旧版页面 CSS 和正文富文本规则，也不会影响其它栏目。
 *
 * 1) 盒模型归一化（所有页面、所有宽度生效）
 *    /tests/mine、/tests/application、/tests/address 等页面引用了
 *    @mantine/core/styles.css，其中带 `*{box-sizing:border-box}` 的全局 reset。
 *    Next 客户端路由切换时，已经加载的样式表不会卸载（见 app/(main)/layout.tsx 的注释），
 *    所以离开这些页面后，旧版按 content-box 写死的宽度会全部缩水，表现为「有时候」错位：
 *      - 从「我的申请」切回「首页」：.news .wrapper .left（width:810px + padding 20/24）
 *        总宽从 855px 变成 810px，焦点新闻（240px 卡片 + 40px 间距，一行正好 800px）
 *        放不下第 3 张，第三张被挤到下一行、右侧空一大片；.right（width:451px + padding 0 23px）
 *        从 497px 变成 451px，综合新闻一行（图标 32 + 标题 330 + 日期 77 = 439px）溢出，
 *        日期被截断；.news 高度 1224px → 1574px，下方整段被推下去。
 *      - 从「我的申请 / 检测申请」点进「服务流程」：.news-theme .wrapper .content
 *        （width:804px; padding:10px 98px）总宽从 1000px 变成 804px，内容区只剩 608px，
 *        比流程一行 802px 还窄，六个步骤被挤成每行 2 个、右侧多出一条孤立的虚线箭头；
 *        页脚也会被压扁。
 *    这里显式恢复旧版的 content-box，保证 Mantine 的 reset 在不在都是一个样子。
 *    .tests-page 里嵌着 Mantine 组件（预约表单的 Alert / NumberInput 等），所以这一块
 *    只归一化 .content 容器本身，内部保持 Mantine 的 border-box。
 *
 * 2) 测试服务旧组件与「正文富文本」样式隔离
 *    site-fixes.css 给 `.content .html` 下的 ul/ol/li 补齐了富文本列表样式
 *    （项目符号、缩进、行间距）。但流程图（.test-process）和我要测试（.test-mine）
 *    是旧版组件而不是正文，会被误加符号、缩进，而且 `.html li` 的 margin 会覆盖
 *    旧版 li 的间距，导致流程图错位。
 *    这里按旧版数值还原这些组件的列表样式。
 *
 * 3) 小屏适配（<=1366px 生效，桌面 >1366px 保持原样）
 *    旧版整站按 1366px 固定排版（body min-width:1366，容器 1232/1352/1402），
 *    窗口小于 1366 会横向滚动、内容被裁切。这里只针对「测试服务」栏目做适配：
 *      - 顶栏、页脚、左侧栏目导航可收缩换行；
 *      - 内容区改为流式宽度；
 *      - 六步流程图改为可伸缩的一行（不再出现孤立的连接线），手机端改成网格。
 *    顶栏/页脚用 `body:has(.tests-page)` 限定，其它栏目（新闻、科研平台……）
 *    仍然保持原来的固定宽度表现，不受影响。老浏览器不支持 :has() 时会退回旧版
 *    固定宽度（横向滚动），页面不会错乱。
 */

/* ==========================================================================
 * 1. 盒模型归一化：旧版 CSS 是按 content-box 写的固定宽度
 *    - 首页的 .news 区块和其余栏目的旧版外壳 .news-theme 里没有 Mantine 组件，
 *      所以整棵子树都按 content-box 还原（首页 .left/.right、焦点新闻卡片、
 *      各栏目 .content 的固定宽度才不会被 border-box 吃掉 padding）。
 *    - .tests-page 里嵌着 Mantine 组件，只还原 .content 容器本身，内部保持
 *      Mantine 的 border-box。
 *    - 新写的栏目（team-page.css / team-directory.css 等）不在 .news-theme 里，
 *      它们自己声明的 box-sizing:border-box 不受影响。
 * ========================================================================== */
.news-theme .wrapper .content,
.bottom,
.bottom .wrapper .contact,
.header .wrapper .menu .top .login-menu span .panel,
.preview-loading,
.preview-missing,
.news,
.news *,
.news *::before,
.news *::after,
.news-theme:not(.tests-page),
.news-theme:not(.tests-page) *,
.news-theme:not(.tests-page) *::before,
.news-theme:not(.tests-page) *::after {
  box-sizing: content-box;
}

/* Mantine 还有一条 `body{line-height:var(--mantine-line-height)}`（默认 1.55）。
 * common.css 只在 body 上设了字体和字号、没设行高，所以离开测试服务页面后全站行高
 * 会从 normal 变成 15.5px：首页整页高度 1224 → 1227px，焦点新闻卡片也各高 1px。
 * 测试服务页面本来就是按 Mantine 行高渲染的，保持原样；其它页面恢复旧版 normal，
 * 让「客户端切过来」和「直接打开」渲染结果完全一致。
 * （`:has()` 不支持时这条规则失效，退回上面的 3px 行高差异，不会错乱。） */
body:not(:has(.tests-page)) {
  line-height: normal;
  -webkit-font-smoothing: auto;
}

/* ==========================================================================
 * 2. 测试服务旧组件与正文富文本样式隔离
 *    选择器带完整前缀，权重高于 site-fixes.css 里的
 *    `.news-theme .wrapper .content .html ul/li`，只影响测试服务的旧版组件。
 * ========================================================================== */
.news-theme.tests-page .wrapper .content .html .test-process ul,
.news-theme.tests-page .wrapper .content .html .test-mine ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-theme.tests-page .wrapper .content .html .test-process ul li {
  margin: 78px 0 0;
}
.news-theme.tests-page .wrapper .content .html .test-mine ul li {
  margin: 0 63px 70px 0;
}
.news-theme.tests-page .wrapper .content .html .test-mine ul li.last {
  margin-right: 0;
}

/* ==========================================================================
 * 3. 顶栏：<=1366 允许收缩，<=1100 换行，避免小屏横向滚动
 * ========================================================================== */
@media (max-width: 1366px) {
  body:has(.tests-page) {
    min-width: 0;
  }

  body:has(.tests-page) .header {
    height: auto;
  }
  body:has(.tests-page) .header .wrapper {
    width: 100%;
    max-width: 1352px;
    height: auto;
    min-height: 115px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  body:has(.tests-page) .header .wrapper .menu {
    width: auto;
    max-width: 880px;
    margin-right: 0;
  }
  body:has(.tests-page) .header .wrapper .menu ul.list li {
    margin-left: 10px;
  }
  body:has(.tests-page) .header .wrapper .menu ul.list li a span {
    font-size: 15px;
  }
  body:has(.tests-page) .header .wrapper .logo img {
    width: 295px;
    height: auto;
  }
}

@media (max-width: 1100px) {
  body:has(.tests-page) .header .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    min-height: 0;
    padding: 14px 16px 10px;
  }
  body:has(.tests-page) .header .wrapper .logo {
    float: none;
    margin-left: 0;
  }
  body:has(.tests-page) .header .wrapper .logo img {
    width: 240px;
    margin-top: 0;
  }
  /* .menu 不参与布局，让 .top（账号）和 .list（主导航）直接成为顶栏的 flex 项：
     第一行 Logo + 账号，第二行整行导航。 */
  body:has(.tests-page) .header .wrapper .menu {
    display: contents;
    width: auto;
    max-width: none;
    margin: 0;
  }
  body:has(.tests-page) .header .wrapper .menu .top {
    height: auto;
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  body:has(.tests-page) .header .wrapper .menu .top .login-info,
  body:has(.tests-page) .header .wrapper .menu .top .login-menu {
    float: none;
    margin-top: 0;
  }
  body:has(.tests-page) .header .wrapper .menu .top .login-menu {
    margin-left: 10px;
  }
  body:has(.tests-page) .header .wrapper .menu ul.list {
    float: none;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  body:has(.tests-page) .header .wrapper .menu ul.list li {
    float: none;
    margin: 0 10px;
  }
}

@media (max-width: 640px) {
  body:has(.tests-page) .header .wrapper {
    gap: 2px 12px;
    padding: 12px 12px 8px;
  }
  body:has(.tests-page) .header .wrapper .logo img {
    width: 200px;
  }
  body:has(.tests-page) .header .wrapper .menu ul.list li {
    margin: 0 7px;
  }
  body:has(.tests-page) .header .wrapper .menu ul.list li a span {
    font-size: 14px;
  }
}

/* ==========================================================================
 * 4. 页脚：<=1366 容器缩小，<=760 单列
 * ========================================================================== */
@media (max-width: 1366px) {
  body:has(.tests-page) .bottom {
    height: auto;
    padding: 44px 0 36px;
  }
  body:has(.tests-page) .bottom .wrapper,
  body:has(.tests-page) .copyright .wrapper {
    width: 100%;
    max-width: 1402px;
    height: auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  body:has(.tests-page) .bottom .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 40px;
  }
  body:has(.tests-page) .bottom .wrapper .contact {
    float: none;
    width: auto;
    max-width: 430px;
    height: auto;
    padding-left: 0;
    border-right: 0;
  }
  body:has(.tests-page) .bottom .wrapper .navigation {
    float: none;
    padding-left: 0;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 24px 32px;
  }
  body:has(.tests-page) .bottom .wrapper .navigation .item {
    float: none;
    width: auto;
  }
  body:has(.tests-page) .copyright {
    height: auto;
    line-height: 1.7;
    padding: 18px 0;
  }
}

@media (max-width: 760px) {
  body:has(.tests-page) .bottom {
    padding: 36px 0 28px;
  }
  body:has(.tests-page) .bottom .wrapper {
    flex-direction: column;
    gap: 28px;
  }
  body:has(.tests-page) .bottom .wrapper .navigation {
    width: 100%;
    justify-content: flex-start;
    gap: 22px 28px;
  }
  body:has(.tests-page) .bottom .wrapper .navigation .item {
    width: 130px;
  }
}

@media (max-width: 520px) {
  body:has(.tests-page) .bottom .wrapper .contact {
    width: 100%;
    max-width: none;
  }
  body:has(.tests-page) .bottom .wrapper .contact .logo-name .logo {
    width: 56px;
    height: 46px;
  }
  body:has(.tests-page) .bottom .wrapper .contact .logo-name .name {
    width: auto;
    max-width: calc(100% - 76px);
    font-size: 16px;
  }
  body:has(.tests-page) .bottom .wrapper .contact ul li {
    display: flex;
    gap: 8px;
  }
  body:has(.tests-page) .bottom .wrapper .contact ul li .label,
  body:has(.tests-page) .bottom .wrapper .contact ul li .content,
  body:has(.tests-page) .bottom .wrapper .contact ul li.width .label,
  body:has(.tests-page) .bottom .wrapper .contact ul li.width .content {
    float: none;
    width: auto;
    line-height: 24px;
  }
  body:has(.tests-page) .bottom .wrapper .contact ul li .label {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body:has(.tests-page) .bottom .wrapper .contact ul li .content {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
  }
  body:has(.tests-page) .bottom .wrapper .navigation .item {
    width: calc(50% - 14px);
  }
}

/* ==========================================================================
 * 5. 测试服务：内容区流式宽度
 * ========================================================================== */
@media (max-width: 1366px) {
  .news-theme.tests-page .wrapper {
    width: 100%;
    max-width: 1232px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .news-theme.tests-page .wrapper .content {
    width: min(1000px, 100% - 156px);
    box-sizing: border-box;
  }
  /* 详情页用的空白内容区，旧版总宽 998px */
  .news-theme.tests-page .wrapper .content.empty {
    width: min(998px, 100% - 156px);
  }
  .news-theme.tests-page .wrapper .content .title h2 {
    width: auto;
    max-width: calc(100% - 120px);
  }
}

@media (max-width: 1100px) {
  .news-theme.tests-page .wrapper .content {
    padding: 10px 56px;
  }
  .news-theme.tests-page .wrapper .content .title h2 {
    max-width: 100%;
  }
}

/* <=980：左侧栏目导航改为横排，正文占满整行 */
@media (max-width: 980px) {
  .news-theme.tests-page .wrapper .catalog {
    float: none;
    width: auto;
    padding: 22px 0 0;
    margin-bottom: 0;
  }
  .news-theme.tests-page .wrapper .catalog ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin-left: 0;
    border-left: 0;
    width: auto;
    font-size: 16px;
  }
  .news-theme.tests-page .wrapper .catalog ul li {
    height: auto;
    padding-left: 0;
    margin-bottom: 0;
    line-height: 26px;
  }
  .news-theme.tests-page .wrapper .catalog ul li.current:before,
  .news-theme.tests-page .wrapper .catalog ul li:hover:before {
    display: none;
  }

  .news-theme.tests-page .wrapper .content {
    float: none;
    top: 0;
    width: min(1000px, 100%);
    padding: 22px 32px 26px;
    margin-top: 16px;
    min-height: 0;
  }
  .news-theme.tests-page .wrapper .content.empty {
    width: 100%;
    padding: 0;
  }
  .news-theme.tests-page .wrapper .content .title h2 {
    max-width: 100%;
  }
  .tests-page .content .html {
    margin-bottom: 32px;
  }
}

@media (max-width: 600px) {
  .news-theme.tests-page .wrapper {
    padding: 0 14px;
  }
  .news-theme.tests-page .wrapper .catalog {
    padding-top: 18px;
  }
  .news-theme.tests-page .wrapper .catalog ul {
    gap: 2px 16px;
    font-size: 15px;
  }
  .news-theme.tests-page .wrapper .content {
    padding: 18px 18px 22px;
  }
  .tests-page {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
 * 6. 测试服务：banner 随屏宽缩小
 * ========================================================================== */
@media (max-width: 980px) {
  .tests-banner {
    height: 160px;
    background-position: center top;
  }
  .tests-banner h2 {
    padding-top: 34px;
    font-size: 26px;
  }
  .tests-banner h2 span {
    margin-left: 12px;
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .tests-banner {
    height: 132px;
  }
  .tests-banner h2 {
    padding-top: 30px;
    font-size: 21px;
  }
  .tests-banner h2 span {
    display: block;
    margin: 6px 0 0;
    font-size: 15px;
  }
}

/* ==========================================================================
 * 7. 服务流程：<=1366 用 flex 均分（不再折行、不产生孤立的连接线）
 *    桌面 >1366 仍走旧版浮动布局，像素级不变。
 * ========================================================================== */
@media (max-width: 1366px) {
  .news-theme.tests-page .wrapper .content .html .test-process {
    margin: 12px auto 0;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li {
    float: none;
    flex: 0 1 194px;
    min-width: 0;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li.line {
    flex: 1 1 110px;
    min-width: 36px;
    max-width: 110px;
    background-image: none;
    position: relative;
  }
  /* 用 CSS 画虚线箭头，宽度可随行宽伸缩，不会像背景图那样被裁掉 */
  .news-theme.tests-page .wrapper .content .html .test-process ul li.line:before {
    content: "";
    position: absolute;
    left: 0;
    right: 4px;
    top: 34px;
    border-top: 1px dashed #d6d9de;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li.line:after {
    content: "";
    position: absolute;
    right: 0;
    top: 29px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #d6d9de;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li .icon img {
    max-width: 100%;
    height: auto;
  }
}

/* <=700：手机端隐藏连接线，改成三列网格 */
@media (max-width: 700px) {
  .news-theme.tests-page .wrapper .content .html .test-process {
    margin: 8px auto 0;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 18px 10px;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul + ul {
    margin-top: 18px;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li {
    width: auto;
    height: auto;
    margin: 0;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li.line {
    display: none;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li .icon img {
    max-width: 76px;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li .no {
    font-size: 28px;
    margin: 14px 0 8px;
  }
  .news-theme.tests-page .wrapper .content .html .test-process ul li .name {
    font-size: 15px;
    line-height: 1.5;
  }
  .news-theme.tests-page .wrapper .content .html .test-process-tips {
    margin-top: 34px;
    padding: 0 6px;
    line-height: 1.7;
  }
}

@media (max-width: 430px) {
  .news-theme.tests-page .wrapper .content .html .test-process ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
 * 8. 我要测试 / 服务内容详情：旧版固定宽度改为可伸缩
 *    注意：详情页的 .application-detail 直接挂在 .content.empty 下（不在 .html 里），
 *    所以这一组选择器不能带 .html 前缀。
 * ========================================================================== */
@media (max-width: 980px) {
  .news-theme.tests-page .wrapper .content .html .test-mine {
    width: auto;
    max-width: 792px;
    margin-top: 40px;
  }
  .news-theme.tests-page .wrapper .content .html .test-mine ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .news-theme.tests-page .wrapper .content .html .test-mine ul li {
    float: none;
    margin: 0;
    width: 150px;
  }

  .news-theme.tests-page .wrapper .content .application-detail {
    width: auto;
    max-width: 890px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding-top: 20px;
  }
  .news-theme.tests-page .wrapper .content .application-detail .icon {
    float: none;
    margin-right: 0;
  }
  .news-theme.tests-page .wrapper .content .application-detail .detail {
    float: none;
    width: auto;
    flex: 1 1 420px;
    min-width: 0;
  }
  /* 「立即预约」按钮和备注各占一整行，不要挤到图标/详情旁边 */
  .news-theme.tests-page .wrapper .content .application-detail .btn,
  .news-theme.tests-page .wrapper .content .application-detail .tips {
    flex: 1 0 100%;
  }
}

@media (max-width: 700px) {
  .news-theme.tests-page .wrapper .content .html .test-mine {
    margin-top: 24px;
  }
  .news-theme.tests-page .wrapper .content .html .test-mine ul {
    gap: 16px;
  }
  .news-theme.tests-page .wrapper .content .html .test-mine ul li {
    width: 120px;
    margin: 0;
  }
  .news-theme.tests-page .wrapper .content .html .test-mine ul li .name {
    top: 42px;
    font-size: 18px;
    line-height: 22px;
  }

  .news-theme.tests-page .wrapper .content .application-detail {
    display: block;
  }
  .news-theme.tests-page .wrapper .content .application-detail .icon {
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
  }
  .news-theme.tests-page .wrapper .content .application-detail .icon .name {
    top: 58px;
  }
  .news-theme.tests-page .wrapper .content .application-detail .detail {
    width: 100%;
  }
  .news-theme.tests-page .wrapper .content .application-detail .detail .tab ul li {
    margin: 0 28px 0 0;
    font-size: 16px;
  }
  .news-theme.tests-page .wrapper .content .application-detail .detail .item-form ul li {
    margin: 0 14px 14px 0;
    padding: 8px 12px;
    font-size: 16px;
  }
}