/* main-banner.css - 移动端 banner 适配样式（独立文件，不污染 main.css） */

/* 默认隐藏移动端元素（PC 端） */
.tpm-portal-hero__swiper,
.tpm-portal-hero__pagination {
    display: none
}

/* ========== 移动端适配：<= 768px ========== */
@media screen and (max-width: 768px) {
    .tpm-portal-hero {
        height: 250px
    }

    /* 隐藏 PC 端控制器和内容区 */
    .tpm-portal-hero__ctrls-wrap,
    .tpm-portal-hero__content {
        display: none
    }

    /* 显示移动端 Swiper 和分页器 */
    .tpm-portal-hero__swiper,
    .tpm-portal-hero__pagination {
        display: block
    }

    .tpm-portal-hero__swiper {
        height: 100%
    }

    /* Swiper 子元素全高 */
    .tpm-portal-hero__swiper .swiper-wrapper,
    .tpm-portal-hero__swiper .swiper-slide,
    .tpm-portal-hero__item-mobile {
        height: 100%
    }

    /* 移动端 slide 样式 */
    .tpm-portal-hero__item-mobile {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 32px 24px 44px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        text-decoration: none;
        color: #181818
    }

    .tpm-portal-hero__item-mobile .tpm-portal-hero__item-title {
        color: #181818;
        font-weight: 500;
        font-size: 32px;
        line-height: 48px;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical
    }

    .tpm-portal-hero__item-mobile .tpm-portal-hero__item-title p {
        margin: 0;
        display: inline
    }

    .tpm-portal-hero__item-mobile .tpm-portal-hero__item-desc {
        margin-top: 8px;
        color: #253554;
        font-size: 14px;
        line-height: 22px;
        white-space: nowrap;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis
    }

    /* ========== 分页器 ========== */
    .tpm-portal-hero__pagination {
        z-index: 1;
        position: absolute;
        left: 24px;
        bottom: 18px;
        width: calc(100% - 48px);
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center
    }

    .tpm-portal-hero__pagination-num {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        color: rgba(0, 0, 0, .35);
        font-size: 12px;
        line-height: 20px;
        font-weight: 500
    }

    .tpm-portal-hero__pagination-current {
        color: #000
    }

    .tpm-portal-hero__pagination-bullets {
        width: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        height: 12px;
        margin-left: 16px;
        display: -ms-flexbox;
        display: flex
    }

    .tpm-portal-hero__pagination-bullet {
        width: 0;
        -ms-flex: 1;
        flex: 1;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        cursor: pointer
    }

    .tpm-portal-hero__pagination-bullet:after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: rgba(0, 0, 0, .1)
    }

    .tpm-portal-hero__pagination-bullet.is-active:after {
        background: #000
    }
}

/* ========== 更小屏幕：<= 600px ========== */
@media screen and (max-width: 600px) {
    .tpm-portal-hero__item-mobile {
        padding: 32px 16px 44px
    }

    .tpm-portal-hero__item-mobile .tpm-portal-hero__item-title {
        font-size: 28px;
        line-height: 36px
    }

    .tpm-portal-hero__pagination {
        left: 16px;
        bottom: 16px;
        width: calc(100% - 32px)
    }
}