/*
 * ============================================================
 * PUBLIC LEARNING PAGES — learning/<level>.html overviews and
 * learning/<level>-lesson-<n>.html previews, generated by
 * tools/seo/build-learning-pages.mjs. Built on level.css and the
 * shared tokens/components (glass-panel, badge, btn-cta).
 * ============================================================
 */

.lc-page {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 130px 24px 10vh;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* German runs inside Persian text keep their own direction. */
.lc-page [lang="de"] { unicode-bidi: isolate; }

/* ---- Breadcrumb ---- */
.lc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--ink-soft);
}
.lc-breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.lc-breadcrumb a:hover { color: var(--accent-gold); }
.lc-breadcrumb [aria-current] { color: var(--primary-navy); font-weight: 700; }
.lc-breadcrumb-sep { color: var(--ink-muted); }

/* ---- Lesson hero ---- */
.lc-hero {
    padding: 34px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.lc-title {
    margin: 0;
    font-family: var(--font-display-latin);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary-navy);
}
.lc-lead {
    margin: 0;
    max-width: 720px;
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 2;
    color: var(--ink-soft);
}
.lc-topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lc-topics li {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--accent-soft-bg);
    color: var(--accent-gold);
    font-size: 12.5px;
    font-weight: 600;
}
.lc-stats {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.lc-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid var(--neutral-border);
    border-radius: 14px;
    background-color: var(--neutral-soft-bg);
}
.lc-stats dt { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-soft); }
.lc-stats dd { margin: 0; font-family: var(--font-display-fa); font-size: 20px; font-weight: 800; color: var(--primary-navy); }

/* ---- Content sections ---- */
.lc-section { padding: 28px 32px; }
.lc-section h2,
.lc-cta h2,
.lc-list-title {
    margin: 0 0 14px;
    font-family: var(--font-display-fa);
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-navy);
}
.lc-section-note {
    margin: -6px 0 14px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink-soft);
}

.lc-outline { display: grid; gap: 18px; }
.lc-outline-group h3 {
    margin: 0 0 6px;
    font-family: var(--font-display-fa);
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-gold);
}
.lc-outline-group p { margin: 0 0 8px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.lc-outline-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-outline-group li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-inline-start: 3px solid var(--accent-soft-bg);
    background-color: var(--neutral-soft-bg);
    border-radius: 10px;
}
.lc-outline-group li strong { font-family: var(--font-body); font-size: 14px; color: var(--primary-navy); }
.lc-outline-group li span:not([lang]) { font-family: var(--font-body); font-size: 12.5px; line-height: 1.85; color: var(--ink-soft); }

/* ---- Tables ---- */
.lc-table-wrap { overflow-x: auto; border: 1px solid var(--neutral-border); border-radius: 14px; }
.lc-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 13.5px; }
.lc-table th,
.lc-table td { padding: 10px 14px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--neutral-border); line-height: 1.8; color: var(--ink); }
.lc-table tbody tr:last-child td { border-bottom: none; }
.lc-table th { background-color: var(--neutral-soft-bg); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.lc-table td [lang="de"] { font-weight: 600; }
.lc-vocab td:first-child { white-space: nowrap; color: var(--primary-navy); }
.lc-ex-de { display: block; }
.lc-ex-fa { display: block; font-size: 12.5px; color: var(--ink-soft); }

/* ---- Call to action ---- */
.lc-cta {
    padding: 28px 32px;
    border-radius: var(--radius-lg);
    background-color: var(--primary-navy-dark);
    color: #F8FAFC;
}
.lc-cta h2 { color: #F8FAFC; }
.lc-cta p { margin: 0 0 18px; font-family: var(--font-body); font-size: 14.5px; line-height: 2; color: rgba(248, 250, 252, 0.84); }
.lc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lc-cta-actions .btn-cta { padding: 11px 24px; font-size: 13.5px; text-decoration: none; }

/* ---- Pager ---- */
.lc-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.lc-pager-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--neutral-border);
    border-radius: 16px;
    background-color: var(--color-surface);
    text-decoration: none;
    color: var(--primary-navy);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color 0.2s ease;
}
.lc-pager-link:hover { border-color: var(--accent-gold); }
.lc-pager-link.is-next { justify-content: flex-end; text-align: left; }
.lc-pager-link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-pager-link small { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.lc-pager-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-gold); }
.lc-pager-up { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--accent-gold); text-decoration: none; white-space: nowrap; }

