/* ==========================================================================
   Forum 全站响应式样式表（统一收口 · Single Source of Truth）
   --------------------------------------------------------------------------
   引入方式：
       由公共片段 templates/forum/header.html 统一引入，
       所有引用 <div th:replace="forum/header"></div> 的页面自动生效，
       无需修改任何页面。

   适配策略：
       桌面优先（Desktop First）+ max-width 媒体查询逐级降级；
       只做「覆盖」，不修改任何既有业务 CSS 文件，便于整体回退。

   断点：
       1366px  小笔记本 / 平板横屏
        991px  平板竖屏
        767px  移动端
        480px  小屏手机

   目录：
       1. 全局基础自适应
       2. 公共容器
       3. 论坛主布局（左右分栏 -> 单栏）
       4. 卡片与列表
       5. 产品 / 文档网格
       6. 表单
       7. 分页
       8. 轮播 / 横幅
       9. 富文本内容
      10. 公共工具类
      11. 超小屏（≤480px）
      12. 公共片段迁移样式（header / footer）
      13. 顶部导航吸顶
   ========================================================================== */

/* ---------- 1. 全局基础自适应 ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
}

/* 媒体元素不撑破容器 */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* 图片按原比例缩放（行内样式优先级更高，不会被覆盖） */
img {
    height: auto;
}

/* 超长文本 / URL 换行，避免把布局撑破 */
.yzm_list_section,
.yzm_list_section p,
.yzm_list_section li,
.yzm_list_section a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.clear {
    clear: both;
}

/* ---------- 2. 公共容器 ---------- */
/* 原 bbs/common.css: .container{margin:auto;width:1300px;} -> 改为流式 */
.container {
    width: auto !important;
    max-width: 1300px;
    box-sizing: border-box;
}

