/* =============================================================================
   blog.css — Terceirize Finanças
   -----------------------------------------------------------------------------
   Estilos exclusivos do blog. NÃO redefine cores/fontes/tokens: tudo aqui usa
   as variáveis já declaradas em ../css/style.css (--main_bg_color,
   --destaque_color, --black, --white, --surface_color, --muted_text,
   --tag_highlight, --border_subtle, --divider_color, --dark_bg etc.) e os
   componentes existentes (.card, .tag, .reveal, .dark, .container,
   button[data-btn]). Convenção do projeto: classes em snake_case,
   comentários em português, breakpoints em 1200px e 900px.
   ============================================================================= */

/* -----------------------------------------------------------------------
   Estrutura geral das páginas do blog
   ----------------------------------------------------------------------- */

/* o style.css fixa html em 500vh (pensado pra landing, que é longa); nas
   páginas do blog isso deixava um vão vazio enorme depois do rodapé */
html {
    height: auto;
}

.blog_page {
    /* espaço pro header fixo não tampar o começo do conteúdo — o header
       principal é bem mais alto que o da página "em breve", por isso o
       valor maior aqui. */
    padding-top: 160px;
    padding-bottom: 120px;
    background-color: var(--main_bg_color);
    min-height: 100vh;
    /* redefine as variáveis do placeholder listrado só dentro do blog: o
       cinza neutro (--media_slot_bg1/2 originais, em style.css) funciona
       bem espalhado pela landing, mas aqui — onde a capa domina boa parte
       visual do card — um tom levemente azulado (mesma família de
       --main_bg_color/--surface_color) deixa o placeholder parecendo
       parte do design do site em vez de um cinza genérico de "sem imagem
       ainda". Não muda nada fora do blog: a variável só existe dentro
       deste seletor. */
    --media_slot_bg1: #eef4fa;
    --media_slot_bg2: #d7e6f2;
}

/* o .container global (style.css) é flex em linha, pensado pras seções da
   landing — aqui o conteúdo empilha (cabeçalho, filtros, destaque, grade),
   então volta a ser bloco com largura total. O "main." é pra vencer a
   especificidade de ".container:not(header .container)". */
main.blog_page .container {
    display: block;
    width: 100%;
    max-width: 1200px;
    padding: 0 24px;
}

/* cabeçalho de página (título + descrição), usado na listagem, categoria,
   tag, busca e 404 */
.blog_page_head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.blog_page_head h1 {
    font-weight: 800;
    font-size: 42px;
    line-height: 1.25;
    color: var(--black);
}

.blog_page_head p {
    color: var(--muted_text);
    font-size: 17px;
}

/* -----------------------------------------------------------------------
   Barra de busca + contagem de resultados
   ----------------------------------------------------------------------- */

.blog_busca {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto 24px;
    padding: 6px 8px 6px 18px;
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
    border-radius: 999px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.blog_busca:focus-within {
    border-color: var(--destaque_color);
    box-shadow: 0 0 0 4px var(--tag_highlight);
}

.blog_busca i.bi-search {
    color: var(--muted_text);
    font-size: 15px;
}

.blog_busca input {
    flex: 1;
    /* sem isso o input não encolhe abaixo da largura padrão dele (~20
       caracteres) e empurra o botão "Buscar" pra fora da barra no celular */
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--black);
    padding: 8px 0;
}

.blog_busca input::placeholder {
    color: var(--muted_text);
}

.blog_busca button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--destaque_color);
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    transition: filter 0.2s;
    flex-shrink: 0;
}

.blog_busca button:hover {
    filter: brightness(0.92);
}

.blog_resultados {
    text-align: center;
    color: var(--muted_text);
    font-size: 14px;
    margin: -8px 0 32px;
}

.blog_resultados strong {
    color: var(--black);
}

/* -----------------------------------------------------------------------
   Filtro por categoria (chips)
   ----------------------------------------------------------------------- */

.blog_filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 48px;
}

.blog_filtros a {
    text-decoration: none;
    color: var(--black);
}

