/* ============================================================
   首屏轮播（2026-10-22 新增）
   全宽横幅 + 淡入淡出切换；图片走 <img object-fit:cover> 便于移动端裁切。
   品牌色沿用深蓝三元组，与 header / 页脚呼应。

   ⚠ 全宽实现：轮播输出在 <main class="site-main"> 内部，而 site-main 是
     max-width:1200px + 左右 padding 的居中容器，不突破就只能占中间一块
     （2026-10-22 用户反馈「只占中间 2/3，两侧空」即此因）。
     用 100vw + calc(50% - 50vw) 负边距拉通到视口两侧；
     纵向再用负 margin 抵消 site-main 的 padding-top，让横幅贴住导航栏。
   ============================================================ */

html,
body.portal-body { overflow-x: hidden; }   /* 兜底：抵消 100vw 含滚动条造成的溢出 */

.portal-slider {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -24px;      /* 抵消 .site-main padding-top: 24px */
    margin-bottom: 24px;    /* 与下方 hero 保持呼吸 */
    height: clamp(320px, 42vw, 560px);
    overflow: hidden;
    background: var(--brand-dark);
    isolation: isolate;
}

.slider-viewport { position: absolute; inset: 0; }

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms ease, visibility 900ms;
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 7000ms linear;
}

.slide.is-active .slide-img { transform: scale(1); }

/* 底部渐变：保证白字可读，同时压住画面下缘 */
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 22, 44, 0.42) 0%, rgba(6, 22, 44, 0) 34%),
        linear-gradient(0deg, rgba(6, 22, 44, 0.86) 0%, rgba(6, 22, 44, 0.42) 30%, rgba(6, 22, 44, 0) 62%);
    pointer-events: none;
}

.slide-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 46px;
    color: #fff;
    transform: translateY(14px);
    opacity: 0;
    transition: transform 720ms cubic-bezier(.22, .61, .36, 1) 120ms, opacity 720ms ease 120ms;
}

.slide.is-active .slide-inner { transform: translateY(0); opacity: 1; }

.slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #cfe0f7;
    padding-bottom: 10px;
}

.slide-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: #c9a227;
    border-radius: 2px;
}

.slide-title {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: clamp(24px, 3.2vw, 46px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.24;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

/* 轮播标题内的链接：继承标题颜色，去掉下划线（页面级 portal_home.css 在根路径下不加载） */
.slide-title a { color: inherit; text-decoration: none; }
.slide-title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.slide-desc {
    margin: 0;
    font-size: clamp(13px, 1.2vw, 16px);
    color: rgba(255, 255, 255, 0.86);
    letter-spacing: 0.08em;
    max-width: 720px;
}

/* ---- 左右箭头 ---- */
.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(10, 28, 52, 0.28);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
    backdrop-filter: blur(4px);
}

.slider-arrow:hover {
    background: rgba(10, 28, 52, 0.62);
    border-color: #fff;
    transform: scale(1.06);
}

.slider-arrow svg { width: 18px; height: 18px; }
.slider-prev { left: 22px; }
.slider-next { right: 22px; }

/* ---- 圆点 + 计数 ---- */
.slider-dots {
    position: absolute;
    right: 24px;
    bottom: 22px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: background 220ms ease, width 260ms ease, border-radius 260ms ease;
}

.slider-dot.is-active {
    width: 26px;
    border-radius: 5px;
    background: #fff;
}

/* ---- 底部细进度条 ---- */
.slider-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #c9a227, #e8c85a);
    transition: width 120ms linear;
}

@media (max-width: 720px) {
    /* 该断点下 .site-main padding 变成 0 14px 44px，纵向不再需要负 margin 抵消 */
    .portal-slider { margin-top: 0; margin-bottom: 18px; }
    .slide-inner { padding: 0 16px 38px; }
}

@media (max-width: 960px) {
    .portal-slider { height: clamp(260px, 52vw, 400px); }
    .slide-inner { padding: 0 18px 40px; }
    .slider-arrow { display: none; }
    .slider-dots { right: 50%; transform: translateX(50%); bottom: 16px; }
    .slide-desc { display: none; }
}

@media (max-width: 600px) {
    .portal-slider { height: 240px; }
    .slide-title { font-size: 21px; }
    .slide-kicker { font-size: 11px; letter-spacing: 0.12em; }
}

/* ============================================================
   品牌徽章（白色校徽放在深蓝渐变底上，解决 logo 纯白不可见的问题）
   ============================================================ */

.brand-badge {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--brand-primary) 0%, var(--brand-dark) 100%);
    box-shadow: 0 4px 14px rgba(14, 47, 94, 0.28);
    overflow: hidden;
}

.brand-badge img {
    width: 74%;
    height: auto;
    display: block;
}

@media (max-width: 600px) {
    .brand-badge { width: 38px; height: 38px; border-radius: 10px; }
}