@charset "utf-8";
/* ==========================================================================
   hero-carousel.css — 首页 hero 四图整幅自动轮播（可插拔覆盖层）2026-11-11
   --------------------------------------------------------------------------
   原状：.section4 里 get_banner(1) 输出 4 张 li.swiper-slide，base.html 的
   旧 JS 用百分比 left 做「左侧三条窄竖条 + 右侧大图」的手风琴折叠效果；
   xr.css 在 <=960px 把 .banner 整个隐藏，而 Home 模板并没有 .banner_m，
   导致手机端首屏 hero 完全空白。

   本层把 4 张图改成同一区域内整幅淡入淡出轮播，全端可见；配套
   Public/Home/js/hero-carousel.js 负责切换逻辑。不改任何既有 CSS 文件。

   2026-11-11 调整：
     · hero 高度全端统一 375px（原 542 / 460 / 400 三档）；
     · 文案块用固定 bottom + max-height 兜底，任何视口下都完整落在图内；
     · 移除左右箭头，只保留可点击圆点；圆点按钮 26px 热区、视觉圆点 10px；
     · 自动播放为主，点击圆点可手动切换并重启计时。
     · 后台填入「大标题 + 三行描述」后，放宽 .p / .maobi3 的 max-height，
       并把文案区整体上移（桌面 bottom 72px / 手机 56px），保证末行完整可见。
     · 间距微调：横线下方文字贴近横线（.maobi margin-top 30→12px），
       More 与描述拉开（margin-top 12→30px / 手机 10→28px），增减相抵，
       文案区整体高度与位置不变。

   加载顺序：必须在 responsive.css 之后（用同等 !important 覆盖 P0 的
   「窄屏手风琴堆叠」规则）。
   回退：删掉 base.html 里本文件的 <link> 与 hero-carousel.js 的 <script>，
   并把旧 JS 开头的 .hero-controls 提前返回那行删掉，即恢复原手风琴。
   ========================================================================== */

/* --- 1. 全端显示 hero，高度统一 375px ----------------------------------- */
.banner {
    display: block !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    height: 375px !important;
}

/* --- 2. 四张图整幅叠放，靠透明度切换 ----------------------------------- */
.banner .section4,
.banner .section4 ul {
    width: 100% !important;
    height: 100% !important;
    left: auto !important;
    position: relative;
}

.banner .section4 ul > li {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;          /* 覆盖 P0 的「隐藏非首张」 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    transition: opacity .9s ease;
}

.banner .section4 ul > li.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* 深绿渐变护罩，保证白字在浅色主视觉上始终可读 */
.banner .section4 ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 58, 30, .56) 0%,
            rgba(0, 58, 30, .28) 42%,
            rgba(0, 58, 30, 0) 76%),
        linear-gradient(to top,
            rgba(0, 58, 30, .62) 0%,
            rgba(0, 58, 30, .18) 45%,
            rgba(0, 58, 30, 0) 75%);
    pointer-events: none;
}

/* --- 3. 文案：常显，且始终完整收在 375px 图片内 ------------------------- */
.banner .section4 .wen_x {
    display: none !important;            /* 竖条小标签，整幅轮播不需要 */
}

.banner .section4 .wenz {
    position: absolute !important;
    left: 8%;
    right: 8%;
    top: auto !important;
    bottom: 72px;                       /* 2026-11-11：文案区整体上移 26px */
    width: auto !important;
    max-width: 720px;
    max-height: calc(100% - 62px);      /* 兜底：顶边至少离图上沿 16px */
    overflow: hidden;
    opacity: 1 !important;
    color: #fff;
    text-align: left;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    z-index: 3;
}

.banner .section4 .wenz .bt_tit {
    max-width: 620px;
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    padding-bottom: 9px;
    margin-bottom: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner .section4 .wenz .nmkmn1 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
}

.banner .section4 .wenz .p {
    font-size: 15px;
    line-height: 1.6;
    padding-top: 0;
    max-width: 620px;
    max-height: 9em;                    /* 容纳「大标题 + 三行描述」约 8.2em */
    overflow: hidden;
}

.banner .section4 .wenz .maobi {
    font-size: 16px;
    margin: 12px 0 4px;             /* 覆盖 page.css 的 30px 上边距，贴近横线 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.banner .section4 .wenz .maobi3 {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, .92);
}

.banner .section4 .wenz .maobi3 span {
    display: inline-block;
}

.banner .section4 .wenz .p_more {
    margin-top: 30px;                /* 与三行描述拉开距离 */
}

/* --- 4. 可点击圆点：按钮 26px 热区，视觉圆点 10px ----------------------- */
.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    z-index: 6;
}

.hero-dot {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 视觉圆点画在伪元素上，按钮本身保留足够大的点击/触摸区域 */
.hero-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    box-sizing: content-box;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    transform: translate(-50%, -50%);
    transition: background .35s ease, box-shadow .35s ease, transform .2s ease;
}

.hero-dot:hover::before { transform: translate(-50%, -50%) scale(1.2); }

.hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 0;
}

.hero-dot.is-active::before {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 149, 66, .45);
}

/* --- 5. 响应式：高度仍是 375px，只收紧文字与控制条 --------------------- */
@media screen and (max-width: 1080px) {
    .banner { margin-top: 0 !important; }

    .banner .section4 .wenz .nmkmn1 { font-size: 24px; }
    .banner .section4 .wenz .p { font-size: 14px; }
}

@media screen and (max-width: 767px) {
    .banner .section4 .wenz {
        left: 6%;
        right: 6%;
        bottom: 56px;                   /* 窄屏同步上移 18px */
        max-height: calc(100% - 52px);
    }

    .banner .section4 .wenz .bt_tit { padding-bottom: 7px; margin-bottom: 8px; max-width: 100%; }
    .banner .section4 .wenz .nmkmn1 { font-size: 20px; }
    .banner .section4 .wenz .p { font-size: 12.5px; line-height: 1.5; max-height: 9em; }
    .banner .section4 .wenz .maobi { font-size: 13px; }
    .banner .section4 .wenz .maobi3 {
        font-size: 11px;
        gap: 2px 10px;
        max-height: 5em;                 /* 三行 11px 文字约 4.6em，原 3.2em 会截掉末行 */
        overflow: hidden;
    }
    .banner .section4 .wenz .p_more { margin-top: 28px; }

    .hero-dots { bottom: 8px; }
    .hero-dot { width: 24px; height: 24px; }
    .hero-dot::before { width: 9px; height: 9px; }
}

/* --- 6. 无障碍：尊重系统「减少动态效果」 -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .banner .section4 ul > li { transition: none; }
    .hero-dot::before { transition: none; }
}