/*!
 * download-device.css
 * 说明：下载页（download.html）移动端布局优化样式，配合 download-device.js 使用。
 * 规则：
 *   1. body[data-device=pc] 时不生效，PC 端完全保持原有四宫格布局
 *   2. body[data-device=mobile] 时，主推渠道卡片（data-primary=true）铺满一行
 *   3. 非主推渠道默认隐藏，点击「其他下载方式」后（body[data-expanded=true]）以两列展示
 * 注意：原页面卡片尺寸写在行内 style 上（336px），故此处必须用 !important 覆盖。
 */

/* ============ 设备提示条 / 其他下载方式开关 ============ */
.device-extra-bar {
    display: none;
    text-align: center;
    margin: 24px auto 0;
}

.device-tip {
    display: none;
    max-width: 520px;
    margin: 0 auto 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #eef1ff;
    color: #4154b5;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.device-tip[data-visible='true'] {
    display: block;
}

.device-toggle {
    display: none;
    padding: 8px 18px;
    border: 1px solid #c9d3ff;
    border-radius: 20px;
    background: #fff;
    color: #5c7eff;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
    user-select: none;
}

.device-toggle[data-visible='true'] {
    display: inline-block;
}

body[data-device='mobile'] .device-extra-bar {
    display: block;
}

/* ============ 移动端布局 ============ */
/* 用两列 grid 承载：主推卡片横跨整行，其他渠道各占半行 */
body[data-device='mobile'] ._app-download-download-wrap_1he7z_123 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 16px;
    width: 100%;
    margin: 0 auto !important;
}

/* 卡片外层：主推占满整行并排在最前，其他占半行 */
body[data-device='mobile'] ._download-item-wrap_li03d_1 {
    grid-column: 1 / -1;
    width: auto;
    margin: 0 !important;
}

body[data-device='mobile'] ._download-item-wrap_li03d_1[data-primary='true'] {
    order: -1; /* ⚠️ 关键：主推渠道始终排在最前，不受 DOM 顺序影响 */
}

body[data-device='mobile'] ._download-item-wrap_li03d_1[data-primary='false'] {
    display: none;
    grid-column: auto;
}

/* 展开「其他下载方式」后显示剩余渠道 */
body[data-device='mobile'][data-expanded='true']
    ._download-item-wrap_li03d_1[data-primary='false'] {
    display: block;
}

/* 卡片本体：覆盖行内固定尺寸 */
body[data-device='mobile'] ._download-item_li03d_1 {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    border-radius: 24px !important;
    padding: 28px 16px;
}

body[data-device='mobile']
    ._download-item-wrap_li03d_1[data-primary='false']
    ._download-item_li03d_1 {
    min-height: 170px !important;
    padding: 20px 12px;
    border-radius: 20px !important;
}

/* 移动端隐藏 PC 端的悬浮二维码层与右上角装饰角 */
body[data-device='mobile'] ._item-content-hover_li03d_7,
body[data-device='mobile'] ._right-icon_li03d_32 {
    display: none !important;
}

body[data-device='mobile'] ._item-content_li03d_7 {
    position: static;
    opacity: 1 !important;
    gap: 12px;
}

body[data-device='mobile'] ._item-desc_li03d_56 {
    font-size: 18px;
}

body[data-device='mobile']
    ._download-item-wrap_li03d_1[data-primary='false']
    ._item-desc_li03d_56 {
    font-size: 15px;
}

/* 按钮：原样式为固定 padding 0 56px，半宽卡片下会撑破导致文字折行，此处改为自适应 */
body[data-device='mobile'] ._item-btn_li03d_79,
body[data-device='mobile'] ._item-btn_1he7z_241 {
    width: auto;
    max-width: 100%;
    padding: 0 32px;
    white-space: nowrap;
    box-sizing: border-box;
}

body[data-device='mobile']
    ._download-item-wrap_li03d_1[data-primary='false']
    ._item-btn_li03d_79,
body[data-device='mobile']
    ._download-item-wrap_li03d_1[data-primary='false']
    ._item-btn_1he7z_241 {
    padding: 0 18px;
    font-size: 14px;
}