/* ==========================================================================
   Blog
   ========================================================================== */

.blog-hero {
  padding: 64px 0 40px;
  text-align: center;
  background: var(--grad-soft);
}
.blog-hero .eyebrow { margin-bottom: 16px; }
.blog-hero h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 14px; }
.blog-hero p { color: var(--ink-600); max-width: 560px; margin: 0 auto; }

.blog-section { padding: 60px 0 100px; background: var(--ink-100); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 28px 26px;
  border-top: 4px solid transparent;
}
.blog-card-blue { border-top-color: var(--blue); }
.blog-card-purple { border-top-color: var(--purple); }
.blog-card-orange { border-top-color: var(--orange); }
.blog-card-green { border-top-color: var(--green); }

.blog-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--purple-dark);
  background: rgba(109,94,245,0.1);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.blog-card h2 { font-size: 1.15rem; margin-bottom: 10px; }
.blog-excerpt { color: var(--ink-600); font-size: 0.92rem; margin-bottom: 16px; }

.blog-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--purple);
  font-size: 0.9rem;
  list-style: none;
}
.blog-details summary::-webkit-details-marker { display: none; }
.blog-details summary::after { content: ' →'; }
.blog-details[open] summary::after { content: ' ↑'; }

.blog-details p, .blog-details li {
  color: var(--ink-600);
  font-size: 0.9rem;
  margin-top: 14px;
}
.blog-details ul { padding-left: 20px; }
.blog-details li { list-style: disc; margin-top: 8px; }

@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
}