/* ---- Level overview ---- */
.lc-level-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 10px 0 12px;
}
.lc-level-heading { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lc-level-heading .level-page-code { font-size: clamp(64px, 12vw, 128px); }
.lc-level-name { font-family: var(--font-display-fa); font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--primary-navy); }
.lc-level-hero .lc-lead { text-align: center; }
.lc-level-hero .lc-cta-actions { justify-content: center; }

.lc-lesson-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    gap: 16px;
}
.lc-lesson-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lc-lesson-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-hover); }
.lc-lesson-num { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--accent-gold); }
.lc-lesson-title { font-family: var(--font-display-latin); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--primary-navy); text-align: right; }
.lc-lesson-lead { font-family: var(--font-body); font-size: 13px; line-height: 1.85; color: var(--ink-soft); }
.lc-lesson-topics { margin-top: auto; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--ink-muted); }
.lc-back { align-self: center; gap: 8px; text-decoration: none; }
.lc-back svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
    .lc-page { padding: 110px 16px 8vh; gap: 16px; }
    .lc-hero, .lc-section, .lc-cta { padding: 22px 18px; }
    .lc-lead { font-size: 14.5px; }
    .lc-pager { grid-template-columns: 1fr 1fr; }
    .lc-pager-up { grid-column: 1 / -1; grid-row: 2; text-align: center; }
    /* Vocabulary: one stacked card per word instead of three narrow columns. */
    .lc-vocab thead { display: none; }
    .lc-vocab tr {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2px 12px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--neutral-border);
    }
    .lc-vocab tbody tr:last-child { border-bottom: none; }
    .lc-vocab td { padding: 0; border: none; }
    .lc-vocab td:nth-child(3) { grid-column: 1 / -1; padding-top: 4px; }
}

/* ---- Blog articles (tools/blog/build-blog.mjs) ---- */
.lc-article-title {
    margin: 0;
    font-family: var(--font-display-fa);
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 900;
    line-height: 1.55;
    color: var(--primary-navy);
}
.lc-article-meta { margin: 0; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-muted); }
.lc-draft-note {
    margin: 0;
    padding: 10px 16px;
    border-radius: 12px;
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
}
.lc-post-title { font-family: var(--font-display-fa); font-size: 17px; font-weight: 800; line-height: 1.6; color: var(--primary-navy); }

.lc-prose { font-family: var(--font-body); font-size: 15.5px; line-height: 2.1; color: var(--ink); }
.lc-prose > * + * { margin-top: 14px; }
.lc-prose p { margin: 0; }
.lc-prose h2 {
    margin: 34px 0 0;
    font-family: var(--font-display-fa);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--primary-navy);
}
.lc-prose > h2:first-child { margin-top: 0; }
.lc-prose h3 { margin: 24px 0 0; font-family: var(--font-display-fa); font-size: 17px; font-weight: 800; color: var(--accent-gold); }
.lc-prose ul,
.lc-prose ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.lc-prose li::marker { color: var(--accent-gold); }
.lc-prose a { color: var(--accent-gold); font-weight: 700; text-underline-offset: 4px; }
.lc-prose strong { color: var(--primary-navy); }
.lc-prose [lang="de"] { font-weight: 600; }
.lc-prose-table { overflow-x: auto; border: 1px solid var(--neutral-border); border-radius: 14px; }
.lc-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lc-prose th,
.lc-prose td { padding: 9px 14px; text-align: right; border-bottom: 1px solid var(--neutral-border); line-height: 1.8; white-space: nowrap; }
.lc-prose tbody tr:last-child td { border-bottom: none; }
.lc-prose th { background-color: var(--neutral-soft-bg); font-size: 12.5px; color: var(--ink-soft); }

