/* ============================================================================
 * Inspire_the_next.css — 模块分类注释
 * 作用域：所有样式已统一收敛到 #inspirethenext（对应 <main id="inspirethenext">）
 * 模块划分参考：inspirethenext/index.html
 *
 * 模块清单：
 *   1. 顶部 Banner        -> .inspirethenext-banner
 *   2. 数字化赋能视频      -> .cred-video
 *   3. 核心能力卡片轮播    -> .card-section .swiper.card-swiper
 *   4. 核心能力卡片列表    -> .card-section.card-list
 *   5. 数字化基础设施      -> .digit-infra
 *   6. 联系咨询 CTA 横幅   -> .contact-cta
 * ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════
   模块 1：顶部 Banner（Inspire the next 署名横幅）
   对应 HTML：<section class="inspirethenext-banner">
   ═══════════════════════════════════════════════════════════════════════ */
#inspirethenext .inspirethenext-banner{
    width: 100%;
    min-height: 280px;            /* 用 min-height 而不是 height */
    height: auto; 
    margin-bottom: 40px;
    background: url('/image/ml_portal/2026/Inspire_the_next/top_branding_itn.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-img{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-text{
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-text p{
    color: #fff;
    font-size: 1rem;
    line-height: 1.8;
}
#inspirethenext .inspirethenext-banner .inspirethenext-banner-text img{
    width: 95%;
    max-width: 420px;
}


/* ════════════════════════════════════════════════════════════════════════
   模块 2：数字化赋能视频
   对应 HTML：<section class="card-section"> … <div class="cred-video">
   ═══════════════════════════════════════════════════════════════════════ */
#inspirethenext .cred-video {
    display: inline-flex;
    align-items: center;
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
}


/* ════════════════════════════════════════════════════════════════════════
   模块 3：核心能力卡片轮播（Swiper 容器）
   对应 HTML：<div class="swiper card-swiper">
   ═══════════════════════════════════════════════════════════════════════ */
#inspirethenext .card-section .swiper.card-swiper{
    overflow: hidden;
    max-width: 1275px;
}


/* ════════════════════════════════════════════════════════════════════════
   模块 4：核心能力卡片列表
   对应 HTML：<section class="card-section card-list">
   ═══════════════════════════════════════════════════════════════════════ */
#inspirethenext .card-section.card-list{
    padding-inline: 0;
}
#inspirethenext .card-section.card-list h2.card-title{
    padding-left: 15px;
}
#inspirethenext .card-section p.TextStyle1{
    font-size: 1rem;
}
#inspirethenext .card-section.card-list p.TextStyle1{
    max-width: 1306px;
    padding-inline: 15px;
}
#inspirethenext .card-section.card-list .card-desc{
    margin-bottom: 0;
}
@media screen and (max-width: 1306px){
    #inspirethenext .card-section.card-list{
        padding-inline: 15px;
    }
    #inspirethenext .card-section.card-list h2.card-title{
        padding-left: 0;
    }
    #inspirethenext .card-section.card-list p.TextStyle1{
        padding-inline: 0;
    }
}
@media screen and (max-width: 996px){
    #inspirethenext .card-section.card-list{
        padding-inline: 0;
    }
    #inspirethenext .card-section.card-list h2.card-title,
    #inspirethenext .card-section.card-list p.TextStyle1{
        padding-left: 15px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   模块 5：数字化基础设施（Digitalizing Infrastructure）
   对应 HTML：<section class="card-section digit-infra">
   ═══════════════════════════════════════════════════════════════════════ */
#inspirethenext .digit-infra{
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5625rem;
    align-items: stretch;
    margin-bottom: 40px;
    background: #f4f4f4;
    padding: 1.5rem;
    max-width: 1275px;
}
#inspirethenext .digit-infra> div:first-child{
    flex: 1 1 0;
    background: #F4F4F4;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#inspirethenext .digit-infra> div:first-child > iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
#inspirethenext .digit-infra> div:last-child{
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#inspirethenext .digit-infra> div:last-child > p,
#inspirethenext .digit-infra> div:last-child > p span{
    font-size: 1rem;
    line-height: 24px;
}
#inspirethenext .digit-infra> div:last-child > p strong{
    color: #0C0C0C;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 8px 0 0;
}
@media screen and (max-width: 1306px) {
    #inspirethenext .digit-infra{
        width: auto;
        margin-inline: 15px;
    }
}
@media screen and (max-width: 996px) {
    #inspirethenext .digit-infra{
        flex-direction: column;
        gap: 24px;
    }
    #inspirethenext .digit-infra> div:first-child,
    #inspirethenext .digit-infra> div:last-child{
        flex: 1 1 auto;
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   模块 6：联系咨询 CTA 横幅
   对应 HTML：<section class="contact-cta">
   ═══════════════════════════════════════════════════════════════════════ */
#inspirethenext .contact-cta{
    background: url('/image/ml_portal/2026/Inspire_the_next/RedLoRes.png') no-repeat center / cover;
    /* padding: 36px 100px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
#inspirethenext .contact-cta .card-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36px 100px;
}
#inspirethenext .contact-cta .card-section .button .btn-arrow.notBg{
    background-color: #fff;
}
#inspirethenext .contact-cta p{
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}
@media screen and (max-width: 768px) {
    #inspirethenext .contact-cta .card-section{
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        padding: 30px;
    }
    #inspirethenext .contact-cta  p{
        font-size: 22px;
    }
}