/* ==========================================================================
   ACIEG - estilos comuns a todas as páginas.

   ATENÇÃO: este arquivo é CSS puro, escrito à mão. NÃO existe (nem deve
   existir) um acieg-common.scss — os scripts `sass` do package.json não o
   geram nem o sobrescrevem. Edite este arquivo diretamente.

   Enfileirado por addingAciegStyles() em functions.php sempre por último,
   para vencer o CSS condicional de cada página.
   ========================================================================== */

/* ==========================================================================
   1. Miniaturas dos cards de listagem
   Proporção fixa em todos os breakpoints: a fileira de cards fica alinhada.
   ========================================================================== */

.Card-thumb {
    display: block;
    width: 100%;
    height: 200px; /* fallback para navegadores sem aspect-ratio */
    object-fit: cover;
    object-position: center;
    background-color: #eef1f5;
    border-radius: 7px 7px 0 0;
}

@supports (aspect-ratio: 3 / 2) {
    .Card-thumb {
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* Sem corte: recortes de imprensa e artes verticais, onde cortar perde texto. */
.Card-thumb--contain {
    object-fit: contain;
    background-color: #fff;
}

/* Post sem imagem destacada. Antes saía src="" — o navegador recarregava a
   própria página como se fosse imagem. */
.Card-thumb--empty {
    background-color: #e9ecef;
}

/* ==========================================================================
   2. Capa da publicação (notícia/evento): imagem inteira, sem recorte
   ========================================================================== */

.Post-cover {
    margin: 0;
}

.Post-cover-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* No desktop limita a altura sem cortar: com width auto o navegador reduz a
   caixa mantendo a proporção original da foto. */
@media (min-width: 768px) {
    .Post-cover-img {
        max-height: 70vh;
    }
}

.Post-cover-caption {
    padding: .5rem .25rem 0;
    font-size: .8125rem;
    line-height: 1.35;
}

/* ==========================================================================
   3. Conteúdo das publicações (the_content)
   O tema remove o wp-block-library (functions.php) e o Bootstrap 4 não define
   img{max-width:100%}. Sem estas regras, imagem inserida pelo editor estoura a
   coluna e gera rolagem horizontal no mobile.
   ========================================================================== */

#site-content img,
#site-content video,
#site-content iframe,
#site-content object,
#site-content embed {
    max-width: 100%;
}

#site-content img {
    height: auto;
}

#site-content figure {
    display: block;
    max-width: 100%;
    margin: 1.5rem 0;
}

#site-content figure img {
    display: block;
    margin: 0 auto;
}

#site-content figcaption,
#site-content .wp-caption-text {
    margin-top: .5rem;
    color: #6c757d;
    font-size: .8125rem;
    line-height: 1.35;
    text-align: center;
}

/* Legenda clássica do editor: o WP injeta width inline no .wp-caption. */
#site-content .wp-caption {
    width: auto !important;
    max-width: 100%;
}

/* Alinhamentos do editor, que vinham do wp-block-library. */
#site-content .aligncenter,
#site-content .alignnone {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

#site-content .alignleft {
    float: left;
    max-width: 50%;
    margin: .25rem 1.5rem 1rem 0;
}

#site-content .alignright {
    float: right;
    max-width: 50%;
    margin: .25rem 0 1rem 1.5rem;
}

#site-content .alignwide,
#site-content .alignfull {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    #site-content .alignleft,
    #site-content .alignright {
        display: block;
        float: none;
        max-width: 100%;
        margin: 1rem auto;
    }
}

#site-content .wp-block-image {
    margin: 1.5rem 0;
}

#site-content .wp-block-image img {
    display: block;
    height: auto;
}

#site-content .wp-block-gallery,
#site-content .blocks-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

#site-content .wp-block-gallery figure,
#site-content .blocks-gallery-item {
    flex: 1 1 45%;
    min-width: 0;
    margin: 0;
}

#site-content .wp-block-embed,
#site-content .wp-block-embed__wrapper {
    max-width: 100%;
    margin: 1.5rem 0;
}

/* Vídeos colados pelo editor acompanham a largura da coluna. */
@supports (aspect-ratio: 16 / 9) {
    #site-content .wp-block-embed iframe,
    #site-content iframe[src*="youtube"],
    #site-content iframe[src*="youtu.be"],
    #site-content iframe[src*="vimeo"] {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Tabelas e blocos de código colados no editor não estouram mais a coluna. */
#site-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

#site-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* URLs longas coladas no texto não empurram a coluna no mobile. */
#site-content p,
#site-content li,
#site-content h1,
#site-content h2,
#site-content h3,
#site-content h4 {
    overflow-wrap: break-word;
}