/* Blog index */
.blog-hero { background: linear-gradient(rgba(10,58,92,0.78), rgba(10,58,92,0.88)), url('/images/banner.webp') center/cover no-repeat; color: white; padding: 3.5rem 2rem 4rem; text-align: center; }
.blog-hero h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.2; color: white; }
.blog-hero p { font-size: 1.1rem; opacity: 0.85; max-width: 560px; margin: 0 auto; color: white; }

.blog-index { max-width: 860px; margin: 3rem auto; padding: 0 2rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }

.blog-card { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta { font-size: 0.8rem; color: #9ca3af; margin-bottom: 0.6rem; display: flex; gap: 1rem; }
.blog-card h2 { font-size: 1.1rem; font-weight: 700; color: #1E5A7D; margin-bottom: 0.6rem; line-height: 1.35; }
.blog-card p { font-size: 0.9rem; color: #6b7280; line-height: 1.6; flex: 1; }
.blog-card-link { display: inline-block; margin-top: 1.25rem; font-size: 0.875rem; font-weight: 600; color: #1E5A7D; text-decoration: none; }
.blog-card-link:hover { text-decoration: underline; }

/* Article page */
.article-hero { background: linear-gradient(rgba(10,58,92,0.80), rgba(10,58,92,0.90)), url('/images/banner.webp') center/cover no-repeat; color: white; padding: 3.5rem 2rem 4rem; text-align: center; }
.article-hero h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.25; color: white; max-width: 720px; margin-left: auto; margin-right: auto; }
.article-hero-meta { font-size: 0.85rem; opacity: 0.75; color: white; }

.article-wrap { max-width: 720px; margin: 3rem auto 4rem; padding: 0 2rem; }

.article-body h2 { font-size: 1.45rem; font-weight: 700; color: #1E5A7D; margin: 2.25rem 0 0.75rem; line-height: 1.3; }
.article-body h3 { font-size: 1.1rem; font-weight: 700; color: #0A3A5C; margin: 1.75rem 0 0.5rem; }
.article-body p { font-size: 1rem; color: #374151; line-height: 1.75; margin-bottom: 1.25rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li { font-size: 1rem; color: #374151; line-height: 1.7; margin-bottom: 0.4rem; }
.article-body strong { color: #1f2937; }

.article-callout { background: #f0f7ff; border-left: 4px solid #1E5A7D; padding: 1.25rem 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin: 2rem 0; }
.article-callout p { margin: 0; color: #1E5A7D; font-size: 0.95rem; }

.article-callout.amber { background: #fffbeb; border-left-color: #d97706; }
.article-callout.amber p { color: #92400e; }

.article-body img { max-width: 100%; height: auto; border-radius: 0; }
.article-body .img-left { float: left; margin: 0.25rem 0.75rem 0.5rem 0; max-width: 50%; }
.article-body .img-right { float: right; margin: 0.25rem 0 0.5rem 0.75rem; max-width: 50%; }
.article-body .img-centre { display: block; margin: 1rem auto; }

.article-cta { background: #0A3A5C; color: white; border-radius: 0.75rem; padding: 2rem 2.5rem; margin: 3rem 0; text-align: center; }
.article-cta h3 { color: white; font-size: 1.2rem; margin-bottom: 0.5rem; }
.article-cta p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin-bottom: 1.25rem; }
.article-cta .btn-white { background: white; color: #1E5A7D !important; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; font-size: 0.95rem; display: inline-block; }
.article-cta .btn-white:hover { background: #f0f9ff; }

.article-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: #6b7280; text-decoration: none; margin-bottom: 2.5rem; }
.article-back:hover { color: #1E5A7D; }
.article-back svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .blog-hero h1 { font-size: 1.9rem; }
    .article-hero h1 { font-size: 1.7rem; }
    .article-wrap { margin-top: 2rem; }
    .article-body .img-left, .article-body .img-right { float: none; max-width: 100%; margin: 1rem 0; }
}

/* Pagination */
.blog-pagination { max-width: 860px; margin: 0 auto 3rem; padding: 0 2rem; }
.blog-pag { display: flex; justify-content: center; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.blog-pag-btn { display: inline-block; padding: 0.5rem 0.875rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; color: #374151; text-decoration: none; background: white; transition: border-color 0.15s, color 0.15s; }
.blog-pag-btn:hover { border-color: #1E5A7D; color: #1E5A7D; }
.blog-pag-current { background: #1E5A7D; color: white !important; border-color: #1E5A7D; font-weight: 600; }
.blog-pag-disabled { color: #d1d5db; cursor: default; }
.blog-pag-dots { padding: 0.5rem 0.25rem; color: #9ca3af; font-size: 0.875rem; }
.article-related { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; font-size: 0.95rem; color: #4b5563; }
.article-related a { color: #1E5A7D; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.article-related a:hover { color: #0A3A5C; }