/* ============================================
   INSIGHTRIX — Blog Article Styles
   ============================================ */

.blog-hero { padding: 140px 0 60px; background: var(--bg); }
.blog-hero-inner { max-width: 800px; }
.blog-hero .container { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--container-padding, 24px); }
.blog-hero-author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.blog-hero-author-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--emerald-gradient); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1rem; font-family: var(--font-display); flex-shrink: 0; }
.blog-hero-author-info { display: flex; flex-direction: column; }
.blog-hero-author-name { font-weight: 600; color: var(--text); font-size: 0.9375rem; }
.blog-hero-author-role { font-size: 0.8125rem; color: var(--text-muted); }
.blog-hero-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); opacity: 0.5; display: inline-block; }
.blog-hero-date, .blog-hero-read-time { font-size: 0.8125rem; color: var(--text-muted); }
.blog-hero-excerpt { font-size: 1.125rem; line-height: 1.65; color: var(--text-secondary); max-width: 720px; margin-bottom: 0; }
.blog-hero-category { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); background: var(--green-dim); padding: 6px 14px; border-radius: 100px; margin-bottom: 20px; }
.blog-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--text); margin-bottom: 24px; }
.blog-hero-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.blog-meta-author { display: flex; align-items: center; gap: 12px; }
.blog-meta-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--emerald-gradient); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.8125rem; flex-shrink: 0; }
.blog-meta-author-info { display: flex; flex-direction: column; }
.blog-meta-author-name { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.blog-meta-author-role { font-size: 0.75rem; color: var(--text-muted); }
.blog-meta-divider { width: 1px; height: 32px; background: var(--border); }
.blog-meta-item { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.blog-meta-item svg { flex-shrink: 0; opacity: 0.6; }

.blog-layout { padding: 0 0 80px; background: var(--bg); display: grid; grid-template-columns: 240px 1fr; gap: 60px; align-items: start; max-width: var(--container-max, 1200px); margin: 0 auto; padding-left: var(--container-padding, 24px); padding-right: var(--container-padding, 24px); }
.blog-layout-inner { display: grid; grid-template-columns: 240px 1fr; gap: 60px; align-items: start; }

.blog-toc { position: sticky; top: 100px; }
.blog-toc-title { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 16px; }
.blog-toc-list { list-style: none; padding: 0; margin: 0; }
.blog-toc-list li { margin-bottom: 4px; }
.blog-toc-list a { display: block; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; padding: 6px 12px; border-left: 2px solid transparent; transition: color 0.3s, border-color 0.3s, background 0.3s; cursor: none; text-decoration: none; }
.blog-toc-list a:hover { color: var(--green); }
.blog-toc-list a.active { color: var(--green); border-left-color: var(--green); background: var(--green-dim); }
.blog-toc-list .toc-sub { padding-left: 24px; font-size: 0.75rem; }

.blog-article { max-width: 720px; }
.blog-article h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 48px 0 20px; padding-top: 16px; }
.blog-article h2:first-child { margin-top: 0; }
.blog-article h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); margin: 36px 0 16px; }
.blog-article h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin: 28px 0 12px; }
.blog-article p { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; }
.blog-article ul, .blog-article ol { padding-left: 24px; margin-bottom: 20px; }
.blog-article li { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
.blog-article strong { color: var(--text); font-weight: 600; }
.blog-article a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; cursor: none; transition: color 0.3s; }
.blog-article a:hover { color: var(--green-dark); }

.stat-callout { background: var(--bg-hero); color: white; padding: 32px 36px; border-radius: 16px; margin: 32px 0; text-align: center; }
.stat-callout-number { display: block; font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--green-light); margin-bottom: 8px; }
.stat-callout-text { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.5; max-width: 480px; margin: 0 auto; }

