/* Public blog pages — builds on /css/style.css */
body.blog-page { padding-top: 0; background: var(--bg-page); }
.blog-wrap { max-width: 1100px; margin: 0 auto; padding: 3rem 5% 5rem; }
.blog-head { margin-bottom: 2.5rem; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.blog-card { background: var(--bg-card); border: 1px solid var(--border); display: flex; flex-direction: column; }
.blog-card-img { display: block; aspect-ratio: 16 / 9; background: var(--bg-deep); overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.blog-card h2 { font-size: 1.15rem; line-height: 1.3; }
.blog-card h2 a:hover { color: var(--red); }
.blog-card p { font-size: 0.86rem; color: rgba(20, 20, 22, 0.7); line-height: 1.7; }
.blog-more { margin-top: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.blog-meta { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.blog-empty { color: rgba(20, 20, 22, 0.6); font-size: 0.95rem; margin: 1rem 0 2rem; }

.blog-pager { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 3rem; font-size: 0.8rem; }
.blog-pager a { font-weight: 700; color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }

.blog-post { max-width: 780px; }
.blog-back { display: block; width: fit-content; margin-bottom: 1.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(20, 20, 22, 0.6); }
.blog-back:hover { color: var(--red); }
.blog-post h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0.6rem 0 1.4rem; }
.blog-cover { width: 100%; height: auto; margin: 0 0 2rem; }
.blog-body { font-size: 1rem; line-height: 1.85; }
.blog-body p { margin-bottom: 1.3rem; }
.blog-body h2 { font-size: 1.6rem; margin: 2.2rem 0 0.9rem; }
.blog-body h3 { font-size: 1.25rem; margin: 1.8rem 0 0.7rem; }
.blog-body ul { margin: 0 0 1.3rem 1.4rem; list-style: disc; }
.blog-body li { margin-bottom: 0.35rem; }
.blog-body a { color: var(--red); text-decoration: underline; }
.blog-body figure { margin: 1.8rem 0; }
.blog-body img { width: 100%; height: auto; }
.blog-cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }

@media (max-width: 600px) {
  body.blog-page { padding-top: 80px; }
  .blog-grid { grid-template-columns: 1fr; }
}