/* ---------- 3. 论坛主布局：左右分栏 -> 单栏 ---------- */
@media screen and (max-width: 1365px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 3.1 左栏自适应：避免左右两栏宽度之和超出容器 */
/* 原 bbs/index.css: .yzm_main_left{float:left;width:940px} + .yzm_main_right{float:right;width:350px}
   = 1290px，与 1300px 的 .container 恰好留 10px 间距。
   但 .container 已改为流式且 ≤1365px 时还有 32px 内边距，容器可用宽度最多只有 1268px（< 1290px），
   于是从 992px ~ 1365px 这段视口里两栏必定放不下：右栏被挤到下一行，列表右侧留下大片空白。
   这里把左栏改为 calc(100% - 360px)：
     - 容器 1300px 时 = 940px，与原始设计完全一致（仍保留 10px 间距）；
     - 容器变窄时左栏同步收缩，两栏始终并排且不会超出容器。
   用 :has() 限定“后面确实跟着右栏”时才生效，避免影响 video/share.html、about.html
   这类只有左栏的单栏页面；不支持 :has() 的浏览器该条规则自动失效，退回原样，不会更糟。 */
@media screen and (min-width: 992px) {
    .yzm_main_left:has(+ .yzm_main_right) {
        width: calc(100% - 360px) !important;
        box-sizing: border-box;
    }

    .yzm_main_right {
        box-sizing: border-box;
    }
}

/* 列表项内为封面图预留的固定宽度块（如 width:625px 的信息块）改为不超过可用宽度：
   左栏收窄后（或窄屏单栏时）它们会撑破列表容器并产生整页横向滚动条。 */
.yzm_main .yzm_list_info {
    max-width: 100% !important;
    box-sizing: border-box;
}

@media screen and (max-width: 991px) {
    .yzm_main,
    .yzm_main.container {
        margin: 12px auto;
    }

    /* 原 bbs/index.css: .yzm_main_left{float:left;width:940px} .yzm_main_right{float:right;width:350px} */
    .yzm_main_left,
    .yzm_main_right {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .yzm_main_right {
        margin-top: 15px;
    }
}

/* ---------- 4. 卡片与列表 ---------- */
@media screen and (max-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .yzm_list_section {
        border-radius: 0;
        /* 宽表格等超宽内容在卡片内横向滚动，而不是撑破整页 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .yzm_list_section strong {
        font-size: 16px;
        height: 44px;
        line-height: 44px;
    }
}

/* ---------- 5. 产品 / 文档网格 ---------- */
@media screen and (max-width: 1365px) {
    /* 原 bbs/shop.css: .doc-rec-wrapper{width:1240px;height:559px} .doc-rec-wrapper .doc-rec{width:899px} */
    .doc-rec-wrapper {
        width: auto !important;
        max-width: 1240px;
        height: auto !important;
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
    }

    .doc-rec-wrapper .doc-rec {
        width: 100% !important;
    }

    .doc-rec-wrapper .doc-rec .list-wrap {
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 991px) {
    /* 原 .list-item{width:221px} -> 每行 3 个，自适应 */
    .list-item {
        width: calc(33.333% - 8px) !important;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 767px) {
    /* 每行 2 个 */
    .list-item {
        width: calc(50% - 6px) !important;
    }

    /* 产品封面里的固定尺寸图片改为流式 */
    .doc-item-vertical .cover,
    .doc-cover-wrapper img.cover,
    .doc-item-vertical .cover-wrapper .cover {
        width: 100% !important;
        height: auto !important;
    }
}

/* ---------- 6. 表单 ---------- */
@media screen and (max-width: 991px) {
    /* 原 bbs/index.css: .yzm_col .text_input{width:600px;position:absolute;left:110px}
                        .yzm_col .yzm_textarea{width:1050px}
                        .yzm_col select{position:absolute;left:110px} */
    .yzm_col .text_input,
    .yzm_col .yzm_textarea {
        position: static !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .yzm_col select {
        position: static !important;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .yzm_col .code_input {
        width: 100%;
    }

    .yzm_col .yzm_span {
        width: 84px;
        box-sizing: border-box;
    }

    /* 通用表单控件在小屏铺满 */
    .yzm_list_section input[type="text"],
    .yzm_list_section input[type="password"],
    .yzm_list_section input[type="email"],
    .yzm_list_section input[type="tel"],
    .yzm_list_section textarea,
    .yzm_list_section select {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ---------- 7. 分页 ---------- */
@media screen and (max-width: 767px) {
    #pagebar,
    .pagebar {
        text-align: center;
        padding: 12px 0;
    }

    .laypage_main a,
    .laypage_main span {
        padding: 0 8px;
        margin: 2px;
    }
}

/* ---------- 8. 轮播 / 横幅 ---------- */
@media screen and (max-width: 767px) {
    /* 原始高度多为 470px，小屏收敛（index.html 内联 .swiper-wrapper{height:470px} 会被覆盖） */
    .banbox .banner,
    .banbox .banner .swiper-container {
        height: auto !important;
        min-height: 170px;
    }

    .swiper-wrapper {
        height: 200px !important;
    }
}

/* ---------- 9. 富文本内容 ---------- */
@media screen and (max-width: 767px) {
    .yzm_list_section img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 富文本里的预格式化代码允许换行 */
    .yzm_list_section pre,
    .yzm_list_section code {
        white-space: pre-wrap;
        word-break: break-all;
    }
}

/* ---------- 10. 公共工具类 ---------- */
/* 仅在小屏隐藏 */
@media screen and (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }

    .tx-center-mobile {
        text-align: center !important;
    }

    .w-100-mobile {
        width: 100% !important;
    }
}

/* 仅在 PC 显示（默认隐藏，小屏显示） */
.hide-on-pc {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .hide-on-pc {
        display: block !important;
    }
}

/* ---------- 11. 超小屏（≤480px） ---------- */
@media screen and (max-width: 480px) {
    .list-item {
        width: 100% !important;
    }

    .swiper-wrapper {
        height: 160px !important;
    }

    .yzm_list_section strong {
        font-size: 15px;
    }
}

/* ---------- 11.1 公共左右布局：pages / userCenter / message / account ---------- */
/* 这些页面共用 .container-area-left（左侧菜单）+ .container-area-right（右侧内容，固定 898px）结构 */
@media screen and (max-width: 991px) {
    .container-area-left,
    .container-area-right {
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .container-area-left {
        margin-bottom: 12px;
    }

    /* 右侧内容里的固定宽度块（关于我们 / 帮助 / 规则等页面）改为流式 */
    .container-area-right .textarea .intro > a,
    .container-area-right .textarea .intro .href,
    .container-area-right .text-area .rule .stack .ques li div,
    .container-area-right .text-area .rule .stack .ques li div:last-of-type {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container-area-right img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 767px) {
    /* 协议类页面里的固定列宽表格允许收缩，避免横向溢出 */
    .agree-table td,
    .yzm_table th,
    .yzm_table td {
        width: auto !important;
        word-break: break-word;
    }
}

/* ---------- 12. 公共片段迁移样式（header / footer） ---------- */
/* 以下样式由公共片段 header.html、footer.html 的内联 <style> 统一迁移而来（规则等价）。 */

/* ===== 12.1 来源：header.html —— 顶部导航 ===== */
/* 顶部导航响应式适配（PC / 平板 / 移动端）
   说明：header.html 为全站公共片段（th:replace），以下样式对所有引用页面生效；
        全部使用媒体查询做覆盖，不修改公共 CSS 文件。 */

/* ---------- 容器：固定 1300px 改为自适应 ---------- */
#divHead .head_main.container,
.searchbox .head_main.container {
    width: auto !important;
    max-width: 1300px;
    box-sizing: border-box;
}

/* 菜单文字不换行，避免被挤压成竖排 */
header nav .header-menu-bar .menu-box > ul.menu-list-content > li > a.menu-list-box {
    white-space: nowrap;
}

/* ---------- 小笔记本 / 平板横屏（≤1365px） ---------- */
@media screen and (max-width: 1365px) {
    #divHead .head_main.container,
    .searchbox .head_main.container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #logoImg img {
        width: 116px;
        height: 61px;
        top: 5px !important;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content {
        margin-left: 124px;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content > li > a.menu-list-box {
        padding: 0 12px;
        font-size: 17px;
    }

    header nav .user-center {
        width: 300px;
    }
}

/* ---------- 平板竖屏（≤991px） ---------- */
@media screen and (max-width: 991px) {
    #logoImg img {
        width: 98px;
        height: 52px;
        top: 10px !important;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content {
        margin-left: 104px;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content > li > a.menu-list-box {
        padding: 0 10px;
        font-size: 16px;
    }

    header nav .user-center {
        width: 220px;
    }

    header nav .user-center .unlogin a {
        font-size: 15px;
    }

    /* 登录态：压缩图标按钮宽度，避免撑破导航 */
    header nav .user-center .login > li > span > a {
        width: 46px !important;
        background-size: 23px 23px !important;
        background-position: 50% 46% !important;
    }

    header nav .user-center .login .user .avatar-container-30 {
        padding: 21px 8px;
    }

    /* 搜索浮层自适应：高度自适应，输入框占满 logo 右侧剩余宽度 */
    .searchbox {
        height: auto !important;
        min-height: 72px;
    }

    .searchbox .head_main > a img {
        width: 98px;
        height: 52px;
        top: 8px !important;
    }

    .searchbox .search {
        width: auto !important;
        margin: 17px 0 17px 118px;
        box-sizing: border-box;
    }
}

/* ---------- 移动端（≤767px）：logo/用户区一行，菜单自动换行 ---------- */
@media screen and (max-width: 767px) {
    /* 头部高度不再固定，随菜单行数变化 */
    #divHead,
    .searchbox {
        height: auto !important;
        overflow: visible;
    }

    #divHead .head_main.container,
    .searchbox .head_main.container {
        padding-left: 10px;
        padding-right: 10px;
    }

    header,
    header nav {
        height: auto !important;
    }

    /* 第一行：logo 固定在左上角 */
    #logoImg {
        position: absolute;
        left: 0;
        top: 0;
        display: block !important;
        width: 104px;
        height: 72px;
        z-index: 3;
    }

    #logoImg img {
        position: absolute;
        left: 0 !important;
        top: 12px !important;
        width: 96px !important;
        height: 48px !important;
    }

    /* 第一行：用户区仍保持 72px 高度，内部图标结构不变 */
    header nav .user-center {
        width: 126px;
        height: 72px;
        z-index: 3;
    }

    header nav .user-center .login > li > span > a {
        width: 40px !important;
        background-size: 22px 22px !important;
        background-position: 50% 46% !important;
    }

    header nav .user-center .login .user .avatar-container-30 {
        padding: 21px 5px;
    }

    header nav .user-center .unlogin a {
        font-size: 14px;
        margin-right: 4px;
        margin-left: 0;
    }

    header nav .user-center .unlogin i {
        margin-left: 4px;
    }

    header nav .user-center .unlogin li > div {
        width: 30px !important;
        height: 30px !important;
        margin-top: 20px !important;
        margin-right: 2px !important;
        background-size: 22px 22px !important;
        background-position: 50% 48% !important;
    }

    /* 第二行起：菜单整体下移并自动换行，不再横向滚动 */
    header nav .header-menu-bar {
        height: auto !important;
        padding-top: 72px;
    }

    header nav .header-menu-bar .menu-box {
        width: 100%;
        box-sizing: border-box;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        margin: 0;
        padding: 0 0 6px;
        box-sizing: border-box;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content > li {
        float: none;
        flex: 0 0 auto;
        height: 42px;
        line-height: 42px;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content > li > a.menu-list-box {
        display: block;
        float: none;
        box-sizing: border-box;
        padding: 0 12px;
        font-size: 15px;
        line-height: 42px;
        white-space: nowrap;
        text-align: center;
    }

    header nav .header-menu-bar .menu-box > ul.menu-list-content > li > span.menu-tit-box {
        display: block;
        padding: 0 12px;
        line-height: 42px;
    }

    header nav .header-menu-bar .more-menu i {
        height: 42px;
        background-size: 18px auto;
        background-position: left center;
        vertical-align: middle;
    }

    /* 下拉菜单贴在当前菜单项下方 */
    header nav .header-menu-bar .menu-box > ul.menu-list-content .menu-list {
        top: 42px;
    }

    /* 导航气泡提示：固定 576px 宽会溢出屏幕 */
    .popover {
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        font-size: 14px;
        line-height: 1.6;
    }

    /* 搜索浮层：隐藏 logo，输入框占满一行 */
    .searchbox .head_main > a {
        display: none;
    }

    .searchbox .search {
        width: 100% !important;
        margin: 16px auto;
    }

    .searchbox .search input.input_text {
        width: calc(100% - 96px) !important;
        box-sizing: border-box;
    }
}

/* ===== 12.2 来源：footer.html —— 页脚 ===== */
/* 页脚响应式适配（PC / 平板 / 移动端）
   说明：footer.html 为全站公共片段（th:replace），以下样式对所有引用页面生效。
        该片段行内样式较多，关键属性使用 !important 覆盖行内样式。 */

/* ---------- 容器：固定 1300px 改为自适应 ---------- */
#footer .container {
    width: auto !important;
    max-width: 1300px;
    box-sizing: border-box;
}

#footer .container .footer_item {
    box-sizing: border-box;
}

/* ---------- 平板竖屏及以下（≤991px）：横向多栏改为纵向堆叠 ---------- */
@media screen and (max-width: 991px) {
    #footer {
        padding: 28px 0 22px !important;
    }

    #footer .container {
        height: auto !important;
        overflow: visible !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #footer .container .footer_item {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 22px !important;
        text-align: center;
    }

    #footer .container .footer_item .footer_item_ctn {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #footer .container .footer_item span {
        word-break: break-word;
    }

    /* 右下角悬浮面板：限制最大宽度，避免超出屏幕 */
    .cndns-right-box,
    .cndns-right-box .box-border {
        max-width: calc(100vw - 140px) !important;
        box-sizing: border-box;
    }
}

/* ---------- 移动端（≤767px） ---------- */
@media screen and (max-width: 767px) {
    #footer {
        font-size: 13px;
        padding: 22px 0 16px !important;
    }

    #footer .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 隐藏右下角悬浮按钮、返回顶部面板与漂浮广告，避免遮挡内容 */
    .cndns-right,
    #footer .endnav,
    #roll {
        display: none !important;
    }

    #footer .container .footer_item .footer_item_ctn .item_title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    #footer .container .footer_item .footer_item_ctn .item_title .pink_block {
        bottom: -11px;
    }

    #footer .container .footer_item img {
        width: 108px;
        height: 108px;
    }

    #footer .focus_text {
        margin-bottom: 12px;
    }
}

/* ---------- 13. 顶部导航吸顶 ---------- */
/* 需求：页面滚动时，顶部导航（公共片段 forum/header）始终贴在最上方。

   两个必须同时处理的坑：
   1) main.min.css 里 html、body 都写了 overflow-x:hidden。
      hidden 会把元素变成「滚动容器」，从而破坏其子元素的 position:sticky
      （子元素改为相对该容器吸顶，而该容器本身不滚动 -> 看起来完全没生效）。
      这里改用 overflow-x:clip：同样裁掉横向溢出，但不会产生滚动容器，
      且 overflow-y 仍为 visible（只写 overflow-x，不能写成 overflow 简写）。
      不支持 clip 的旧浏览器会忽略该声明，自动回退为原本的 hidden，行为不变。
   2) 用 sticky 而不是 fixed：sticky 不脱离文档流，无需给下方内容补 padding，
      移动端导航高度随菜单行数变化时也不会错位（fixed 会算错高度）。
      滚动时横向也保持全宽，因此同时修正 ≤1200px 下 #body 被写死 1200px 的问题。 */
html,
body {
    overflow-x: clip;
}

#divHead,
.searchbox {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

@media screen and (max-width: 1200px) {
    /* main.min.css: @media (max-width:1200px){ #body,main{width:1200px} }
       固定 1200px 会让吸顶导航在窄屏下比视口还宽（右侧被裁切），改为随视口。 */
    #body,
    main {
        width: 100% !important;
        min-width: 0 !important;
    }
}