/* Blog index */
.blog-container { max-width: 900px; margin: 0 auto; padding: 120px 20px 60px; }
.blog-header { text-align: center; margin-bottom: 48px; }
.blog-header h1 { font-family: var(--font-display); font-size: 2.5rem; color: var(--text-primary); margin-bottom: 16px; }
.blog-header p { color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.7; }

.blog-grid { display: flex; flex-direction: column; gap: 24px; }

.blog-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    display: block;
}
.blog-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-2px); }

.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.blog-card-tag {
    display: inline-block;
    background: var(--primary-container);
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.blog-card-date { font-size: 0.85rem; color: var(--text-muted); }
.blog-card h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); margin-bottom: 10px; line-height: 1.3; }
.blog-card p { color: var(--text-secondary); line-height: 1.7; font-size: 0.95rem; margin: 0; }
.blog-card .read-more { display: inline-block; margin-top: 16px; color: var(--primary-dark); font-weight: 600; font-size: 0.9rem; }
.blog-card:hover .read-more { text-decoration: underline; text-underline-offset: 2px; }

/* Article */
.article-container { max-width: 780px; margin: 0 auto; padding: 120px 20px 60px; }
.article-header { text-align: center; margin-bottom: 48px; }
.article-header h1 { font-family: var(--font-display); font-size: 2.5rem; color: var(--text-primary); margin-bottom: 16px; line-height: 1.2; }
.article-header .subtitle { color: var(--text-secondary); font-size: 1.15rem; max-width: 650px; margin: 0 auto 16px; line-height: 1.7; }
.article-header .meta { font-size: 0.85rem; color: var(--text-muted); }
.article-header .meta a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

.article-body h2 { font-family: var(--font-display); font-size: 1.8rem; color: var(--text-primary); margin: 48px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.article-body h3 { font-size: 1.2rem; color: var(--text-primary); margin: 28px 0 12px; font-weight: 600; }
.article-body p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; font-size: 1rem; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 16px; }
.article-body li { margin-bottom: 8px; color: var(--text-secondary); line-height: 1.7; }
.article-body a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--primary); }
.article-body strong { color: var(--text-primary); }

/* Reusable components */
.callout {
    background: var(--surface-variant);
    border-left: 4px solid var(--primary);
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout p { margin-bottom: 0; font-size: 0.95rem; }

.tip-box {
    background: var(--tertiary-container);
    border-left: 4px solid var(--tertiary);
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tip-box strong { color: var(--text-primary); }
.tip-box p { margin-bottom: 0; font-size: 0.95rem; }

.example-box {
    background: var(--dark-bg);
    color: #e0ddd8;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin: 24px 0;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: 1.7;
}
.example-box .label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-light);
    margin-bottom: 12px;
}
.example-box .row { display: flex; justify-content: space-between; padding: 4px 0; }
.example-box .row .planet { color: #ccc; }
.example-box .row .ai-val { color: #e87878; }
.example-box .row .real-val { color: #78e89a; }

/* .step-box / .step-number / .step-title are styled by styles.css (v5: the
   number is absolutely positioned and the box carries matching left padding).
   The legacy blog.css versions here overrode the padding while leaving the
   absolute positioning in place, so the badge landed on top of the title —
   removed, deferring to styles.css. Only the unique helpers remain below. */
.step-box ul { margin-top: 12px; margin-bottom: 0; }
.step-screenshot { margin-top: 16px; text-align: center; }
.step-screenshot img { max-width: 280px; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-strong); }

.feature-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin: 16px 0;
}
.feature-card h3 { margin-top: 0; }
.feature-card p:last-child { margin-bottom: 0; }

.question-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.question-card {
    background: var(--surface-variant);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
}
.question-card::before {
    content: "\201C";
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--primary);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
}

.faq-section { margin-top: 48px; }
.faq-section h2 { font-family: var(--font-display); font-size: 1.8rem; color: var(--text-primary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.faq-item { margin-bottom: 24px; }
.faq-item h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 8px; font-weight: 600; }
.faq-item p { color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* .cta-box is styled by styles.css (v5, dark with visible buttons). The legacy
   light-gold override here caused white button text on a light box — removed.
   But when a cta-box sits inside .article-body, the article-body h3/p/strong
   rules above (dark ink) would override styles.css's cream text and make the
   heading invisible on the dark box. Re-assert the light text at higher
   specificity. */
.article-body .cta-box h3,
.article-body .cta-box strong { color: var(--background); }
.article-body .cta-box p { color: rgba(247, 241, 227, 0.78); }

.breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 32px; text-align: center; }
.breadcrumb a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--primary-dark); }

@media (max-width: 768px) {
    .blog-container { padding: 100px 16px 40px; }
    .blog-header h1 { font-size: 1.8rem; }
    .blog-card { padding: 24px; }
    .blog-card h2 { font-size: 1.3rem; }

    .article-container { padding: 80px 16px 40px; }
    .article-header { margin-bottom: 24px; }
    .article-header h1 { font-size: 1.8rem; }
    .article-body h2 { font-size: 1.4rem; }
    .example-box .row { flex-direction: column; gap: 2px; }
    .question-grid { grid-template-columns: 1fr; }
}