/* ==========================================================================
   师资力量 · 视觉精修层（Teacher Roster）
   --------------------------------------------------------------------------
   加载顺序在 teachers.css 之后。骨架沿用原 float 4 列，本文件补齐：
     1. 页头（面包屑 + 标题 + 三个统计数）
     2. 卡片内容层级：身份标签 / 专长 / 院校 / 授课数
     3. 卡片 hover 质感、按钮胶囊化
     4. 修复顶部固定导航遮挡（原 .teachers_content margin-top:20px < 导航 71px）
   ========================================================================== */

/* ---------------------------------------------- 1. 页头 */
.tc_hero {
    width: 1200px;
    margin: 0 auto;
    padding: 96px 0 6px;
}

.tc_hero .tc_crumb {
    font-size: 13px;
    color: #B0B0B0;
    margin-bottom: 14px;
}

.tc_hero .tc_crumb a {
    color: #8C8C8C;
}

.tc_hero .tc_crumb a:hover {
    color: #FF6A00;
}

.tc_hero .tc_crumb span {
    margin: 0 6px;
    color: #D0D4DA;
}

.tc_hero .tc_h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #1A1A1A;
    background-image: linear-gradient(120deg, #1A1A1A 55%, #E85D00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    width: -moz-fit-content;
    width: fit-content;
}

.tc_hero .tc_sub {
    margin-top: 10px;
    font-size: 14px;
    color: #8C8C8C;
    letter-spacing: .01em;
}

/* 统计条 */
.tc_hero .tc_stats {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.tc_hero .tc_st {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.tc_hero .tc_st b {
    font-size: 22px;
    font-weight: 700;
    color: #FF6A00;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tc_hero .tc_st i {
    font-style: normal;
    font-size: 12px;
    color: #8C8C8C;
}

/* ---------------------------------------------- 2. 修正顶栏遮挡 + 容器节奏 */
html body .teachers_content {
    margin-top: 8px;
    margin-bottom: 56px;
}

html body .teachers_content .right .tit {
    margin-top: 8px;
    font-size: 13px;
    color: #B0B0B0;
    letter-spacing: .02em;
}

html body .teachers_content .right .mess {
    width: 100%;
    padding: 4px 0 25px;
}

/* ---------------------------------------------- 3. 卡片 */
html body .teachers_content .right .mess .li {
    width: 23.5%;
    /* 关键：原项目没有 border-box，23.5% 加上 1px 边框后 4 个卡片会溢出 8px，
       导致每行只排得下 3 个。加 border-box 后 282*4 + 24*3 = 1200 恰好铺满。 */
    box-sizing: border-box;
    height: auto;
    margin-top: 20px;
    border-radius: 14px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    position: relative;
    overflow: hidden;
    transition: box-shadow .22s cubic-bezier(.4, 0, .2, 1),
                transform .22s cubic-bezier(.4, 0, .2, 1),
                border-color .22s cubic-bezier(.4, 0, .2, 1);
}

/* 四列间距：原 nth-of-type(4n / 4n-1 / 4n-2) 各 1.33%，换成统一 gap 语义 */
html body .teachers_content .right .mess .li:nth-of-type(4n) {
    margin-left: 2%;
}

html body .teachers_content .right .mess .li:nth-of-type(4n-1) {
    margin-left: 2%;
}

html body .teachers_content .right .mess .li:nth-of-type(4n-2) {
    margin-left: 2%;
}

html body .teachers_content .right .mess .li:hover {
    box-shadow: 0 10px 26px rgba(17, 24, 39, .1), 0 2px 6px rgba(17, 24, 39, .05);
    border-color: #FFE8D6;
    transform: translateY(-3px);
}

/* 顶部渐变细条，hover 时显形 */
html body .teachers_content .right .mess .li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #FF8A33 0%, #FF6A00 100%);
    opacity: 0;
    transition: opacity .22s cubic-bezier(.4, 0, .2, 1);
}

html body .teachers_content .right .mess .li:hover::before {
    opacity: 1;
}

/* 头像：品牌色描边环 + 白边 */
html body .teachers_content .right .mess .li .avatar {
    background: transparent;
    margin-top: 24px;
    width: 84px;
    height: 84px;
}

html body .teachers_content .right .mess .li .avatar .img1 {
    width: 76px;
    height: 76px;
    top: 4px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px #FFE8D6, 0 4px 12px rgba(17, 24, 39, .08);
    background-color: #F2F3F5;
}

/* 认证角标：压在头像右下 */
html body .teachers_content .right .mess .li .avatar .img2 {
    width: 18px;
    left: 36px;
    bottom: 4px;
    filter: drop-shadow(0 1px 2px rgba(17, 24, 39, .18));
}

html body .teachers_content .right .mess .li .name {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #1A1A1A;
    letter-spacing: .01em;
}

/* 身份标签 */
html body .teachers_content .right .mess .li .lskd {
    height: auto;
    margin-top: 8px;
    text-align: center;
}

html body .teachers_content .right .mess .li .lskd .iden {
    display: inline-block;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    padding: 5px 12px;
    transform: none;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .12);
}

