/* 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; }

/* "Read also" block (partials/blog_related.php) */
.blog-related { margin: 28px 0 8px; padding: 22px 24px; background: #fff; border: 1px solid #e4e7f1; border-radius: 16px; }
.blog-related h2 { margin: 0 0 12px; font-size: 1.2rem; }
.blog-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.blog-related a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.blog-related p { margin: 4px 0 0; color: #4a5272; font-size: .95rem; }

/* Tables inside articles (comparisons): readable and scrollable on phones */
.blog-post-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 20px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.5; }
.blog-post-content th, .blog-post-content td { border: 1px solid #e4e7f1; padding: 10px 12px; vertical-align: top; text-align: left; min-width: 140px; }
.blog-post-content thead th { background: #eef0ff; color: #0b1028; }