/**
 * Responsive Knowledge Base
 *
 * O editor da base de conhecimento grava as imagens com width/height fixos
 * (atributo ou style inline). O CSS do core aplica apenas "max-width: 100%",
 * entao no mobile a largura encolhe, a altura continua fixa e a imagem fica
 * achatada/esticada. As regras abaixo devolvem a proporcao original.
 */

.section-knowledge-base .tc-content img,
.section-knowledge-base .kb-article-content img,
.section-knowledge-base img,
.kb-article-content img,
.kb-article img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* Imagens envolvidas em figure/link tambem nao podem estourar o container */
.section-knowledge-base figure,
.kb-article-content figure,
.kb-article figure {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0;
    margin-right: 0;
}

/* Evita que textos/URLs longos empurrem o layout e mantenham a imagem espremida */
.section-knowledge-base .kb-article-content,
.kb-article-content,
.kb-article {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

@media (max-width: 767px) {
    /* Floats/alinhamentos do editor viram bloco centralizado no mobile */
    .section-knowledge-base .kb-article-content img,
    .kb-article-content img,
    .kb-article img {
        float: none !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Tabela com largura fixa impede a imagem interna de encolher */
    .section-knowledge-base .kb-article-content table,
    .kb-article-content table,
    .kb-article table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    .section-knowledge-base .kb-article-content table td,
    .kb-article-content table td,
    .kb-article table td {
        width: auto !important;
        height: auto !important;
    }
}