/* ============================================
   Courses Page Styles
   ============================================ */
.courses-section { padding: 0 0 var(--space-16); }
.course-featured { margin-bottom: var(--space-12); position: relative; }
.course-featured-badge { position: absolute; top: -12px; left: 24px; background: var(--color-primary); color: white; padding: var(--space-1) var(--space-4); border-radius: 9999px; font-size: var(--text-caption); font-weight: 500; z-index: 1; }
.course-featured-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; }
.course-featured-image { min-height: 300px; background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface-hover) 100%); display: flex; align-items: center; justify-content: center; }
.course-image-placeholder { color: var(--color-primary); opacity: 0.4; }
.course-featured-content { padding: var(--space-8); display: flex; flex-direction: column; }
.course-featured-title { font-size: var(--text-h3); font-weight: 600; margin: var(--space-4) 0; }
.course-featured-description { font-size: var(--text-body-sm); color: var(--color-text-secondary); flex-grow: 1; margin-bottom: var(--space-5); line-height: 1.7; }
.course-featured-meta { display: flex; gap: var(--space-4); font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.course-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; transition: all var(--transition-normal) var(--ease-out-quart); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.course-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.course-card-image { height: 160px; background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface-hover) 100%); display: flex; align-items: center; justify-content: center; }
.course-card-placeholder { color: var(--color-primary); opacity: 0.4; }
.course-card-content { padding: var(--space-5); display: flex; flex-direction: column; flex-grow: 1; }
.course-card-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.course-card-title { font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-2); }
.course-card-description { font-size: var(--text-body-sm); color: var(--color-text-secondary); flex-grow: 1; margin-bottom: var(--space-4); }
.course-card-meta { display: flex; gap: var(--space-3); font-size: var(--text-caption); color: var(--color-text-tertiary); }
.tools-recommend { padding: var(--space-16) 0; background: var(--color-surface); }
.recommend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.recommend-card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: all var(--transition-normal) var(--ease-out-quart); text-decoration: none; color: inherit; }
.recommend-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.recommend-rating { color: var(--color-warning); font-size: var(--text-body-sm); letter-spacing: 2px; }
.recommend-title { font-size: var(--text-body); font-weight: 600; }
.recommend-description { font-size: var(--text-body-sm); color: var(--color-text-secondary); flex-grow: 1; }
.recommend-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.course-detail { padding: var(--space-10) 0 var(--space-16); }
.course-detail-container { max-width: 800px; }
.course-detail-header { margin-bottom: var(--space-12); }
.course-detail-header .breadcrumb { margin-bottom: var(--space-6); }
.course-detail-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.course-detail-title { font-size: var(--text-h1); font-weight: 700; margin-bottom: var(--space-4); }
.course-detail-description { font-size: var(--text-body-lg); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.course-detail-meta { display: flex; gap: var(--space-4); font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-8); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body); }
.course-outline h2 { font-size: var(--text-h3); font-weight: 600; margin-bottom: var(--space-8); }
.course-chapters { display: flex; flex-direction: column; gap: var(--space-6); }
.course-chapter { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-6); }
.chapter-title { font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-4); }
.chapter-lessons { display: flex; flex-direction: column; gap: var(--space-1); }
.lesson-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: 8px; transition: background var(--transition-fast); }
.lesson-item:hover { background: var(--color-surface-hover); }
.lesson-number { font-size: var(--text-caption); color: var(--color-primary); font-weight: 600; font-family: var(--font-mono); width: 24px; flex-shrink: 0; }
.lesson-name { font-size: var(--text-body-sm); flex-grow: 1; }
.lesson-duration { font-size: var(--text-caption); color: var(--color-text-tertiary); white-space: nowrap; }
@media (max-width: 1024px) { .course-featured-card { grid-template-columns: 1fr; } .courses-grid { grid-template-columns: repeat(2, 1fr); } .recommend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .courses-grid { grid-template-columns: 1fr; } .recommend-grid { grid-template-columns: 1fr; } .course-detail-meta { flex-wrap: wrap; } }