/* ==========================================================================
   BLOG - Estilos das paginas publicas e da area de publicacao
   ========================================================================== */

/* Define a grade de tres colunas usada na listagem de artigos */
.grade-tres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Define a area de texto grande do formulario do artigo */
.campo-area-grande {
    min-height: 320px;
    font-family: var(--fonte-mono);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* Define a etiqueta usada nos artigos */
.etiqueta {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--raio-pilula);
    background-color: var(--cor-fundo-secundario);
    color: var(--cor-texto-secundario);
    font-size: 0.76rem;
    font-weight: 600;
}

/* ==========================================================================
   CARTAO DO ARTIGO
   ========================================================================== */

/* Define o cartao do artigo na listagem */
.cartao-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
    transition: box-shadow var(--transicao), transform var(--transicao);
}

/* Eleva o cartao do artigo quando o ponteiro passa sobre ele */
.cartao-post:hover {
    box-shadow: var(--sombra-hover);
    transform: translateY(-2px);
}

/* Define a imagem de capa do artigo */
.post-imagem {
    display: block;
    overflow: hidden;
    background-color: var(--cor-fundo-secundario);
    aspect-ratio: 16 / 9;
}

/* Define a imagem exibida dentro da capa do artigo */
.post-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Define o conteudo textual do cartao do artigo */
.post-conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
}

/* Define o link da categoria do artigo */
.post-categoria {
    align-self: flex-start;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-primaria-clara);
    text-decoration: none;
}

/* Define o titulo do artigo no cartao */
.post-titulo {
    font-size: 1.15rem;
    line-height: 1.35;
}

/* Remove o sublinhado do titulo do artigo */
.post-titulo a {
    color: var(--cor-texto-principal);
    text-decoration: none;
}

/* Define o resumo do artigo no cartao */
.post-resumo {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cor-texto-secundario);
}

/* Define o rodape do cartao do artigo */
.post-rodape {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cor-borda-suave);
    font-size: 0.78rem;
    color: var(--cor-texto-secundario);
}

/* ==========================================================================
   BARRA DO BLOG
   ========================================================================== */

/* Define a barra com as categorias e a busca do blog */
.blog-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cor-borda-suave);
}

/* Define a lista de categorias do blog */
.blog-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Define o link de cada categoria do blog */
.blog-categorias a {
    padding: 7px 14px;
    border-radius: var(--raio-pilula);
    border: 1px solid var(--cor-borda-suave);
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
    text-decoration: none;
    transition: background-color var(--transicao), color var(--transicao);
}

/* Destaca a categoria selecionada do blog */
.blog-categorias a:hover,
.blog-categorias .categoria-ativa {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-superficie);
}

/* Define o formulario de busca do blog */
.blog-busca {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Define a contagem de artigos do blog */
.blog-total {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
}

/* ==========================================================================
   PAGINA DO ARTIGO
   ========================================================================== */

/* Define o cabecalho da pagina do artigo */
.cabecalho-artigo {
    background-color: var(--cor-fundo-secundario);
}

/* Define o titulo do artigo */
.artigo-titulo {
    max-width: 900px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2;
}

/* Define o resumo do artigo */
.artigo-resumo {
    max-width: 760px;
    margin-top: 0.85rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--cor-texto-secundario);
}

/* Define a linha de informacoes do artigo */
.artigo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
}

/* Define a grade do artigo com a coluna lateral */
.artigo-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

/* Define a coluna principal do artigo */
.artigo-coluna {
    min-width: 0;
}

/* Define o conteudo principal do artigo */
.artigo-conteudo {
    font-family: var(--fonte-titulos);
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--cor-texto-principal);
}

/* Define os titulos dentro do conteudo do artigo */
.artigo-conteudo h2 {
    margin: 2.4rem 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cor-borda-suave);
    font-size: 1.6rem;
    line-height: 1.3;
}

/* Define os subtitulos dentro do conteudo do artigo */
.artigo-conteudo h3 {
    margin: 1.9rem 0 0.7rem;
    font-size: 1.3rem;
    line-height: 1.35;
}