@media (max-width: 768px) {
    .lc-prose { font-size: 15px; line-height: 2; }
    .lc-prose h2 { font-size: 19px; margin-top: 28px; }
}

/* ---- Lesson previews: tables in the Live Notes' own look ----
   Same palette and type as css/pages/lesson.css (--lsn-*): warm paper
   surface, German in Inter, Persian in Kalameh, dark table header, zebra
   rows — so a preview's tables read like the notes a student gets. */
.lc-notes {
    --ln-surface:      #FFFFFF;
    --ln-surface-soft: #FBF9F4;
    --ln-border:       #E5DFCD;
    --ln-text:         #24211C;
    --ln-text-2:       #6B6357;
    --ln-text-inverse: #FBF9F4;
    --ln-accent:       #2B5C82;
    --ln-tag:          #A3512F;
    --ln-font-de: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ln-font-fa: 'Kalameh', sans-serif;
}
[data-theme="dark"] .lc-notes {
    --ln-surface:      #1B1F26;
    --ln-surface-soft: #20242C;
    --ln-border:       rgba(226, 220, 199, 0.12);
    --ln-text:         #EDEAE1;
    --ln-text-2:       rgba(237, 234, 225, 0.68);
    --ln-text-inverse: #14171C;
    --ln-accent:       #6FA3D8;
    --ln-tag:          #D98A63;
}
.lc-notes .lc-table-wrap { border: 1px solid var(--ln-border); border-radius: 12px; background-color: var(--ln-surface-soft); }
.lc-notes .lc-table { font-family: var(--ln-font-fa); color: var(--ln-text); }
.lc-notes .lc-table th {
    background-color: var(--ln-text);
    color: var(--ln-text-inverse);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: none;
}
.lc-notes .lc-table td { color: var(--ln-text); border-bottom: 1px solid var(--ln-border); }
.lc-notes .lc-table tbody tr:nth-child(even) td { background-color: var(--ln-surface); }
.lc-notes .lc-table [lang="de"] { font-family: var(--ln-font-de); font-weight: 500; }

/* Grammar table: all-German, left-to-right like the notes' review tables. */
.lc-notes .lc-table-wrap.is-ltr { direction: ltr; }
.lc-grammar-table { direction: ltr; table-layout: fixed; }
.lc-grammar-table th,
.lc-grammar-table td { text-align: start; overflow-wrap: break-word; }
.lc-grammar-table td { font-family: var(--ln-font-de); font-size: 14px; }

/* Vocabulary: German | Persian | example, like the notes' word rows. */
.lc-notes .lc-vocab { direction: ltr; }
.lc-notes .lc-vocab th,
.lc-notes .lc-vocab td { text-align: left; }
.lc-notes .lc-vocab th:nth-child(2),
.lc-notes .lc-vocab td:nth-child(2) { text-align: right; direction: rtl; }
.lc-notes .lc-vocab td:first-child [lang="de"] { font-weight: 600; color: var(--ln-text); }
.lc-notes .lc-vocab td:nth-child(2) { color: var(--ln-accent); font-weight: 600; }
.lc-notes .lc-ex-de { font-family: var(--ln-font-de); color: var(--ln-text); }
.lc-notes .lc-ex-fa { direction: rtl; text-align: right; font-family: var(--ln-font-fa); color: var(--ln-text-2); }
.lc-notes h2 [lang="de"] { font-family: var(--ln-font-de); }

/* German in the grammar outline and topic chips uses the notes' German face too. */
.lc-outline [lang="de"],
.lc-topics [lang="de"] { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; }