.blog_filtros .tag {
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.blog_filtros .tag:not(.ativo):hover {
    background-color: var(--tag_highlight);
    border-color: transparent;
}

.blog_filtros .tag.ativo {
    background-color: var(--destaque_color);
    color: var(--white);
    border-color: var(--destaque_color);
}

/* -----------------------------------------------------------------------
   Post em destaque (topo da listagem, só na página 1 sem filtro)
   -----------------------------------------------------------------------
   Card clássico: capa de um lado (proporção fixa, sem cobrir o card
   inteiro) e conteúdo do outro lado num fundo branco normal — título,
   resumo e rodapé sempre visíveis, sem precisar passar o mouse ou clicar
   pra "descobrir" que tem texto ali. A versão "imagem cobrindo tudo, texto
   só num degradê por cima" foi testada e voltou atrás: ficava bonita mas
   escondia informação (só dava pra ver o essencial clicando no post).
   ----------------------------------------------------------------------- */

.blog_destaque {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* o ".card" global (style.css) vem com padding:40px — bom pros cards
       da landing (ícone + texto centralizados), mas aqui a capa precisa
       encostar nas bordas do card, não ficar emoldurada por 40px de
       respiro. Cada área ganha seu próprio espaçamento interno onde faz
       sentido (.blog_destaque_conteudo já tem o dele). */
    padding: 0;
    border-radius: 8.5px;
    overflow: hidden;
    margin-bottom: 40px;
    text-decoration: none;
    color: inherit;
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
    box-shadow: 0 4px 18px -12px color-mix(in srgb, var(--black) 35%, transparent);
}

.blog_destaque:hover {
    border-color: transparent;
}

.blog_destaque .media_slot {
    position: relative;
    height: 100%;
    min-height: 240px;
    border-radius: 0;
}

.blog_destaque .media_slot img[src]:not([src=""]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog_destaque_conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 32px 36px;
}

.blog_destaque_conteudo h2 {
    font-weight: 800;
    font-size: 25px;
    line-height: 1.3;
    color: var(--black);
}

.blog_destaque_conteudo p {
    color: var(--muted_text);
    font-size: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* categoria do post: por padrão o ".tag" global é só um contorno (sem
   fundo definido) — bom pros chips de filtro (que precisam de um estado
   "normal" neutro pra diferenciar do "ativo"), mas aqui, sem interação
   nenhuma envolvida, um fundo levemente colorido (mesmo tom usado nos
   estados ativos/hover do resto do blog) deixa a categoria parecer parte
   do design em vez de um rótulo esquecido sem estilo. */
.blog_destaque_conteudo .tag,
.blog_card_body .tag {
    background-color: var(--tag_highlight);
    border-color: transparent;
    color: var(--destaque_color);
    font-weight: 600;
}

/* -----------------------------------------------------------------------
   Grid de cards de post (listagem, categoria, tag, busca, relacionados)
   -----------------------------------------------------------------------
   Card clássico e compacto: capa numa faixa de proporção fixa no topo,
   corpo com fundo branco logo abaixo (título, resumo curto e rodapé) — dá
   pra ver do que se trata sem precisar clicar, e o card fica bem mais
   baixo do que a versão "capa cobrindo tudo".

   grid-template-columns usa auto-fit em vez de um número fixo de colunas:
   quando sobra 1 ou 2 posts numa linha, o auto-fit colapsa as colunas
   vazias e redistribui o espaço entre os cards que existem, em vez de
   deixar um vão em branco sobrando na linha.
   ----------------------------------------------------------------------- */

.blog_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.blog_card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* mesma observação do .blog_destaque logo acima: zera o padding:40px
       herdado do ".card" global, pra capa encostar nas bordas do card. */
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
    /* sombra leve "de repouso" — o .card global só dá sombra no hover; aqui
       o card já fica com uma presença sutil parado, e o hover (herdado de
       .card) intensifica isso. */
    box-shadow: 0 4px 18px -12px color-mix(in srgb, var(--black) 35%, transparent);
}

.blog_card:hover {
    border-color: transparent;
}

.blog_card .media_slot {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    flex-shrink: 0;
}

.blog_card .media_slot img[src]:not([src=""]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* se a fonte de ícones (CDN, bootstrap-icons) ainda não carregou no
   primeiro paint, o navegador usa a fonte de fallback (Poppins/sans-serif)
   pra desenhar o caractere da área de uso privado — e o glifo de fallback
   às vezes é maior que o círculo de 36px, vazando um pedacinho do código
   (tipo "19" ou "D7") pra fora. overflow:hidden nesses dois pontos evita
   esse vazamento até a fonte certa terminar de carregar. */
.blog_destaque .media_slot i.bi::before,
.blog_card .media_slot i.bi::before {
    overflow: hidden;
}

.blog_card_body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}

.blog_card_body h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--black);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog_card_body p {
    color: var(--muted_text);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* rodapé do card: linha do autor (quando o post tem um) + linha de
   data/tempo de leitura, empurrado pro final do card mesmo quando os
   textos acima têm tamanhos diferentes */
.blog_card_rodape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    width: 100%;
    /* linha bem discreta (mesmo tom sutil da borda do card, não o divisor
       mais forte usado em listas/tabelas) — só uma pausa visual leve antes
       do rodapé, sem parecer um formulário cortado em seções */
    border-top: 1px solid var(--border_subtle);
}

