/**
 * K12 智能学习页专属样式
 * 浅色学术风格 + 信号蓝强调 + 成长绿点缀
 */

/* ===== 痛点共鸣 ===== */
.edu-pain-points {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.edu-pain-card {
    padding: 28px 24px; background: #fff; border-radius: var(--edu-radius);
    border-top: 3px solid var(--edu-cta); box-shadow: var(--edu-shadow);
    transition: all 0.3s;
}
.edu-pain-card:hover { transform: translateY(-4px); box-shadow: var(--edu-shadow-hover); }
.edu-pain-card__icon { font-size: 1.5rem; margin-bottom: 12px; color: var(--edu-orange); }
.edu-pain-card__title { font-weight: 600; margin-bottom: 6px; font-size: 1rem; }
.edu-pain-card__desc { font-size: 0.85rem; color: var(--edu-text-muted); line-height: 1.6; }

/* ===== 学科卡片 + 雷达图 ===== */
.edu-subject-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 32px; }
.edu-subject-tab {
    padding: 10px 24px; border: none; background: var(--edu-bg-light);
    font-size: 0.9rem; font-weight: 500; cursor: pointer; border-radius: var(--edu-radius-sm);
    color: var(--edu-text-muted); transition: all 0.2s; font-family: var(--edu-font);
}
.edu-subject-tab:hover { color: var(--edu-cta); background: rgba(0,102,255,0.05); }
.edu-subject-tab--active { background: var(--edu-cta); color: #fff; }

.edu-subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.edu-subject-card {
    background: #fff; border-radius: var(--edu-radius); padding: 28px 24px;
    box-shadow: var(--edu-shadow); transition: all 0.3s;
    border-left: 4px solid var(--edu-cta);
}
.edu-subject-card:hover { transform: translateY(-4px); box-shadow: var(--edu-shadow-hover); }
.edu-subject-card__name { font-size: 1.125rem; font-weight: 700; margin-bottom: 16px; color: var(--edu-primary); }
.edu-subject-card__radar { height: 160px; margin-bottom: 16px; position: relative; }
.edu-subject-card__radar canvas { width: 100% !important; height: 100% !important; }
.edu-subject-card__points { list-style: none; padding: 0; }
.edu-subject-card__points li {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
    font-size: 0.8rem; color: var(--edu-text-muted);
}
.edu-subject-card__points li::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--edu-green); flex-shrink: 0;
}

/* ===== 学习效果案例 ===== */
.edu-case-list { max-width: 800px; margin: 0 auto; }
.edu-case-item {
    display: flex; gap: 32px; align-items: center; padding: 32px 0;
    border-bottom: 1px solid var(--edu-bg-light);
}
.edu-case-item:nth-child(even) { flex-direction: row-reverse; }
.edu-case-item__chart { flex: 0 0 200px; text-align: center; }
.edu-case-item__progress {
    width: 120px; height: 120px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: var(--edu-green);
    background: conic-gradient(var(--edu-green) var(--edu-progress, 0%), var(--edu-bg-light) 0);
}
.edu-case-item__content { flex: 1; }
.edu-case-item__name { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.edu-case-item__grade { font-size: 0.8rem; color: var(--edu-text-muted); margin-bottom: 8px; }
.edu-case-item__desc { font-size: 0.9rem; line-height: 1.6; color: var(--edu-text-muted); }
.edu-case-item__result {
    display: inline-block; padding: 4px 12px; background: rgba(0,168,107,0.1);
    color: var(--edu-green); border-radius: 999px; font-size: 0.8rem; font-weight: 500;
    margin-top: 8px;
}

/* ===== 学习力雷达图区 ===== */
.edu-radar-section { text-align: center; }
.edu-radar-container { max-width: 480px; margin: 0 auto; }
.edu-radar-container canvas { width: 100% !important; max-height: 320px; }

@media (max-width: 768px) {
    .edu-pain-points { grid-template-columns: 1fr; }
    .edu-subject-grid { grid-template-columns: 1fr 1fr; }
    .edu-case-item { flex-direction: column !important; text-align: center; gap: 16px; }
    .edu-case-item__chart { flex: 0 0 auto; }
}
@media (max-width: 480px) {
    .edu-subject-grid { grid-template-columns: 1fr; }
    .edu-subject-tabs { flex-wrap: wrap; }
}
