/* ==========================================================================
   关投强 - 首页 Hero 三屏轮播（配合 tools/_apply_hero_carousel.py）
   --------------------------------------------------------------------------
   · 结构：.hero.hero-carousel > .hero-slides > .hero-slide（3 屏）
   · 位移交给 CSS，切换交给 JS；无 JS 时第 1 屏（.is-active）照样完整可见
   · 底图走 <picture> + <img class="hero-slide-bg">，不用 CSS background —— 便于
     格式协商（WebP 优先、JPEG 兜底，需求文档 T14）、宽高占位与 alt
   · ⚠ 深色区块内禁止橙色（tools/_verify_dark.py 会扫 .hero 子树）
   · 内边距从 .hero 迁到 .hero-slide：底图要铺满含内边距的整块，
     而 .hero-slide 的 inset:0 是相对 .hero-slides 的
   ========================================================================== */

.hero.hero-carousel { padding: 0; }

.hero-slides { position: relative; z-index: 1; display: grid; }

/* 3 屏叠在**同一个网格单元**里：行高自动取最高的一屏，切屏时 .hero 高度恒定，
   下方内容不会跟着跳 —— 这是纯 CSS 的「等高轮播」做法，不依赖 JS 测量。
   （若换成「激活屏 position:relative、其余 absolute」，高度会随激活屏变化） */
.hero-carousel .hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0 120px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
}
.hero-carousel .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* <picture> 只是「WebP → JPEG」的格式协商容器，本身不该产生盒子。
   `.hero-slide` 是 column flex 容器：不加这行时 <picture> 会变成一个匿名 flex item
   （内容全绝对定位 ⇒ 高度 0），无害但会给 `justify-content:center` 的自由空间
   计算多插一个变量 ⇒ 显式声明 display:contents 更稳、语义也更准。 */
.hero-carousel .hero-slide > picture { display: contents; }