/* 专长标签：浅橙底 */
html body .teachers_content .right .mess .li .skillon {
    margin-top: 8px;
    text-align: center;
    min-height: 22px;
}

html body .teachers_content .right .mess .li .skillon .skill_tag {
    display: inline-block;
    font-size: 12px;
    color: #E85D00;
    background-color: #FFF4EC;
    border: 1px solid #FFE8D6;
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.3;
}

/* 院校：单行省略 */
html body .teachers_content .right .mess .li .school {
    margin: 10px auto 0;
    width: 84%;
    font-size: 12px;
    color: #9CA3AF;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 授课数 */
html body .teachers_content .right .mess .li .cnum {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #B0B0B0;
}

html body .teachers_content .right .mess .li .cnum b {
    font-size: 15px;
    font-weight: 700;
    color: #FF6A00;
    font-variant-numeric: tabular-nums;
    margin-right: 1px;
}

/* ---------------------------------------------- 4. 底部按钮：胶囊化 */
html body .teachers_content .right .mess .li .bottom {
    margin-top: 14px;
    padding: 12px 14px 14px;
    gap: 8px;
    border-top: 1px solid #F4F5F7;
    font-size: 13px;
}

html body .teachers_content .right .mess .li .bottom .a1,
html body .teachers_content .right .mess .li .bottom .a1_0,
html body .teachers_content .right .mess .li .bottom .a2 {
    flex: 1;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 999px;
    font-weight: 500;
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
                color .18s cubic-bezier(.4, 0, .2, 1),
                border-color .18s cubic-bezier(.4, 0, .2, 1);
}

html body .teachers_content .right .mess .li .bottom .a1 {
    color: #FF6A00;
    background-color: #FFF4EC;
    border: 1px solid #FFE8D6;
}

html body .teachers_content .right .mess .li .bottom .a1:hover {
    background-color: #FF6A00;
    border-color: #FF6A00;
    color: #FFFFFF;
}

html body .teachers_content .right .mess .li .bottom .a1_0 {
    color: #969696;
    background-color: #F5F6F8;
    border: 1px solid #EBEBEB;
}

html body .teachers_content .right .mess .li .bottom .a2 {
    color: #4A4A4A;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
}

html body .teachers_content .right .mess .li .bottom .a2:hover {
    color: #E85D00;
    border-color: #FFE8D6;
    background-color: #FFF9F4;
}

/* ---------------------------------------------- 5. 查看更多按钮 */
html body .teachers_content .look_more {
    width: auto;
    min-width: 148px;
    height: 40px;
    line-height: 38px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 999px;
    font-size: 14px;
    color: #4A4A4A;
    padding: 0 22px;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

html body .teachers_content .look_more:hover {
    color: #FF6A00;
    border-color: #FFE8D6;
    box-shadow: 0 4px 12px rgba(255, 106, 0, .16);
    transform: translateY(-1px);
}

/* ---------------------------------------------- 6. 空态 */
html body .teachers_content .right .mess:empty::after {
    content: "暂无讲师信息";
    display: block;
    padding: 80px 0;
    text-align: center;
    color: #B0B0B0;
    font-size: 14px;
}

/* ==========================================================================
   7. 讲师主页（detail）
   --------------------------------------------------------------------------
   原 .detail_teacher margin-top:30px 被固定顶栏（71px）压住，
   这里统一补面包屑 + 让开顶栏，并给头部卡与内容卡加层次。
   ========================================================================== */

/* 面包屑条 */
.tc_crumb_bar {
    width: 1200px;
    margin: 0 auto;
    padding: 96px 0 0;
    font-size: 13px;
    color: #B0B0B0;
}

.tc_crumb_bar a {
    color: #8C8C8C;
}

.tc_crumb_bar a:hover {
    color: #FF6A00;
}

.tc_crumb_bar span {
    margin: 0 6px;
    color: #D0D4DA;
}

html body .detail_teacher {
    margin-top: 16px;
    margin-bottom: 56px;
}

/* 头部信息卡 */
html body .detail_teacher .top {
    border-radius: 14px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .06), 0 4px 12px rgba(17, 24, 39, .04);
    height: 148px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* 顶部渐变细条 */
html body .detail_teacher .top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background-image: linear-gradient(90deg, #FF8A33 0%, #FF6A00 100%);
}

html body .detail_teacher .top .avatar {
    width: 84px;
    height: 84px;
    margin-top: 32px;
    margin-left: 32px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px #FFE8D6, 0 4px 14px rgba(17, 24, 39, .1);
    background-color: #F2F3F5;
    box-sizing: border-box;
}

html body .detail_teacher .top .content {
    margin-top: 38px;
    margin-left: 20px;
}

html body .detail_teacher .top .content .text1 {
    font-size: 22px;
    font-weight: 700;
    color: #1A1A1A;
    letter-spacing: -.01em;
}

html body .detail_teacher .top .content .text2 {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .12);
}

/* 专长标签（浅橙） */
html body .detail_teacher .top .content .text3 {
    display: inline-block;
    color: #E85D00;
    background-color: #FFF4EC;
    border: 1px solid #FFE8D6;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1;
    margin-left: 8px;
    vertical-align: middle;
}

html body .detail_teacher .top .content .fans {
    color: #9CA3AF;
    margin-top: 10px;
    font-size: 13px;
}

html body .detail_teacher .top .content .fans .num {
    color: #FF6A00;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
}

html body .detail_teacher .top .content .fans .dot {
    font-style: normal;
    margin: 0 8px;
    color: #D0D4DA;
}

/* 关注按钮胶囊化 */
html body .detail_teacher .top .attent {
    margin-top: 50px;
    margin-right: 36px;
    font-size: 13px;
}

html body .detail_teacher .top .attent .attented {
    display: inline-block;
    min-width: 96px;
    text-align: center;
    line-height: 34px;
    border-radius: 999px;
    background-image: linear-gradient(135deg, #FF8A33 0%, #FF6A00 60%, #E85D00 100%);
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(255, 106, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: filter .18s cubic-bezier(.4, 0, .2, 1),
                transform .18s cubic-bezier(.4, 0, .2, 1);
}

html body .detail_teacher .top .attent .attented:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* 主内容卡 */
html body .detail_teacher .bcontent {
    border-radius: 14px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .06), 0 4px 12px rgba(17, 24, 39, .04);
    margin-top: 16px;
    padding-bottom: 34px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 简历/课程 切换页签 */
html body .detail_teacher .bcontent .nav {
    height: 52px;
    border-bottom: 1px solid #F2F2F2;
    background-color: #FCFCFD;
}

html body .detail_teacher .bcontent .nav .text {
    line-height: 52px;
    font-size: 15px;
    font-weight: 600;
    color: #4A4A4A;
    position: relative;
    transition: color .18s cubic-bezier(.4, 0, .2, 1),
                background-color .18s cubic-bezier(.4, 0, .2, 1);
}

html body .detail_teacher .bcontent .nav .text:hover {
    color: #E85D00;
}

html body .detail_teacher .bcontent .nav .b_fff {
    background: #FFFFFF;
    color: #E85D00;
}

html body .detail_teacher .bcontent .nav .b_fff::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #FF8A33, #FF6A00);
}

/* 分节标题 */
html body .detail_teacher .bcontent .tip {
    margin-left: 28px;
    margin-top: 28px;
    height: 18px;
    border-left-width: 3px;
    border-radius: 2px;
}

html body .detail_teacher .bcontent .tip text {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
}

html body .detail_teacher .bcontent .detail {
    width: auto;
    margin: 14px 28px 0;
    font-size: 14px;
    line-height: 2;
    color: #4A4A4A;
}

/* 讲师课程列表 */
html body .detail_teacher .bcontent .classlist {
    width: auto;
    margin: 0 28px;
}

html body .detail_teacher .bcontent .li {
    border-radius: 12px;
    border-color: #EBEBEB;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1),
                border-color .2s cubic-bezier(.4, 0, .2, 1),
                transform .2s cubic-bezier(.4, 0, .2, 1);
}

html body .detail_teacher .bcontent .li:hover {
    border-color: #FFE8D6;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .09);
    transform: translateY(-2px);
}

html body .detail_teacher .bcontent .li .thumbdiv {
    border-radius: 8px;
    overflow: hidden;
}

html body .detail_teacher .bcontent .li .thumbdiv .tips {
    background-image: linear-gradient(135deg, #FF8A33, #FF6A00);
    opacity: 1;
    transform: none;
    border-radius: 0 0 8px 0;
    font-size: 11px;
    padding: 3px 8px;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
}

html body .detail_teacher .bcontent .li .mess .des {
    font-size: 15px;
    color: #1A1A1A;
}

html body .detail_teacher .bcontent .li .mess .bottom .money {
    color: #FF6A00;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

html body .detail_teacher .bcontent .li .mess .bottom .mian {
    color: #E85D00;
    font-weight: 600;
}