/* Course cards: readable course identities and compact purchase information.
   Keep these rules scoped to cards; other course artwork retains its layout. */
.course-card .course-card-link { height:100%; }
.course-card .card-course-art { height:224px; padding:20px 24px; display:flex; flex-direction:column; }
.course-card .cover-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--blue-700); font:700 12px/1.5 var(--font-body); letter-spacing:.04em; }
.course-card .card-course-art>strong { font:700 28px/1.3 var(--font-display); letter-spacing:-.035em; margin-top:9px; }
.course-card .cover-subtitle { display:block; font-size:14px; line-height:1.5; margin-top:6px; color:var(--gray-600); }
.course-card .cover-preview { margin-top:auto; padding-top:16px; }
.course-card .cover-preview code { font:400 12px/1.65 var(--font-code); letter-spacing:-.03em; }
.course-card .cover-browser { border:1px solid var(--gray-600); border-radius:8px; background:var(--gray-0); overflow:hidden; color:var(--navy-900); }
.course-card .cover-browser-bar { height:24px; display:flex; align-items:center; gap:4px; padding:0 10px; border-bottom:1px solid var(--gray-200); background:var(--gray-50); }
.course-card .cover-browser-bar>span { width:4px; height:4px; border-radius:50%; background:var(--gray-400); }
.course-card .cover-browser-bar code { margin-left:auto; font-size:10px; color:var(--gray-500); }
.course-card .cover-browser-page { display:flex; align-items:center; gap:10px; padding:12px; }
.course-card .cover-page-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--blue-50); color:var(--brand); }
.course-card .cover-browser-page>div { display:flex; flex-direction:column; gap:3px; flex:1; }
.course-card .cover-browser-page b { font-size:15px; line-height:1.2; letter-spacing:-.02em; }
.course-card .cover-browser-page>div>span { color:var(--gray-500); font-size:12px; line-height:1.3; }
.course-card .cover-browser-page>svg { color:var(--brand); }
.course-card .art-vibe .cover-topline,.course-card .art-ai .cover-topline { color:var(--blue-300); }
.course-card .art-vibe .cover-subtitle,.course-card .art-ai .cover-subtitle { color:var(--text-inverse-muted); }
.course-card .cover-console { border-radius:8px; overflow:hidden; background:var(--navy-900); color:var(--code-text); }
.course-card .cover-console>code { display:block; padding:10px 12px; white-space:nowrap; }
.course-card .cover-console>code>span { color:var(--code-keyword); }
.course-card .cover-console code b { font-weight:400; color:var(--code-string); }
.course-card .cover-console>div { display:flex; align-items:center; gap:12px; padding:9px 12px; border-top:1px solid var(--gray-600); }
.course-card .cover-console>div>span { color:var(--text-inverse-muted); font-size:12px; }
.course-card .cover-console>div>code { color:white; }
.course-card .art-olympiad { background:var(--blue-100); }
.course-card .cover-solution { display:flex; align-items:center; gap:6px; }
.course-card .cover-solution>span { display:flex; align-items:center; justify-content:center; gap:4px; flex:1; padding:13px 4px; background:white; border:1px solid var(--blue-200); border-radius:8px; color:var(--blue-900); font-size:12px; font-weight:700; white-space:nowrap; }
.course-card .cover-solution>svg { color:var(--blue-700); }
.course-card .cover-solution>.cover-solution-done { background:var(--blue-700); border-color:var(--blue-700); color:white; }
.course-card .cover-solution-caption { color:var(--blue-700); text-align:center; margin-top:8px; }
.course-card .cover-first-steps { display:flex; align-items:center; gap:8px; }
.course-card .cover-first-steps>span { display:flex; flex:1; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; color:var(--blue-700); font-size:12px; font-weight:500; background:white; border:1px solid var(--blue-200); border-radius:8px; }
.course-card .cover-first-steps b { font-size:20px; line-height:1.3; }
.course-card .cover-first-steps>span:last-child { background:var(--blue-700); color:white; border-color:var(--blue-700); }
.course-card .cover-ai { display:flex; flex-direction:column; gap:6px; }
.course-card .cover-ai>div { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--navy-800); border:1px solid var(--gray-600); border-radius:8px; color:var(--code-text); font-size:12px; }
.course-card .cover-ai>div>svg { color:var(--blue-300); }
.course-card .cover-ai>div:last-child { background:var(--blue-100); color:var(--blue-900); border-color:var(--blue-100); }
.course-card .cover-ai>div:last-child>svg { color:var(--blue-700); }
.course-card .cover-array { display:flex; align-items:center; flex-direction:column; gap:5px; }
.course-card .cover-array>div { display:flex; width:100%; gap:8px; }
.course-card .cover-array>div>span { flex:1; padding:3px; text-align:center; font-size:15px; font-weight:700; border-radius:4px; background:white; border:1px solid var(--gray-300); }
.course-card .cover-array>code { color:var(--blue-700); font-size:10px; line-height:1.1; }
.course-card .cover-array>.cover-array-result>span { color:var(--blue-700); background:var(--blue-100); border-color:var(--blue-200); }
.course-card .course-card-body { padding:20px 24px; }
.course-card .card-labels { margin-bottom:10px; gap:8px; }
.course-card .card-labels>div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.course-card .card-level { display:inline-flex; align-items:center; padding:2px 7px; color:var(--gray-700); background:var(--gray-100); border-radius:4px; font-size:12px; font-weight:700; line-height:1.5; }
.course-card .course-category { font-size:12px; color:var(--blue-700); }
.course-card .small-tag { flex-shrink:0; font-size:12px; padding:2px 7px; }
.course-card h3 { font:700 20px/1.4 var(--font-display); letter-spacing:-.035em; min-height:0; }
.course-card .card-social { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; margin-top:10px; }
.course-card .card-instructor { font-size:12px; color:var(--gray-600); margin:0; }
.course-card .card-rating { font-size:12px; gap:4px; margin:0; color:var(--gray-600); }
.course-card .card-rating>svg { fill:var(--blue-50); }
.course-card .card-purchase { border-top:1px solid var(--gray-200); padding-top:12px; margin-top:16px; }
.course-card .card-purchase>del { display:block; font-size:12px; color:var(--gray-500); line-height:1.3; }
.course-card .card-price { flex-wrap:nowrap; gap:8px; margin-top:3px; }
.course-card .card-price>strong,.course-card .card-price>b { font-size:24px; line-height:1.5; font-weight:700; letter-spacing:-.03em; }
.course-card .card-price small { font-size:18px; }
.course-card .card-open { display:grid; place-items:center; width:32px; height:32px; margin-left:auto; border:1px solid var(--blue-200); border-radius:50%; color:var(--blue-700); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); }
.course-card:hover .card-open { color:white; background:var(--brand); border-color:var(--brand); }
.course-card .card-meta { flex-wrap:wrap; gap:6px 16px; margin-top:8px; padding:0; border:0; font-size:12px; line-height:1.5; color:var(--gray-600); }
.course-card .card-meta>span { gap:5px; }
@media (min-width:701px) and (max-width:900px) {
  .home-course-grid .course-card:last-child .card-course-art { height:100%; min-height:224px; justify-content:center; }
  .home-course-grid .course-card:last-child .cover-preview { margin-top:12px; }
}
@media (max-width:1150px) and (min-width:901px) {
  .course-card .card-course-art,.course-card .course-card-body { padding-inline:18px; }
  .course-card .card-course-art>strong { font-size:25px; }
  .course-card .cover-console>code { font-size:10px; }
  .course-card .cover-solution>span { font-size:11px; }
  .course-card h3 { font-size:18px; }
}
@media (max-width:700px) {
  .course-card .card-course-art,.home-course-grid .course-card:last-child .card-course-art { display:flex; height:224px; min-height:224px; }
  .course-card h3 { min-height:0; }
}
@media (max-width:360px) {
  .course-card .card-course-art,.course-card .course-card-body { padding-inline:18px; }
  .course-card .card-course-art>strong { font-size:26px; }
  .course-card .cover-subtitle { font-size:13px; }
  .course-card .cover-topline { font-size:11px; }
  .course-card .cover-browser-page { padding:10px; gap:8px; }
  .course-card .cover-page-icon { width:28px; height:32px; }
  .course-card .cover-browser-page b { font-size:13px; }
  .course-card .cover-console>code { font-size:10px; }
  .course-card .cover-solution { gap:4px; }
  .course-card .cover-solution>span { font-size:11px; }
  .course-card .cover-ai>div { font-size:11px; gap:6px; padding-inline:8px; }
  .course-card h3 { font-size:18px; }
  .course-card .card-price>strong,.course-card .card-price>b { font-size:23px; }
}