/* Blog public styles */
.blog-hero h1 { margin: 8px 0 12px; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.blog-lead { max-width: 40rem; color: var(--text-muted, #666); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}
.blog-card {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card, #fff);
  min-width: 0;
}
.blog-card-link { color: inherit; text-decoration: none; display: block; height: 100%; }
.blog-card-media { aspect-ratio: 16 / 10; background: #eee; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-placeholder {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #b8793f; background: #f6f1eb;
}
.blog-card-body { padding: 16px; }
.blog-card-body time { font-size: .78rem; color: #888; }
.blog-card-body h2 { font-size: 1.1rem; margin: 6px 0 8px; word-break: break-word; }
.blog-card-body p { font-size: .92rem; color: #555; margin: 0; }
.blog-article-inner { max-width: 760px; min-width: 0; }
.blog-article time { color: #888; font-size: .85rem; }
.blog-article h1 { margin: 10px 0 18px; font-size: clamp(1.55rem, 5vw, 2.35rem); word-break: break-word; }
.blog-cover { width: 100%; border-radius: 12px; margin: 0 0 22px; display: block; height: auto; }
.blog-content { line-height: 1.75; font-size: 1.02rem; overflow-wrap: anywhere; }
.blog-content h2, .blog-content h3 { margin-top: 1.4em; }
.blog-content img { max-width: 100%; height: auto; border-radius: 8px; }
.blog-content pre { overflow: auto; padding: 12px; background: #f5f5f5; border-radius: 8px; max-width: 100%; }
.blog-content table { display: block; max-width: 100%; overflow-x: auto; }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.page-btn {
  display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: inherit; padding: 0 10px;
}
.page-btn.active { background: #b8793f; color: #fff; border-color: #b8793f; }

@media (max-width: 768px) {
  .blog-grid { gap: 16px; }
  .blog-card-body { padding: 14px; }
  .blog-card-body h2 { font-size: 1.02rem; }
  .blog-content { font-size: .98rem; }
  .blog-cover { border-radius: 10px; margin-bottom: 16px; }
  .blog-article-inner { padding-inline: 0; }
}

@media (max-width: 480px) {
  .blog-grid { grid-template-columns: 1fr; gap: 14px; }
  .blog-hero h1 { margin-top: 4px; }
  .page-btn { min-width: 34px; height: 34px; font-size: .9rem; }
}