/* ============================================================
 * tech-team.css — 核心技术团队（改版：扁平 3×3 网格）
 * 加载顺序：about.css → tech-innovation.css → tech-team.css
 * 1920 基线 + vw 流式 + 768 移动断点
 * 设计稿：https://www.figma.com/design/vpnLtzDl5hffSBJHyUpmOl?node-id=553-6819
 * ============================================================
 *
 * 设计要点：
 *  - 纯黑背景兜底（盖掉 bg_academy.png 学院图，让团队块独立视觉）
 *  - 1200px 宽内容，3 列 × N 行扁平网格，无分组、无 rich 卡
 *  - 卡片：左 108px 圆头像 + 右姓名/职位胶囊（横向） + 下方 bullets
 *  - 行间用 1px 横线分隔（最后一行不加线，由 JS 给末尾卡片打 .tt-card--last-row）
 *  - 不再有手风琴交互：bullets 默认全部展开
 */

/* ── 1. Section 容器：覆盖 bg_academy.png 区域 ───────────── */
.jxzn-screen--academy .tech__team {
    width: 100%;
    max-width: none;
    /* top 94/1920；bottom 负值抵消父级 .jxzn-screen__inner padding-bottom */
    margin: 4.9vw auto -6.25vw;
    padding-top: 0;
    padding-bottom: 8.13vw;          /* 1.88vw + 6.25vw 让黑色背景延伸到 section 底 */
    background: #000;
    color: #fff;
    font-size: clamp(14px, 0.94vw, 36px);
    line-height: 1.78;
}

/* ── 2. 标题区 + 介绍段落 ────────────────────────────────── */
/* 改版后 h3 是纯文字标题，要显式覆盖 tech-innovation.css 里那个
 * 蓝胶囊 + 图标 ::before 的旧样式（同选择器，但旧文件的 padding/bg/height
 * 不会被新规则自动重置）。 */
.jxzn-screen--academy .tech__team h3 {
    font-size: clamp(28px, 2.71vw, 84px);    /* 52/1920 */
    font-weight: 700;
    text-align: center;
    color: #fff;
    line-height: 1.2;
    margin: 0 auto 2.76vw;                   /* 53/1920 */
    /* ── 显式 reset 旧胶囊样式 ── */
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 0;
}
.jxzn-screen--academy .tech__team h3::before {
    content: none;                           /* 干掉左侧人物图标 */
    display: none;
}

.jxzn-screen--academy .tech__team > p {
    width: min(62.5vw, 1200px);              /* 1200/1920 */
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: clamp(14px, 0.94vw, 36px);    /* 18/1920 */
    line-height: 1.78;
}
.jxzn-screen--academy .tech__team > p + p {
    margin-top: 0.4vw;                       /* 段落间留一点呼吸 */
}

/* ── 3. Grid 容器 ───────────────────────────────────────── */
.tt-grid {
    width: min(62.5vw, 1200px);
    margin: 4.9vw auto 0;                    /* 标题↔网格间距 94/1920 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.6vw;                       /* 50/1920 */
    row-gap: 2.6vw;
}

/* 行分隔线：每张 .tt-card 用 ::after 在 row-gap 中间画 1px 线
 * 但右侧两张要避免重复 → 只让每行第 1 张画线（从其 left 拉到右侧 100% + gap × 2）
 * JS 会在最后一行所有卡片打 .tt-card--last-row → 取消线
 */
.tt-grid > .tt-card:nth-child(3n - 2)::after {
    content: '';
    position: absolute;
    left: 0;
    /* 拉到 row 末尾：当前卡宽 + 2 个 gap + 后两张卡宽 */
    right: calc(-200% - 2 * 2.6vw);
    bottom: -1.3vw;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.08) 100%);
    pointer-events: none;
}
.tt-grid > .tt-card.tt-card--last-row::after {
    display: none;
}

/* ── 4. 卡片 ────────────────────────────────────────────── */
.tt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.56vw;                              /* 30/1920：info → bullets */
    color: #fff;
}

/* 信息行（横向）：头像左 + 姓名/职位右 */
.tt-card__head {
    display: flex;
    align-items: center;
    gap: 1.61vw;                              /* 31/1920 */
}

/* 头像：108px 圆形，白底 + 2px 蓝边 */
.tt-card__photo {
    flex: 0 0 auto;
    width: 5.625vw;
    height: 5.625vw;
    min-width: 72px;
    min-height: 72px;
    max-width: 108px;
    max-height: 108px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2396c7;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 圆框只能露出图片中央一小块。人像照脸通常在偏上 1/3 区域，
     * 默认 50% 20% 把脸位提上来。F12 调到合适值后回填。 */
    object-position: 50% 20%;
    display: block;
}

