/**
 * Blog Stylesheet — Prop Trading Sites
 * Comprehensive styles for blog posts, listings, and components.
 * Uses CSS variables from the main site design system (variables.css).
 */

/* ==========================================================================
   1. BLOG POST BODY — Typography & Spacing
   ========================================================================== */

.blog-post-body {
    font-family: var(--font-main, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--text-base, 1.063rem);
    line-height: var(--leading-relaxed, 1.75);
    color: var(--color-text, #E2E8F0);
    max-width: 780px;
    margin: 0 auto;
}

.blog-post-body p {
    font-size: var(--text-base, 1.063rem);
    line-height: var(--leading-relaxed, 1.75);
    color: var(--color-text, #E2E8F0);
    margin-bottom: var(--space-lg, 1.5rem);
}

.blog-post-body p + p {
    margin-top: 0;
}

.blog-post-body strong,
.blog-post-body b {
    font-weight: var(--font-bold, 700);
    color: var(--color-text-white, #FFFFFF);
}

.blog-post-body em,
.blog-post-body i {
    font-style: italic;
}

/* ==========================================================================
   2. IMAGES — Centered, rounded
   ========================================================================== */

.blog-post-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-2xl, 3rem) auto;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.5));
}

/* ==========================================================================
   3. TABLES — Styled with header, alternating rows
   ========================================================================== */

.article-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-xl, 2rem) 0;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
}

.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.938rem);
    line-height: 1.5;
    background: var(--color-bg-card, #1A1A2E);
}

