/* ==== Brochure big cards: 1:1 layout with precise ratio, non-cropping background, and full footer ====*/
:root {
    --support-card-ratio: 19/10;
}

:root {
    --header-h: 72px;
}
:root{ --brand: #f26522; }



/* 调整这里即可匹配你的设计长宽比 */
.support-card-list {
    display: flex;
    flex-wrap: wrap;
    /* 设置元素之间的间距 */
    justify-content: space-between;
    /* 主轴（水平）开始位置对齐 */
    align-items: flex-start;
    /* 交叉轴（垂直）开始位置对齐 */
    padding-left: 12px;
    padding-right: 12px;
}

.support-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    aspect-ratio: 1.3;
    /* desktop base */
    background: #0d0d0d;
    padding: 20px;
    width: calc(50% - 20px);
    /* 2 columns on desktop */
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* large tablet */
@media (max-width: 1279.98px) {
    .support-card {
        width: calc(50% - 40px);
        aspect-ratio: 1.3;
        padding: 18px;
    }
}

/* tablet */
@media (max-width: 1023.98px) {
    .support-card-list {
        gap: 28px;
    }

    .support-card {
        width: calc(50% - 28px);
        aspect-ratio: 16/10;
        padding: 16px;
    }
}

/* mobile */
@media (max-width: 767.98px) {
    .support-card-list {
        gap: 16px;
    }

    .support-card {
        width: 100%;
        aspect-ratio: 16/9;
        padding: 12px;
    }
}

/* 兜底：不支持 aspect-ratio 的旧环境用高度比实现 */
.support-card::before {
    content: "";
    float: left;
    padding-top: calc(100% / (var(--support-card-ratio)));
}

.support-card::after {
    content: "";
    display: block;
    clear: both;
}

.support-card__bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 767.98px) {
    :root {
        --support-card-ratio: 16/9;
    }
}

.brandBar {
    background: #fff;
    cursor: pointer;
    padding: 10px 12px;
}

.brandBar:hover {
    background: #f26522;
}

.brandBar img {
    height: auto;
    width: auto;
}

@media (max-width: 767.98px) {
    .brandBar img {
        max-height: 44px;
    }
}

/* 底部信息条（PDF图标 + 标题 + 下载按钮 + 文件信息） */
.support-card__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    /* was 0; lift bar to reveal progress strip area */
    height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 14px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(120%) blur(4px);
}

.support-card__icon {
    width: 27px;
    height: 33px;
    flex: 0 0 22px;
    object-fit: contain;
}

.support-card__title {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    /* Ensure text truncation with ellipsis */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.support-card__title_bar {
    width: 70%;
}

.support-card__meta {
    color: #666666;
    opacity: .9;
    font-size: 12px;
    white-space: nowrap;
}

.support-card__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.support-card__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
}

.btn-icon {
    height: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.btn-icon img {
    display: block;
}

.btn-icon--ghost:hover {
    background: rgba(255, 255, 255, .18);
}

.btn-icon--primary {
    background: #f26522;
}

.btn-icon--primary:hover {
    background: #e05a1f;
}

.support-card__progress {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, .15);
    overflow: hidden;
    border-radius: 999px;
    margin-left: 12px;
}

.support-card__progress .bar {
    width: 0%;
    height: 100%;
    background: #f26522;
    transition: width .25s ease;
}

@media (max-width:767.98px) {
    .support-card__bar {
        bottom: 6px;
        height: 52px;
        gap: 8px;
        padding: 0 10px;
    }

    .support-card__icon {
        width: 20px;
        height: 20px;
    }

    .support-card__title {
        font-size: 12px;
    }

    .support-card__meta {
        display: none;
    }

    .btn-icon {
        height: 20px;
        font-size: 13px;
        width: 40px;
    }

    .btn-icon img {
        width: 100%;
        height: 100%;
    }

    .support-card__progress {
        height: 3px;
        margin-left: 8px;
    }

    .support-card__actions {}

    .support-card__btn {
        padding: 0;
    }

    .brandList {
        padding: 0 12px;
    }
}

/* === Numeric pager (unified, with ellipsis) === */
.pagination {display:flex;justify-content:center;gap:6px;padding:22px 0 6px;flex-wrap:wrap;margin-bottom:clamp(20px,5vh,48px)}
.pagination li{list-style:none}
.pagination li a,.pagination li span{display:inline-block;min-width:34px;height:32px;line-height:30px;background:#fff;color:#333;border:1px solid #d9d9d9;border-radius:4px;text-decoration:none;font-size:14px;text-align:center;user-select:none;transition:color .2s ease, background-color .2s ease, border-color .2s ease}
.pagination li a:hover{background:#fff;border-color:var(--brand,#f26522);color:var(--brand,#f26522)}
.pagination li.active a{background:var(--brand,#f26522);color:#fff;border-color:var(--brand,#f26522)}
.pagination li.disabled a{opacity:.45;cursor:not-allowed;background:#f7f7f7;color:#999}
.pagination li.page-dots span{background:#f7f7f7;color:#888;cursor:default}
.pagination li a.prev,.pagination li a.next{color:var(--brand,#f26522)}
.pagination li a.prev:hover,.pagination li a.next:hover{border-color:var(--brand,#f26522);background:#fff;color:var(--brand,#f26522)}
@media (max-width:480px){
    .pagination{gap:4px;padding:16px 0 4px;margin-bottom:clamp(16px,6vh,36px)}
    .pagination li a,.pagination li span{min-width:30px;height:30px;line-height:28px;font-size:13px}
}