.hero-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .8;
}
/* 压暗层 + 右缘冷光 + 底部渐隐（2026-10-20 G60 视觉升级）
   底图换成真实商务摄影后，靠「光比」而不是「发光特效」建立专业感：
   左侧压到近黑保证白字对比，右侧留一盏冷光把主体（人物 / 档案架）托出来，
   底部再压一层，让控制条浮得住。 */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(115% 85% at 86% 34%, rgba(76,125,255,.14), rgba(76,125,255,0) 62%),
        linear-gradient(to top, rgba(6,13,38,.55) 0%, rgba(6,13,38,0) 42%),
        linear-gradient(100deg,
            rgba(11,23,64,.80) 0%,
            rgba(14,28,72,.64) 30%,
            rgba(17,33,86,.40) 58%,
            rgba(24,44,112,.18) 100%);
}
/* 制图网格：只在右 2/3 浮现。
   ⚠ 必须带 mask —— 不加的话 1px 直线横穿标题区，白字上会出现「格线压字」。
   ⚠ 76px 与 `.hero::before` 的 60px 是**两套**：那层在底图下面（z-index 低于
     .hero-slides），实际被照片盖住，所以视觉上不冲突，但别把两处尺寸写反。 */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(150,180,255,.085) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150,180,255,.085) 1px, transparent 1px);
    background-size: 76px 76px, 76px 76px;
    -webkit-mask-image: linear-gradient(to right, transparent 36%, #000 78%);
    mask-image: linear-gradient(to right, transparent 36%, #000 78%);
}
/* 屏幕最上沿一条 1px 冷光收口（细节，但整块立刻「做过」而不是「贴上去」） */
.hero.hero-carousel { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
/* 照片底上白字要站得住：极淡大半径投影，不用描边（描边会显廉价） */
.hero-carousel .hero-text h1,
.hero-carousel .hero-h2 { text-shadow: 0 2px 28px rgba(4,10,30,.55); }
.hero-carousel .hero-text .sub { text-shadow: 0 1px 18px rgba(4,10,30,.45); }
.hero-carousel .hero-slide .container { position: relative; z-index: 2; }

/* ---- 第 2 / 3 屏的标题与要点（与 h1 视觉对齐，字号走 h1 那套） ---- */
.hero-carousel .hero-h2 {
    font-size: 56px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.15;
    margin-bottom: 20px;
}
.hero-carousel .hero-h2 .accent {
    background: linear-gradient(135deg, #A9C6FF, #FFFFFF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-points {
    display: flex; flex-wrap: wrap; gap: 10px 12px;
    margin-top: 40px; padding-top: 28px;
    border-top: 1px solid var(--c-dark-line);
}
.hero-points li {
    display: inline-flex; align-items: center;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    color: var(--c-dark-on); font-size: 14px; font-weight: 500;
}

/* ---- 右侧玻璃卡 ---- */
.hero-aside {
    display: flex; align-items: center; justify-content: flex-end;
    min-height: 480px;
}
.hero-panel {
    width: 100%;
    padding: 28px 26px;
    border-radius: var(--radius-xl);
    /* 2026-10-20 G60：照片底上「浅白玻璃」会让正文灰字发虚 ⇒ 换成深色玻璃，
       白标题与灰正文的对比一起提上来 */
    background: rgba(9,20,52,.55);
    border: 1px solid rgba(255,255,255,.16);
    /* 2026-10-20：照片底上靠投影把卡片「托起来」，比加边框更克制；
       内侧 1px 高光模拟玻璃上沿，避免玻璃卡在深色照片里糊成一片 */
    box-shadow: 0 28px 70px rgba(3,8,26,.5), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-panel-head {
    font-size: 13px; font-weight: 600; letter-spacing: .06em;
    color: var(--c-dark-on-hi); margin-bottom: 18px;
}
.hero-panel-list li { display: flex; gap: 14px; padding: 14px 0; }
.hero-panel-list li + li { border-top: 1px solid var(--c-dark-line); }
.hp-ico {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: var(--c-dark-on-hi);
}
.hp-ico svg { width: 20px; height: 20px; }
.hp-txt { min-width: 0; }
.hp-txt b { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.5; }
.hp-txt span { display: block; font-size: 13px; color: var(--c-dark-on-sub); line-height: 1.6; }
.hero-panel-note {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--c-dark-line);
    font-size: 12px; line-height: 1.6; color: var(--c-dark-on-sub);
}

/* ---- 底部控制条（‹ ● ● ● ›） ---- */
.hero-controls {
    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 5;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-arrow {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer;
    transition: background .2s ease;
}
.hero-arrow:hover { background: rgba(255,255,255,.2); }
.hero-arrow svg { width: 18px; height: 18px; }
.hero-dots { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.hero-dot {
    width: 9px; height: 9px; border-radius: 999px;
    background: rgba(255,255,255,.38); cursor: pointer;
    transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}
.hero-dot:hover { background: rgba(255,255,255,.7); }
/* 激活态：一条带冷光的白线（比纯白圆点更像「进度」，也和不发光的整体调性一致） */
.hero-dot.is-active {
    width: 28px;
    background: linear-gradient(90deg, #FFFFFF, #C3D6FF);
    box-shadow: 0 0 12px rgba(160,195,255,.75);
}
.hero-arrow:focus-visible, .hero-dot:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}

@media (max-width: 1024px) {
    .hero-carousel .hero-aside { display: none; }
    .hero-carousel .hero-h2 { font-size: 40px; }
}
@media (max-width: 768px) {
    .hero-carousel .hero-slide { padding: 60px 0 88px; }
    /* 窄屏正文铺满整行，渐变「右端高亮」会落到文字底下 ⇒ 底图整体压一档，
       让均匀的暗底接住文字（桌面端右侧留亮是为了托主体，窄屏没有这个诉求） */
    .hero-carousel .hero-slide-bg { opacity: .5; }
    .hero-carousel .hero-h2 { font-size: 32px; }
    .hero-points { margin-top: 28px; padding-top: 20px; }
    .hero-controls { bottom: 22px; }
}
@media (max-width: 480px) {
    .hero-carousel .hero-slide { padding: 44px 0 76px; }
    .hero-carousel .hero-h2 { font-size: 26px; line-height: 1.35; }
    .hero-points { gap: 8px; }
    .hero-points li { font-size: 13px; padding: 7px 13px; }
    .hero-controls { bottom: 16px; gap: 2px; }
    .hero-dot.is-active { width: 22px; }
}