.reason-box { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 32px; margin: 32px 0; transition: border-color 0.3s, box-shadow 0.3s; }
.reason-box:hover { border-color: rgba(16,185,129,0.15); box-shadow: var(--shadow-md); }
.reason-box-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.reason-box-number { width: 44px; height: 44px; border-radius: 12px; background: var(--emerald-gradient); color: white; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reason-box-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.reason-box p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }
.reason-box p:last-child { margin-bottom: 0; }
.reason-box ul { list-style: none; padding: 0; margin: 12px 0 0; }
.reason-box li { position: relative; padding-left: 20px; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 8px; }
.reason-box li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.blog-article blockquote { position: relative; margin: 32px 0; padding: 24px 28px; border-left: 4px solid var(--green); background: var(--green-dim); border-radius: 0 12px 12px 0; }
.blog-article blockquote p { font-size: 1.0625rem; font-style: italic; color: var(--text); line-height: 1.7; margin-bottom: 8px; }
.blog-article blockquote p:last-child { margin-bottom: 0; }
.blog-article blockquote cite { display: block; font-size: 0.8125rem; font-style: normal; color: var(--text-muted); margin-top: 8px; }

.framework-step { display: flex; gap: 20px; margin: 24px 0; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.framework-step-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--mint); color: var(--green-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.framework-step h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.framework-step p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }

.checklist { list-style: none; padding: 0; margin: 24px 0; counter-reset: checklist; }
.checklist li { counter-increment: checklist; display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; transition: border-color 0.3s; }
.checklist li:hover { border-color: rgba(16,185,129,0.2); }
.checklist li::before { content: counter(checklist); flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--green-dim); color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }

.case-snapshot { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin: 24px 0; }
.case-snapshot-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.case-snapshot-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; background: var(--mint); color: var(--green-dark); border-radius: 6px; }
.case-snapshot h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.case-snapshot p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 16px; }
.case-snapshot-results { display: flex; gap: 24px; flex-wrap: wrap; }
.case-snapshot-result { display: flex; flex-direction: column; }
.case-snapshot-result strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--green); }
.case-snapshot-result span { font-size: 0.75rem; color: var(--text-muted); }

.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.comparison-table th { background: var(--bg-secondary); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.comparison-table td { font-size: 0.9375rem; color: var(--text-secondary); padding: 14px 20px; line-height: 1.5; border-bottom: 1px solid var(--border); }
.comparison-table tr:last-child td { border-bottom: none; }

.blog-share { display: flex; align-items: center; gap: 16px; padding: 24px 0; margin: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.blog-share-label { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.blog-share-links { display: flex; gap: 10px; }
.blog-share-link { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.3s; cursor: none; text-decoration: none; }
.blog-share-link:hover { background: var(--green-dim); border-color: rgba(16,185,129,0.2); color: var(--green); }

.blog-cta-banner { background: var(--bg-hero); color: white; padding: 48px; border-radius: 20px; text-align: center; margin: 48px 0; }
.blog-cta-banner h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; color: white; }
.blog-cta-banner p { font-size: 1rem; color: rgba(255,255,255,0.7); line-height: 1.6; max-width: 480px; margin: 0 auto 24px; }
.blog-cta-banner .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: var(--emerald-gradient); color: white; border-radius: 12px; font-weight: 600; font-size: 0.9375rem; transition: transform 0.3s, box-shadow 0.3s; cursor: none; text-decoration: none; }
.blog-cta-banner .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-green); }

.blog-related { padding: 60px 0 80px; background: var(--bg); }
.blog-related-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 32px; }
.blog-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-related-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; transition: border-color 0.3s, box-shadow 0.4s, transform 0.4s var(--ease-out-expo); cursor: none; text-decoration: none; display: block; color: inherit; }
.blog-related-card:hover { border-color: rgba(16,185,129,0.15); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-related-card-category { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); margin-bottom: 12px; display: block; }
.blog-related-card h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); margin-bottom: 12px; }
.blog-related-card p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.blog-related-card-meta { display: flex; gap: 16px; font-size: 0.75rem; color: var(--text-muted); }

