/* Content blocks in articles and pages (CMS spec item 13), rendered on the
   server by poshapp/content_blocks.py. Shared by blog posts and CMS pages. */

.blog-callout { margin: 1.6em 0; padding: 14px 18px; border-left: 4px solid; border-radius: 0 12px 12px 0; }
.blog-callout::before { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.blog-callout p { margin: 0.25em 0; }
.blog-callout--tip { border-color: #2f7d55; background: #eef7f1; }
.blog-callout--tip::before { content: "Tip"; color: #2f7d55; }
.blog-callout--note { border-color: #3a6fb0; background: #eef3fa; }
.blog-callout--note::before { content: "Note"; color: #3a6fb0; }
.blog-callout--warning { border-color: #b46b07; background: #fdf4e6; }
.blog-callout--warning::before { content: "Warning"; color: #9a5a00; }

.blog-figure { margin: 1.6em 0; }
.blog-figure figcaption,
.blog-video-block figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #6b5b55; }
.blog-article__content img,
.cms-page__body img { max-width: 100%; height: auto; }

.blog-video-block { margin: 1.8em 0; }
.blog-video-block__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #111; }
.blog-video-block__frame img,
.blog-video-block__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.blog-video-block__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; background: rgba(0, 0, 0, 0.3); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.blog-video-block__play:hover,
.blog-video-block__play:focus-visible { background: rgba(0, 0, 0, 0.45); }

.blog-table-scroll { margin: 1.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-table-scroll table { margin: 0; }
.blog-table-scroll caption { caption-side: top; padding-bottom: 8px; text-align: left; font-weight: 600; color: #3a2a23; }