/* Blog do Hubmark (páginas montadas pela API: api/src/lib/blog-html.js). Vem depois do main.css e usa os tokens do :root dele.
   Lista e cabeçalhos no escuro, texto do artigo em fundo claro. Mobile first; pontos de quebra: 40em, 48em e 64em.
   Contrastes calculados pela fórmula WCAG. */

:root {
    --cor-previa: #f2c14e;          /* faixa de prévia: --cor-fundo por cima 10,0:1 */
    --cor-codigo: #f2f3f5;          /* fundo de código no artigo: --cor-texto-claro por cima 15,2:1 */
}

/* Cabeçalho das páginas do blog (escuro, com o brilho da marca) */
.blog-cabeca {
    padding: 2rem var(--gutter) 2.5rem;
    background-color: var(--cor-fundo);
    background-image: var(--fundo-brilho);
}
.blog-cabeca .contem > * { max-width: 48rem; }
.blog-cabeca__titulo { overflow-wrap: anywhere; margin-bottom: .75rem; }
.blog-cabeca__lide { font-size: 1.125rem; color: var(--cor-texto-2); overflow-wrap: anywhere; }   /* 10,3:1 sobre --cor-fundo */

/* Migalhas */
.migalhas { margin-bottom: 1.25rem; font-size: .9375rem; }
.migalhas ol { display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.migalhas li { display: inline-flex; align-items: center; gap: .5rem; color: var(--cor-texto-2); overflow-wrap: anywhere; }
.migalhas li + li::before { content: "/"; color: var(--cor-texto-2); }
.migalhas a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); text-underline-offset: 3px; }

/* Categorias (chips) */
.blog-categorias { margin-top: 1.5rem; }
.blog-categorias ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-categorias a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    padding: 0 1.1rem;
    border-radius: var(--radius-pilula);
    box-shadow: inset 0 0 0 2px var(--cor-contorno);   /* 5,6:1 sobre --cor-fundo */
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.blog-categorias a:hover { background: rgba(255, 255, 255, .1); }
.blog-categorias a[aria-current="page"] { background: var(--cor-verde); color: var(--cor-fundo); box-shadow: none; }   /* 6,0:1 */

/* Lista de artigos */
.blog-secao { padding-block: 2.5rem 4rem; }
.blog-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.cartao-post {
    position: relative;   /* o link do título cobre o cartão inteiro */
    display: flex;
    flex-direction: column;
    background: var(--cor-superficie);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--cor-linha);
    transition: transform .35s var(--ease);
}
.cartao-post:hover { transform: translateY(-3px); }
.cartao-post__imagem { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cartao-post__imagem--vazia { background: var(--gradiente-marca); opacity: .35; }
.cartao-post__corpo { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.25rem 1.25rem 1.5rem; }
.cartao-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: .875rem; color: var(--cor-texto-2); }   /* 8,9:1 sobre --cor-superficie */
.cartao-post__categoria { position: relative; z-index: 1; color: var(--cor-azul); font-weight: 600; text-underline-offset: 3px; }   /* 5,5:1 sobre --cor-superficie */
.cartao-post__titulo { overflow-wrap: anywhere; }
.cartao-post__titulo a { text-decoration: none; }
.cartao-post__titulo a::after { content: ""; position: absolute; inset: 0; }
.cartao-post__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cartao-post__titulo a:focus-visible { outline: none; }
.cartao-post:has(.cartao-post__titulo a:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.cartao-post__resumo { color: var(--cor-texto-2); overflow-wrap: anywhere; }
.cartao-post__mais { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--cor-verde); }   /* 5,2:1 sobre --cor-superficie */
.cartao-post__mais::after { content: " \2192"; }
.blog-vazio { color: var(--cor-texto-2); font-size: 1.125rem; }

/* Paginação */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: 3rem; }
.paginacao__atual { color: var(--cor-texto-2); }

/* Artigo */
.artigo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: 1.25rem; font-size: .9375rem; color: var(--cor-texto-2); }
.artigo-meta__categoria {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 .85rem;
    border-radius: var(--radius-pilula);
    background: rgba(255, 255, 255, .1);
    color: var(--cor-texto);
    font-weight: 600;
    text-decoration: none;
}
.artigo-meta__categoria:hover { background: rgba(255, 255, 255, .18); }

.blog-leitura { padding-block: 2rem 4rem; }
.blog-leitura__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.artigo-imagem {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    border-radius: var(--radius);
}

