/* Desert Bloom — wp:image styling inside post / treatment content.
 *
 * Goals (Tatyana 2026-06-09):
 *  1. Drop-in wp:image works without authors writing custom inline CSS
 *     or wrapper divs to escape the content max-width.
 *  2. Same look as the photo column in dbcb/text-photo / procedure-callout:
 *     rounded corners + soft shadow + centered italic caption underneath.
 *  3. 21:9 (and wider) infographics auto-bleed beyond the prose column
 *     without the author choosing "wide alignment" manually.
 *  4. Empty captions fall back to the media-library title via render_block
 *     filter (see functions.php).
 *
 * Scoped to .article (blog single.php) and .content-body
 * (treatment single-treatment.php).
 */

/* Container safety net — wide carousels / wide images never escape. */
.article,
.content-body {
    /* no max-width: would override Tailwind max-w-prose */
    overflow-x: clip;
}

.article .wp-block-image,
.content-body .wp-block-image {
    margin: 32px auto;
}

/* BLOG (.article): wp:image must align with body text / headings / dbcb blocks
   at the column's left edge. The shared figure padding (1.25rem/2rem, meant to
   match .content-body) was insetting blog images 32px → a "staircase" against
   the body text which has no such padding. Zero it for .article. Tatyana 2026-06-21. */
.article figure.wp-block-image,
.article .wp-block-image {
    padding-left: 0;
    padding-right: 0;
}

.article .wp-block-image figure,
.content-body .wp-block-image figure {
    margin: 0; /* nested inner figure: wrapper provides the vertical rhythm */
}
/* standalone wp:image figure: reset the 40px browser default sides BUT keep
   symmetric vertical breathing room (was margin:0 → cramped/asymmetric top vs
   bottom once a caption sits inside the figure). Tatyana 2026-06-21. */
.article figure.wp-block-image,
.content-body figure.wp-block-image {
    margin: 32px auto;
}

.article .wp-block-image img,
.content-body .wp-block-image img,
.article figure.wp-block-image img,
.content-body figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 18px 48px -24px rgba(60, 30, 12, 0.22),
                0 2px 6px -2px rgba(60, 30, 12, 0.10);
    background: #faeede;
}

/* Centered italic small muted caption — same vibe as figure captions in
   dbcb/text-photo. */
.article .wp-block-image figcaption,
.content-body .wp-block-image figcaption,
.article figure.wp-block-image figcaption,
.content-body figure.wp-block-image figcaption {
    margin-top: 12px;
    text-align: center;
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: #8a6c52;
}

@media (min-width: 1024px) {
    /* TREATMENT pages (.content-body) = single column → wide images may bleed
       symmetrically beyond the prose column (works because the column is
       viewport-centered). */
    .content-body .wp-block-image.alignwide,
    .content-body figure[data-wide-auto] {
        margin-left: -6vw;
        margin-right: -6vw;
        max-width: none;
    }
    .content-body .wp-block-image.alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
        width: 100vw;
    }

    /* BLOG (.article) = 2-col layout (TOC sidebar + offset article column).
       A symmetric -vw bleed mispositions the image (overlaps the TOC on the
       left, clips on the right), so wide / auto-wide images stay CENTERED
       within the article column instead. Tatyana 2026-06-21. */
    .article .wp-block-image.alignwide,
    .article figure[data-wide-auto] {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    /* alignfull still allowed to span the viewport on blog. */
    .article .wp-block-image.alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
        width: 100vw;
    }
}