@charset "utf-8";
/* ============================================================================
 * mobile.css — 前台 tdfront 手机/平板响应式适配
 * ----------------------------------------------------------------------------
 * 原则：桌面 td.css 一字不动；本文件在 td.css 之后加载；响应式规则都包在
 *       max-width 媒体查询里，桌面 ≥992px 不受影响（唯一例外见下方全局规则）。
 * 回滚：删除 head.blade.php 里的 <link ... mobile.css> 即可。
 * 断点：≤991px 平板+手机（单列堆叠、正文优先）；≤767px 手机额外细调。
 * 说明：页面无 <!DOCTYPE>（quirks 模式），故对设 width:100% 的元素显式
 *       box-sizing:border-box，避免 padding/border 撑溢出。
 * ==========================================================================*/

/* ===================== 全局（三端一致，非响应式）===================== */
/* 搜索页 topmenu 大 banner 上叠加的「首页 / 证书服务 / 关于我们」导航：
   PC / 平板 / 手机一律不显示，仅保留 topmenu 大 banner 本身（user 2026-06-27 决定）。 */
#header[style*="topmenu"] > div { display: none !important; }

/* 侧栏「共产主义的终极目的」上方的捐款块（donation7600001.png → /donation/）：三端隐藏（user 2026-06-27）。
   该块与「共产主义终极目的」共用 id="gongchanzhuyigongjimudi"，故用 :has(捐款链接) 精确只命中捐款块。 */
#gongchanzhuyigongjimudi:has(a[href*="donation"]) { display: none !important; }

/* 头部紫块(#header2)上的「官网主页」链接(→tuidang.org)：三端隐藏，保留「证书服务」(→/cert/)（user 2026-06-28）。 */
#header2 a[href="https://tuidang.org"] { display: none !important; }

/* ===================== 平板 + 手机：≤991px ===================== */
@media only screen and (max-width: 991px) {

    /* 放开桌面固定宽度（td.css: body{width:860px}） */
    body {
        width: auto;
        max-width: 100%;
        margin: 0;
    }

    .container {
        width: auto;
        max-width: 100%;
    }

    /* 仅"含侧栏导航的内容容器"转竖向 flex，正文优先；
       banner / footer / 搜索页(widetype) 的 .container 不受影响 */
    .container:has(> .leftcolumn) {
        display: flex;
        flex-direction: column;
    }
    .rightcolumn { order: 0; }   /* 正文在上 */
    .leftcolumn  { order: 1; }   /* 九评/解体党文化等参考导航在下 */

    /* 双列 float → 单列全宽堆叠 */
    .leftcolumn,
    .rightcolumn {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* 图片兜底，防溢出（含文章正文内联 <img>） */
    img {
        max-width: 100%;
        height: auto;
    }

    /* —— 首页提交三退表单 —— */
    .wideinputbox {
        width: 100% !important;
        box-sizing: border-box;
    }
    form[name="postform"] table { width: 100%; }
    form[name="postform"] textarea,
    form[name="postform"] input[type="text"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 正文下方三个按钮：横排 31% → 竖排全宽 */
    .item1 {
        float: none !important;
        width: 100% !important;
        margin-bottom: 8px;
    }
    #divbtn1, #divbtn2, #divbtn3 { padding-left: 0 !important; }
    .item1 .btn { width: 100%; }

    /* —— 搜索页（widetype 布局）—— */
    #searchbox {
        width: auto !important;
        margin: 10px !important;
        padding: 15px !important;
        box-sizing: border-box;
    }
    #searchbox input[name="searchword"] {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }

    /* —— 顶部 banner —— */
    /* #header2(logo 居左 66% 宽 + 链接居右)本就随宽度等比，保持原样不覆盖
       background-size——此前误覆盖成 contain 反而把 logo 撑大压住链接。 */
    .container[style*="205px"] { height: auto !important; }
    #header1 {                      /* © 全球退党… 文字条：窄屏放开高度、允许换行 */
        height: auto !important;
        padding: 6px 10px !important;
        line-height: 1.4 !important;
    }
    /* #header2(官网主页/证书服务 紫底条)：桌面写死 height:103px，但 logo 用
       background-size:66%(随宽度缩)，窄屏下 logo 变小、盒高没缩→下方大片空紫显得很高。
       改为盒高随宽度按比例(aspect-ratio)，logo 与链接垂直居中、去掉写死的 padding-top。 */
    #header2 {
        height: auto !important;
        aspect-ratio: 10 / 1 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-position-y: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    /* #header3 = tuidang_b4.jpg 整幅"退出共产党"横幅(原图 799×83)。
       桌面用 cover 会在窄屏裁掉两侧，故按原图比例定盒高 + contain 完整显示、不裁不变形。 */
    #header3 {
        height: auto !important;
        aspect-ratio: 799 / 83;
        top: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    /* 搜索页(widetype) 的两个 banner 同属 id="header"，按内联 style 里的图片名区分，
       同样按原图比例完整显示(topmenu 1598×231 含右侧叠加链接；tuidang_b4 799×83 空图)。 */
    /* topmenu 大 banner：按原图 1598×231 比例完整显示、不裁不变形
       (叠加的 首页/证书服务/关于我们 导航已全局去掉，见文件顶部 display:none)。 */
    #header[style*="topmenu"] {
        height: auto !important;
        aspect-ratio: 1598 / 231;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    #header[style*="tuidang_b4"] {
        height: auto !important;
        aspect-ratio: 799 / 83;
        top: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
}

/* ===================== 手机：≤767px 额外细调 ===================== */
@media only screen and (max-width: 767px) {

    /* 文章详情：标题缩小防溢出、内边距收紧 */
    #post { padding: 10px 8px; }
    #post h1 { font-size: 22px; }
    #post #content { font-size: 110%; }

    /* 统计区标题「自2004年12月3日起退党…人数(中港台时间)：」手机端字号缩小 5% */
    #tdstatistics .title { font-size: 95%; }

    /* 统计数字区(总计/本月/本周、昨日/今日人数)手机端缩小约 15%，
       让「总计人数」那行能在 2 行内放下。数字 .fontred 在 td.css 里写死 17px，须一并缩。 */
    #tdstatistics ul li:not(.title) { font-size: 85%; }
    #tdstatistics .fontred { font-size: 14.5px; }

    /* 触屏：侧栏列表行距放大些，便于点按 */
    .leftcolumn .box ul li { margin: 6px 0; }

    /* 提交表单：标签与输入框由左右两格改为上下排，更适合窄屏 */
    form[name="postform"] table td {
        display: block;
        width: auto;
        text-align: left;
    }
}