.article-table thead th {
    background: var(--color-secondary, #2D1B69);
    color: var(--color-text-white, #FFFFFF);
    font-weight: var(--font-semibold, 600);
    text-align: left;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    border-bottom: 2px solid var(--color-primary, #FF2D78);
    white-space: nowrap;
}

.article-table tbody td {
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
    color: var(--color-text, #E2E8F0);
    vertical-align: top;
}

.article-table tbody tr:nth-child(even) {
    background: var(--color-bg-alt, rgba(255,255,255,0.03));
}

.article-table tbody tr:hover {
    background: rgba(var(--color-primary-rgb, 255,45,120), 0.06);
}

.article-table tbody tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   4. TIP BOX — Left accent, light background
   ========================================================================== */

.article-tip {
    position: relative;
    background: rgba(var(--color-primary-rgb, 255,45,120), 0.08);
    border-left: 4px solid var(--color-primary, #FF2D78);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem);
    margin: var(--space-xl, 2rem) 0;
    font-size: var(--text-sm, 0.938rem);
    line-height: var(--leading-relaxed, 1.75);
    color: var(--color-text, #E2E8F0);
}

.article-tip strong:first-child {
    display: block;
    color: var(--color-primary, #FF2D78);
    font-weight: var(--font-bold, 700);
    margin-bottom: var(--space-xs, 0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs, 0.813rem);
}

/* ==========================================================================
   5. KEY / INFO BOX — Blue-tinted
   ========================================================================== */

.article-key {
    background: rgba(var(--color-secondary-rgb, 45,27,105), 0.15);
    border: 1px solid rgba(var(--color-secondary-rgb, 45,27,105), 0.35);
    border-left: 4px solid var(--color-info, #63B3ED);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem);
    margin: var(--space-xl, 2rem) 0;
    font-size: var(--text-sm, 0.938rem);
    line-height: var(--leading-relaxed, 1.75);
    color: var(--color-text, #E2E8F0);
}

.article-key strong:first-child {
    display: block;
    color: var(--color-info, #63B3ED);
    font-weight: var(--font-bold, 700);
    margin-bottom: var(--space-xs, 0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs, 0.813rem);
}

/* ==========================================================================
   6. BLOCKQUOTES — Left border, italic
   ========================================================================== */

.blog-post-body blockquote {
    border-left: 4px solid var(--color-accent, #7B5EA7);
    margin: var(--space-xl, 2rem) 0;
    padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem);
    background: rgba(var(--color-secondary-rgb, 45,27,105), 0.1);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    font-style: italic;
    color: var(--color-text-light, #A0AEC0);
    font-size: var(--text-base, 1.063rem);
    line-height: var(--leading-relaxed, 1.75);
}

.blog-post-body blockquote p {
    margin-bottom: var(--space-sm, 0.5rem);
    color: inherit;
}

.blog-post-body blockquote p:last-child {
    margin-bottom: 0;
}

.blog-post-body blockquote cite,
.blog-post-body blockquote footer {
    display: block;
    margin-top: var(--space-md, 1rem);
    font-style: normal;
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-muted, #718096);
    font-weight: var(--font-medium, 500);
}

.blog-post-body blockquote cite::before,
.blog-post-body blockquote footer::before {
    content: "\2014\00a0";
}

/* ==========================================================================
   7. EXPERT QUOTES — Large quote marks
   ========================================================================== */

.blog-post-body blockquote.expert-quote,
.expert-quote {
    position: relative;
    border-left: none;
    background: var(--gradient-card, linear-gradient(135deg, #1A1A2E 0%, #12122A 100%));
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-2xl, 3rem) var(--space-xl, 2rem) var(--space-xl, 2rem);
    margin: var(--space-2xl, 3rem) 0;
    text-align: center;
    font-style: italic;
}

.blog-post-body blockquote.expert-quote::before,
.expert-quote::before {
    content: "\201C";
    position: absolute;
    top: -0.15em;
    left: var(--space-lg, 1.5rem);
    font-size: 5rem;
    line-height: 1;
    color: var(--color-primary, #FF2D78);
    opacity: 0.35;
    font-family: Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   8. STATS ROW — 3-column grid with big numbers
   ========================================================================== */

.article-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg, 1.5rem);
    margin: var(--space-2xl, 3rem) 0;
}

.article-stat-card {
    background: var(--gradient-card, linear-gradient(135deg, #1A1A2E 0%, #12122A 100%));
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
    text-align: center;
    transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease);
}

.article-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover, 0 8px 30px rgba(0,0,0,0.6));
}

.article-stat-card .stat-number {
    display: block;
    font-size: var(--text-3xl, 2.25rem);
    font-weight: var(--font-extrabold, 800);
    background: linear-gradient(135deg, var(--color-primary, #FF2D78), var(--color-accent, #7B5EA7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: var(--leading-tight, 1.2);
    margin-bottom: var(--space-xs, 0.25rem);
}

.article-stat-card .stat-label {
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-light, #A0AEC0);
    font-weight: var(--font-medium, 500);
}

/* ==========================================================================
   9. AUTHOR BIO CARD
   ========================================================================== */

.author-bio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg, 1.5rem);
    background: var(--color-bg-card, #1A1A2E);
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-xl, 2rem);
    margin: var(--space-3xl, 4rem) 0 var(--space-xl, 2rem);
}

.author-bio .team-avatar,
.author-bio .author-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    background: var(--gradient-secondary, linear-gradient(135deg, #2D1B69, #1A0F40));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white, #FFFFFF);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-xl, 1.375rem);
}

.author-bio .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.author-bio .author-info {
    flex: 1;
}

.author-bio .author-name {
    font-size: var(--text-lg, 1.188rem);
    font-weight: var(--font-bold, 700);
    color: var(--color-text-white, #FFFFFF);
    margin-bottom: var(--space-xs, 0.25rem);
}

.author-bio .author-role {
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-primary, #FF2D78);
    font-weight: var(--font-medium, 500);
    margin-bottom: var(--space-sm, 0.5rem);
}

.author-bio .author-desc {
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-light, #A0AEC0);
    line-height: var(--leading-relaxed, 1.75);
}

/* ==========================================================================
   10. BLOG CARD GRID — Post listing
   ========================================================================== */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl, 2rem);
    margin: var(--space-2xl, 3rem) 0;
}

/* ==========================================================================
   11. BLOG CARD — Individual post card
   ========================================================================== */

.blog-card {
    background: var(--color-bg-card, #1A1A2E);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    transition: transform var(--transition-base, 250ms ease),
                box-shadow var(--transition-base, 250ms ease),
                border-color var(--transition-base, 250ms ease);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover, 0 8px 30px rgba(0,0,0,0.6));
    border-color: rgba(var(--color-primary-rgb, 255,45,120), 0.3);
}

.blog-card .blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-card .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow, 400ms ease);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card .blog-card-body {
    padding: var(--space-lg, 1.5rem);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card .blog-card-title {
    font-size: var(--text-lg, 1.188rem);
    font-weight: var(--font-bold, 700);
    color: var(--color-text-white, #FFFFFF);
    line-height: var(--leading-tight, 1.2);
    margin-bottom: var(--space-sm, 0.5rem);
}

.blog-card .blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast, 150ms ease);
}

.blog-card .blog-card-title a:hover {
    color: var(--color-primary, #FF2D78);
}

.blog-card .blog-card-excerpt {
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-light, #A0AEC0);
    line-height: var(--leading-relaxed, 1.75);
    margin-bottom: var(--space-md, 1rem);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card .blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
    font-size: var(--text-xs, 0.813rem);
    color: var(--color-text-muted, #718096);
}

.blog-card .read-more {
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-primary, #FF2D78);
    font-weight: var(--font-semibold, 600);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms ease);
}

.blog-card .read-more:hover {
    color: var(--color-primary-light, #FF5C96);
}

.blog-card .read-more::after {
    content: " \2192";
}

/* ==========================================================================
   12. BLOG META — Date, author, category line
   ========================================================================== */

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md, 1rem);
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-muted, #718096);
    margin-bottom: var(--space-lg, 1.5rem);
}

.blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
}

.blog-meta .meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-muted, #718096);
    display: inline-block;
}

.blog-meta a {
    color: var(--color-primary, #FF2D78);
    text-decoration: none;
    font-weight: var(--font-medium, 500);
}

.blog-meta a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   13. BLOG TAGS — Pill-shaped badges
   ========================================================================== */

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
    margin: var(--space-lg, 1.5rem) 0;
}

.blog-tag {
    display: inline-block;
    padding: var(--space-xs, 0.25rem) var(--space-md, 1rem);
    background: rgba(var(--color-secondary-rgb, 45,27,105), 0.25);
    color: var(--color-accent-light, #9B7EC7);
    border: 1px solid rgba(var(--color-secondary-rgb, 45,27,105), 0.4);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.813rem);
    font-weight: var(--font-medium, 500);
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease),
                border-color var(--transition-fast, 150ms ease);
    letter-spacing: 0.02em;
}

.blog-tag:hover {
    background: rgba(var(--color-primary-rgb, 255,45,120), 0.15);
    color: var(--color-primary, #FF2D78);
    border-color: rgba(var(--color-primary-rgb, 255,45,120), 0.4);
}

/* ==========================================================================
   14. BLOG PAGINATION
   ========================================================================== */

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    margin: var(--space-3xl, 4rem) 0 var(--space-2xl, 3rem);
    font-size: var(--text-sm, 0.938rem);
}

.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm, 0.5rem);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    color: var(--color-text-light, #A0AEC0);
    text-decoration: none;
    font-weight: var(--font-medium, 500);
    transition: all var(--transition-fast, 150ms ease);
    background: var(--color-bg-card, #1A1A2E);
}

.blog-pagination a:hover {
    background: rgba(var(--color-primary-rgb, 255,45,120), 0.1);
    border-color: var(--color-primary, #FF2D78);
    color: var(--color-primary, #FF2D78);
}

.blog-pagination .active,
.blog-pagination .current {
    background: var(--color-primary, #FF2D78);
    border-color: var(--color-primary, #FF2D78);
    color: var(--color-text-white, #FFFFFF);
    font-weight: var(--font-bold, 700);
}

.blog-pagination .disabled {
    opacity: 0.35;
    pointer-events: none;
}

.blog-pagination .prev,
.blog-pagination .next {
    font-weight: var(--font-semibold, 600);
}

/* ==========================================================================
   15. BLOG HERO — Page hero for blog index
   ========================================================================== */

.blog-hero {
    text-align: center;
    padding: var(--space-4xl, 6rem) var(--space-lg, 1.5rem) var(--space-2xl, 3rem);
    background: var(--gradient-hero, linear-gradient(180deg, #0A0A14 0%, #1A0A3E 40%, #2D1B69 70%, #0A0A14 100%));
    position: relative;
    overflow: hidden;
}

.blog-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary, #FF2D78), transparent);
    opacity: 0.4;
}

.blog-hero h1 {
    font-size: var(--text-4xl, 2.75rem);
    font-weight: var(--font-extrabold, 800);
    color: var(--color-text-white, #FFFFFF);
    margin-bottom: var(--space-md, 1rem);
    line-height: var(--leading-tight, 1.2);
}

.blog-hero p {
    font-size: var(--text-lg, 1.188rem);
    color: var(--color-text-light, #A0AEC0);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-relaxed, 1.75);
}

/* ==========================================================================
   16. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-muted, #718096);
    padding: var(--space-md, 1rem) 0;
    margin-bottom: var(--space-lg, 1.5rem);
}

.breadcrumb a {
    color: var(--color-text-light, #A0AEC0);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms ease);
}

.breadcrumb a:hover {
    color: var(--color-primary, #FF2D78);
}

.breadcrumb .separator {
    margin: 0 var(--space-xs, 0.25rem);
    color: var(--color-text-muted, #718096);
    user-select: none;
}

.breadcrumb .separator::after {
    content: "/";
}

.breadcrumb .current {
    color: var(--color-text, #E2E8F0);
    font-weight: var(--font-medium, 500);
}

/* ==========================================================================
   17. LISTS — UL / OL
   ========================================================================== */

.blog-post-body ul,
.blog-post-body ol {
    margin: 0 0 var(--space-lg, 1.5rem);
    padding-left: var(--space-xl, 2rem);
}

.blog-post-body ul {
    list-style: none;
}

.blog-post-body ul li {
    position: relative;
    padding-left: var(--space-md, 1rem);
    margin-bottom: var(--space-sm, 0.5rem);
    line-height: var(--leading-relaxed, 1.75);
    color: var(--color-text, #E2E8F0);
}

.blog-post-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #FF2D78);
}

.blog-post-body ol li {
    margin-bottom: var(--space-sm, 0.5rem);
    line-height: var(--leading-relaxed, 1.75);
    color: var(--color-text, #E2E8F0);
    padding-left: var(--space-xs, 0.25rem);
}

.blog-post-body ol li::marker {
    color: var(--color-primary, #FF2D78);
    font-weight: var(--font-bold, 700);
}

/* Nested lists */
.blog-post-body ul ul,
.blog-post-body ol ol,
.blog-post-body ul ol,
.blog-post-body ol ul {
    margin-top: var(--space-sm, 0.5rem);
    margin-bottom: var(--space-sm, 0.5rem);
}

/* ==========================================================================
   18. CODE BLOCKS — Inline code & pre blocks
   ========================================================================== */

.blog-post-body code {
    font-family: var(--font-mono, "SF Mono", Monaco, monospace);
    font-size: 0.875em;
    background: rgba(var(--color-secondary-rgb, 45,27,105), 0.3);
    color: var(--color-primary-light, #FF5C96);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.blog-post-body pre {
    margin: var(--space-xl, 2rem) 0;
    padding: var(--space-lg, 1.5rem);
    background: var(--color-bg-dark, #06060E);
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
    border-radius: var(--radius-lg, 12px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog-post-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text, #E2E8F0);
    line-height: 1.6;
}

/* ==========================================================================
   19. FIGURES / FIGCAPTIONS
   ========================================================================== */

.blog-post-body figure {
    margin: var(--space-2xl, 3rem) 0;
    text-align: center;
}

.blog-post-body figure img {
    margin: 0 auto var(--space-sm, 0.5rem);
}

.blog-post-body figcaption {
    font-size: var(--text-sm, 0.938rem);
    color: var(--color-text-muted, #718096);
    font-style: italic;
    line-height: var(--leading-normal, 1.5);
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   20. HEADINGS — h1, h2, h3, h4 in post body
   ========================================================================== */

.blog-post-header h1 {
    font-size: var(--text-3xl, 2.25rem);
    font-weight: var(--font-extrabold, 800);
    color: var(--color-text-white, #FFFFFF);
    line-height: var(--leading-tight, 1.2);
    margin-bottom: var(--space-md, 1rem);
}

.blog-post-body h2 {
    font-size: var(--text-2xl, 1.75rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.2);
    margin: var(--space-2xl, 3rem) 0 var(--space-md, 1rem);
    padding-bottom: var(--space-sm, 0.5rem);
    border-bottom: 2px solid rgba(var(--color-primary-rgb, 255,45,120), 0.2);
    background: linear-gradient(135deg, var(--color-text-white, #FFFFFF), var(--color-primary-light, #FF5C96));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-post-body h3 {
    font-size: var(--text-xl, 1.375rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-text-white, #FFFFFF);
    line-height: var(--leading-tight, 1.2);
    margin: var(--space-xl, 2rem) 0 var(--space-sm, 0.5rem);
}

.blog-post-body h4 {
    font-size: var(--text-lg, 1.188rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-accent-light, #9B7EC7);
    line-height: var(--leading-tight, 1.2);
    margin: var(--space-xl, 2rem) 0 var(--space-sm, 0.5rem);
}

/* ==========================================================================
   21. LINKS
   ========================================================================== */

.blog-post-body a {
    color: var(--color-primary, #FF2D78);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(var(--color-primary-rgb, 255,45,120), 0.4);
    transition: color var(--transition-fast, 150ms ease),
                text-decoration-color var(--transition-fast, 150ms ease);
}

.blog-post-body a:hover {
    color: var(--color-primary-light, #FF5C96);
    text-decoration-color: var(--color-primary-light, #FF5C96);
}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

.blog-post-body hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-light, rgba(255,255,255,0.12)), transparent);
    margin: var(--space-2xl, 3rem) 0;
}

/* ==========================================================================
   BLOG POST HEADER (single post)
   ========================================================================== */

.blog-post-header {
    margin-bottom: var(--space-xl, 2rem);
}

.blog-post-header .blog-category {
    display: inline-block;
    font-size: var(--text-xs, 0.813rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary, #FF2D78);
    margin-bottom: var(--space-sm, 0.5rem);
}

/* ==========================================================================
   FEATURED POST (large hero card at top of listing)
   ========================================================================== */

.blog-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl, 2rem);
    background: var(--color-bg-card, #1A1A2E);
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    margin-bottom: var(--space-2xl, 3rem);
    transition: box-shadow var(--transition-base, 250ms ease);
}

.blog-featured:hover {
    box-shadow: var(--shadow-card-hover, 0 8px 30px rgba(0,0,0,0.6));
}

.blog-featured .blog-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-featured .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-featured .blog-card-body {
    padding: var(--space-xl, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured .blog-card-title {
    font-size: var(--text-2xl, 1.75rem);
    font-weight: var(--font-bold, 700);
    color: var(--color-text-white, #FFFFFF);
    line-height: var(--leading-tight, 1.2);
    margin-bottom: var(--space-md, 1rem);
}

/* ==========================================================================
   TABLE OF CONTENTS (optional)
   ========================================================================== */

.article-toc {
    background: var(--color-bg-card, #1A1A2E);
    border: 1px solid var(--color-border-light, rgba(255,255,255,0.12));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-lg, 1.5rem);
    margin: var(--space-xl, 2rem) 0;
}

.article-toc h4 {
    font-size: var(--text-sm, 0.938rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-white, #FFFFFF);
    margin-bottom: var(--space-md, 1rem);
    padding-bottom: var(--space-sm, 0.5rem);
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-toc li {
    margin-bottom: var(--space-xs, 0.25rem);
}

.article-toc a {
    display: block;
    padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
    color: var(--color-text-light, #A0AEC0);
    text-decoration: none;
    font-size: var(--text-sm, 0.938rem);
    border-radius: var(--radius-sm, 4px);
    transition: all var(--transition-fast, 150ms ease);
}

.article-toc a:hover {
    color: var(--color-primary, #FF2D78);
    background: rgba(var(--color-primary-rgb, 255,45,120), 0.06);
}

/* ==========================================================================
   SHARE BAR
   ========================================================================== */

.blog-share {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1rem);
    margin: var(--space-xl, 2rem) 0;
    padding: var(--space-md, 1rem) 0;
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.blog-share span {
    font-size: var(--text-sm, 0.938rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-text-light, #A0AEC0);
}

.blog-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-card, #1A1A2E);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    color: var(--color-text-light, #A0AEC0);
    text-decoration: none;
    transition: all var(--transition-fast, 150ms ease);
}

.blog-share a:hover {
    background: var(--color-primary, #FF2D78);
    border-color: var(--color-primary, #FF2D78);
    color: var(--color-text-white, #FFFFFF);
}

/* ==========================================================================
   RELATED POSTS (bottom of single post)
   ========================================================================== */

.related-posts {
    margin-top: var(--space-3xl, 4rem);
    padding-top: var(--space-2xl, 3rem);
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.related-posts h3 {
    font-size: var(--text-xl, 1.375rem);
    font-weight: var(--font-bold, 700);
    color: var(--color-text-white, #FFFFFF);
    margin-bottom: var(--space-xl, 2rem);
    text-align: center;
}

/* ==========================================================================
   22. RESPONSIVE — Mobile-friendly breakpoints
   ========================================================================== */

/* Tablet and below */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg, 1.5rem);
    }

    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-hero h1 {
        font-size: var(--text-3xl, 2.25rem);
    }

    .article-stats-row {
        gap: var(--space-md, 1rem);
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 1.5rem);
    }

    .article-stats-row {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1rem);
    }

    .blog-post-body {
        font-size: var(--text-sm, 0.938rem);
    }

    .blog-post-header h1 {
        font-size: var(--text-2xl, 1.75rem);
    }

    .blog-post-body h2 {
        font-size: var(--text-xl, 1.375rem);
    }

    .blog-post-body h3 {
        font-size: var(--text-lg, 1.188rem);
    }

    .blog-hero {
        padding: var(--space-2xl, 3rem) var(--space-md, 1rem) var(--space-xl, 2rem);
    }

    .blog-hero h1 {
        font-size: var(--text-2xl, 1.75rem);
    }

    .author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .blog-meta {
        font-size: var(--text-xs, 0.813rem);
    }

    .article-tip,
    .article-key {
        padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    }

    .blog-post-body blockquote {
        padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    }

    .blog-share {
        flex-wrap: wrap;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .blog-post-body {
        font-size: 0.938rem;
    }

    .blog-post-body img {
        border-radius: var(--radius-md, 8px);
        margin: var(--space-lg, 1.5rem) auto;
    }

    .blog-pagination {
        gap: var(--space-xs, 0.25rem);
    }

    .blog-pagination a,
    .blog-pagination span {
        min-width: 34px;
        height: 34px;
        font-size: var(--text-xs, 0.813rem);
    }

    .article-table {
        font-size: var(--text-xs, 0.813rem);
    }

    .article-table thead th,
    .article-table tbody td {
        padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    }

    .blog-card .blog-card-body {
        padding: var(--space-md, 1rem);
    }

    .article-stat-card .stat-number {
        font-size: var(--text-2xl, 1.75rem);
    }

    .expert-quote,
    .blog-post-body blockquote.expert-quote {
        padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem) var(--space-lg, 1.5rem);
    }
}