/* =========================================
   Imagens do Editor WordPress
   ========================================= */

/* 1. Imagens básicas (sem caption) */
.wp-block-image img,
.content img:not(.custom-logo):not(.avatar) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* 2. Container de imagem com legenda (wp-caption) */
.wp-caption {
    max-width: 100%;
    margin: 1.5rem 0;
    background: transparent;
    border-radius: 8px;
    overflow: hidden; /* para o border-radius "cortar" a imagem */
}

.wp-caption img {
    border-radius: 8px 8px 0 0; /* só topo arredondado, legenda fica "quadrada" embaixo */
    display: block;
    width: 100%;
    height: auto;
}

/* Legenda */
.wp-caption-text,
figcaption.wp-caption-text {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-grey, #666);
    text-align: center;
    background: rgba(0,0,0,0.03);
    border-radius: 0 0 8px 8px; /* arredonda só a base */
    margin: 0;
    line-height: 1.4;
}

/* Se preferir legenda com borda superior sutil: */
.wp-caption-text {
    border-top: 1px solid var(--color-border, #e0e0e0);
    background: var(--color-bg, #fff);
}

/* 3. Alinhamentos */

/* Centralizado (o mais comum) */
.aligncenter,
.wp-caption.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

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

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

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

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

/* 5. Acessibilidade e interação */
.wp-caption a img,
.content a img {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

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

/* Foco visível para navegação por teclado */
.content a:focus img,
.wp-caption a:focus img {
    outline: 2px solid var(--color-primary, #0066cc);
    outline-offset: 2px;
}

/* 6. Galerias nativas do WP (bônus) */
.gallery-item {
    margin: 0 !important; /* reset do WP */
}

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

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