/* Blog page header now lives in academy.css as the shared .cs-academy-page-header
   component (see archive-cs_blog_course.php / single-cs_blog_course.php). */

/* ── Blogs landing page (Blog Course grid) ─────────────────────────── */
.cs-blog-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6, 24px);
}
.cs-blog-course-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.cs-blog-course-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(16,24,40,.12); }
.cs-blog-course-card__image { display: block; aspect-ratio: 16/9; background: linear-gradient(135deg, #eef2ff, #f5f3ff); overflow: hidden; }
.cs-blog-course-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-blog-course-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-academy-primary, #0078d7); opacity: .5; }
.cs-blog-course-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-blog-course-card__title { margin: 0; font-size: 19px; line-height: 1.35; background: var(--color-primary); padding: 10px 14px; border-radius: 6px; }
.cs-blog-course-card__title a { color: #fff; text-decoration: none; }
.cs-blog-course-card__title a:hover { color: #fff; opacity: .85; }
.cs-blog-course-card__excerpt { margin: 0; font-size: 13.5px; color: var(--color-text-muted, #667085); line-height: 1.6; flex: 1; }
.cs-blog-course-card__stats { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-muted, #667085); }
.cs-blog-course-card__stats span[aria-hidden] { opacity: .5; }
.cs-blog-course-card__read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-academy-primary, #0078d7);
    text-decoration: none;
}
.cs-blog-course-card__read svg { transition: transform .2s ease; }
.cs-blog-course-card__read:hover svg { transform: translateX(3px); }

/* ── Hub layout ─────────────────────────────────────────────────────── */
.cs-blog-hub__empty { text-align: center; padding: var(--space-16, 64px) 0; color: var(--color-text-muted, #667085); }

.cs-blog-hub__layout,
.cs-blog-single-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8, 32px);
    align-items: start;
}

/* ── Sidebar (shared: hub + single) ────────────────────────────────── */
.cs-blog-sidebar { position: sticky; top: var(--space-8, 32px); }
.cs-blog-sidebar__inner {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
    border-radius: 14px;
    padding: var(--space-4, 16px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.cs-blog-sidebar__heading {
    font-size: var(--text-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted, #667085);
    margin: 0 0 10px;
}
.cs-blog-sidebar__module { border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.06)); }
.cs-blog-sidebar__module:last-child { border-bottom: none; }
.cs-blog-sidebar__module-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    cursor: pointer;
    list-style: none;
}
.cs-blog-sidebar__module-head::-webkit-details-marker { display: none; }
.cs-blog-sidebar__chevron { flex-shrink: 0; color: var(--color-text-muted, #98a2b3); transition: transform .2s ease; }
.cs-blog-sidebar__module[open] > .cs-blog-sidebar__module-head .cs-blog-sidebar__chevron { transform: rotate(90deg); }
.cs-blog-sidebar__module-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text, #111827);
    text-decoration: none;
    line-height: 1.35;
}
.cs-blog-sidebar__module-name:hover,
.cs-blog-sidebar__module-name.is-active { color: var(--color-academy-primary, #0078d7); }
.cs-blog-sidebar__count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted, #667085);
    background: var(--color-primary-10, rgba(0,120,215,.08));
    padding: 2px 7px;
    border-radius: 999px;
}
.cs-blog-sidebar__titles { list-style: none; margin: 0 0 8px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 2px; }
.cs-blog-sidebar__title-link {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-muted, #475467);
    text-decoration: none;
    line-height: 1.4;
}
.cs-blog-sidebar__title-link:hover { background: var(--color-primary-10, rgba(0,120,215,.06)); color: var(--color-academy-primary, #0078d7); }
.cs-blog-sidebar__title-link.is-active {
    background: var(--color-primary-10, rgba(0,120,215,.1));
    color: var(--color-academy-primary, #0078d7);
    font-weight: 600;
}

/* ── Module grid (hub main area) ───────────────────────────────────── */
.cs-blog-grid[hidden] { display: none; }
.cs-blog-grid__title { margin: 0 0 var(--space-4, 16px); font-size: 20px; }
.cs-blog-grid__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5, 20px);
}
.cs-blog-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cs-blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16,24,40,.1); }
.cs-blog-card__image { display: block; aspect-ratio: 16/10; background: #f2f4f7; overflow: hidden; }
.cs-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-blog-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #98a2b3; }
.cs-blog-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cs-blog-card__title { margin: 0; font-size: 15.5px; line-height: 1.4; }
.cs-blog-card__title a { color: var(--color-text, #111827); text-decoration: none; }
.cs-blog-card__title a:hover { color: var(--color-academy-primary, #0078d7); }
.cs-blog-card__excerpt { margin: 0; font-size: 13px; color: var(--color-text-muted, #667085); line-height: 1.5; flex: 1; }
.cs-blog-card__read {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-academy-primary, #0078d7);
    text-decoration: none;
    margin-top: auto;
}
.cs-blog-card__read svg { transition: transform .2s ease; }
.cs-blog-card__read:hover svg { transform: translateX(3px); }

/* ── Single blog post ───────────────────────────────────────────────── */
.cs-blog-single__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-muted, #667085); margin-bottom: 12px; }
.cs-blog-single__breadcrumb a { color: var(--color-text-muted, #667085); text-decoration: none; }
.cs-blog-single__breadcrumb a:hover { color: var(--color-academy-primary, #0078d7); }
.cs-blog-single__title { font-size: clamp(24px, 3vw, 34px); line-height: 1.25; margin: 0 0 12px; }
.cs-blog-single__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted, #667085); margin-bottom: var(--space-5, 20px); }
.cs-blog-single__meta-dot { opacity: .6; }
.cs-blog-single__thumb { border-radius: 16px; overflow: hidden; margin-bottom: var(--space-6, 24px); }
.cs-blog-single__thumb img { width: 100%; height: auto; display: block; }
.cs-blog-single__content { font-size: 16px; line-height: 1.75; color: var(--color-text, #1d2939); }
.cs-blog-single__content p { margin: 0 0 1.2em; }
.cs-blog-single__content img { max-width: 100%; border-radius: 12px; height: auto; }
.cs-blog-single__content h2,
.cs-blog-single__content h3 { margin: 1.6em 0 .6em; }
.cs-blog-video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; margin: 2em 0; border-radius: 12px; overflow: hidden; background: #000; }
.cs-blog-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-blog-single__footer { margin-top: var(--space-8, 32px); padding-top: var(--space-6, 24px); border-top: 1px solid var(--color-border, rgba(0,0,0,0.08)); }

.cs-blog-like {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border, #d0d5dd);
    background: var(--color-surface, #fff);
    color: var(--color-text, #344054);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cs-blog-like:hover { transform: translateY(-2px); border-color: #ff6b81; color: #e11d48; }
.cs-blog-like:active { transform: translateY(0) scale(.97); }
.cs-blog-like svg { color: inherit; }
.cs-blog-like.is-liked { background: #fff1f2; border-color: #ff6b81; color: #e11d48; }
.cs-blog-like.cs-blog-like--pop svg { animation: cs-blog-like-pop .35s ease; }
.cs-blog-like--compact {
    padding: 3px 10px 3px 8px;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    border-width: 1px;
}
@keyframes cs-blog-like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (max-width: 900px) {
    .cs-blog-hub__layout,
    .cs-blog-single-layout { grid-template-columns: 1fr; }
    .cs-blog-sidebar { position: static; order: 2; }
    .cs-blog-sidebar__inner { max-height: none; }
    .cs-blog-single { order: 1; }
}

/* ── Article content (.dax-article) — see docs/blog-article-html-guide.md ──
   Every class here is authored by hand into the post editor; this is the
   only place their styling is defined. */
.dax-article { font-size: 16px; line-height: 1.75; color: var(--color-text); }
.dax-article > h1:first-child { margin-top: 0; }
.dax-article h2 {
    margin: 2em 0 .7em;
    padding-bottom: .5em;
    font-size: 24px;
    line-height: 1.35;
    color: var(--color-secondary);
    border-bottom: 2px solid var(--color-border);
}
.dax-article h3 { margin: 1.6em 0 .6em; font-size: 18.5px; line-height: 1.4; color: var(--color-text); }
.dax-article p { margin: 0 0 1.2em; }
.dax-article strong { color: var(--color-secondary); font-weight: 700; }
.dax-article em { font-style: italic; color: var(--color-text-muted); }
.dax-article a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-primary-20); }
.dax-article a:hover { color: var(--color-secondary); text-decoration-color: currentColor; }
.dax-article hr { border: none; border-top: 1px solid var(--color-border); margin: 2.5em 0; }
.dax-article ul,
.dax-article ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.dax-article li { margin-bottom: .5em; line-height: 1.65; }
.dax-article li::marker { color: var(--color-primary); font-weight: 700; }

.dax-article .article-intro {
    padding: 20px 24px;
    margin-bottom: 2em;
    background: var(--color-primary-10);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 12px 12px 0;
    color: var(--color-text-muted);
    font-size: 16.5px;
}
.dax-article .article-intro p:last-child { margin-bottom: 0; }

.dax-article .article-conclusion {
    margin-top: 3em;
    padding: 28px;
    background: linear-gradient(135deg, var(--color-secondary), #002a4d);
    border-radius: 16px;
    color: rgba(255,255,255,.92);
}
.dax-article .article-conclusion h2 { margin-top: 0; color: #fff; border-bottom-color: rgba(255,255,255,.2); }
.dax-article .article-conclusion p { color: rgba(255,255,255,.85); margin-bottom: 0; }
.dax-article .article-conclusion a { color: var(--color-accent); }
.dax-article .article-conclusion strong { color: #fff; }
.dax-article .article-conclusion em { color: rgba(255,255,255,.7); }

/* Code blocks */
.dax-article .code-block {
    position: relative;
    margin: 1.8em 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0d1b2a;
    box-shadow: var(--shadow-md);
}
.dax-article .code-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: #14273b;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.dax-article .code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dax-article .code-copy-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.dax-article .code-copy-btn.is-copied { background: var(--color-support); border-color: var(--color-support); color: #fff; }
.dax-article .code-copy-btn--floating { position: absolute; top: 12px; right: 12px; z-index: 2; }
.dax-article .code-block pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    background: transparent;
}
.dax-article .code-block code {
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.7;
    color: #d6e8ff;
    white-space: pre;
    background: none;
}

/* Tables */
.dax-article .table-wrapper { overflow-x: auto; margin: 1.8em 0; border-radius: 12px; border: 1px solid var(--color-border); }
.dax-article table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dax-article thead { background: var(--color-primary); }
.dax-article th { padding: 12px 16px; color: #fff; font-weight: 700; text-align: left; white-space: nowrap; }
.dax-article td { padding: 12px 16px; border-top: 1px solid var(--color-border); color: var(--color-text); }
.dax-article tbody tr:nth-child(even) { background: var(--color-primary-10); }
.dax-article tbody tr:hover { background: var(--color-primary-20); }
.dax-article .comparison-table thead { background: var(--color-secondary); }
.dax-article .result-table thead { background: var(--color-support); }

/* Learning callouts */
.dax-article .note,
.dax-article .exercise {
    position: relative;
    margin: 1.8em 0;
    padding: 18px 20px 18px 56px;
    border-radius: 12px;
    font-size: 15px;
}
.dax-article .note :last-child,
.dax-article .exercise :last-child { margin-bottom: 0; }
.dax-article .note {
    background: var(--color-primary-10);
    border: 1px solid var(--color-primary-20);
}
.dax-article .note::before {
    content: 'i';
    position: absolute;
    left: 18px;
    top: 18px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-style: italic;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dax-article .exercise {
    background: #fff4ed;
    border: 1px solid #ffd9c2;
}
.dax-article .exercise::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 21px;
    width: 18px;
    height: 18px;
    background: var(--color-highlight);
    clip-path: polygon(20% 0%, 100% 50%, 20% 100%, 0% 80%, 0% 20%);
}
.dax-article .exercise h3 { margin-top: 0; }

@media (max-width: 640px) {
    .dax-article .article-intro,
    .dax-article .article-conclusion,
    .dax-article .note,
    .dax-article .exercise { padding-left: 20px; }
    .dax-article .note::before,
    .dax-article .exercise::before { display: none; }
}