.blog_card_autor {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
}

.blog_card_autor .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.blog_card_autor .avatar .media_slot {
    width: 100%;
    height: 100%;
}

.blog_card_autor .avatar .media_slot img[src]:not([src=""]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog_card_meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted_text);
    font-size: 13px;
}

.blog_card_meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog_card_meta i.bi {
    font-size: 12px;
}

.blog_card_meta span::after {
    content: "·";
    margin-left: 10px;
    opacity: var(--opacity);
}

.blog_card_meta span:last-child::after {
    content: "";
    margin-left: 0;
}

/* -----------------------------------------------------------------------
   Estado vazio (busca sem resultado / categoria sem posts)
   -----------------------------------------------------------------------
   Mesmo padrão do círculo com ícone usado na 404 do blog (.blog_404
   .icon_circle) — reaproveitado aqui em vez de inventar um estilo novo,
   só trocando o ícone pra lupa (contexto de busca/filtro vazio).
   ----------------------------------------------------------------------- */

.blog_vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 60px 20px;
}

.blog_vazio .icon_circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--tag_highlight);
    color: var(--destaque_color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.blog_vazio p {
    color: var(--muted_text);
    font-size: 16px;
}

/* -----------------------------------------------------------------------
   Paginação
   ----------------------------------------------------------------------- */

.blog_paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog_paginacao a,
.blog_paginacao span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.blog_paginacao a:hover {
    background-color: var(--tag_highlight);
    color: var(--destaque_color);
}

.blog_paginacao .blog_pagina_atual {
    background-color: var(--destaque_color);
    color: var(--white);
}

.blog_paginacao .blog_reticencias {
    color: var(--muted_text);
}

/* -----------------------------------------------------------------------
   Post — cabeçalho
   ----------------------------------------------------------------------- */

/* botão "voltar ao blog" — alinhado à esquerda da mesma coluna de 980px
   da capa/conteúdo; antes, o único jeito de sair do post era clicando na
   categoria acima do título (que nem levava pra listagem completa) */
.post_voltar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 32px max(0px, calc((100% - 980px) / 2));
    padding: 9px 18px 9px 14px;
    border-radius: 999px;
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
    color: var(--black);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 18px -12px color-mix(in srgb, var(--black) 35%, transparent);
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.post_voltar i.bi {
    font-size: 15px;
    transition: transform 0.25s;
}

.post_voltar:hover {
    background-color: var(--destaque_color);
    border-color: var(--destaque_color);
    color: var(--white);
}

.post_voltar:hover i.bi {
    transform: translateX(-3px);
}

.post_head {
    max-width: 800px;
    margin: 0 auto 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

/* categoria acima do título: só um rótulo (sem link nem hover — pra sair
   do post existe o botão "voltar ao blog"), com o mesmo "chip" colorido
   dos cards da listagem */
.post_categoria .tag {
    background-color: var(--tag_highlight);
    border-color: transparent;
    color: var(--destaque_color);
    font-weight: 700;
}

.post_head h1 {
    font-weight: 800;
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--black);
    text-wrap: balance;
}

/* filete de destaque abaixo do título */
.post_head h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 22px auto 0;
    border-radius: 999px;
    background-color: var(--destaque_color);
}

.post_resumo {
    max-width: 640px;
    color: var(--muted_text);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.post_autor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
    padding: 8px 20px 8px 8px;
    border-radius: 999px;
    background-color: var(--white);
    border: 1px solid var(--border_subtle);
}

.post_autor .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.post_autor .avatar .media_slot {
    width: 100%;
    height: 100%;
}

