.blog-wrap { max-width: 840px; margin: 0 auto; padding: 3rem 1.5rem; overflow-wrap: anywhere; letter-spacing: 0; }
.blog-list-wrap { max-width: 1120px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.blog-entry { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.blog-entry:hover, .blog-entry:focus-within { border-color: #94a3b8; box-shadow: 0 4px 16px rgba(15, 39, 68, 0.08); }
.blog-card-image { display: block; aspect-ratio: 1200 / 630; overflow: hidden; }
.blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.blog-card-body > .blog-link { margin-top: auto; padding-top: 1rem; }
.blog-date { color: #64748b; font-size: 0.85rem; }
.blog-entry h2 { font-size: 1.15rem; line-height: 1.6; margin: 0.6rem 0; }
.blog-entry h2 a { color: #0f2744; text-decoration: none; }
.blog-entry h2 a:hover { color: #2563eb; }
.blog-entry p, .blog-summary { color: #475569; line-height: 1.8; }
.blog-link { color: #2563eb; font-weight: 600; text-decoration: none; }
.blog-link:hover { text-decoration: underline; }
.blog-heading { background: transparent; box-shadow: none; position: static; padding: 1.5rem 0; border-bottom: 2px solid #e2e8f0; }
.blog-heading h1 { font-size: 1.8rem; line-height: 1.5; margin: 0.75rem 0; color: #0f2744; }
.blog-photo { margin: 1.5rem 0; }
.blog-photo img { display: block; width: 100%; height: auto; }
.blog-photo figcaption { margin-top: 0.6rem; color: #64748b; font-size: 0.8rem; line-height: 1.6; }
.blog-content { color: #334155; font-size: 1rem; line-height: 2; padding: 1rem 0; }
.blog-content p { margin: 0 0 1.5rem; }
.blog-source { padding: 1rem 0; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b; }
.blog-source a { color: #2563eb; }
.blog-contact { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.blog-contact h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.blog-pagination { display: flex; justify-content: center; gap: 1.5rem; padding: 2rem 0; }
.blog-empty { grid-column: 1 / -1; padding: 3rem 0; color: #64748b; }
@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .blog-wrap { padding: 2rem 1rem; }
    .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-heading h1 { font-size: 1.4rem; }
    .blog-entry h2 { font-size: 1.15rem; }
}