@media (max-width: 768px) {
    .lc-notes .lc-vocab tr { grid-template-columns: 1fr auto; border-bottom: 1px solid var(--ln-border); }
    .lc-notes .lc-vocab tbody tr:nth-child(even) { background-color: var(--ln-surface); }
    .lc-notes .lc-vocab td,
    .lc-notes .lc-vocab tbody tr:nth-child(even) td { background: none; border-bottom: none; }
    .lc-notes .lc-vocab td:nth-child(2) { text-align: right; }
}

/* ============================================================
   BLOG (tools/blog/build-blog.mjs): cards, filter, article blocks
   ============================================================ */
[data-cat="start"]   { --cat: #C0553A; --cat-soft: rgba(192, 85, 58, 0.1); }
[data-cat="sound"]   { --cat: #6A4FB6; --cat-soft: rgba(106, 79, 182, 0.1); }
[data-cat="vocab"]   { --cat: #1F7A4C; --cat-soft: rgba(31, 122, 76, 0.1); }
[data-cat="talk"]    { --cat: #2B5C82; --cat-soft: rgba(43, 92, 130, 0.1); }
[data-cat="grammar"] { --cat: #A3512F; --cat-soft: rgba(163, 81, 47, 0.1); }
[data-cat="tips"]    { --cat: #B23A48; --cat-soft: rgba(178, 58, 72, 0.1); }
[data-cat="class"]   { --cat: #7A1F2E; --cat-soft: rgba(122, 31, 46, 0.1); }
[data-theme="dark"] [data-cat="start"]   { --cat: #E8866B; }
[data-theme="dark"] [data-cat="sound"]   { --cat: #A993F0; }
[data-theme="dark"] [data-cat="vocab"]   { --cat: #5FCB93; }
[data-theme="dark"] [data-cat="talk"]    { --cat: #7FB2E0; }
[data-theme="dark"] [data-cat="grammar"] { --cat: #E0996E; }
[data-theme="dark"] [data-cat="tips"]    { --cat: #EE8290; }
[data-theme="dark"] [data-cat="class"]   { --cat: #E67A93; }

.lc-post-cat {
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--cat-soft);
    color: var(--cat);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.lc-post-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 18px;
}
.lc-post-grid > li[hidden] { display: none; }
.lc-post-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lc-post-card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); }
.lc-post-thumb { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background-color: var(--neutral-soft-bg); }
.lc-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.lc-post-card:hover .lc-post-thumb img { transform: scale(1.03); }
.lc-post-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.lc-post-body .lc-post-title { font-size: 16.5px; }
.lc-post-meta { margin-top: auto; font-family: var(--font-body); font-size: 12px; color: var(--ink-muted); }

.lc-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lc-filter-btn {
    padding: 7px 16px;
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s ease;
}
.lc-filter-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.lc-filter-btn.is-active { background: linear-gradient(135deg, var(--grad-btn-start), var(--grad-btn-end)); border-color: transparent; color: #fff; }

/* Article */
.lc-article-head .lc-post-cat { font-size: 12.5px; }
.lc-article-cover { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--glass-shadow); aspect-ratio: 1200 / 630; background-color: var(--neutral-soft-bg); }
.lc-article-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lc-related { display: flex; flex-direction: column; }

/* «در یک نگاه» */
.lc-prose .lc-keypoints {
    padding: 18px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent-soft-bg), transparent 80%), var(--neutral-soft-bg);
    border: 1px solid var(--neutral-border);
}
.lc-prose .lc-keypoints > p:first-child { font-family: var(--font-display-fa); font-weight: 800; color: var(--accent-gold); margin-bottom: 6px; }
.lc-prose .lc-keypoints ul { gap: 4px; }

/* Callouts */
.lc-prose .lc-callout {
    padding: 14px 18px;
    border-radius: 14px;
    border-inline-start: 4px solid var(--callout);
    background-color: var(--callout-bg);
}
.lc-prose .lc-callout > strong:first-child { display: block; margin-bottom: 2px; color: var(--callout); font-family: var(--font-display-fa); }
.lc-prose .lc-callout p { margin: 0; }
.lc-prose .lc-tip  { --callout: #1F7A4C; --callout-bg: rgba(31, 122, 76, 0.08); }
.lc-prose .lc-warn { --callout: #B23A48; --callout-bg: rgba(178, 58, 72, 0.08); }
[data-theme="dark"] .lc-prose .lc-tip  { --callout: #5FCB93; --callout-bg: rgba(95, 203, 147, 0.1); }
[data-theme="dark"] .lc-prose .lc-warn { --callout: #EE8290; --callout-bg: rgba(238, 130, 144, 0.1); }

/* Phrase cards */
.lc-prose .lc-phrases {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.lc-prose .lc-phrases li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--neutral-border);
    border-radius: 14px;
    background-color: var(--color-surface);
    line-height: 1.7;
}
.lc-prose .lc-phrases li::marker { content: none; }
.lc-prose .lc-phrases b { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; color: var(--primary-navy); text-align: left; }
.lc-prose .lc-phrases span:not([lang]) { font-size: 13px; color: var(--ink-soft); }

/* Right / wrong pairs */
.lc-prose .lc-pair { display: grid; gap: 6px; padding: 12px 16px; border-radius: 14px; background-color: var(--neutral-soft-bg); border: 1px solid var(--neutral-border); }
.lc-prose .lc-pair > span { unicode-bidi: plaintext; text-align: right; }
.lc-prose .lc-pair .no  { color: #B23A48; text-decoration: line-through; text-decoration-thickness: 1px; }
.lc-prose .lc-pair .yes { color: #1F7A4C; font-weight: 700; }
[data-theme="dark"] .lc-prose .lc-pair .no  { color: #EE8290; }
[data-theme="dark"] .lc-prose .lc-pair .yes { color: #5FCB93; }
.lc-prose .lc-pair small { color: var(--ink-soft); font-size: 13px; }

/* FAQ */
.lc-prose .lc-faq { display: grid; gap: 8px; }
.lc-prose .lc-faq details { border: 1px solid var(--neutral-border); border-radius: 14px; background-color: var(--color-surface); padding: 12px 16px; }
.lc-prose .lc-faq summary { cursor: pointer; font-family: var(--font-display-fa); font-weight: 800; color: var(--primary-navy); list-style: none; }
.lc-prose .lc-faq summary::-webkit-details-marker { display: none; }
.lc-prose .lc-faq summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--accent-gold); font-weight: 900; }
.lc-prose .lc-faq details[open] summary::before { content: '−'; }
.lc-prose .lc-faq details p { margin: 8px 0 0; color: var(--ink-soft); }

.lc-prose [lang="de"] { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 0.94em; }
.lc-prose h2 [lang="de"], .lc-prose h3 [lang="de"] { font-weight: 800; }

@media (max-width: 768px) {
    .lc-post-grid { grid-template-columns: 1fr; }
    .lc-prose .lc-phrases { grid-template-columns: 1fr 1fr; }
}

/* An image placed inside an article's text (blog «تصویر» block). */
.lc-article-figure { margin: var(--space-5, 20px) 0; }
.lc-article-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md, 12px); }
.lc-article-figure figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink-muted, #6b7280); text-align: center; }

/* ============================================================
   BLOG THEME — the same look as the free course (css/pages/course.css):
   warm paper surfaces, one accent per category, Kalameh for every word,
   course-style tables, boxes and cards; the list is four columns.
   ============================================================ */
.page-blog {
    --bl-surface: #FFFFFF;
    --bl-soft: #FBF9F4;
    --bl-border: #E5DFCD;
    --bl-text: #24211C;
    --bl-text-2: #6B6357;
    --bl-muted: #746E5F;
    --bl-shadow: 0 6px 20px rgba(36, 33, 28, 0.08);
    --bl-accent: #2B5C82;
}
[data-theme="dark"] .page-blog {
    --bl-surface: #1B1F26;
    --bl-soft: #20242C;
    --bl-border: rgba(226, 220, 199, 0.12);
    --bl-text: #EDEAE1;
    --bl-text-2: rgba(237, 234, 225, 0.72);
    --bl-muted: rgba(237, 234, 225, 0.48);
    --bl-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
[data-cat="study"]     { --cat: #13767A; --cat-soft: rgba(19, 118, 122, 0.1); }
[data-cat="migration"] { --cat: #4E6B1F; --cat-soft: rgba(78, 107, 31, 0.1); }
[data-theme="dark"] [data-cat="study"]     { --cat: #54C2C6; }
[data-theme="dark"] [data-cat="migration"] { --cat: #A6C56A; }

.page-blog .lc-page, .page-blog .lc-page *, .page-blog .lc-page [lang="de"] { font-family: 'Kalameh', sans-serif; }
.page-blog .lc-page { color: var(--bl-text); }
.page-blog .lc-blog-index { max-width: 1240px; }
.page-blog .lc-article { max-width: 1040px; --bl-accent: var(--cat, #2B5C82); }
.page-blog .lc-article[data-cat] { --bl-accent: var(--cat); }

/* panels */
.page-blog .lc-level-hero, .page-blog .lc-article-head, .page-blog .lc-section {
    background: var(--bl-surface); border: 1px solid var(--bl-border); box-shadow: var(--bl-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 28px;
}
.page-blog .lc-level-hero { padding: 36px 28px; }
.page-blog .lc-lead, .page-blog .lc-article-meta, .page-blog .lc-post-meta { color: var(--bl-text-2); }
.page-blog .lc-article-title, .page-blog .lc-level-name { font-weight: 900; color: var(--bl-text); }
.page-blog .lc-article-head .lc-lead { font-size: 16px; line-height: 2; }
.page-blog .lc-article-cover { border-radius: 24px; overflow: hidden; border: 1px solid var(--bl-border); box-shadow: var(--bl-shadow); }

/* filter */
.page-blog .lc-filter-btn { background: var(--bl-surface); border-color: var(--bl-border); color: var(--bl-text-2); font-weight: 800; }
.page-blog .lc-filter-btn:hover { border-color: var(--bl-accent); color: var(--bl-text); }
.page-blog .lc-filter-btn.is-active { background: var(--bl-text); color: var(--bl-surface); border-color: transparent; }

/* four-column list */
.page-blog .lc-post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.page-blog .lc-post-card.glass-panel {
    background: var(--bl-surface); border: 1px solid var(--bl-border); box-shadow: var(--bl-shadow); border-radius: 20px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.page-blog .lc-post-card:hover { transform: translateY(-4px); border-color: var(--cat); box-shadow: 0 14px 30px rgba(36, 33, 28, 0.12); }
.page-blog .lc-post-thumb { border-bottom: 1px solid var(--bl-border); background: var(--bl-soft); }
.page-blog .lc-post-body { padding: 14px 14px 16px; gap: 8px; }
.page-blog .lc-post-body .lc-post-title { font-size: 15px; font-weight: 900; line-height: 1.7; color: var(--bl-text); }
.page-blog .lc-post-cat { font-weight: 800; }
.page-blog .lc-related .lc-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* article body */
.page-blog .lc-section.lc-prose { padding: 32px; font-size: 16px; line-height: 2.05; color: var(--bl-text); }
.page-blog .lc-prose h2 { margin-top: 34px; font-size: 21px; font-weight: 900; color: var(--bl-text); padding-inline-start: 12px; border-inline-start: 4px solid var(--bl-accent); }
.page-blog .lc-prose h3 { font-size: 17px; font-weight: 800; color: var(--bl-accent); }
.page-blog .lc-prose li::marker { color: var(--bl-accent); font-weight: 900; }
.page-blog .lc-prose a { color: var(--bl-accent); }
.page-blog .lc-prose strong { color: var(--bl-text); font-weight: 800; }
.page-blog .lc-prose [lang="de"] { font-weight: 700; font-size: 1em; }

.page-blog .lc-prose .lc-keypoints { background: var(--bl-soft); border: 2px dashed var(--bl-accent); }
.page-blog .lc-prose .lc-keypoints > p:first-child { color: var(--bl-accent); font-weight: 900; font-size: 16px; }
.page-blog .lc-prose .lc-keypoints ul { list-style: none; padding: 0; gap: 6px; }
.page-blog .lc-prose .lc-keypoints li { position: relative; padding-inline-start: 28px; }
.page-blog .lc-prose .lc-keypoints li::before {
    content: '✓'; position: absolute; inset-inline-start: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--bl-accent); line-height: 1;
}

/* tables like the course and the paid notes */
.page-blog .lc-prose-table { border-color: var(--bl-border); border-radius: 16px; }
.page-blog .lc-prose table { font-size: 15px; }
.page-blog .lc-prose th { padding: 10px 14px; text-align: start; font-weight: 900; font-size: 14px; color: var(--bl-accent); background: var(--bl-soft); border-bottom: 2px solid var(--bl-accent); }
.page-blog .lc-prose td { padding: 9px 14px; border-bottom: 0; border-top: 1px solid var(--bl-border); vertical-align: top; white-space: normal; min-width: 110px; }
.page-blog .lc-prose tbody tr:nth-child(even) td { background: var(--bl-soft); }

.page-blog .lc-prose .lc-callout { border-radius: 16px; border-inline-start-width: 4px; }
.page-blog .lc-prose .lc-callout > strong:first-child { font-weight: 900; font-size: 14px; }
.page-blog .lc-prose .lc-tip { --callout: var(--bl-accent); --callout-bg: var(--cat-soft, rgba(43, 92, 130, 0.09)); }
.page-blog .lc-prose .lc-warn { --callout: #B23A2E; --callout-bg: #FBEAE6; }
[data-theme="dark"] .page-blog .lc-prose .lc-warn { --callout: #E2766A; --callout-bg: rgba(226, 118, 106, 0.14); }

.page-blog .lc-prose .lc-phrases li { background: var(--bl-soft); border-color: var(--bl-border); border-inline-start: 4px solid var(--bl-accent); }
.page-blog .lc-prose .lc-phrases b { color: var(--bl-text); font-weight: 800; }
.page-blog .lc-prose .lc-phrases span:not([lang]) { color: var(--bl-text-2); }
.page-blog .lc-prose .lc-pair { background: var(--bl-soft); border-color: var(--bl-border); }
.page-blog .lc-prose .lc-pair > span:not([class]) { font-weight: 800; }
.page-blog .lc-prose .lc-pair small { color: var(--bl-text-2); }
.page-blog .lc-prose .lc-faq h2 { margin-bottom: 4px; }
.page-blog .lc-prose .lc-faq details { background: var(--bl-soft); border-color: var(--bl-border); border-radius: 16px; }
.page-blog .lc-prose .lc-faq summary { color: var(--bl-text); font-weight: 900; }
.page-blog .lc-prose .lc-faq summary::before { color: var(--bl-accent); }
.page-blog .lc-prose .lc-faq details p { color: var(--bl-text-2); }
.page-blog .lc-cta { padding: 28px; border-radius: 28px; } /* stays the dark navy panel */
.page-blog .lc-cta h2 { color: #F8FAFC; }

@media (max-width: 1100px) {
    .page-blog .lc-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .page-blog .lc-post-grid, .page-blog .lc-related .lc-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-blog .lc-section.lc-prose { padding: 20px 16px; font-size: 15.5px; }
}
@media (max-width: 560px) {
    .page-blog .lc-post-grid, .page-blog .lc-related .lc-post-grid { grid-template-columns: 1fr; }
    .page-blog .lc-prose table { font-size: 13.5px; }
    .page-blog .lc-prose th, .page-blog .lc-prose td { padding: 8px 10px; min-width: 0; }
}