/* آموزش سامانه مودیان: افزوده‌ی کوچک روی blog.css (کارت‌های فهرست، مسیر یادگیری و قبلی/بعدی).
   توکن‌ها (--brand, --ink, --line, ...) از site.css می‌آیند. */

/* ------------------------------------------------------------------ شماره‌ی درس روی کارت */
.ln-card .ln-step { position: absolute; top: 14px; right: 14px; z-index: 1; min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px; font-weight: 800; font-size: .95rem; color: var(--brand-dark); background: rgba(255,255,255,.94); box-shadow: 0 6px 16px rgba(0,0,0,.14) }

/* ------------------------------------------------------------------ مسیر یادگیری (ستون کنار آموزش) */
.ln-track { padding: 16px 16px 12px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(14,127,116,.06) }
.ln-track > b { display: block; margin-bottom: 10px; font-size: .95rem; color: var(--ink) }
.ln-track ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.ln-track a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: 12px; color: var(--muted); font-size: .88rem; line-height: 1.7; transition: background .2s, color .2s }
.ln-track a:hover { background: #eefaf8; color: var(--brand-dark) }
.ln-track i { flex: none; width: 24px; height: 24px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-style: normal; font-weight: 800; font-size: .78rem;
    background: #e3f7f4; color: var(--brand-dark); border: 1px solid var(--line) }
.ln-track li.on a { background: #e3f7f4; color: var(--ink); font-weight: 700 }
.ln-track li.on i { background: var(--brand-solid, #0e7f74); color: #fff; border-color: transparent }

/* ------------------------------------------------------------------ درس قبلی / بعدی */
.ln-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 38px 0 26px }
.ln-nav-a { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink);
    transition: transform .25s, border-color .25s, box-shadow .25s }
.ln-nav-a:hover { transform: translateY(-3px); border-color: rgba(31,181,164,.55); box-shadow: 0 14px 30px rgba(14,127,116,.14) }
.ln-nav-a small { color: var(--muted); font-size: .8rem }
.ln-nav-a b { font-size: .98rem; line-height: 1.7 }
.ln-nav-a.is-next { text-align: left }
.ln-nav-a.is-off { visibility: hidden; border: 0; padding: 0 }

@media (max-width: 720px) {
    .ln-nav { grid-template-columns: 1fr }
    .ln-nav-a.is-off { display: none }
    .ln-nav-a.is-next { text-align: right }
}
@media (prefers-reduced-motion: reduce) {
    .ln-nav-a, .ln-track a { transition: none }
    .ln-nav-a:hover { transform: none }
}