/* =====================================================
   牛樟芝页面 - Banner
===================================================== */

.htnzz-hero,
.htnzz-hero * {
    box-sizing: border-box;
}

.htnzz-hero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/* =====================================================
   PC / iPad Banner
===================================================== */

.htnzz-hero__desktop {
    display: block;
    width: 100%;
    height: clamp(360px, 31.25vw, 600px);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.htnzz-hero__desktop .carousel-inner,
.htnzz-hero__desktop .carousel-item {
    width: 100%;
    height: 100%;
}

.htnzz-hero__pc-image {
    width: 100%;
    height: 100%;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* 默认隐藏轮播左右箭头 */

.htnzz-hero__arrow {
    display: none;
}


/* =====================================================
   Mobile Banner
===================================================== */

.htnzz-hero__mobile {
    display: none;
}


/* =====================================================
   iPad
   769px - 1100px
===================================================== */

@media (min-width: 769px) and (max-width: 1100px) {

    .htnzz-hero__desktop {
        /*
         * 保持 PC Banner 的原始横向比例，
         * 不再使用固定 600px 高度
         */
        height: clamp(300px, 31.25vw, 345px);
    }

}


/* =====================================================
   Mobile
   <= 768px
===================================================== */

@media (max-width: 768px) {

    /*
     * 手机不再加载 PC Banner 布局
     */
    .htnzz-hero__desktop {
        display: none !important;
    }


    /*
     * 手机独立 Banner
     */
    .htnzz-hero__mobile {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #351600;
    }


    /*
     * 关键：
     * 不使用 background-size: cover，
     * 防止设计稿中的文字/牛樟芝被裁切。
     */
    .htnzz-hero__mobile-image {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

}