.warning-box { background: #fef9ee; border: 1px solid #fde68a; border-radius: 16px; padding: 24px 28px; margin: 32px 0; }
.warning-box-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #92400e; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.warning-box p { font-size: 0.9375rem; color: #78350f; line-height: 1.7; margin: 0; }

/* --- blog-content class (mirrors blog-article) --- */
.blog-content { max-width: 720px; }
.blog-content h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 48px 0 20px; padding-top: 16px; scroll-margin-top: 100px; }
.blog-content h2:first-child { margin-top: 0; }
.blog-content h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); margin: 36px 0 16px; }
.blog-content h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin: 28px 0 12px; }
.blog-content p { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; }
.blog-content ul, .blog-content ol { padding-left: 24px; margin-bottom: 20px; }
.blog-content li { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
.blog-content strong { color: var(--text); font-weight: 600; }
.blog-content a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; cursor: none; transition: color 0.3s; }
.blog-content a:hover { color: var(--green-dark); }
.blog-content blockquote { position: relative; margin: 32px 0; padding: 24px 28px; border-left: 4px solid var(--green); background: var(--green-dim); border-radius: 0 12px 12px 0; }
.blog-content blockquote p { font-size: 1.0625rem; font-style: italic; color: var(--text); line-height: 1.7; margin-bottom: 8px; }
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content blockquote cite { display: block; font-size: 0.8125rem; font-style: normal; color: var(--text-muted); margin-top: 8px; }

/* --- Callout boxes (blog-callout) --- */
.blog-callout { background: var(--green-dim); border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; padding: 24px 28px; margin: 32px 0; }
.blog-callout-title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--green-dark); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.blog-callout p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 0; }
.blog-callout ul { margin-bottom: 0; }
.blog-callout li { font-size: 0.9375rem; }
.blog-callout-warning { background: rgba(245, 158, 11, 0.08); border-left-color: #f59e0b; }
.blog-callout-warning .blog-callout-title { color: #92400e; }
.blog-callout-info { background: rgba(99, 102, 241, 0.06); border-left-color: #6366f1; }
.blog-callout-info .blog-callout-title { color: #4338ca; }

/* --- Blog tables --- */
.blog-table-wrapper { margin: 32px 0; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.blog-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.blog-table thead th { background: var(--bg-secondary); font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); padding: 14px 20px; text-align: left; border-bottom: 2px solid var(--border); }
.blog-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--text-secondary); line-height: 1.5; vertical-align: top; }
.blog-table tbody tr:last-child td { border-bottom: none; }
.blog-table tbody td:first-child { font-weight: 600; color: var(--text); }

/* --- Numbered steps (blog-steps) --- */
.blog-steps { counter-reset: step-counter; list-style: none; padding-left: 0; margin: 24px 0 32px; }
.blog-steps li { counter-increment: step-counter; position: relative; padding-left: 52px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.blog-steps li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.blog-steps li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--green-dim); color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; }
.blog-steps li strong { display: block; margin-bottom: 6px; color: var(--text); }

@media (max-width: 1024px) {
    .blog-layout, .blog-layout-inner { grid-template-columns: 1fr; gap: 0; }
    .blog-toc { position: relative; top: 0; margin-bottom: 40px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
}

@media (max-width: 768px) {
    .blog-hero { padding: 120px 0 40px; }
    .blog-hero-meta { gap: 16px; }
    .blog-meta-divider { display: none; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .stat-callout-number { font-size: 2.5rem; }
    .reason-box { padding: 24px; }
    .blog-cta-banner { padding: 32px 24px; }
    .comparison-table { font-size: 0.8125rem; }
    .framework-step { flex-direction: column; gap: 12px; }
    .blog-share { flex-direction: column; align-items: flex-start; gap: 12px; }
    .case-snapshot-results { gap: 16px; }
}