/* =============================================================================
   BLOG
   -----------------------------------------------------------------------------
   Estilos da listagem de matérias, da página do artigo e dos blocos que
   aparecem no site com as últimas publicações.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. LISTA DE ARTIGOS
   -------------------------------------------------------------------------- */

/* Grade dos cartões de artigo */
.grade-artigos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.1rem;
}

/* Cartão de um artigo */
.cartao-artigo {
    display: flex;
    flex-direction: column;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
    transition: border-color var(--transicao), transform var(--transicao);
}

/* Eleva o cartão quando o cursor passa por cima */
.cartao-artigo:hover {
    border-color: var(--cor-destaque-borda);
    transform: translateY(-3px);
}

/* Imagem do cartão de artigo */
.cartao-artigo-imagem {
    overflow: hidden;
    border-bottom: 1px solid var(--cor-borda);
}

/* Foto do artigo */
.cartao-artigo-imagem img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    transition: transform 420ms ease;
}

/* Amplia a foto quando o cursor passa por cima */
.cartao-artigo:hover .cartao-artigo-imagem img {
    transform: scale(1.04);
}

/* Corpo do cartão de artigo */
.cartao-artigo-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.3rem 1.35rem 1.4rem;
    flex-grow: 1;
}

/* Etiqueta da categoria do artigo */
.artigo-etiqueta {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(79, 179, 217, 0.1);
    border: 1px solid rgba(79, 179, 217, 0.24);
    color: #8fd0ea;
    font-family: var(--fonte-mono);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Título do artigo */
.cartao-artigo-titulo {
    font-size: 1.08rem;
    line-height: 1.35;
}

/* Link do título do artigo */
.cartao-artigo-titulo a {
    transition: color var(--transicao);
}

/* Destaca o título quando o cursor passa por cima */
.cartao-artigo-titulo a:hover {
    color: var(--cor-destaque);
}

/* Resumo do artigo */
.cartao-artigo-resumo {
    font-size: 0.9rem;
    flex-grow: 1;
}

/* Rodapé do cartão de artigo */
.cartao-artigo-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--cor-borda);
    font-family: var(--fonte-mono);
    font-size: 0.7rem;
    color: var(--cor-texto-tenue);
}

/* -----------------------------------------------------------------------------
   2. CATEGORIAS
   -------------------------------------------------------------------------- */

/* Lista das categorias do blog */
.blog-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 2.2rem;
}

/* Botão de uma categoria */
.blog-categoria {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--cor-texto-suave);
    transition: all var(--transicao);
}

/* Destaca a categoria quando o cursor passa por cima */
.blog-categoria:hover {
    border-color: var(--cor-destaque);
    color: var(--cor-destaque);
}

/* Categoria que está em uso */
.blog-categoria-ativa {
    background: var(--cor-destaque-tenue);
    border-color: var(--cor-destaque);
    color: var(--cor-destaque);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   3. PÁGINA DO ARTIGO
   -------------------------------------------------------------------------- */

/* Cabeçalho do artigo */
.artigo-cabecalho {
    padding-block: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.4rem);
    border-bottom: 1px solid var(--cor-borda);
}

/* Trilhas de navegação do artigo */
.artigo-migalhas {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    color: var(--cor-texto-tenue);
    margin-bottom: 1.1rem;
}

/* Link da trilha de navegação */
.artigo-migalhas a {
    color: var(--cor-texto-tenue);
    transition: color var(--transicao);
}

/* Destaca o link da trilha quando o cursor passa por cima */
.artigo-migalhas a:hover {
    color: var(--cor-destaque);
}

/* Título do artigo */
.artigo-titulo {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    max-width: 26ch;
}

/* Resumo do artigo */
.artigo-resumo {
    font-size: 1.1rem;
    color: var(--cor-texto-suave);
    max-width: 74ch;
    margin-top: 1.1rem;
}

/* Informações do artigo */
.artigo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    color: var(--cor-texto-tenue);
}

/* Imagem principal do artigo */
.artigo-imagem {
    max-width: 960px;
    margin: 2.4rem auto 0;
    padding-inline: 22px;
}

/* Foto principal do artigo */
.artigo-imagem img {
    width: 100%;
    height: auto;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
}

/* Corpo do texto do artigo */
.artigo-corpo {
    max-width: 74ch;
    margin: 2.6rem auto 0;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--cor-texto-suave);
}

/* Parágrafos do artigo */
.artigo-corpo p {
    margin-bottom: 1.4rem;
    color: var(--cor-texto-suave);
}

