/* Сурах (/learn): the course cards, and one course's modules and lessons. */
@layer page {
  .learn { max-width: 1040px; margin: 0 auto; }
  .learn-view { display: grid; gap: var(--sp-4); }
  .learn-lede { margin: 0; }
  .learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }

  .learn-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .learn-card:hover, .learn-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .learn-card__art { aspect-ratio: 5 / 2; overflow: hidden; background: var(--surface-2); }
  .learn-card__art svg { display: block; width: 100%; height: 100%; }
  .learn-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
  .learn-card__body .chip { align-self: flex-start; }
  .learn-card__body h3 { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
  .learn-card__body p { margin: 0; font-size: var(--fs-15); }
  .learn-progress { height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
  .learn-progress span { display: block; width: var(--done, 0%); height: 100%; border-radius: inherit; background: var(--good); }
  .learn-card__foot { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: auto; font-size: var(--fs-13); }

  .learn-crumb { justify-self: start; }
  .learn-course-head { display: grid; gap: var(--sp-2); }
  .learn-course-head h2 { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
  .learn-course-head p { margin: 0; }
  .learn-meta { flex-wrap: wrap; gap: var(--sp-2); }
  .learn-module h3 { margin: 0; font-size: var(--fs-18); }
  .learn-module p { margin: 0 0 var(--sp-3); }
  .learn-lessons { margin: 0; padding: 0; list-style: none; }
  .learn-lesson { gap: var(--sp-3); }
  .learn-check { flex: none; width: 1.5em; color: var(--muted); font-weight: var(--fw-heavy); text-align: center; }
  .learn-lesson.is-done .learn-check { color: var(--good); }
  .learn-lesson__title { font-weight: var(--fw-bold); }
}