/* blog-post-enhance.css
   Adds visual richness (hero image, category badges, stat boxes, info
   boxes, section dividers, pull quotes) to plain blog posts WITHOUT
   changing their HTML content or structure. Purely additive — safe to
   link on any post; classes only apply where explicitly used. */

/* Hero image banner */
.blog-post-hero {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 32px;
  display: block;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

/* Category badge */
.blog-category-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.badge-healthcare { background: #FEE2E2; color: #991B1B; }
.badge-research { background: #D1FAE5; color: #065F46; }
.badge-nuclear { background: #EDE9FE; color: #5B21B6; }
.badge-academic { background: #DBEAFE; color: #1E40AF; }
.badge-suktiai { background: #FEF3C7; color: #92400E; }

/* Colorful stat boxes */
.stat-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  border-radius: 12px;
  text-align: center;
  margin: 8px;
}
.stat-box .stat-number { font-size: 36px; font-weight: 700; }
.stat-box .stat-label { font-size: 13px; opacity: 0.85; }

/* Info boxes */
.info-box {
  border-left: 4px solid #2563EB;
  background: #EFF6FF;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
}
.info-box.warning { border-color: #F59E0B; background: #FFFBEB; }
.info-box.success { border-color: #10B981; background: #ECFDF5; }
.info-box.danger  { border-color: #EF4444; background: #FEF2F2; }

/* Section dividers */
.section-divider {
  height: 3px;
  background: linear-gradient(90deg, #2563EB, #7C3AED, #EC4899);
  border: none;
  border-radius: 2px;
  margin: 40px 0;
}

/* Pull quotes */
.pull-quote {
  font-size: 20px;
  font-style: italic;
  color: #1E40AF;
  border-left: 4px solid #2563EB;
  padding: 16px 24px;
  margin: 32px 0;
  background: #EFF6FF;
  border-radius: 0 8px 8px 0;
}

/* Mobile: shrink the hero image so it doesn't dominate the fold */
@media (max-width: 768px) {
  .blog-post-hero {
    max-height: 240px;
    border-radius: 8px;
  }
}