/* =========================================================
   1. TOPO DA PÁGINA DO BLOG (APENAS LISTAGEM / GALERIA)
   ========================================================= */

body.blog main#content section.page-hero .section-head,
body.archive main#content section.page-hero .section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
}

body.blog main#content section.page-hero .section-head > *,
body.archive main#content section.page-hero .section-head > * {
    grid-column: auto !important;
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* =========================================================
   2. ESTRUTURA DENTRO DO POST (BODY.SINGLE - ALINHAMENTO LADO A LADO)
   ========================================================= */

body.single main#content section.page-hero .section-head {
    display: grid !important;
    grid-template-columns: 150px 1fr !important;
    column-gap: 20px !important;
    row-gap: 10px !important;
    align-items: center !important;
}

/* Kicker no topo ocupando a largura total */
body.single main#content section.page-hero .section-head > .kicker {
    grid-column: 1 / -1 !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}

/* Container da imagem forçado na primeira coluna */
body.single main#content section.page-hero .article-hero-image-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin: 0 !important;
    background-color: #0b4e28 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Título H1 forçado na segunda coluna (ao lado da imagem) */
body.single main#content section.page-hero .section-head > h1 {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 1.80rem !important;
    line-height: 1.25 !important;
    width: 100% !important;
    text-align: left !important;
    align-self: center !important;
	
}

/* Parágrafos, metas e botões abaixo da imagem e do título */
body.single main#content section.page-hero .section-head > p:not(.kicker):not(.article-meta),
body.single main#content section.page-hero .section-head .article-meta,
body.single main#content section.page-hero .section-head > p.article-meta,
body.single main#content section.page-hero .section-head > div:not(.article-hero-image-wrap) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: left !important;
}

body.single main#content section.page-hero .section-head > div:not(.article-hero-image-wrap) {
    display: flex !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

/* =========================================================
   3. CARDS DA GALERIA DO BLOG (FORA DO POST)
   ========================================================= */

body.blog article.article-card,
body.archive article.article-card,
article.article-card {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

article.article-card > h3,
article.article-card > p,
article.article-card > a:not(.article-thumb-link) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: left !important;
}

a.article-thumb-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0b4e28 !important;
}



/* =========================================================
   4. AJUSTE FINO DA IMAGEM DO POST
   ========================================================= */



/* =========================================================
   5. RESPONSIVO / MOBILE
   ========================================================= */

@media (max-width: 768px) {
    body.single main#content section.page-hero .section-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    body.single main#content section.page-hero .article-hero-image-wrap {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
    }
}
body main#content article.article-card a.article-thumb-link img.article-thumb {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

body.single main#content section.page-hero .article-hero-image-wrap {
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.single main#content section.page-hero img.article-hero-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.article-author, .article-next-step { margin-top: 2rem; padding: 1.5rem; border: 1px solid #e4e9e5; border-radius: 12px; background: #f6faf7; }
.article-author h2, .article-next-step h2 { margin-top: 0; }
.article-next-step .btn { margin-top: .75rem; }
.article-body li.editorial-heading { list-style: none; margin-left: -1.25rem; }
.regional-checklist li { margin-bottom: .8rem; }
.regional-resources a { text-decoration: underline; overflow-wrap: anywhere; }
.source-note { font-size: .875rem; color: #536058; }
body.single main#content section.page-hero .section-head { min-width: 0; }
body.single main#content section.page-hero .section-head > h1 { overflow-wrap: anywhere; }
body.single main#content section.page-hero .hero-actions { flex-wrap: wrap; }