/* disc-insights.css — shared styles for the /articles/disc-values/ pages:
   the after-title Wistia video and the personalized DISC/Values insight card
   rendered by /js/disc-insights.js when a ?code=… is present. */

/* ── Article video (Wistia) — after the title, above the article ── */
.article-video { max-width: 760px; margin: 0 auto; padding: 32px 24px 0; }
.article-video__frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); aspect-ratio: 16 / 9; }
.article-video wistia-player { display: block; width: 100%; height: 100%; }
.article-video wistia-player:not(:defined) { display: block; width: 100%; aspect-ratio: 16 / 9; }

/* ── Personalized insights card (?code=…) ── */
#is-insights { margin: 4px 0 20px; }
.is-insights__card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.is-insights__eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--is-blue); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.is-insights__name { font-family: var(--font-display); font-size: 22px; line-height: 1.15; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.is-insights__list { list-style: none; margin: 0; padding: 0; }
.is-insights__list li { position: relative; padding-left: 26px; margin-bottom: 12px; line-height: 1.6; color: var(--text); }
.is-insights__list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--is-blue); }
.is-insights__lock { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
.is-insights__lock p { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.is-insights__loading { font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
/* Scoped under #is-insights so the article body's `.article-body a` colour
   rule (higher specificity than a bare .is-unlock-btn) can't override the
   button text to blue-on-blue and make it invisible. */
#is-insights .is-unlock-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--is-blue); color: var(--is-white); padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; border: none; }
#is-insights .is-unlock-btn:hover { opacity: 0.88; border-bottom: none; }
#is-insights [data-lucide] { width: 16px; height: 16px; }

/* ── Recommended microcourses CTA (secondary to the default Team Insights CTA) ── */
.article-courses { max-width: 760px; margin: 0 auto; padding: 0 24px 96px; }
.article-courses__card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.article-courses__eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--is-blue); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.article-courses__eyebrow [data-lucide] { width: 16px; height: 16px; }
.article-courses__intro { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.article-course { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color 150ms, background 150ms; }
.article-course + .article-course { margin-top: 10px; }
.article-course:hover { border-color: var(--is-blue); background: color-mix(in srgb, var(--is-blue) 8%, transparent); }
.article-course__num { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--is-blue); color: var(--is-white); font-family: var(--font-body); font-weight: 700; font-size: 15px; }
.article-course__title { flex: 1; font-weight: 600; font-size: 15px; }
.article-course [data-lucide] { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.article-course:hover [data-lucide] { color: var(--is-blue); }