/* ============================================================
   country-index.css — /website/ 国家专栏（国家/城市索引）移动端布局
   老模板：外层 1200px 表格 + dt/dd 左右浮动 + 城市固定 112px 列宽，
   手机上只剩最左边 ~130px 可见。这里整段重排成卡片流。
   仅在 ≤768 视口生效，桌面端不受影响。
   ============================================================ */

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

    /* ---------- 1. 外层 1200px 表格改流式 ---------- */
    div[align="center"] { width: 100% !important; max-width: 100% !important; }
    table[width] { width: 100% !important; max-width: 100% !important; }
    table[width] > tbody > tr > td,
    table[width] td[align="center"] { padding: 0 !important; }

    /* ---------- 2. 区块容器 ---------- */
    .yl-rgn {
        width: auto !important; max-width: 100% !important;
        box-sizing: border-box; padding: 0 12px !important;
        text-align: left;
    }
    .yl-rgn h1 {
        text-align: left !important; color: #222;
        font-size: 20px !important; line-height: 1.4 !important;
        padding: 4px 0 14px !important;
    }

    /* ---------- 3. 洲别快捷导航：横向滚动胶囊 ---------- */
    .yl-rgn .conts {
        display: flex; flex-wrap: nowrap; gap: 8px;
        margin: 0; padding: 0 0 14px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; text-align: left;
    }
    .yl-rgn .conts::-webkit-scrollbar { display: none; }
    .yl-rgn .conts a {
        flex: 0 0 auto; padding: 5px 13px;
        background: #f4f5f7; border-radius: 15px;
        font-size: 13px !important; line-height: 20px; color: #444 !important;
    }
    .yl-rgn .conts a:active { background: #eceef1; }
    .yl-rgn .conts em { display: none; }

    /* ---------- 4. 热门国家 ---------- */
    .yl-rgn .hotcountry {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        margin: 0; padding: 0 0 4px;
        font-size: 13px !important; color: #888; text-align: left;
    }
    .yl-rgn .hotcountry a {
        padding: 4px 10px; background: #fdeceb; color: #bd1321;
        border-radius: 3px; font-size: 13px; line-height: 20px;
    }

    /* ---------- 5. 洲别分组：dt 变成小标题条 ---------- */
    .index-table { width: auto !important; max-width: 100% !important; }
    .index-table dl { margin: 26px 0 0 !important; }
    .index-table dl:first-child { margin-top: 18px !important; }
    .index-table dt {
        float: none !important; width: 100% !important; box-sizing: border-box;
        display: flex; align-items: center; gap: 8px;
        padding: 0 0 10px !important;
        text-align: left; border-bottom: 1px solid #ececec;
    }
    .index-table dt::before {
        content: ""; flex: 0 0 auto;
        width: 4px; height: 17px;
        background: #bd1321; border-radius: 2px;
    }
    .index-table dt .zh { font-size: 18px !important; font-weight: 700; color: #222 !important; line-height: 1.2 !important; }
    .index-table dt .en { font-size: 12px !important; color: #aaa !important; line-height: 1.2 !important; }
    .index-table dd { float: none !important; width: 100% !important; margin: 0 !important; }

    /* ---------- 6. 国家条目：旗帜 + 国家名 + 城市胶囊 ---------- */
    /* 用两行网格：第一行旗帜（国家名从旗帜右侧溢出到第二列），第二行城市胶囊。
       之前用绝对定位放旗帜，城市行会和国家名挤在同一行上重叠。 */
    .yl-item {
        position: relative; overflow: visible !important;
        display: grid; grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px 0 12px !important;
        border-bottom: 1px dashed #ececec;
        text-align: left;
    }
    .yl-item:last-child { border-bottom: 0; }
    /* 旗帜保持 40×40 原尺寸，sprite 的 background-position 才能对得上 */
    .country-gq {
        grid-column: 1; position: static !important;
        float: none !important; margin: 0 !important;
        width: 40px; height: 40px;
        background-image: url(/qbgj/flags.gif?v=1) !important;
        background-repeat: no-repeat;
    }
    /* 国家名抬到旗帜右侧 */
    .country-gq a {
        display: inline-block; width: auto !important; max-width: none;
        margin: 10px 0 0 48px; padding: 0 !important;
        font-size: 15px !important; font-weight: 700; line-height: 20px !important;
        color: #222; white-space: nowrap;
    }
    .country-city {
        grid-column: 1 / -1;
        float: none !important; width: auto !important; height: auto !important;
        overflow: visible !important; padding: 0 !important; margin: 8px 0 0 48px !important;
        display: flex; flex-wrap: wrap; gap: 6px 8px;
    }
    .country-city a {
        float: none !important; width: auto !important; height: auto !important;
        padding: 3px 9px; background: #f5f6f8; border-radius: 3px;
        font-size: 12px !important; line-height: 20px !important; color: #555;
    }
    .country-city a:active { background: #eceef1; }
    /* 桌面端的「展开更多城市」箭头在胶囊布局里没意义，隐藏（默认就是全展开） */
    .more-city { display: none !important; }
}