
/* Layout base (igual para ambos) */
.columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}
.columns > * {
    flex: 1;
    min-width: 0; /* Previne overflow de conteúdo longo */
}

/* === Layout Assimétrico: Imagem + Texto === */
.columns--image-text {
    align-items: flex-start; /* Evita que colunas estiquem verticalmente sem necessidade */
}

/* Coluna da Esquerda (Imagem) */
.columns--image-text > *:first-child {
    flex: 0 1 auto;      /* 0: não cresce, 1: PODE encolher, auto: baseia-se no tamanho da imagem */
    max-width: 35%;      /* Mas nunca ultrapassa 35% do container */
    width: auto;         /* Garante que a largura seja ditada pelo conteúdo */
}

/* Coluna da Direita (Texto) */
.columns--image-text > *:last-child {
    flex: 1 1 0;         /* Cresce para preencher o espaço restante */
    min-width: 0;        /* Permite que o texto quebre linha corretamente dentro do flex */
}

/* A imagem em si deve ser responsiva dentro da coluna */
.columns--image-text .col:first-child img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* === Apenas para o Editor (visual) === */
.mce-content-body .columns {
    outline: 1px dashed #cbd5e1;
    padding: 1rem;
    border-radius: 6px;
    background: #f8fafc;
}
.mce-content-body .col {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 1rem;
    border-radius: 4px;
    min-height: 60px;
}
.mce-content-body .columns > *:empty::before,
.mce-content-body .columns--image-text > *:empty::before {
    content: "Cole ou digite aqui...";
    color: #94a3b8;
    font-style: italic;
    font-size: 0.9rem;
}
/* Destaque visual para a coluna estreita no editor */
.mce-content-body .columns--image-text > *:first-child {
    background: #f1f5f9;
    border-style: dashed;
}

/* =========================================
   EDITOR: Imagens com legenda (TinyMCE)
   Arquivo: /assets/css/editor-style.css
   ========================================= */

/* 1. Imagens básicas no editor */
.editor-styles-wrapper img,
.mce-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* 2. Container de imagem com legenda (estrutura TinyMCE: dl/dt/dd) */
dl.wp-caption {
    max-width: 100%;
    margin: 1.5rem 0;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

/* Imagem dentro do dt */
dl.wp-caption dt.wp-caption-dt {
    margin: 0;
    padding: 0;
}

dl.wp-caption dt.wp-caption-dt img {
    border-radius: 8px 8px 0 0;
    display: block;
    width: 100%;
    height: auto;
}

/* Legenda dentro do dd */
dl.wp-caption dd.wp-caption-dd {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    background: #f2f2e7;
    border-radius: 0 0 8px 8px;
    line-height: 1.4;
    border-top: 1px solid #FFB2B2;
}

/* 3. Alinhamentos */

/* Centralizado */
dl.wp-caption.aligncenter,
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

/* Flutuando à esquerda */
dl.wp-caption.alignleft,
.alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
    clear: none;
    max-width: 50%;
}

/* Flutuando à direita */
dl.wp-caption.alignright,
.alignright {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
    clear: none;
    max-width: 50%;
}

/* Sem alinhamento */
dl.wp-caption.alignnone,
.alignnone {
    display: inline-block;
    margin: 0 0 1rem 0;
}

/* 4. Responsivo: desfazer floats em telas pequenas */
@media (max-width: 768px) {
    dl.wp-caption.alignleft,
    dl.wp-caption.alignright,
    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        text-align: center;
    }
    
    dl.wp-caption.alignleft,
    dl.wp-caption.alignright {
        width: 100% !important;
    }
}

/* 5. Interação (hover) */
dl.wp-caption a img {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

dl.wp-caption a img:hover {
    opacity: 0.95;
    transform: scale(1.01);
}

/* 6. Galerias no editor */
.gallery-item {
    margin: 0 !important;
}

.gallery-item img {
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.gallery-item a:hover img {
    transform: scale(1.02);
}

/* ajuste */
/* Reset de margens/paddings padrão do navegador para dl/dt/dd */
dl.wp-caption,
dl.wp-caption dt,
dl.wp-caption dd {
    margin: 0;
    padding: 0;
}

/* Garante que dt e dd sejam blocos empilhados corretamente */
dl.wp-caption dt.wp-caption-dt,
dl.wp-caption dd.wp-caption-dd {
    display: block;
    width: 100%;
}

/* Imagem dentro do dt - mantém o radius só no topo */
dl.wp-caption dt.wp-caption-dt img {
    border-radius: 8px 8px 0 0;
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom; /* Remove gap fantasma de inline */
}

/* Legenda no dd - border-radius só na base + borda superior visível */
dl.wp-caption dd.wp-caption-dd {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    background: #f2f2e7;
    border-radius: 0 0 8px 8px;
    line-height: 1.4;
    border-top: 1px solid #FFB2B2;
    position: relative; /* Garante que a borda fique no fluxo correto */
    z-index: 1; /* Empurra visualmente para frente se houver overlap */
}

/* Se ainda houver overlap, força separação com margin-top mínimo */
dl.wp-caption dt.wp-caption-dt + dd.wp-caption-dd {
    margin-top: 0; /* Já resetamos, mas explicita a intenção */
}