@import "https://assets.elements.dev/assets/app/shared/styles/page.b167db396f67ed0.css";
/* CourseRow shares the .feed-row chrome (grid layout, rank column,
   title typography, meta row, hover, ellipsis) with FeedRow. Pull
   that stylesheet in directly so CourseRow renders correctly on
   pages that DON'T also import FeedRow (e.g. /learn/courses).
   Previously the chrome only loaded via FeedRow as a side-effect,
   leaving CourseRow-only pages visually broken. */
@import "https://assets.elements.dev/assets/app/shared/templates/feed-row/style.122d2a3fcd8971eb.css";

/* CourseRow inherits the .feed-row chrome from FeedRow's stylesheet
 * (grid layout, ranks, hover, ellipsis, meta row). This file only
 * adds course-specific deltas: the count/duration meta items and
 * the byline rhythm. */

/* Byline row — same rhythm as FeedRow's PostByline output (kind
   chip · author · separator · time). Mirrors .feed-byline so the
   profile + feed pages render with one rhythm. */
.course-row-byline {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.course-row-byline .feed-kind { font-weight: var(--weight-medium); }
.course-row-byline .feed-author .who { color: var(--ink); text-decoration: none; }
.course-row-byline .feed-author .who:hover { color: var(--accent); }
.course-row-byline .feed-author b { color: inherit; font-weight: 400; }
.course-row-byline .feed-time { color: var(--ink-dim); }
.course-row-sep { color: var(--ink-dim); }

/* Engagement subline — small footer with "N lessons · D:DD". One
   line under the byline; matches the visual weight of FeedRow's
   action-row so a mixed list reads with one rhythm. */
.course-row-engagement {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.course-row-engagement-item { color: var(--ink-soft); }

@media (max-width: 520px) {
  .course-row-byline,
  .course-row-engagement { font-size: 12.5px; }
}