/* CALIGO blog article styles */
.blog-hero { padding: calc(40px + 72px + 40px) 0 32px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.blog-hero h1 { max-width: 18ch; margin-bottom: 12px; }
.blog-hero-sub { max-width: 56ch; color: var(--gray-600); font-size: 1.1rem; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.blog-cat { font-size: 0.8rem; font-weight: 600; color: var(--accent-text); text-decoration: none; padding: 6px 12px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; }
.blog-cat:hover { border-color: var(--orange); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 40px 0 72px; }
.blog-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius); text-decoration: none; color: inherit; background: #fff; }
.blog-card:hover { border-color: var(--accent-text); }
.blog-card-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.blog-card h2, .blog-card-title { font-size: 1.15rem; line-height: 1.35; margin: 0; }
.blog-card p, .blog-card-excerpt { color: var(--gray-600); font-size: 0.95rem; flex: 1; margin: 0; }
.blog-card-meta { font-size: 0.8rem; color: var(--gray-400); }

.article-wrap { padding: calc(40px + 72px + 24px) 0 64px; }
.breadcrumb { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 20px; }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }
.article-header { margin-bottom: 28px; max-width: 720px; }
.article-header h1 { margin: 10px 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 0.9rem; color: var(--gray-600); }
.article-content { max-width: 720px; color: var(--gray-800); line-height: 1.75; font-size: 1.05rem; }
.article-content h2 { margin: 2rem 0 0.75rem; font-size: 1.35rem; }
.article-content h3 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
.article-content p, .article-content li { color: var(--text-muted, #3f3f46); }
.article-content ul, .article-content ol { margin: 0.75rem 0 1rem 1.2rem; }
.article-content a { color: var(--accent-text); font-weight: 600; }
.article-content code { background: var(--gray-100); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.92em; }
.article-cta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); }
.article-note { margin-top: 1.5rem; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--gray-600); }