/**
 * 国贸通窄屏适配（≤768px）。
 *
 * 内容区本来就已经适配好了：shared.css 的 .page-shell 是流式的，list.css 有 960/600
 * 两档断点，detail.css 有 1100/900/640 三档，图表是带 viewBox 的内联 SVG。
 * 本文件只补外链 www.bigtradedata.com/css/style.css 管着的头尾——那份 CSS 的
 * 768px 断点只改了 .w1400 的宽度，完全没处理导航、页脚三列和悬浮客服栏。
 *
 * 必须放在所有样式之后引入，才能压过外链样式和本地的 btd-chrome.css。
 * 桌面端一条规则都不落地。
 */

@media (max-width: 768px) {

    /* ============ 全局 ============ */

    html {
        /* 关掉 iOS 横屏时的自动字号放大，否则布局宽度和 clientWidth 会对不上 */
        -webkit-text-size-adjust: 100%;
    }

    body.trade-insights-page {
        padding-top: 56px;
        /* 兜底：外链页脚有 933px 的写死宽度，宁可裁掉也不要整页左右晃 */
        overflow-x: hidden;
    }

    body.trade-insights-page img {
        max-width: 100%;
    }

    /* iOS Safari 在输入框字号小于 16px 时会在聚焦瞬间放大整页，导致表单错位，
       退回后页面还停在放大状态。所有可输入控件统一到 16px 是唯一可靠的解法。 */
    body.trade-insights-page input,
    body.trade-insights-page select,
    body.trade-insights-page textarea {
        font-size: 16px;
    }

    /* 桌面留 36px 左右边距，窄屏每一像素都要留给内容 */
    .page-shell {
        width: calc(100% - 24px);
    }

    /* ============ 内容区：侧栏塌单列 ============ */

    /* list.css 一条 @media 都没有，.content-grid:has(> .side-panel) 在任何宽度都是
       「主列 + 286px 侧栏」两列；390px 下主列只剩 62px，统计栏与公司卡全被裁切。
       窄屏塌成单列：结果在上、侧栏（热门搜索等）在下。 */
    body.trade-insights-page .content-grid:has(> .side-panel) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 两列公司卡在 390px 下每张只剩约 170px，名称与指标都放不下 */
    body.trade-insights-page .trader-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ============ 头部：一级入口横向滑动 ============ */

    /* 外链给 .w1400 的是硬 width:1400px，只改 max-width 压不住它，
       必须连 width 一起压成 100%；box-sizing 保证 padding 不再把宽度顶出去。 */
    body.trade-insights-page .head {
        width: 100%;
        max-width: 100%;
    }

    body.trade-insights-page .head .w1400 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 12px;
    }

    body.trade-insights-page .head a#logo {
        flex: none;
    }

    body.trade-insights-page .head a#logo img {
        display: block;
        height: 26px;
        width: auto;
    }

    /* 7 个一级菜单按外链的 padding 与 16px 字号算约 900px，加上本地 btd-chrome.css 的
       white-space:nowrap 与 flex-shrink:0，窄屏必然溢出。改成横向滑动：
       触屏上滑动比挤压文字或换行更符合习惯。 */
    body.trade-insights-page .head ul {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.trade-insights-page .head ul::-webkit-scrollbar {
        display: none;
    }

    body.trade-insights-page .head ul li {
        flex: none;
        line-height: 56px;
    }

    body.trade-insights-page .head ul li a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
    }

    /* 下拉菜单靠 hover 展开，触屏上点一下会粘住；窄屏整体关掉，
       一级入口本身就是可点的链接，跳过去再导航。 */
    body.trade-insights-page .head ul li .menus {
        display: none !important;
    }

    /* 下拉已关，指示箭头只会让人以为点了有用 */
    body.trade-insights-page .head ul li a.downicon {
        background-image: none;
    }

    body.trade-insights-page .head .header_fr {
        flex: none;
        height: 56px;
    }

    body.trade-insights-page .head .header_fr a {
        font-size: 13px;
    }

    /* 窄屏横向空间紧张，中英切换让位给导航滑动区 */
    body.trade-insights-page .head .language_cnen {
        display: none;
    }

    /* ============ 悬浮客服栏 ============ */

    /* 固定在右侧 16px、宽 50px、五项共约 240px 高，在 390px 屏上会一直盖住
       表格与图表的右半部分；里面的 QQ/微信/Skype 二维码在手机上也没法扫自己屏幕。
       「回到顶部」一并舍弃——窄屏页面本来就更短。 */
    body.trade-insights-page .customerservice {
        display: none !important;
    }

    /* 咨询悬浮钮是转化入口，保留；但从屏幕中部移到右下角，
       避免盖住搜索框与表单控件的中段。 */
    body.trade-insights-page .embed-icon {
        top: auto;
        bottom: 16px;
        right: 12px;
    }

    /* ============ 详情页表格 ============ */

    /* 5 列贸易记录表：与其把 354px 挤成五列不可读，不如给个最小宽度横向滑动。
       外层 .panel__scroll 本来就是 overflow:auto，这里补上表格自身的最小宽度，
       否则 table 的 width:100% 会把五列压到无法阅读。 */
    body.trade-insights-page .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.trade-insights-page .table-wrap table {
        min-width: 640px;
    }

    /* 指标表左列写死 160px，窄屏会吃掉近一半宽度 */
    body.trade-insights-page .metrics-table th {
        width: 104px;
    }

    body.trade-insights-page .metrics-table th,
    body.trade-insights-page .metrics-table td {
        padding: 8px;
    }

    /* ============ 分页 ============ */

    body.trade-insights-page .pagination {
        gap: 6px;
        justify-content: center;
    }

    body.trade-insights-page .pagination .page-info {
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }

    /* ============ 页脚 ============ */

    body.trade-insights-page footer .w1400 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
    }

    /* 450px 的最小高度是给桌面两栏留的，窄屏竖排后会空出一大片 */
    body.trade-insights-page footer .minheight514 {
        min-height: 0;
    }

    /* 外链把左栏写死成 width:933px + float:left，这是窄屏溢出的主因 */
    body.trade-insights-page footer .footer_fl {
        float: none;
        width: auto;
        border-right: none;
    }

    body.trade-insights-page footer .footer_fr {
        float: none;
        width: auto;
        min-height: 0;
        margin-top: 20px;
    }

    body.trade-insights-page .footer_title {
        min-height: 60px;
    }

    /* 五列各 20% 在 334px 容器里只剩 67px，放不下「土耳其等独家库」这类条目 */
    body.trade-insights-page .footer_ul {
        min-height: 0;
    }

    body.trade-insights-page .footer_ul li {
        width: 50%;
        margin-bottom: 12px;
    }

    /* 100px 行高的栏目标题在窄屏等于每栏空占一整屏的十分之一 */
    body.trade-insights-page .footer_ul li h2 {
        line-height: 40px;
        font-size: 16px;
    }

    body.trade-insights-page .footer_ul li a {
        line-height: 28px;
    }

    /* 两行共 9 个 86px 的二维码图标，横排必然溢出，放开换行 */
    body.trade-insights-page .footer_media {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px 8px;
        padding: 16px 0 20px;
    }

    body.trade-insights-page .footer_media_row {
        flex-wrap: wrap;
        gap: 12px 8px;
    }

    /* 第二行的内边距与虚线分隔是给桌面横排留的，窄屏换行后会错位 */
    body.trade-insights-page .footer_media_row:nth-child(2) {
        padding: 0;
        margin: 0;
    }

    body.trade-insights-page .footer_media_row:nth-child(2)::before,
    body.trade-insights-page .footer_media_row:nth-child(2)::after {
        display: none;
    }

    body.trade-insights-page .footer_media_item {
        width: 76px;
        flex: 0 0 76px;
    }

    body.trade-insights-page .footer_footer p {
        line-height: 1.6;
        font-size: 12px;
    }
}