/* 姓名 + 职位 */
.tt-card__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.04vw;                              /* 20/1920 */
}
.tt-card__name {
    font-size: clamp(20px, 1.67vw, 50px);     /* 32/1920 */
    font-weight: 700;
    color: #fff;
    line-height: 1.0;
    margin: 0;
    word-break: break-word;
}

/* 职位胶囊：细边框 + 蓝渐变文字 */
.tt-card__title {
    display: inline-flex;
    align-items: center;
    padding: 0.47vw 0.94vw;                   /* 9/1920  18/1920 */
    border: 1px solid #b6e3ff;
    border-radius: 999px;
    line-height: 1.0;
}
.tt-card__title > span {
    font-size: clamp(13px, 1.04vw, 32px);     /* 20/1920 */
    font-weight: 500;
    line-height: 1.16;
    background: linear-gradient(90deg, #b6e3ff 0%, #65a3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

/* Bullets */
.tt-card__bullets {
    list-style: disc outside;
    margin: 0;
    padding-left: 1.41vw;                     /* 27/1920 */
    color: #fff;
    font-size: clamp(13px, 0.94vw, 32px);     /* 18/1920 */
    line-height: 1.875;                       /* 36/18 = 2.0；视觉上 1.875 更舒服 */
}
.tt-card__bullets li {
    list-style: disc outside;
    margin-bottom: 0.21vw;
}
.tt-card__bullets li:last-child {
    margin-bottom: 0;
}

/* ── 5. 入场动画：每行 3 卡同步，左右滑入 ─────────────────
 * 初始：
 *   - 行内第 1 列（pos=left）：从左 -60px
 *   - 行内第 2 列（pos=center）：从下 +30px
 *   - 行内第 3 列（pos=right）：从右 +60px
 *   - opacity: 0
 * GSAP ScrollTrigger 进入时打 .tt-card--in → 走 CSS transition 复位
 */
.jxzn-page__tech .tt-card[data-card-pos="left"]   { opacity: 0; transform: translateX(-60px); }
.jxzn-page__tech .tt-card[data-card-pos="center"] { opacity: 0; transform: translateY(30px); }
.jxzn-page__tech .tt-card[data-card-pos="right"]  { opacity: 0; transform: translateX(60px); }

.jxzn-page__tech .tt-card.tt-card--in {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 6. 移动端 768px 以下：单列堆叠 ─────────────────────── */
@media (max-width: 768px) {
    .jxzn-screen--academy .tech__team {
        margin: 60px auto -60px;
        padding-bottom: 80px;
        font-size: 14px;
    }
    .jxzn-screen--academy .tech__team h3 {
        font-size: 28px;
        margin: 0 auto 24px;
        height: auto;
        padding: 0;
    }
    .jxzn-screen--academy .tech__team h3::before {
        display: none;
        width: 0;
        height: 0;
    }
    .jxzn-screen--academy .tech__team > p {
        width: 88vw;
        font-size: 14px;
        line-height: 1.78;
    }

    .tt-grid {
        width: 88vw;
        margin-top: 48px;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 36px;
    }
    /* 单列时，每张卡都画一条线（除最后一张） */
    .tt-grid > .tt-card::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -18px;
        height: 1px;
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.20) 50%,
            rgba(255, 255, 255, 0.08) 100%);
        pointer-events: none;
    }
    .tt-grid > .tt-card:last-child::after,
    .tt-grid > .tt-card.tt-card--last-row::after {
        display: none;
    }
    /* 还原非首列也加线（覆盖桌面端只在 3n-2 加线的规则） */
    .tt-grid > .tt-card:nth-child(3n - 2)::after {
        right: 0;
    }

    .tt-card {
        gap: 16px;
    }
    .tt-card__head {
        gap: 16px;
    }
    .tt-card__photo {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
    }
    .tt-card__name {
        font-size: 22px;
    }
    .tt-card__title {
        padding: 6px 12px;
    }
    .tt-card__title > span {
        font-size: 13px;
    }
    .tt-card__bullets {
        font-size: 14px;
        line-height: 1.7;
        padding-left: 20px;
    }

    /* 移动端简化动画方向 */
    .jxzn-page__tech .tt-card[data-card-pos="left"],
    .jxzn-page__tech .tt-card[data-card-pos="center"],
    .jxzn-page__tech .tt-card[data-card-pos="right"] {
        opacity: 0;
        transform: translateY(24px);
    }
}

/* ── 7. 兼容：用户切换 prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
    .jxzn-page__tech .tt-card,
    .jxzn-page__tech .tt-card[data-card-pos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}