/*
 * Chumbiverse 0.10.6 — Modo Pages justo
 *
 * Estrutura comprovada:
 * - float no próprio IMG;
 * - shape-outside no próprio IMG;
 * - figure do Gutenberg sem caixa visual.
 */

.article-body::after,
.entry-content::after,
.wp-block-post-content::after {
    content: "";
    display: table;
    clear: both;
}

/*
 * O figure do Gutenberg não pode ocupar uma caixa própria.
 * Seus filhos entram diretamente no fluxo do artigo.
 */
.article-body figure.chumbi-pages-figure-contents,
.entry-content figure.chumbi-pages-figure-contents,
.wp-block-post-content figure.chumbi-pages-figure-contents {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/*
 * O elemento flutuante é o IMG, exatamente como no exemplo inspecionado.
 */
.article-body img.chumbi-pages-shape,
.entry-content img.chumbi-pages-shape,
.wp-block-post-content img.chumbi-pages-shape {
    position: relative !important;
    z-index: 1;
    display: block !important;
    width: clamp(300px, 40%, 480px) !important;
    max-width: 46% !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: contain !important;
}

.article-body img.chumbi-pages-shape-left,
.entry-content img.chumbi-pages-shape-left,
.wp-block-post-content img.chumbi-pages-shape-left {
    float: left !important;
    clear: left;
    margin: 0 0 -0.34em clamp(-100px, -5.8vw, -44px) !important;
}

.article-body img.chumbi-pages-shape-right,
.entry-content img.chumbi-pages-shape-right,
.wp-block-post-content img.chumbi-pages-shape-right {
    float: right !important;
    clear: right;
    margin: 0 clamp(-100px, -5.8vw, -44px) -0.34em 0 !important;
}

.article-body img.chumbi-pages-shape-silhouette,
.entry-content img.chumbi-pages-shape-silhouette,
.wp-block-post-content img.chumbi-pages-shape-silhouette {
    shape-image-threshold: .45;
    shape-margin: 0;
}

.article-body img.chumbi-pages-shape-rectangle,
.entry-content img.chumbi-pages-shape-rectangle,
.wp-block-post-content img.chumbi-pages-shape-rectangle {
    shape-outside: margin-box;
    shape-margin: 0;
}

/*
 * A legenda dentro de display:contents não deve interferir no fluxo.
 * Ela permanece acessível no HTML, mas não é mostrada nesse modo editorial.
 */
.article-body figure.chumbi-pages-figure-contents figcaption,
.entry-content figure.chumbi-pages-figure-contents figcaption,
.wp-block-post-content figure.chumbi-pages-figure-contents figcaption {
    display: none !important;
}

/* Encerramento manual do float. */
.wp-block-separator.is-style-chumbi-clear-narrative {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Evita que links em torno da imagem criem uma nova caixa. */
.article-body figure.chumbi-pages-figure-contents > a,
.entry-content figure.chumbi-pages-figure-contents > a,
.wp-block-post-content figure.chumbi-pages-figure-contents > a {
    display: contents !important;
}

/* Tablet */
@media (max-width: 1020px) {
    .article-body img.chumbi-pages-shape,
    .entry-content img.chumbi-pages-shape,
    .wp-block-post-content img.chumbi-pages-shape {
        width: min(42%, 400px) !important;
        max-width: 44% !important;
    }

    .article-body img.chumbi-pages-shape-left,
    .entry-content img.chumbi-pages-shape-left,
    .wp-block-post-content img.chumbi-pages-shape-left {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .article-body img.chumbi-pages-shape-right,
    .entry-content img.chumbi-pages-shape-right,
    .wp-block-post-content img.chumbi-pages-shape-right {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Celular */
@media (max-width: 760px) {
    .article-body img.chumbi-pages-shape,
    .entry-content img.chumbi-pages-shape,
    .wp-block-post-content img.chumbi-pages-shape {
        float: none !important;
        clear: both !important;
        display: block !important;
        width: min(100%, 520px) !important;
        max-width: 100% !important;
        margin: 1.5rem auto 1.9rem !important;
        shape-outside: none !important;
        -webkit-shape-outside: none !important;
    }
}


/* 0.10.4 — reduz o vão abaixo da silhueta sem colar o texto. */
.article-body img.chumbi-pages-shape,
.entry-content img.chumbi-pages-shape,
.wp-block-post-content img.chumbi-pages-shape {
    margin-bottom: 0 !important;
    shape-margin: 0;
    vertical-align: top;
}

/*
 * Em fontes editoriais grandes, uma linha pode saltar demais ao final do float.
 * Esta folga negativa discreta compensa apenas a área inferior do fluxo.
 */
@media (min-width: 1021px) {
    .article-body img.chumbi-pages-shape-left,
    .entry-content img.chumbi-pages-shape-left,
    .wp-block-post-content img.chumbi-pages-shape-left,
    .article-body img.chumbi-pages-shape-right,
    .entry-content img.chumbi-pages-shape-right,
    .wp-block-post-content img.chumbi-pages-shape-right {
        margin-bottom: -.34em !important;
    }
}


/* 0.10.6 — contorno justo, sem dupla folga. */
.article-body img.chumbi-pages-shape-left,
.entry-content img.chumbi-pages-shape-left,
.wp-block-post-content img.chumbi-pages-shape-left {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: -0.34em !important;
    margin-left: clamp(-90px, -5vw, -36px) !important;
}

.article-body img.chumbi-pages-shape-right,
.entry-content img.chumbi-pages-shape-right,
.wp-block-post-content img.chumbi-pages-shape-right {
    margin-top: 0 !important;
    margin-right: clamp(-90px, -5vw, -36px) !important;
    margin-bottom: -0.34em !important;
    margin-left: 0 !important;
}

.article-body img.chumbi-pages-shape-silhouette,
.entry-content img.chumbi-pages-shape-silhouette,
.wp-block-post-content img.chumbi-pages-shape-silhouette {
    shape-margin: 0 !important;
    shape-image-threshold: .45 !important;
}

/* Neutraliza resíduos do bloco is-resized do Gutenberg. */
.article-body figure.chumbi-pages-figure-contents > img,
.entry-content figure.chumbi-pages-figure-contents > img,
.wp-block-post-content figure.chumbi-pages-figure-contents > img {
    aspect-ratio: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 760px) {
    .article-body img.chumbi-pages-shape,
    .entry-content img.chumbi-pages-shape,
    .wp-block-post-content img.chumbi-pages-shape {
        margin: 1.5rem auto 1.9rem !important;
        shape-margin: 0 !important;
    }
}


/* 0.10.6 — aproxima mais o Pages: caixa de contorno menor e sem respiro lateral. */
@media (min-width: 1021px) {
    .article-body img.chumbi-pages-shape-left.chumbi-pages-shape-silhouette,
    .entry-content img.chumbi-pages-shape-left.chumbi-pages-shape-silhouette,
    .wp-block-post-content img.chumbi-pages-shape-left.chumbi-pages-shape-silhouette {
        margin-right: -2px !important;
    }

    .article-body img.chumbi-pages-shape-right.chumbi-pages-shape-silhouette,
    .entry-content img.chumbi-pages-shape-right.chumbi-pages-shape-silhouette,
    .wp-block-post-content img.chumbi-pages-shape-right.chumbi-pages-shape-silhouette {
        margin-left: -2px !important;
    }
}
