

.page-header {
    margin-bottom: 50px;
    text-align: center;margin-top: 50px;
}
.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #003e6f, #0c4572);

    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 12px;
}
.page-header .sub {
    font-size: 18px;
    color: #5b6e8c;

    display: inline-block;
    padding-top: 14px;
    font-weight: 450;
}

/* 嘉宾网格布局 — 桌面端优先，自适应多列 */
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    gap: 32px;
    align-items: start;  /* 保证卡片高度自然，不等高但整齐顶部对齐 */
}

/* 卡片样式：纯净白底、精致阴影、圆润边角、过渡平滑 */
.speaker-card {
    background: #ffffff;
    transition: all 0.25s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 40px;
}
.speaker-card:hover {
    transform: translateY(-4px);


}

/* 卡片内部结构 (flex列保证内容分布自然) */
.card-inner {
    padding: 0px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 照片区域 — 桌面端头像更大更醒目，圆润大气 */
.photo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.speaker-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f5f8fe;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 0 0 4px #ffffff, 0 0 0 6px #eef2f8;
    transition: transform 0.2s ease, box-shadow 0.2s;
}
.speaker-card:hover .speaker-photo {
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 0 0 4px #ffffff, 0 0 0 6px #dfe6ef;
}

/* 基本信息区域 */
.speaker-info {
    text-align: center;
    margin-bottom: 10px;
}
.speaker-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #2a2b2d;
    line-height: 1.25;
    margin-bottom: 8px;
}
.company {
    font-size: 16px; text-align: center;
    font-weight: 500;
    color: #2a2b2d;
    margin-bottom: 0px;
    align-items: center;
    gap: 6px;
    display: block;
    width: 100%;
    transition: all 0.1s;
    word-break: break-word;
    white-space: normal;

}

.position {
    font-size: 14.5px;
    color: #4f6f8f;
    background: #f0f4fa;
    display: inline-block;
    padding: 5px 14px; width: 100%;

    font-weight: 500;
    margin-top: 8px;
    letter-spacing: 0.2px;
}

/* 简介区域 — 长文本优化，优雅阅读 */
.bio {
    margin-top: 8px;
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
    flex: 1;  /* 让简介区域自然填充（不强制等高，但使卡片内部有弹性） */
}
.bio p {
    font-size: 14px;
    line-height: 1.6;
    color: #2a2b2d;
    text-align: justify;
    word-break: break-word;
    white-space: normal;
}

/* 细微装饰：公司名卡片不同色系点缀 */

/* 底部脚注 */
.footer-note {
    text-align: center;
    margin-top: 56px;
    font-size: 14px;
    color: #8aa0b5;

    padding-top: 32px;
}





/* ---------- 响应式设计：桌面优先，完美适配平板与手机 ---------- */
@media (max-width: 1024px) {
    body {

    }
    .speakers-grid {
        gap: 28px;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    .speaker-name {
        font-size: 24px;
    }
    .speaker-photo {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 768px) {
    body {

    }
    .page-header h1 {
        font-size: 32px;
    }
    .page-header .sub {
        font-size: 16px;
    }
    .speakers-grid {
        grid-template-columns: 1fr;  /* 手机单列布局，舒适阅读 */
        gap: 24px;
    }
    .card-inner {
        padding: 22px 0px ;
    }
    .speaker-photo {
        width: 100px;
        height: 100px;
    }
    .speaker-name {
        font-size: 22px;
    }
    .company {
        font-size: 15px;
    }
    .bio p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {

    .card-inner {
        padding: 18px 0px;
    }
    .speaker-photo {
        width: 88px;
        height: 88px;
    }
    .speaker-name {
        font-size: 20px;
    }
}