.post_autor .avatar .media_slot img[src]:not([src=""]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* avatar (foto de autor) sem foto cadastrada: o media_slot padrão do site
   mostra um ícone + uma legenda de texto (bom pra capa de post, grande
   demais pra um círculo de avatar). Aqui a gente só quer o ícone de
   "pessoa" preenchendo o círculo, sem a legenda — vale tanto pro avatar
   da página do post quanto pro avatar nos cards da listagem. */
.post_autor .avatar .media_slot,
.blog_card_autor .avatar .media_slot {
    width: 100%;
    height: 100%;
}

.post_autor .avatar .media_slot:has(img[src=""], img:not([src]))::after,
.blog_card_autor .avatar .media_slot:has(img[src=""], img:not([src]))::after {
    display: none;
}

.post_autor .avatar .media_slot:has(img[src=""], img:not([src])) i.bi::before,
.blog_card_autor .avatar .media_slot:has(img[src=""], img:not([src])) i.bi::before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 18px;
}

.blog_card_autor .avatar .media_slot:has(img[src=""], img:not([src])) i.bi::before {
    font-size: 13px;
}

.post_autor_info {
    text-align: left;
    font-size: 14px;
    color: var(--muted_text);
}

.post_autor_info strong {
    display: block;
    color: var(--black);
    font-size: 15px;
}

.post_autor_info i.bi {
    font-size: 13px;
    margin-right: 5px;
    vertical-align: -1px;
}

/* data e tempo de leitura: cada um é um bloco que não quebra no meio —
   no celular, se não couberem lado a lado, o tempo desce inteiro pra linha
   de baixo em vez de sobrar "5" numa linha e "min de leitura" na outra */
.post_autor_meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 2px;
}

.post_autor_meta > span {
    white-space: nowrap;
}

.post_capa {
    max-width: 980px;
    margin: 0 auto 56px;
}

.post_capa .media_slot {
    border-radius: 8.5px;
    overflow: hidden;
    aspect-ratio: 21 / 9;
}

.post_capa .media_slot img[src]:not([src=""]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------------------
   Post — layout (sumário + conteúdo)
   ----------------------------------------------------------------------- */

.post_layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

.post_sumario {
    position: sticky;
    top: 140px;
}

.post_sumario h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted_text);
    margin-bottom: 14px;
}

.post_sumario ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 2px solid var(--border_subtle);
    padding-left: 16px;
}

.post_sumario li.post_sumario_h3 {
    padding-left: 14px;
}

.post_sumario a {
    color: var(--muted_text);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.2s;
}

.post_sumario a:hover {
    color: var(--destaque_color);
}

/* marcado via JS (post.php) enquanto o trecho correspondente do artigo
   está sendo lido — "scrollspy" simples, sem biblioteca */
