/* ── Reusable project/article media presentation (Issue #76) ──────
   Sizing and caption styling for every `<figure>` a Markdown body
   produces - both the plain `![alt](url "caption")` path (apps.core.
   markdown's paragraph-image rule) and the `figure` fence (explicit
   size/caption-alignment/caption-size control). Scoped to
   `.markdown-content` (shared/design-system/layouts/article.css), the
   one wrapper every long-form body - and the Studio's own live preview
   - renders through.

   A bare, unclassed `<figure>` (the plain path, no options chosen) gets
   the same visual result as `.content-figure--large` below, which is
   deliberate: "large" is today's existing look (an image simply fills
   its column), so old content needs no reclassification to render
   exactly as it always has.
*/
.markdown-content figure {
    margin: 0;
}

/* Media must read as its own distinct visual block, not attached to
   the paragraph above it - the same "more room before it, not the
   general vertical rhythm" treatment article.css already gives
   headings (`.markdown-content > * + :is(h1, ...)`). Every project/
   article/offering screenshot, GIF, or uploaded video authored through
   the `figure` fence (or the plain `![alt](url "caption")` path)
   renders as a `<figure>` at this level, so this one rule reaches
   every one of them. Same specificity as the `margin: 0` reset above -
   must stay declared after it in this file to win the cascade; a
   figure with nothing before it (`:first-child`, article.css) is
   unaffected since this only matches when a preceding sibling exists.
   See the Responsive section below for the smaller mobile value. */
.markdown-content > * + figure {
    margin-top: var(--space-8);
}

/* Exception: a figure sitting directly under its own heading keeps
   article.css's tighter "content belongs to the heading above it"
   spacing instead - a higher-specificity override so it isn't clobbered
   by the general rule above just because this file loads later. */
.markdown-content > :is(h1, h2, h3, h4, h5, h6) + figure {
    margin-top: var(--space-3);
}

.markdown-content figure img,
.markdown-content figure video {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius-md);
}

.markdown-content .content-figure--small img,
.markdown-content .content-figure--small video {
    max-width: 320px;
}

.markdown-content .content-figure--medium img,
.markdown-content .content-figure--medium video {
    max-width: 560px;
}

/* "large" (and the unclassed default above) simply fill the reading
   column - img/video already cap at 100% above, nothing more to add. */

/* "full" breaks out of the ~72ch reading column up to the page's wider
   canvas - a deliberate exception to .reading's max-width, not a bug -
   using the standard viewport-relative breakout technique so it works
   regardless of how deeply nested the column is. */
.markdown-content .content-figure--full {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.markdown-content .content-figure--full img,
.markdown-content .content-figure--full video {
    max-width: var(--container-canvas);
}

/* Deliberately scoped to the classed `.content-figure__caption` only -
   a bare figcaption from the plain `![alt](url "caption")` path (no
   options chosen) keeps its existing, unstyled presentation exactly as
   before (Issue #76's "retain the existing/default caption presentation
   where no option is selected"), rather than being restyled retroactively. */
.markdown-content .content-figure__caption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--type-small-size, 0.875rem);
    text-align: left;
}

.content-figure__caption--align-center {
    text-align: center;
}

.content-figure__caption--small {
    font-size: 0.8125rem;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* One step down the spacing scale, not back to the general rhythm -
       still a clearly distinct block on a narrow viewport, just without
       desktop's full --space-8 gap. */
    .markdown-content > * + figure {
        margin-top: var(--space-6);
    }
}