/* Sumário: o do celular (recolhido, antes do texto) e o lateral do computador; o CSS esconde um deles */
.sumario ol { display: grid; gap: .25rem; counter-reset: item; }
.sumario li { counter-increment: item; display: flex; gap: .5rem; }
.sumario li::before { content: counter(item) "."; flex: none; min-width: 1.5rem; color: var(--cor-texto-claro-2); }   /* 6,7:1 sobre branco */
.sumario a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); color: var(--cor-texto-claro); text-underline-offset: 3px; overflow-wrap: anywhere; }
.sumario a:hover { color: var(--cor-azul-escuro); }
.sumario--topo details { border: 1px solid var(--cor-linha-clara); border-radius: var(--radius); }
.sumario--topo summary { display: flex; align-items: center; min-height: var(--alvo-toque); padding: 0 1rem; font-weight: 700; cursor: pointer; }
.sumario--topo ol { padding: 0 1rem .75rem; }
.sumario--lateral { display: none; }
.sumario__titulo { margin-bottom: .5rem; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.125rem; color: var(--cor-texto-claro); }

/* Texto do artigo */
.blog-conteudo { max-width: 46rem; font-size: 1.125rem; line-height: 1.75; color: var(--cor-texto-claro); overflow-wrap: anywhere; }
.blog-conteudo > :first-child { margin-top: 0; }
.blog-conteudo p, .blog-conteudo ul, .blog-conteudo ol, .blog-conteudo blockquote, .blog-conteudo figure, .blog-conteudo pre { margin-bottom: 1.25rem; }
.blog-conteudo h2 {
    margin: 2.75rem 0 1rem;
    scroll-margin-top: 5.5rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.blog-conteudo h3 { margin: 2rem 0 .75rem; font-size: 1.375rem; line-height: 1.25; text-wrap: balance; }
.blog-conteudo ul { list-style: disc; padding-left: 1.5rem; }
.blog-conteudo ol { list-style: decimal; padding-left: 1.5rem; }
.blog-conteudo li { margin-bottom: .5rem; padding-left: .25rem; }
.blog-conteudo li > ul, .blog-conteudo li > ol { margin: .5rem 0 0; }
.blog-conteudo a { color: var(--cor-azul-escuro); text-underline-offset: 3px; }   /* 5,6:1 sobre branco */
.blog-conteudo a:hover { text-decoration-thickness: 2px; }
.blog-conteudo strong, .blog-conteudo b { font-weight: 700; }
.blog-conteudo blockquote { padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--cor-verde-escuro); color: var(--cor-texto-claro-2); font-style: italic; }
.blog-conteudo img { display: block; max-width: 100%; height: auto; margin: 2rem 0; border-radius: 12px; }
.blog-conteudo figure { margin-inline: 0; }
.blog-conteudo figure img { margin-block: 0 .5rem; }
.blog-conteudo figcaption { font-size: .9375rem; color: var(--cor-texto-claro-2); }
.blog-conteudo iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 2rem 0; border: 0; border-radius: 12px; background: var(--cor-fundo); }
.blog-conteudo hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--cor-linha-clara); }
.blog-conteudo code { padding: .1em .35em; border-radius: 6px; background: var(--cor-codigo); font-size: .9em; }
.blog-conteudo pre { padding: 1rem 1.25rem; border-radius: 12px; background: var(--cor-codigo); font-size: .9375rem; line-height: 1.55; overflow-x: auto; }
.blog-conteudo pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }

/* Relacionados */
.blog-relacionados { padding-block: 3rem 4rem; border-top: 1px solid var(--cor-linha); }
.blog-relacionados__titulo { margin-bottom: 1.5rem; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.2; }

/* Faixa da prévia */
.previa-faixa { padding: .75rem var(--gutter); background: var(--cor-previa); color: var(--cor-fundo); font-weight: 700; text-align: center; }

@media (min-width: 40em) {
    .blog-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
    .blog-cabeca { padding-block: 3rem 3.5rem; }
    .blog-secao { padding-block: 3.5rem 5.5rem; }
    .blog-leitura { padding-block: 3rem 5.5rem; }
    .blog-relacionados { padding-block: 4rem 5.5rem; }
}
@media (min-width: 64em) {
    .blog-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
    .blog-leitura__grade { grid-template-columns: minmax(0, 46rem) 17rem; justify-content: center; gap: 4rem; }
    .blog-leitura__grade--simples { grid-template-columns: minmax(0, 46rem); }
    .sumario--topo { display: none; }
    .sumario--lateral { display: block; align-self: start; position: sticky; top: 6rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; padding-left: 1.25rem; border-left: 1px solid var(--cor-linha-clara); }
}

@media (prefers-reduced-motion: reduce) {
    .cartao-post { transition: none; }
    .cartao-post:hover { transform: none; }
}