/* PHP AIR blog (added 26 Oct 2026). Scoped to .blog-* classes; main styles.css untouched. */
.blog-list { padding-top: 60px; }
.blog-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.blog-card { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.blog-card h3 { margin: 0; }
.blog-card h3 a { color: var(--text); text-decoration: none; }
.blog-card h3 a:hover, .blog-card h3 a:focus { color: var(--accent); }
.blog-card p { margin: 0; }
.blog-card .blog-more { align-self: flex-start; margin-top: auto; }
.blog-card-img { display: block; margin: -24px -24px 6px; }
.blog-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-empty h2 { margin-top: 0; }
.blog-empty a, .blog-post-intro .lead a, .page-intro .lead a { color: var(--accent); }
.blog-back { margin: 0 0 10px; }
.blog-back a { color: var(--muted); text-decoration: none; }
.blog-back a:hover { color: var(--accent); }
.blog-post { padding-top: 50px; }
.blog-article { max-width: 760px; }
.blog-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--stroke); margin-bottom: 28px; }
.blog-body { font-size: 18px; line-height: 1.75; }
.blog-body h2 { margin: 1.6em 0 0.4em; }
.blog-body h3 { margin: 1.4em 0 0.4em; }
.blog-body a { color: var(--accent); }
.blog-body ul, .blog-body ol { padding-left: 22px; }
.blog-body li { margin-bottom: 6px; }
.blog-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.blog-body code { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke); border-radius: 4px; padding: 1px 6px; font-size: 0.9em; }
.blog-body hr { border: 0; border-top: 1px solid var(--stroke); margin: 28px 0; }
.blog-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.blog-body blockquote { margin: 20px 0; color: var(--text); font-weight: 400; background: rgba(85, 245, 255, 0.05); padding: 8px 18px; }