/* ========== BLOG: FIGURES ==========
   Images inside blog articles. Loaded only by the articles that use them,
   through {% block extra_head %}, so style-dark.css and every other page are
   untouched. No inline styles - the CSP has no 'unsafe-inline' for style-src.
   ==================================== */

.blog-figure {
    max-width: 1024px;
    margin: 1.4em 0 1.8em;
    text-align: center;
}

.blog-figure img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #1a3466;
}

/* Large source photo - capped so it does not dominate the page */
.blog-figure--wide img {
    max-width: min(100%, 640px);
}

/* The form JPG shown at its real pixel size, so readers see how small
   350 x 350 actually is. White backing because the file IS white paper. */
.blog-figure--actual img {
    background: #ffffff;
}

/* A transparent PNG needs a light checkerboard behind it. On the site's
   dark navy background, dark ink would disappear. Same pattern as
   .preview-img--alpha on the Signature Extractor page. */
.blog-figure--alpha img {
    max-width: min(100%, 520px);
    background: repeating-conic-gradient(#d8dde5 0% 25%, #f2f4f7 0% 50%) 50% / 16px 16px;
}

.blog-figure figcaption {
    margin-top: 0.7em;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #94a9c0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* The global `* { padding: 0 }` reset strips the list indent, and
   style-dark.css only restores it for <ul>. Same indent for <ol>. */
.blog-article-container ol {
    max-width: 1024px;
    padding-left: 42px;
    margin: 1em 0 1.5em;
}

@media (max-width: 700px) {
    .blog-article-container ol {
        padding-left: 24px;
    }
}