/* blogpost page styles (moved out of the 4 locale pages; shared and cacheable). */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

.blog-post-hero { background: linear-gradient(120deg, #0f2e59, #0b6a88); color: #eaf1ff; padding: 28px 0 22px; }
.blog-post-hero h1 { font-size: 32px; margin: 0; letter-spacing: -0.01em; }
.blog-post-meta { font-size: 13px; opacity: 0.8; margin-bottom: 8px; }
.article-shell { max-width: 760px; margin: 0 auto; }
.blog-post-content { background: #fff; border-radius: 16px; box-shadow: 0 18px 30px rgba(9, 20, 35, 0.08); padding: 28px; font-family: 'Source Serif 4', serif; font-size: 18px; line-height: 1.7; color: #1b283a; }
.blog-post-content > *:first-child { margin-top: 0; }
.blog-post-content h2, .blog-post-content h3 { font-family: 'Source Serif 4', serif; margin-top: 28px; margin-bottom: 12px; }
.blog-post-content p { margin-bottom: 16px; }
.blog-post-content ul, .blog-post-content ol { margin: 0 0 16px 22px; }
.blog-post-content li { margin-bottom: 6px; }
.blog-post-content blockquote { margin: 20px 0; padding: 12px 16px; border-left: 4px solid #0b6a88; background: #f2f7fb; }
.blog-post-content img { max-width: 100%; height: auto; }
.blog-like-btn { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.blog-like-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.9); color: #fff; }
.blog-ad { margin: 18px 0; min-height: 280px; } /* reserved for the responsive ad: no layout shift when it fills */
.breadcrumb { font-size: 12px; }
.breadcrumb a { color: #0b6a88; }
.blog-cover { margin-bottom: 18px; }