/* Course illustrations on the public site: they take their colours from the site theme (light and dark). */
.course-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
@media (max-width: 900px) { .course-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.course-hero-art { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg, 22px); background: linear-gradient(145deg, var(--bg-elev), var(--bg-soft)); box-shadow: var(--shadow-md); overflow: hidden; }
.course-hero-art canvas { display: block; width: 100%; height: 250px; }
.course-hero-art .art-tag { position: absolute; left: 12px; bottom: 9px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); background: color-mix(in srgb, var(--bg-elev) 82%, transparent); padding: 2px 8px; border-radius: 999px; }
.illu-thumb { display: block; width: 100%; height: 120px; border-radius: var(--radius-sm, 11px); background: linear-gradient(145deg, var(--bg-elev), var(--bg-soft)); border: 1px solid var(--border); margin-bottom: .9rem; }