/* Bootstrap-based article layout, independent of the old style.css and buju.css. */
.blog-page { padding: 48px 0 56px; background: #fff; color: var(--keda-ink); font-family: Arial, Helvetica, sans-serif; }
.blog-page .blog-container { width: 100%; max-width: 1264px; padding-right: 32px; padding-left: 32px; }
.blog-article { max-width: 1040px; min-width: 0; margin: 0 auto; }
.blog-article-header { margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid var(--keda-line); }
.blog-article-title { margin: 0; padding: 0; color: var(--keda-blue); font-size: clamp(30px,3.3vw,42px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.blog-prose { min-width: 0; max-width: 100%; color: #444; font-size: 18px; line-height: 1.85; overflow-wrap: anywhere; }
.blog-prose:after { display: table; clear: both; content: ''; }
.blog-prose p { margin: 0 0 20px; }
.blog-prose h2, .blog-prose h3, .blog-prose h4, .blog-prose h5, .blog-prose h6 { margin: 30px 0 16px; padding: 0; color: var(--keda-blue); font-weight: 700; line-height: 1.4; }
.blog-prose h2 { font-size: 29px; }.blog-prose h3 { font-size: 24px; }.blog-prose h4, .blog-prose h5, .blog-prose h6 { font-size: 21px; }
.blog-prose a { display: inline; color: var(--keda-blue); text-decoration: underline; text-underline-offset: 3px; }
.blog-prose a:hover { color: var(--keda-orange); }
.blog-prose img { display: block; max-width: 100% !important; height: auto !important; margin: 22px auto; }
.blog-prose iframe, .blog-prose video, .blog-prose embed, .blog-prose object { max-width: 100%; }
.blog-prose iframe[src*="youtube.com"], .blog-prose iframe[src*="youtube-nocookie.com"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 24px auto; }
.blog-prose figure { max-width: 100%; margin: 24px 0; }
.blog-prose figcaption { margin-top: 10px; color: #727272; font-size: 16px; }
.blog-prose ul, .blog-prose ol { margin: 18px 0 24px; padding-left: 1.5rem; }
.blog-prose ul > li { list-style-type: disc; }.blog-prose ol > li { list-style-type: decimal !important; }
.blog-prose li { margin-bottom: 10px; }
.blog-prose blockquote { margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--keda-orange); background: rgba(9,85,173,.04); }
.blog-prose table { width: 100%; margin: 20px 0; font-size: 17px; line-height: 1.65; }
.blog-prose table th, .blog-prose table td { padding: 12px 14px; vertical-align: top; }
.blog-prose table th { background: rgba(9,85,173,.06); color: var(--keda-blue); font-weight: 600; }
.blog-prose .table-responsive, .blog-prose .table-responsive-custom { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-prose .scroll-hint { display: none; }
.blog-prose pre { max-width: 100%; overflow-x: auto; padding: 18px; border: 1px solid var(--keda-line); border-radius: 8px; background: #f6f7f9; }
.blog-prose [style*="width"] { max-width: 100%; }
.blog-adjacent { display: grid; gap: 14px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--keda-line); color: #666; font-size: 17px; line-height: 1.7; }
.blog-adjacent p { margin: 0; }.blog-adjacent a { display: inline; color: var(--keda-blue); text-decoration: none; }.blog-adjacent a:hover { color: var(--keda-orange); }
.blog-back-link { display: inline-flex; margin-top: 24px; padding: 12px 20px; border: 1px solid rgba(9,85,173,.25); border-radius: 8px; color: var(--keda-blue); font-size: 17px; font-weight: 600; text-decoration: none; }
.blog-back-link:hover { border-color: var(--keda-orange); color: var(--keda-orange); }
@media (max-width: 991.98px) { .blog-page .blog-container { padding-right: 24px; padding-left: 24px; } .blog-page { padding-top: 36px; padding-bottom: 44px; } }
@media (max-width: 575.98px) { .blog-page .blog-container { padding-right: 18px; padding-left: 18px; } .blog-page { padding-top: 28px; padding-bottom: 36px; } .blog-prose { font-size: 17px; } .blog-prose h2 { font-size: 26px; } .blog-prose h3 { font-size: 23px; } .blog-prose table { font-size: 16px; } }