/* AllScience Blog Styles — consistent across all posts */

.blog-article { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }

/* Hero */
.blog-hero { text-align: center; padding: 4rem 0 2rem; }
.blog-hero .blog-category {
  display: inline-block; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary, #6c63ff); margin-bottom: 1rem;
}
.blog-hero h1 {
  font-size: 2.5rem; font-weight: 800; line-height: 1.2;
  margin-bottom: 1.5rem; color: var(--color-text, #1a1a2e);
}
@media (max-width: 640px) { .blog-hero h1 { font-size: 1.75rem; } }

/* Hero image */
.blog-hero-image {
  width: 100%; max-width: 800px; margin: 0 auto 1.5rem;
  border-radius: 12px; overflow: hidden;
}
.blog-hero-image img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/9; object-fit: cover;
}

/* Meta line */
.blog-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap; font-size: 0.9rem;
  color: var(--color-text-muted, #555);
}
.blog-author { display: flex; align-items: center; gap: 0.5rem; }
.blog-author-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #6c63ff, #4fc3f7);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: #fff;
}
.blog-meta-sep { color: var(--color-border, #ddd); }

/* Body text — strong contrast on both light and dark */
.blog-body h2 {
  font-size: 1.6rem; font-weight: 700;
  margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.3;
  color: var(--color-text, #1a1a2e);
}
.blog-body h3 {
  font-size: 1.2rem; font-weight: 600;
  margin-top: 2rem; margin-bottom: 0.75rem;
  color: var(--color-text, #1a1a2e);
}
.blog-body p {
  font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem;
  color: var(--color-text, #2d3436);
}
.blog-body ul, .blog-body ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.blog-body li {
  font-size: 1.05rem; line-height: 1.7; margin-bottom: 0.5rem;
  color: var(--color-text, #2d3436);
}
.blog-body strong { color: var(--color-text, #1a1a2e); font-weight: 700; }
.blog-body a { color: var(--color-primary, #6c63ff); text-decoration: underline; }
.blog-body a:hover { color: var(--color-primary-hover, #5548d9); }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--color-bg-card, #f8f9fa);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 10px; padding: 1.25rem;
}
.feature-card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.feature-card h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--color-text, #1a1a2e); }
.feature-card p { font-size: 0.88rem; line-height: 1.5; margin-bottom: 0; color: var(--color-text-muted, #555); }

/* Callout */
.blog-callout {
  border-left: 3px solid var(--color-primary, #6c63ff);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
  background: var(--color-bg-card, #f8f9fa);
  border-radius: 0 8px 8px 0;
}
.blog-callout p { margin-bottom: 0; font-style: italic; color: var(--color-text, #2d3436); }

/* CTA block */
.blog-cta {
  text-align: center; padding: 2.5rem 1.5rem; margin: 2.5rem 0 1rem;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2b55 100%);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
}
.blog-cta h2 { margin-top: 0; font-size: 1.5rem; color: #fff; }
.blog-cta p { color: #c9cdd4; }
.blog-cta .btn {
  margin-top: 0.5rem; display: inline-block; padding: 0.75rem 2rem;
  background: var(--color-primary, #6c63ff); color: #fff;
  border-radius: 8px; text-decoration: none; font-weight: 600;
  transition: background 0.2s;
}
.blog-cta .btn:hover { background: var(--color-primary-hover, #5548d9); }

/* Share buttons */
.blog-share {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 2.5rem 0; padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e0e0e0);
}
.blog-share span { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted, #555); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--color-bg-card, #f8f9fa);
  border: 1px solid var(--color-border, #e0e0e0);
  color: var(--color-text-muted, #555);
  text-decoration: none; font-size: 0.85rem; font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.share-btn:hover { background: var(--color-primary, #6c63ff); color: #fff; border-color: var(--color-primary, #6c63ff); }

/* Related posts */
.blog-related {
  margin: 2rem 0; padding: 1.5rem;
  background: var(--color-bg-card, #f8f9fa);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 10px;
}
.blog-related h3 { margin-top: 0; font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--color-text, #1a1a2e); }
.blog-related ul { list-style: none; padding: 0; margin: 0; }
.blog-related li { margin-bottom: 0.5rem; }
.blog-related a { color: var(--color-primary, #6c63ff); text-decoration: none; font-size: 0.95rem; }
.blog-related a:hover { text-decoration: underline; }

/* Comparison table */
.comparison-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.comparison-table th { background: var(--color-bg-card, #f8f9fa); padding: 0.75rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--color-border, #e0e0e0); color: var(--color-text, #1a1a2e); }
.comparison-table td { padding: 0.75rem; border-bottom: 1px solid var(--color-border, #e0e0e0); color: var(--color-text, #2d3436); }
.comparison-table tr:hover { background: var(--color-bg-hover, #f0f0f0); }