.post_sumario a.ativo {
    color: var(--destaque_color);
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   Barra de progresso de leitura (topo fixo, abaixo do header)
   -----------------------------------------------------------------------
   Só existe/aparece na página de post (post.php insere o elemento e o
   script que atualiza a largura); nas outras páginas do blog o elemento
   nem chega a existir no DOM.
   ----------------------------------------------------------------------- */

.blog_progresso {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    z-index: 200;
}

.blog_progresso span {
    display: block;
    height: 100%;
    width: 0%;
    background-color: var(--destaque_color);
    transition: width 0.1s linear;
}

/* -----------------------------------------------------------------------
   Post — conteúdo (tipografia)
   ----------------------------------------------------------------------- */

.post_content {
    max-width: 720px;
    color: var(--black);
    font-size: 17px;
    line-height: 1.8;
}

.post_content h2 {
    font-weight: 800;
    font-size: 27px;
    margin: 48px 0 18px;
    scroll-margin-top: 140px;
}

.post_content h3 {
    font-weight: 700;
    font-size: 21px;
    margin: 36px 0 14px;
    scroll-margin-top: 140px;
}

.post_content p {
    margin-bottom: 20px;
    color: var(--black);
}

.post_content ul,
.post_content ol {
    margin: 0 0 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post_content a {
    color: var(--destaque_color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post_content blockquote {
    border-left: 3px solid var(--destaque_color);
    padding: 4px 0 4px 20px;
    margin: 28px 0;
    color: var(--muted_text);
    font-style: italic;
}

.post_content img {
    max-width: 100%;
    height: auto;
    border-radius: 8.5px;
    margin: 12px 0;
}

.post_content code {
    background-color: var(--surface_color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.post_content pre {
    background-color: var(--surface_color);
    padding: 18px;
    border-radius: 8.5px;
    overflow-x: auto;
    margin-bottom: 20px;
}

/* -----------------------------------------------------------------------
   Post — tags, compartilhar, CTA e relacionados
   ----------------------------------------------------------------------- */

.post_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 32px;
}

.post_compartilhar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    margin-bottom: 40px;
    border-top: 1px solid var(--divider_color);
    border-bottom: 1px solid var(--divider_color);
}

.post_compartilhar span {
    font-size: 14px;
    color: var(--muted_text);
    font-weight: 600;
}

.post_compartilhar a,
.post_compartilhar button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface_color);
    color: var(--black);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-size: 15px;
}

.post_compartilhar a:hover,
.post_compartilhar button:hover {
    background-color: var(--destaque_color);
    color: var(--white);
}

.post_relacionados {
    max-width: 1200px;
    margin: 0 auto;
}

.post_relacionados h3 {
    font-weight: 800;
    font-size: 24px;
    color: var(--black);
    margin-bottom: 28px;
    text-align: center;
}

/* -----------------------------------------------------------------------
   Navegação: link "Blog" ativo no header enquanto se está em /blog/
   ----------------------------------------------------------------------- */

.mobile_panel nav a.nav_atual {
    color: var(--destaque_color);
}

/* listas do rodapé: o style.css não zera o padding padrão do navegador
   (40px) nos <ul>, então os links ficavam deslocados pra direita em
   relação aos títulos "Navegação"/"Contato" — bem visível no celular */
.footer_col ul {
    padding-left: 0;
}

/* -----------------------------------------------------------------------
   Página 404 do blog (reaproveita a mesma cara da blog.html "em breve")
   ----------------------------------------------------------------------- */

.blog_404 {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.blog_404 .icon_circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--tag_highlight);
    color: var(--destaque_color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 6px;
}

.blog_404 h1 {
    font-weight: 800;
    font-size: 32px;
    color: var(--black);
}

.blog_404 p {
    color: var(--muted_text);
    font-size: 16px;
}

/* =============================================================================
   Responsivo
   ============================================================================= */

@media (max-width: 1200px) {
    /* .blog_grid não precisa de regra aqui: grid-template-columns já usa
       auto-fit (ver acima), então o número de colunas se ajusta sozinho
       conforme a largura disponível — sem deixar coluna vazia sobrando. */

    .blog_destaque_conteudo {
        padding: 28px 28px;
    }

    .post_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .post_sumario {
        position: static;
        border-bottom: 1px solid var(--divider_color);
        padding-bottom: 28px;
    }

    .post_sumario ul {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 900px) {
    .blog_page {
        padding-top: 130px;
        padding-bottom: 80px;
    }

    .blog_page_head h1 {
        font-size: 30px;
    }

    /* abaixo de 900px a capa do destaque empilha em cima do conteúdo em vez
       de ficar lado a lado (não sobra largura suficiente pras duas colunas
       sem espremer demais o texto) — o card do grid não precisa de regra
       aqui, ele já é compacto (capa numa faixa fixa + corpo abaixo) em
       qualquer largura. */
    .blog_destaque {
        grid-template-columns: 1fr;
    }

    .blog_destaque .media_slot {
        aspect-ratio: 16 / 10;
        height: auto;
        min-height: 0;
    }

    .blog_destaque_conteudo h2 {
        font-size: 22px;
    }

    .post_head h1 {
        font-size: 28px;
    }

    .post_resumo {
        font-size: 16px;
    }

    .post_voltar {
        margin-bottom: 24px;
    }

    .post_content {
        font-size: 16px;
    }

    .post_content h2 {
        font-size: 23px;
    }

    .post_content h3 {
        font-size: 19px;
    }
}

@media (max-width: 560px) {
    /* em tela de celular o auto-fit ainda tentaria encaixar 2 colunas de
       260px — força 1 coluna só nessa largura pra não espremer o card. */
    .blog_grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 21:9 vira uma faixa fininha na largura do celular */
    .post_capa {
        margin-bottom: 36px;
    }

    .post_capa .media_slot {
        aspect-ratio: 16 / 10;
    }

    .post_head h1 {
        font-size: 26px;
    }

    .blog_page_head {
        margin-bottom: 36px;
    }
}