/* ==========================================================================
   AI 编程进阶：方法与实践 · 首页样式
   --------------------------------------------------------------------------
   首页（docs/index.md）使用的组件样式，全部以 ap- 前缀命名，避免与
   Material 主题及后续页面样式冲突。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 课程信息卡片
   -------------------------------------------------------------------------- */
.ap-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 14px;
   margin: 20px 0;
}

.ap-stat {
   background: #f1f6ff;
   border: 1px solid #dbe6f8;
   border-radius: 14px;
   padding: 16px 12px;
   text-align: center;
}

.ap-stat .n {
   font-size: 1.25em;
   font-weight: 800;
   color: #1e3a8a;
}

.ap-stat .l {
   font-size: .85em;
   color: #555;
   margin-top: 4px;
}

/* --------------------------------------------------------------------------
   2. 通用卡片网格（教学目标等）
   -------------------------------------------------------------------------- */
.ap-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 16px;
   margin: 18px 0;
}

.ap-card {
   background: #fff;
   border: 1px solid #e6eef8;
   border-radius: 16px;
   padding: 20px 22px;
   box-shadow: 0 4px 16px rgba(30, 58, 138, .06);
}

.ap-card h3 {
   margin-top: 0;
   color: #1e3a8a;
   display: flex;
   align-items: center;
   gap: 8px;
}

.ap-card p {
   margin: 0;
   line-height: 1.75;
   color: #444;
}

/* --------------------------------------------------------------------------
   3. 施工中（课程内容）
   -------------------------------------------------------------------------- */
.ap-wip {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   align-items: center;
   background: #fffdf5;
   border: 1px solid #f0e2bd;
   border-left: 6px solid #eab308;
   border-radius: 16px;
   padding: 24px 26px;
   margin: 18px 0;
}

.ap-wip .bd {
   flex: 1 1 360px;
}

.ap-wip .bd h3 {
   margin: 0 0 8px;
   color: #a16207;
   display: flex;
   align-items: center;
   gap: 10px;
}

.ap-wip .bd p {
   margin: 0 0 6px;
   line-height: 1.8;
   color: #5b4a20;
}

.ap-wip .ap-tag {
   display: inline-block;
   background: #fef3c7;
   border: 1px solid #f5d98a;
   color: #a16207;
   border-radius: 999px;
   padding: 2px 12px;
   font-size: .8em;
   font-weight: 700;
}

.ap-wip-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 16px;
   margin: 18px 0;
}

.ap-module {
   position: relative;
   background: #fff;
   border: 1px dashed #d7deea;
   border-radius: 14px;
   padding: 18px 18px 16px;
   box-shadow: 0 2px 10px rgba(30, 58, 138, .04);
}

.ap-module .no {
   font-size: .8em;
   font-weight: 800;
   color: #7c8aa5;
   letter-spacing: .05em;
}

.ap-module h4 {
   margin: 6px 0 8px;
   color: #334155;
   font-size: 1.02em;
}

.ap-module p {
   margin: 0;
   font-size: .9em;
   color: #64748b;
   line-height: 1.7;
}

.ap-module .st {
   position: absolute;
   top: 14px;
   right: 14px;
   font-size: .72em;
   color: #a16207;
   background: #fef3c7;
   border: 1px solid #f5d98a;
   border-radius: 999px;
   padding: 1px 10px;
}

/* --------------------------------------------------------------------------
   4. 课程日历（课程内容）
   -------------------------------------------------------------------------- */
.ap-cal table {
   width: 100%;
}

.ap-cal th {
   background: #f1f6ff;
   color: #1e3a8a;
   white-space: nowrap;
}

.ap-cal tbody tr:nth-child(even) {
   background: #fafcff;
}