/* ================================================================
   blog.css — Styles for blog index and individual post pages
   ================================================================ */

/* ── BLOG INDEX HERO ────────────────────────────────────────────── */
.blog-hero {
  background: var(--hero-bg);
  padding: 112px 0 72px;
  position: relative; overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute; top: -180px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,94,182,0.28) 0%, transparent 65%);
  pointer-events: none;
}
.blog-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 2.8rem; font-weight: 900; color: var(--hero-text);
  letter-spacing: -1.2px; margin-bottom: .75rem; line-height: 1.1;
}
.blog-hero-sub { font-size: 1rem; color: var(--hero-muted); max-width: 480px; line-height: 1.7; }

/* ── POST CARDS GRID ────────────────────────────────────────────── */
.blog-index { padding: 72px 0 96px; background: var(--surface); }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
.post-card {
  background: var(--surface-lowest); border-radius: var(--radius-xl);
  padding: 2rem; box-shadow: var(--shadow-card);
  text-decoration: none; display: flex; flex-direction: column; gap: .75rem;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid transparent;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(44,52,55,0.09); border-color: var(--surface-high); }
.post-category {
  font-size: .68rem; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--primary);
}
.post-card h2 { font-size: 1.25rem; font-weight: 800; color: var(--on-surface); line-height: 1.3; margin: 0; }
.post-excerpt { font-size: .875rem; color: var(--on-surface-var); line-height: 1.7; flex: 1; }
.post-meta { display: flex; gap: 1.25rem; align-items: center; margin-top: .5rem; }
.post-date { font-size: .78rem; color: var(--on-surface-muted); }
.post-read-time { font-size: .78rem; color: var(--on-surface-muted); }
.post-read-more { font-size: .85rem; font-weight: 600; color: var(--primary); margin-top: .25rem; }

/* ── ARTICLE HERO ───────────────────────────────────────────────── */
.article-hero {
  background: var(--hero-bg);
  padding: 112px 0 64px;
  position: relative; overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute; top: -180px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,94,182,0.28) 0%, transparent 65%);
  pointer-events: none;
}
.article-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #93c5fd; font-size: .78rem; font-weight: 600;
  letter-spacing: .4px; margin-bottom: 1.25rem;
  text-decoration: none;
}
.article-eyebrow:hover { color: #fff; }
.article-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 2.8rem; font-weight: 900; color: var(--hero-text);
  line-height: 1.1; letter-spacing: -1.2px; margin-bottom: 1rem;
  max-width: 800px;
}
.article-meta { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.article-meta-item { font-size: .82rem; color: var(--hero-muted); }
.article-meta-sep { color: var(--hero-border); font-size: .8rem; }

/* ── ARTICLE BODY ───────────────────────────────────────────────── */
.article-body { padding: 72px 0 96px; background: var(--surface); }
.article-wrap { max-width: 760px; }

.article-wrap p { font-size: 1rem; color: var(--on-surface-var); line-height: 1.85; margin-bottom: 1.4rem; }
.article-wrap h2 { font-size: 1.6rem; font-weight: 900; color: var(--on-surface); letter-spacing: -.5px; margin: 2.5rem 0 .9rem; line-height: 1.2; }
.article-wrap h3 { font-size: 1.15rem; font-weight: 800; color: var(--on-surface); margin: 2rem 0 .6rem; }
.article-wrap ul, .article-wrap ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.article-wrap li { font-size: 1rem; color: var(--on-surface-var); line-height: 1.8; margin-bottom: .4rem; }
.article-wrap strong { color: var(--on-surface); font-weight: 700; }
.article-wrap a { color: var(--primary); text-decoration: none; }
.article-wrap a:hover { text-decoration: underline; }
.article-wrap .btn-cta-primary,
.article-wrap .btn-cta-primary:hover { color: #fff; text-decoration: none; }
.article-wrap hr { border: none; border-top: 1px solid var(--surface-container); margin: 2.5rem 0; }

/* ── CALLOUT BOXES ──────────────────────────────────────────────── */
.callout {
  background: var(--secondary-container); border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.4rem; margin: 1.75rem 0;
}
.callout p { margin: 0; color: var(--on-secondary-container); font-size: .9rem; }
.callout strong { color: var(--on-secondary-container); }

/* ── CODE BLOCKS ────────────────────────────────────────────────── */
.article-wrap pre {
  background: var(--hero-bg); border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem; overflow-x: auto; margin: 1.5rem 0;
  font-family: 'JetBrains Mono', monospace; font-size: .8rem;
  line-height: 1.8; color: #c8d8f0;
}
.article-wrap code {
  font-family: 'JetBrains Mono', monospace; font-size: .85em;
  background: var(--surface-container); padding: .15rem .4rem;
  border-radius: .25rem; color: var(--on-surface);
}
.article-wrap pre code { background: none; padding: 0; color: inherit; }

/* ── ARTICLE CTA ────────────────────────────────────────────────── */
.article-cta-box {
  background: linear-gradient(135deg, #e8f0fb 0%, #dce8f8 60%, #edf4ff 100%);
  border-radius: var(--radius-xl); padding: 2.5rem 2rem;
  text-align: center; margin-top: 3rem; box-shadow: var(--shadow-card);
}
.article-cta-box h3 { font-size: 1.4rem; font-weight: 900; color: var(--on-surface); margin-bottom: .6rem; }
.article-cta-box p { font-size: .9rem; color: var(--on-surface-var); margin-bottom: 1.5rem; max-width: 380px; margin-left: auto; margin-right: auto; }
.btn-cta-primary {
  background: linear-gradient(45deg, var(--primary-dim), var(--primary));
  color: #fff; padding: .85rem 2rem; border-radius: var(--radius-full);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem;
  text-decoration: none; display: inline-block;
  box-shadow: 0 4px 16px rgba(0,94,182,0.28);
  transition: opacity .2s, transform .15s;
}
.btn-cta-primary:hover { opacity: .9; transform: translateY(-1px); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-hero, .article-hero { padding: 96px 0 56px; }
  .blog-hero h1, .article-hero h1 { font-size: 2.2rem; }
  .post-grid { grid-template-columns: 1fr; }
  .blog-index { padding: 56px 0 72px; }
  .article-body { padding: 56px 0 72px; }
}

@media (max-width: 640px) {
  .blog-hero h1, .article-hero h1 { font-size: 1.8rem; }
  .article-wrap h2 { font-size: 1.3rem; }
  .article-wrap pre { font-size: .72rem; padding: 1rem; }
}