/* Define os paragrafos dentro do conteudo do artigo */
.artigo-conteudo p {
    margin-bottom: 1.1rem;
}

/* Define as listas dentro do conteudo do artigo */
.artigo-conteudo ul,
.artigo-conteudo ol {
    margin: 0 0 1.2rem;
    padding-left: 1.4rem;
}

/* Define os itens de lista dentro do conteudo do artigo */
.artigo-conteudo li {
    margin-bottom: 0.5rem;
}

/* Define os negritos dentro do conteudo do artigo */
.artigo-conteudo strong {
    color: var(--cor-primaria-escura);
}

/* Define os links dentro do conteudo do artigo */
.artigo-conteudo a:not(.botao):not(.botao-whatsapp) {
    color: var(--cor-primaria-clara);
    text-decoration: underline;
}

/* Mantem os botoes do artigo com o formato original */
.artigo-conteudo a.botao,
.artigo-conteudo a.botao:hover {
    color: #FFFFFF;
    text-decoration: none;
}

/* Define as imagens dentro do conteudo do artigo */
.artigo-conteudo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--raio-cartao);
}

/* Define a imagem de capa do artigo */
.artigo-capa {
    margin-bottom: 1.75rem;
}

/* Define a legenda da imagem de capa do artigo */
.artigo-capa figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
}

/* Define as etiquetas do artigo */
.artigo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cor-borda-suave);
}

/* Define a chamada de atendimento dentro do artigo */
.artigo-acao {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--raio-cartao);
    background-color: var(--cor-fundo-secundario);
    border-left: 4px solid var(--cor-primaria);
}

/* Define o titulo da chamada de atendimento */
.artigo-acao h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

/* Define o texto da chamada de atendimento */
.artigo-acao p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
}

/* ==========================================================================
   PREVIA DA BUSCA
   ========================================================================== */

/* Define o bloco de previa da busca */
.previa-busca {
    padding: 1rem 1.15rem;
    border-radius: var(--raio-cartao);
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda-suave);
}

/* Define o endereco exibido na previa da busca */
.previa-endereco {
    font-size: 0.8rem;
    color: var(--cor-sucesso);
}

/* Define o titulo exibido na previa da busca */
.previa-titulo {
    margin-top: 0.2rem;
    font-size: 1.1rem;
    color: #1a0dab;
}

/* Define a descricao exibida na previa da busca */
.previa-descricao {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
}

/* Define a imagem exibida na previa da capa */
.previa-imagem {
    max-width: 320px;
    border-radius: var(--raio-cartao);
    border: 1px solid var(--cor-borda-suave);
}

/* ==========================================================================
   TELA DE ACESSO DO BLOG
   ========================================================================== */

/* Define o fundo da tela de acesso do blog */
.pagina-acesso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background-color: var(--cor-fundo-principal);
}

/* Define o conteudo central da tela de acesso */
.acesso-conteudo {
    width: 100%;
    max-width: 440px;
}

/* Define o cartao da tela de acesso */
.acesso-cartao {
    padding: 2rem;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
}

/* Centraliza a marca na tela de acesso */
.marca-centralizada {
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* Define o titulo da tela de acesso */
.acesso-cartao h1 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

/* Define o texto da tela de acesso */
.acesso-texto {
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    color: var(--cor-texto-secundario);
}

/* Define o aviso da tela de acesso */
.acesso-aviso {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda-suave);
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
}

/* ==========================================================================
   CARTAO DE IMAGEM ESCOLHIDA NO BANCO
   ========================================================================== */

/* Define o cartao de uma imagem do banco de imagens */
.cartao-imagem {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
}

/* Define a foto dentro do cartao de imagem */
.cartao-imagem-foto {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background-color: var(--cor-fundo-secundario);
}

/* Define o corpo do cartao de imagem */
.cartao-imagem-corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

/* Define o titulo do cartao de imagem */
.cartao-imagem-titulo {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cor-texto-principal);
}

/* ==========================================================================
   ADAPTACAO PARA TELAS MEDIAS
   ========================================================================== */

@media (min-width: 900px) {
    /* Define a grade do artigo com a coluna lateral ao lado */
    .artigo-grade {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}