/* ========== 主推课程 ztkc.css ========== */

/* 头部黑色背景 */
.top_bg {
    position: relative;
    height: 135px;
    width: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 11;
}

.top_bg:before {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* 覆盖layout的padding-top（头部已是文档流内的实底黑条，这里不再需要留白） */
#app{padding-top:0!important}

/* ===== 分类导航 ===== */
.ztkc-category-nav{background:#fafafa;padding:24px 0;border-bottom:1px solid #f0f0f0}
.ztkc-category-inner{max-width:1200px;width:100%;margin:0 auto;padding:0 15px;box-sizing:border-box}
.ztkc-category-list{display:flex;gap:12px;flex-wrap:wrap}
.ztkc-category-item{display:inline-block;padding:10px 28px;font-size:14px;color:#666;background:#fff;border:1px solid #e5e5e5;border-radius:30px;text-decoration:none;transition:all .3s}
.ztkc-category-item:hover{background:#000;color:#fff;border-color:#000}
.ztkc-category-item.active{background:#000;color:#fff;border-color:#000}

/* ===== 主推精品课程区 ===== */
.ztkc-featured-section{padding:60px 0;background:#fff}
.ztkc-featured-inner{max-width:1200px;width:100%;margin:0 auto;padding:0 15px;box-sizing:border-box}
.ztkc-featured-header{text-align:center;margin-bottom:50px}
.ztkc-featured-header h2{font-size:32px;color:#1a1a1a;font-weight:300;letter-spacing:2px;margin:0}
.ztkc-featured-line{width:60px;height:3px;background:linear-gradient(90deg,#c89b6c,#dfc19e);margin:20px auto}
.ztkc-featured-header p{font-size:15px;color:#999;letter-spacing:1px}

/* 主推课程网格 */
.ztkc-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}

/* 主推课程卡片 */
.ztkc-featured-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.08);transition:all .4s ease;position:relative;display:block;text-decoration:none}
.ztkc-featured-card:hover{transform:translateY(-8px);box-shadow:0 16px 50px rgba(0,0,0,.12)}
.ztkc-featured-img{position:relative;height:280px;overflow:hidden}
.ztkc-featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ztkc-featured-card:hover .ztkc-featured-img img{transform:scale(1.08)}
.ztkc-featured-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.6) 100%);display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.ztkc-featured-badge{display:inline-block;width:fit-content;background:linear-gradient(135deg,#c89b6c,#dfc19e);color:#fff;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:600;letter-spacing:1px}
.ztkc-featured-body{padding:28px}
.ztkc-featured-body h3{font-size:20px;color:#1a1a1a;font-weight:600;margin:0 0 12px;letter-spacing:1px;transition:color .3s}
.ztkc-featured-card:hover .ztkc-featured-body h3{color:#c89b6c}
.ztkc-featured-desc{font-size:14px;color:#666;line-height:24px;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 主推课程信息区 */
.ztkc-featured-info{display:flex;gap:24px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #f0f0f0}
.ztkc-featured-info-item{display:flex;flex-direction:column;gap:4px}
.ztkc-featured-info-item .label{font-size:12px;color:#aaa;letter-spacing:1px}
.ztkc-featured-info-item .value{font-size:16px;color:#1a1a1a;font-weight:600}

.ztkc-featured-btn{display:inline-block;padding:12px 32px;background:linear-gradient(135deg,#c89b6c,#dfc19e);color:#fff;border-radius:30px;font-size:14px;letter-spacing:1px;transition:all .3s;text-align:center}
.ztkc-featured-card:hover .ztkc-featured-btn{background:linear-gradient(135deg,#b88c5c,#c89b6c);box-shadow:0 8px 20px rgba(200,155,108,.3)}

/* ===== 各分类课程区 ===== */
.ztkc-category-section{padding:50px 0;border-top:1px solid #f0f0f0}
.ztkc-category-section:first-of-type{border-top:none}
.ztkc-category-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.ztkc-category-section-title{display:flex;align-items:center;gap:16px}
.ztkc-category-section-title h2{font-size:24px;color:#1a1a1a;font-weight:600;margin:0;letter-spacing:1px}
.ztkc-category-section-line{width:40px;height:3px;background:linear-gradient(90deg,#c89b6c,#dfc19e);border-radius:2px}
.ztkc-category-section-more{font-size:14px;color:#999;text-decoration:none;transition:color .3s;white-space:nowrap}
.ztkc-category-section-more:hover{color:#c89b6c}

/* 课程网格 */
.ztkc-course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* 课程卡片 */
.ztkc-course-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .4s ease;display:block;text-decoration:none}
.ztkc-course-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(0,0,0,.1)}
.ztkc-course-img{position:relative;height:180px;overflow:hidden}
.ztkc-course-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ztkc-course-card:hover .ztkc-course-img img{transform:scale(1.08)}
.ztkc-course-body{padding:20px}
.ztkc-course-body h4{font-size:16px;color:#1a1a1a;font-weight:600;margin:0 0 10px;line-height:1.4;transition:color .3s}
.ztkc-course-card:hover .ztkc-course-body h4{color:#c89b6c}
.ztkc-course-body p{font-size:13px;color:#888;line-height:22px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 课程卡片底部信息 */
.ztkc-course-footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid #f5f5f5;margin-top:16px}
.ztkc-course-hours{font-size:12px;color:#aaa}
.ztkc-course-price{font-size:18px;color:#c89b6c;font-weight:600}

/* ===== 动画 ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.ztkc-featured-card{animation:fadeIn .6s ease forwards}
.ztkc-featured-card:nth-child(1){animation-delay:0s}
.ztkc-featured-card:nth-child(2){animation-delay:.1s}
.ztkc-featured-card:nth-child(3){animation-delay:.2s}
.ztkc-course-card{animation:fadeIn .5s ease forwards}

/* ========== 平板端 (max-width: 1024px) ========== */
@media(max-width:1024px){
.ztkc-category-inner{width:100%;padding:0 15px;box-sizing:border-box}
.ztkc-featured-inner{width:100%;padding:0 15px;box-sizing:border-box}
.ztkc-featured-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.ztkc-featured-img{height:220px}
.ztkc-course-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* ========== 手机端 (max-width: 768px) ========== */
@media(max-width:768px){
/* ---- 分类导航：移动端两列网格 ---- */
.ztkc-category-nav{padding:12px 0 !important;border-bottom:1px solid #f0f0f0 !important}
.ztkc-category-inner{width:100% !important;padding:0 15px !important;box-sizing:border-box !important;display:block !important;gap:0 !important}
.ztkc-category-list{display:flex !important;flex-wrap:wrap !important;gap:10px !important}
.ztkc-category-item{display:block !important;flex:0 1 48% !important;min-width:0 !important;max-width:48% !important;box-sizing:border-box !important;height:36px !important;line-height:34px !important;font-size:15px !important;padding:0 8px !important;text-align:center !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;background:#fff !important;color:#666 !important;border:1px solid #e5e5e5 !important;border-radius:30px !important;text-decoration:none !important}
.ztkc-category-item.active{background:#000 !important;color:#fff !important;border-color:#000 !important}

.ztkc-featured-section{padding:30px 0}
.ztkc-featured-inner{padding:0 12px}
.ztkc-featured-header{margin-bottom:24px}
.ztkc-featured-header h2{font-size:22px}
.ztkc-featured-line{margin:12px auto}
.ztkc-featured-header p{font-size:13px}
.ztkc-featured-grid{grid-template-columns:1fr;gap:16px}
.ztkc-featured-img{height:200px}
.ztkc-featured-body{padding:20px}
.ztkc-featured-body h3{font-size:18px}
.ztkc-featured-desc{font-size:13px;line-height:20px}
.ztkc-featured-info{gap:16px;margin-bottom:16px;padding-bottom:14px}
.ztkc-featured-info-item .value{font-size:14px}
.ztkc-featured-btn{padding:10px 24px;font-size:13px}
.ztkc-category-section{padding:30px 0}
.ztkc-category-section-header{margin-bottom:20px}
.ztkc-category-section-title h2{font-size:18px}
.ztkc-category-section-title .ztkc-category-section-line{width:24px;height:2px}
.ztkc-category-section-more{font-size:13px}
.ztkc-course-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.ztkc-course-img{height:140px}
.ztkc-course-body{padding:14px}
.ztkc-course-body h4{font-size:14px;margin-bottom:6px}
.ztkc-course-body p{font-size:12px;line-height:18px}
.ztkc-course-footer{padding-top:10px}
.ztkc-course-price{font-size:15px}
}

/* ========== 小屏手机 (max-width: 480px) ========== */
@media(max-width:480px){
.ztkc-category-item{padding:6px 14px;font-size:12px}
.ztkc-featured-header h2{font-size:18px}
.ztkc-featured-img{height:180px}
.ztkc-featured-body{padding:16px}
.ztkc-featured-body h3{font-size:16px}
.ztkc-featured-info{flex-wrap:wrap;gap:12px}
.ztkc-course-grid{grid-template-columns:1fr 1fr;gap:10px}
.ztkc-course-img{height:120px}
}