/* Shared course cards, also loaded by the home page without course-player styles. */
/* Shared course card */
.learning-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  border: 1px solid #dce3d7;
  border-radius: var(--radius-card, 24px);
  background: var(--surface, #fff);
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(21, 62, 56, .015);
  transition: border-color .2s, box-shadow .2s;
}
.learning-card:hover { border-color: #a9bba4; box-shadow: 0 12px 30px rgba(21, 62, 56, .065); }
.learning-card .learning-card-image { display: block; position: relative; padding: 10px 10px 0; overflow: hidden; }
.learning-card .learning-card-image img,
.learning-card-placeholder {
  width: 100%;
  aspect-ratio: 1.5;
  height: auto;
  object-fit: contain;
  background: #eef2e8;
  border-radius: 16px;
}
.learning-card-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; background: #e7eddf; color: var(--teal); padding: 35px; font-size: 18px; line-height: 1.9; text-align: center; }
.learning-card-placeholder svg { width: 47px; height: 47px; }
.learning-card-badge { align-self: flex-start; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 25px; padding: 7px 13px; background: var(--lime, #d7ee92); color: var(--teal, #153e38); font-size: 12px; font-weight: 600; box-shadow: none; }
.learning-card-badge-owned { background: var(--teal); color: white; }
.learning-card-badge svg { width: 14px; height: 14px; }
.learning-image-arrow { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 14px; left: 25px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface, #fff); color: var(--teal); opacity: 0; transition: opacity .18s; }
.learning-image-arrow svg { width: 20px; height: 20px; }
.learning-card:hover .learning-image-arrow { opacity: 1; }
.learning-card .learning-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.learning-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.learning-card-topline > span:first-child { color: var(--teal); font-weight: 600; }
.learning-card-teacher { display: inline-flex; align-items: center; gap: 7px; min-width: 0; text-align: left; }
.learning-card-teacher img { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; flex: none; background: #eef3e6; }
.learning-card h3 { font-size: 20px; line-height: 1.85; margin: 0 0 16px; min-height: 0; }
.learning-card h3 a { display: flex; min-height: 68px; align-items: flex-start; color: var(--ink); }
.learning-card h3 a:hover { color: var(--teal); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.learning-card .learning-card-meta { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.learning-card .learning-card-meta > span { display: flex; align-items: center; gap: 7px; }
.learning-card-meta svg { width: 16px; height: 16px; }
.learning-card .learning-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: auto; padding-top: 19px; border-top: 1px solid #e8ece2; }
.learning-card-price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.learning-card-price del { display: block; width: auto; color: var(--muted); font-size: 12px; line-height: 1.8; }
.learning-card-price > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.learning-card .learning-card-price strong { color: var(--teal); font-size: 21px; line-height: 1.7; }
.learning-card .learning-card-price small { color: var(--muted); font-size: 12px; }
.learning-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 88px; min-height: 44px; padding: 9px 12px; color: var(--teal); background: #f0f4e9; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.learning-card-cta svg { width: 17px; height: 17px; }
.learning-card-cta:hover { background: var(--lime, #d7ee92); border-color: #c2d985; }