/* Reusable rich article examples, scoped to avoid changing other pages. */
.blog-example .example-summary, .blog-example .example-checklist, .blog-example .example-toc { padding:clamp(20px,4vw,32px); border:1px solid var(--light-gray); border-radius:20px; margin:32px 0; }
.blog-example .example-summary { background:var(--theme-mint,#dceeed); }
.blog-example .example-summary h2, .blog-example .example-checklist h2 { margin-top:0; }
.blog-example .example-toc { background:var(--theme-shell,#faf7f5); }
.blog-example .example-toc ul { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin-bottom:0; }
.blog-example h2[id] { scroll-margin-top:130px; }
.blog-example figure { margin:36px 0; }
.blog-example figure img { display:block; width:100%; height:auto; border-radius:20px; }
.blog-example figcaption { font-size:14px; line-height:1.6; color:var(--steel-gray); padding:12px 4px; }
.blog-example .data-table-wrapper { max-width:100%; }
.blog-example .data-table { min-width:580px; }
.blog-example caption { text-align:left; padding:18px; font-weight:600; background:var(--theme-shell,#faf7f5); }
.blog-example .example-checklist { background:var(--theme-blue,#e0e8fc); }
.blog-example .example-checklist label { display:flex; align-items:flex-start; gap:12px; padding:14px 0; cursor:pointer; border-bottom:1px solid #b8c8e3; line-height:1.6; }
.blog-example input[type=checkbox] { width:20px; height:20px; flex-shrink:0; margin-top:3px; accent-color:var(--brand-blue); }
.blog-example progress { display:block; width:100%; height:14px; margin:20px 0 12px; accent-color:var(--brand-blue); }
.blog-example output { display:block; font-weight:600; margin-bottom:20px; }
.blog-example details { border:1px solid var(--light-gray); border-radius:12px; padding:20px; margin:12px 0; }
.blog-example summary { cursor:pointer; font-weight:600; line-height:1.6; }
.blog-example details p { margin:16px 0 0; }
.blog-example .related-posts__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.blog-example .related-posts__card { background:var(--theme-shell,#faf7f5); padding:24px; }
.blog-example .related-posts__card p { font-size:16px; line-height:1.6; }
.blog-example :is(a,button,input,summary,[tabindex]):focus-visible { outline:3px solid var(--brand-blue); outline-offset:4px; }
@media(max-width:600px) { .blog-example .example-toc ul, .blog-example .related-posts__grid { grid-template-columns:1fr; } }