/* ===========================================
   Course page styles
   مشترك بين كل صفحات /courses/*.html
=========================================== */

.course-back { display: inline-block; font-size: 14px; }
.course-title { margin-top: 14px; font-size: clamp(36px, 5vw, 64px); line-height: 1.1; letter-spacing: -0.02em; }
.course-tagline { margin-top: 18px; max-width: 720px; color: var(--ink-2); }
.course-meta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.meta-pill { display:inline-flex; align-items:center; gap:8px; padding: 6px 14px; border-radius: 999px; background: var(--cream-2); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.meta-pill b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 700; }
.meta-pill-free { background:#1F7A4A18; color:var(--green-deep); }

/* ----- Category chips (shared with blog) ----- */
.cat-chip       { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700; }
.cat-ai           { background:#1F7A4A18; color:var(--green-deep); }
.cat-career       { background:#1E2D8C18; color:var(--blue); }
.cat-business     { background:#B28A4A22; color:#7A5A20; }
.cat-productivity { background:#15141012; color:var(--ink); }
.cat-leadership   { background:#B71F1F18; color:var(--red); }
.cat-finance      { background:#0E7B7B1A; color:#0E6B6B; }
.cat-personal     { background:#6A4C9318; color:#5B3E85; }

/* ----- Intro grid (description + intro video) ----- */
.course-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 920px) { .course-intro-grid { grid-template-columns: 1fr; } }
.course-description { margin-top: 14px; font-size: 19px; line-height: 1.85; color: var(--ink-2); max-width: 560px; }
.course-intro-video { display: flex; flex-direction: column; gap: 14px; }

/* ----- YouTube frame ----- */
.yt-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: var(--ink); border: 1px solid var(--rule); box-shadow: 0 24px 60px -36px rgba(20,20,15,0.32); }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-placeholder { display: grid; place-items: center; background: linear-gradient(160deg,#1F2A1F 0%, #15140F 100%); color: rgba(251,248,241,0.7); font-size: 14px; letter-spacing: 0.04em; }
.yt-open { align-self: flex-start; }

/* ----- Audience / Outcomes ----- */
.course-ao-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .course-ao-grid { grid-template-columns: 1fr; } }
.course-ao-card { padding: clamp(24px, 3vw, 36px); background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--rule); }
.course-ao-card h3 { margin: 0 0 14px; font-size: 22px; }
.course-ao-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.course-ao-card li { padding: 12px 16px; background: var(--paper); border-radius: var(--radius); font-size: 16px; line-height: 1.6; }
.course-ao-card li::before { content: "—"; margin-left: 10px; color: var(--green); font-weight: 700; }

/* ----- Section heading ----- */
.course-section-head { margin-bottom: 24px; max-width: 760px; }
.course-section-head h2 { margin-top: 8px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }

/* ----- Lesson cards ----- */
.lesson-stack { display: flex; flex-direction: column; gap: 22px; }
.lesson-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); scroll-margin-top: 100px; }
.lesson-head { display: flex; align-items: baseline; gap: 16px; }
.lesson-num { font-size: 28px; color: var(--ink-faint); font-weight: 700; min-width: 48px; }
.lesson-head h3 { margin: 0; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; }

.lesson-note, .lesson-exercise, .lesson-resources { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--cream); }
.lesson-note h4, .lesson-exercise h4, .lesson-resources h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); text-transform: none; letter-spacing: 0.04em; }
.lesson-note p, .lesson-exercise p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.lesson-exercise { border-right: 4px solid var(--green); }

.lesson-resources ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.res-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: background 160ms ease, transform 160ms ease; border: 1px solid var(--rule); font-weight: 600; }
.res-link:hover { background: var(--cream-2); color: var(--ink); transform: translateY(-1px); }
.res-icon { font-size: 18px; }
.res-arrow { margin-right: auto; color: var(--ink-soft); font-weight: 700; }

/* ----- FAQ ----- */
.course-faq { max-width: 880px; }
.course-faq h2 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 40px); }
.faq-item { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px; background: var(--paper); }
.faq-item summary { font-weight: 700; cursor: pointer; font-size: 17px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--green-deep); }
.faq-a { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }

/* ----- CTA + soon ----- */
.course-cta-card, .course-soon-card { padding: clamp(28px, 4vw, 48px); background: var(--cream-2); border-radius: 28px; text-align: center; }
.course-cta-card h2, .course-soon-card h2 { margin: 0 0 12px; }
.course-cta-card .muted, .course-soon-card .muted { margin: 0 0 24px; }
.course-cta-row, .course-soon-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }