/* ===== about.html 模板 · 移动端补充样式 =====
   /about-us/ 与 /why-us/ 共用 about.html 这一个模板。
   全部规则包在 @media screen and (max-width:1000px) 内 —— 这是本站各模块样式表
   通用的移动端/平板断点，桌面端（>=1001px）完全不受影响。
   实测：全站只有 /why-us/ 的正文里存在 h2 与 table，所以本文件实际只影响该页。 */

@media screen and (max-width: 1000px) {

    /* 1) 正文里的蓝底小标题
          原状：富文本内联 font-size:20px，行高继承 .r_content 的 line-height:2（=40px），
                在 390px 手机上占 4 行、块高 170px，行距过于松散。
          改后：字号 20px -> 17px，行高 40px -> 1.35（约 22.95px），块高 170px -> 78.8px。
          字号必须带 !important，否则盖不住富文本里的内联 font-size。 */
    .ly_about_4 .text_box .r_content h2 {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    /* 2) 正文里写死 width="1385" 的 3 列表格
          原状：在 390px 手机上把页面撑到 1421px，右侧文字被裁、整页能左右滑动。
          改后：每行拆成一张卡片，单元格自上而下排列、文字自动换行，
                内容完整显示，页面不再横向溢出（实测 scrollWidth 1385 -> 318）。 */
    .ly_about_4 .text_box .r_content table {
        display: block !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .ly_about_4 .text_box .r_content table tbody { display: block !important; }
    .ly_about_4 .text_box .r_content table tr {
        display: block !important;
        border: 1px solid #e2e2e2 !important;
        border-radius: 8px !important;
        padding: 12px 14px !important;
        margin: 0 0 14px !important;
        background: #fff !important;
    }
    /* 表头行（编辑器给首行打了 class="firstRow"）不单独占一张卡 */
    .ly_about_4 .text_box .r_content table tr.firstRow { display: none !important; }
    .ly_about_4 .text_box .r_content table td {
        display: block !important;
        width: auto !important;
        border: 0 !important;
        padding: 0 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .ly_about_4 .text_box .r_content table td + td { margin-top: 10px !important; }

    /* 每段文字上方自动显示它原来的列名。
       data-rlabel 由 about-inline.js 从表头行读出后写进每个单元格。
       若 JS 未生效，只是不显示列名，卡片布局本身照常生效、依然不会左右滑动。 */
    .ly_about_4 .text_box .r_content table td[data-rlabel]::before {
        content: attr(data-rlabel);
        display: block;
        font-weight: 700;
        font-size: 12px;
        color: #8a8a8a;
        letter-spacing: .02em;
        text-align: left;
        margin-bottom: 3px;
    }
    /* 第一列本身是卡片标题，不再重复显示它自己的列名 */
    .ly_about_4 .text_box .r_content table td:first-child::before { content: none !important; }
    .ly_about_4 .text_box .r_content table td:first-child { margin-bottom: 2px !important; }
}