/* courses.css */

[data-fade] { opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease),transform .5s var(--ease); }
[data-fade].visible { opacity:1; transform:none; }

.inline-link { font-style:normal; color:var(--maroon); font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:1px; transition:border-color var(--t-fast),color var(--t-fast); }
.inline-link:hover { color:var(--saffron); border-color:var(--saffron); }

.page-hero { padding:64px 0 72px; border-bottom:1px solid var(--rule); }
.page-hero-inner { max-width:800px; }
.page-hero-sub { font-size:var(--text-md); line-height:1.65; color:var(--navy); max-width:54ch; margin-top:24px; opacity:.82; }

/* Course section */
.course-section { padding:var(--space-3xl) 0; }
.course-detail { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:start; }
.course-detail.reverse { direction:rtl; }
.course-detail.reverse > * { direction:ltr; }

.cd-flag { display:inline-block; background:var(--gold); color:var(--navy); font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; font-weight:700; margin-bottom:16px; }
.cd-tag { display:flex; align-items:center; gap:8px; }
.cd-desc { font-size:var(--text-md); line-height:1.65; color:var(--navy); opacity:.82; margin-bottom:18px; }
.cd-desc.on-dark { color:rgba(251,245,228,.85); opacity:1; }

.cd-subjects { display:flex; flex-direction:column; gap:16px; margin:28px 0 0; border-top:1px solid var(--rule); padding-top:24px; }
.cd-subject { display:flex; gap:16px; align-items:flex-start; }
.cd-subject.on-dark { color:var(--cream); }
.subj-icon { font-size:22px; color:var(--gold); flex-shrink:0; margin-top:2px; width:28px; text-align:center; }
.cd-subject b { display:block; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--maroon); margin-bottom:4px; }
.cd-subject.on-dark b { color:var(--gold-soft); }
.cd-subject span { font-size:var(--text-sm); color:var(--navy); line-height:1.5; opacity:.78; }
.cd-subject.on-dark span { color:rgba(251,245,228,.75); opacity:1; }

/* Right column */
.cd-feature-list { background:var(--paper-alt); padding:28px; margin-bottom:20px; }
.cd-feature-list.on-dark { background:rgba(251,245,228,.06); }
.cd-feature-list h4 { font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--maroon); margin-bottom:16px; }
.cd-feature-list.on-dark h4 { color:var(--gold); }
.cd-feature-list ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.cd-feature-list li { display:flex; gap:10px; align-items:flex-start; font-size:var(--text-sm); color:var(--navy); line-height:1.5; }
.cd-feature-list.on-dark li { color:rgba(251,245,228,.85); }
.li-tri { width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--gold); margin-top:5px; flex-shrink:0; }
.li-tri.gold { border-color:transparent transparent transparent var(--gold-soft); }

.cd-note { background:var(--navy); color:var(--cream); padding:24px; display:flex; flex-direction:column; gap:14px; }
.cd-note p { font-size:var(--text-sm); line-height:1.6; color:rgba(251,245,228,.82); }
.cd-note strong { color:var(--gold); }

.cd-results-box { background:rgba(251,245,228,.06); border:1px solid rgba(201,168,58,.2); padding:24px; }
.crb-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.crb-n { font-family:var(--font-display); font-weight:600; font-size:36px; color:var(--gold); display:inline-flex; align-items:center; gap:2px; line-height:1; font-variant-numeric:lining-nums; }
.crb-n .stat-suffix { color:var(--saffron); font-size:.6em; }
.crb-l { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,245,228,.6); display:block; margin-top:4px; }

/* Featured (Class 10) dark section */
.featured-course { background:var(--maroon); }
.featured-course .cd-desc { color:rgba(251,245,228,.85); opacity:1; }

/* Responsive */
@media (max-width:1024px) {
  .course-detail, .course-detail.reverse { grid-template-columns:1fr; gap:40px; direction:ltr; }
  .crb-stats { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:640px) {
  .crb-stats { grid-template-columns:1fr 1fr; }
}