/* ===============================
   通用 section 样式（自适应 padding）
================================ */
section {
    padding: clamp(32px, 6vw, 60px) clamp(16px, 6vw, 80px);
    background-image: linear-gradient(
            130deg,
            ghostwhite 0%,
            ghostwhite 45%,
            ghostwhite 100%
    );
    box-sizing: border-box;
}

section h1,
section h2 {
    text-align: center;
    margin-bottom: 20px;
}

section p {
    font-size: 1.1em;
    line-height: 1.6em;
    max-width: 800px;
    margin: 0 auto;
}

/* Intro section 让文字稍微窄一点 */
.intro-section p {
    text-align: center;
}

/* main-sections 自己透明背景；h2 居中 */
.main-sections {
    padding: 0;
    background: transparent;
    text-align: center;
}

/* ===============================
   图文 Feature 区块（核心自适应）
================================ */
.feature {
    display: flex;
    flex-wrap: wrap;  /* ⭐ 宽度不够时自动换行 */
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(32px, 5vw, 60px) clamp(16px, 5vw, 80px);
    box-sizing: border-box;
}

/* 背景统一淡色渐变 */
.feature-light,
.feature-green {
    background-image: linear-gradient(
            130deg,
            ghostwhite 0%,
            ghostwhite 45%,
            ghostwhite 100%
    );
}

/* 左右两块：各占差不多一半，最小宽度 320px */
.feature > img,
.feature > .text-box,
.feature > .feature-text {
    flex: 1 1 0;
    min-width: 320px;      /* 小于这个就会自动换行 */
}

/* 图片样式（PC & 大部分屏宽通用） */
.feature img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* 旧的 .feature-text 保留兼容性（你现在主要用 .text-box） */
.feature-text {
    text-align: left;
}

/* ===============================
   main-sections 里的 h2：橙色胶囊标题
================================ */
.main-sections h2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 28px 10px 52px;
    margin-bottom: 18px;
    background-image: linear-gradient(
            130deg,
            #f39a1d 0%,
            #f39a1d 45%,
            #f39a1d 100%
    );
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    color: #083045;
    font-weight: 700;
}

/* 标题左侧圆形图标 */
.main-sections h2::before {
    content: "✈";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* ===============================
   文本盒子：整体左对齐
================================ */
.text-box {
    margin: 0;
    padding: 0 24px;
    text-align: left;
    background-color: inherit;
    box-sizing: border-box;
    max-width: none;  /* ⭐ 不再限制为 900px，跟图片保持同列宽 */
}

/* 覆盖全局 section p 的 max-width/margin，让 feature 内文字跟图片对齐 */
.feature .text-box p,
.feature .feature-text p {
    max-width: none;
    margin: 0 0 12px;
}

/* 列表和 li 间距 */
.text-box ul {
    margin: 12px 0 16px;
    padding-left: 1.3em;
}

.text-box li {
    margin-bottom: 4px;
}

/* ===============================
   优势区块：用 auto-fit 自适应列数
================================ */
.advantage-card {
    padding: 24px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.advantage-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.advantage-card p {
    margin-bottom: 20px;
}

.advantage-card .more-btn {
    margin-top: auto;
}

/* ===============================
   小屏断点（<= 640px）：只做微调
================================ */
@media (max-width: 640px) {

    section {
        padding: 24px 16px;
    }

    section p {
        font-size: 1rem;
    }

    .feature {
        padding: 24px 16px;
        gap: 20px;
        flex-direction: column;      /* ⭐ 图片在上文字在下 */
        align-items: center;
    }

    .feature > img,
    .feature > .text-box,
    .feature > .feature-text {
        min-width: 0;
        width: 100%;
        flex: 0 1 auto;
    }

    .feature img {
        max-width: 480px;
        margin: 0 auto;
    }

    .text-box {
        padding: 0 8px;
        margin-top: 8px;
    }

    /* 标题在小屏略缩小，并允许换行 */
    .main-sections h2 {
        font-size: 1.05rem;
        padding: 8px 16px;
        white-space: normal;
        gap: 8px;
        display: inline-flex;      /* 保证图标和文字同一行排布 */
        align-items: center;
        justify-content: center;
    }

    /* 小屏下飞机图标改为正常流布局，避免与文字重叠 */
    .main-sections h2::before {
        position: static;          /* ⭐ 不再绝对定位 */
        transform: none;
        display: inline-flex;      /* 自己是一个小圆容器 */
        flex: 0 0 auto;            /* ⭐ 不参与拉伸/压缩 */
        width: 22px;
        height: 22px;
        line-height: 22px;         /* 让图标垂直居中 */
        padding: 0;                /* 避免撑开变椭圆 */
        margin: 0;
        border-radius: 50%;        /* 圆形 */
        box-sizing: content-box;
        font-size: 13px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }
}