/* Blog index and article pages. */
@import url('features.css');

.post-list { display: grid; gap: 18px; }
.post-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), transform var(--transition-normal),
    border-color var(--transition-normal);
}
.post-card:hover {
  background: var(--surface-hover);
  border-color: var(--color-border-light);
  transform: translateY(-3px);
}
.post-card a { display: block; padding: 30px 28px; }
.post-card h2 { font-size: 1.32rem; margin: 0 0 10px; }
.post-card p { color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.65; margin: 0 0 14px; }

.post-meta {
  font-size: 0.83rem;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

/* ---------- article ---------- */
.prose h1 { margin-bottom: 20px; }
.prose h2 {
  font-size: 1.52rem;
  margin: 48px 0 14px;
  letter-spacing: -0.015em;
}
.prose p {
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: 18px;
  font-size: 1.02rem;
}
.prose ul,
.prose ol {
  margin: 0 0 22px 22px;
  display: grid;
  gap: 10px;
}
.prose li { color: var(--color-text-secondary); line-height: 1.75; padding-left: 4px; }
.prose li strong { color: var(--color-text-primary); }
.prose a { color: #35d6f5; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #7ee8ff; }

.post-cta {
  margin-top: 56px;
  padding: 38px 32px;
  text-align: center;
  background: rgba(0, 160, 240, 0.08);
  border: 1px solid rgba(0, 160, 240, 0.26);
  border-radius: var(--radius-md);
}
.post-cta h2 { margin: 0 0 8px; font-size: 1.3rem; }
.post-cta p { margin-bottom: 4px; }