/* Figura com imagem dentro do corpo do artigo */
.artigo-figura {
    margin: 2.2rem 0;
}

/* Imagem da figura dentro do artigo */
.artigo-figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
}

/* Legenda da figura dentro do artigo */
.artigo-figura figcaption {
    margin-top: 0.7rem;
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--cor-texto-tenue);
    text-align: center;
}

/* Chamada no final do artigo */
.artigo-chamada {
    max-width: 74ch;
    margin: 3rem auto 0;
    padding: 1.6rem 1.7rem 1.7rem;
    background: linear-gradient(150deg, var(--cor-destaque-tenue), transparent);
    border: 1px solid var(--cor-destaque-borda);
    border-radius: var(--raio);
}

/* Título da chamada do artigo */
.artigo-chamada-titulo {
    font-size: 1.16rem;
    margin-bottom: 0.5rem;
}

/* Texto da chamada do artigo */
.artigo-chamada-texto {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

/* Artigos relacionados */
.artigo-relacionados {
    margin-top: 3.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--cor-borda);
}

/* -----------------------------------------------------------------------------
   4. BUSCA E PAGINAÇÃO
   -------------------------------------------------------------------------- */

/* Campo de busca do blog */
.blog-busca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
}

/* Área do campo de busca */
.blog-busca-campo {
    flex-grow: 1;
    min-width: 260px;
}

/* Área da paginação */
.paginacao {
    margin-top: 2.6rem;
    display: flex;
    justify-content: center;
}

/* Lista de itens da paginação */
.paginacao-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* Item da paginação */
.paginacao-item {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 0.6rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    font-size: 0.86rem;
    color: var(--cor-texto-suave);
    transition: all var(--transicao);
}

/* Destaca o item quando o cursor passa por cima */
.paginacao-item:hover {
    border-color: var(--cor-destaque);
    color: var(--cor-destaque);
}

/* Item da página atual */
.paginacao-item-ativa {
    background: var(--cor-destaque);
    border-color: var(--cor-destaque);
    color: #14110a;
    font-weight: 700;
}

/* Resumo da paginação */
.paginacao-resumo {
    margin-top: 0.8rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--cor-texto-tenue);
}

/* -----------------------------------------------------------------------------
   5. PÁGINA DO PROJETO
   -------------------------------------------------------------------------- */

/* Cabeçalho da página do projeto */
.pagina-projeto-cabecalho {
    padding-block: clamp(2.4rem, 5vw, 4rem) clamp(1.8rem, 3.5vw, 2.8rem);
    border-bottom: 1px solid var(--cor-borda);
}

/* Título da página do projeto */
.pagina-projeto-titulo {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    margin-bottom: 0.7rem;
}

/* Subtítulo da página do projeto */
.pagina-projeto-subtitulo {
    font-size: 1.12rem;
    color: var(--cor-destaque);
    margin-bottom: 1rem;
}

/* Resumo da página do projeto */
.pagina-projeto-resumo {
    font-size: 1.04rem;
    color: var(--cor-texto-suave);
    max-width: 70ch;
    margin-bottom: 1.6rem;
}

/* Links de ação da página do projeto */
.pagina-projeto-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

/* Corpo da página do projeto */
.pagina-projeto-corpo {
    max-width: 76ch;
    margin: 2.6rem 0 3.4rem;
}

/* Bloco de conteúdo do projeto */
.bloco-projeto {
    margin-bottom: 2.4rem;
}

/* Título do bloco do projeto */
.bloco-projeto-titulo {
    font-size: 1.24rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--cor-borda);
}

/* Texto do bloco do projeto */
.bloco-projeto-texto {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--cor-texto-suave);
    white-space: pre-line;
}

/* -----------------------------------------------------------------------------
   6. CAPA GERADA DENTRO DA MATÉRIA
   -------------------------------------------------------------------------- */

/* Prévia da capa no formulário do artigo */
.capa-previa {
    margin-top: 0.8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: #06090d;
}

/* Imagem da prévia da capa */
.capa-previa img {
    width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------------------------------------------------------
   7. RESPONSIVIDADE
   -------------------------------------------------------------------------- */

/* Ajustes aplicados nas telas de celular */
@media (max-width: 640px) {
    /* O título do artigo ocupa a largura toda */
    .artigo-titulo {
        max-width: none;
    }

    /* A chamada do artigo tem menos espaço */
    .artigo-chamada {
        padding: 1.3rem 1.2rem 1.4rem;
    }
}