@import url('./00_globals.css');

/* ========================================
   ESTILO ESPECÍFICO: blog.html
   Layout em 3 colunas inspirado no LinkedIn
   Coluna Esquerda (Perfil) | Centro (Artigos) | Direita (Arquivo)
   ======================================== */

/* ========================================
   CONTAINER PRINCIPAL - BLOG LAYOUT
   Layout em 3 colunas: esquerda, centro, direita
   ======================================== */

/* Blog Container - Wrapper Principal
   Layout grid com 3 colunas
   - display: grid para controle de tamanhos
   - grid-template-columns: proporciona 3 colunas (pequena, grande, pequena)
   - Sem grid-auto-rows: altura determinada pelo conteúdo mais alto
   - gap: 20px espaçamento entre colunas
   - max-width: 1220px máximo de largura (mesmo que perfil-container)
   - margin: 0 auto centraliza conteúdo
   - padding: 0 sem padding lateral (como em perfil-container)
   - align-items: stretch faz todas as colunas acompanharem a altura maior
*/
.blog-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0;
    align-items: stretch;
}

/* ========================================
   COLUNA ESQUERDA - RESUMO HOME
   Card pequeno com informações resumidas
   ======================================== */

/* Blog Sidebar Left - Coluna Esquerda
   - position: relative para manter fluxo normal
   - Contém informações resumidas do perfil
*/
.blog-sidebar-left {
    position: relative;
}

/* Blog Card Left - Card Principal Esquerda (Perfil)
   - background: cor escura do tema
   - border: borda preto/padrão do tema
   - border-radius: cantos arredondados
   - padding: espaçamento interno
   - display: flex para organizar conteúdo em coluna
   - flex-direction: column alinha itens em coluna
   - height: 100% ocupa altura total do grid
   - position: sticky com top 80px (acompanha scroll)
   - transition: transição suave para efeitos hover
*/
.blog-card-left {
    background-color: var(--backg-Sub-cor);
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    border-radius: var(--borderRadius-padrao);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    position: sticky;
    top: 80px;
    transition: var(--transicao-padrao);
}

/* Blog Card Left - Hover (Feedback Visual) */
.blog-card-left:hover {
    background-color: #1a1a1a;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* Blog Card Left - Foto
   - width: 100% ocupa largura total
   - height: auto mantém proporção
   - border-radius: cantos arredondados
   - object-fit: cover preenche espaço mantendo proporção
*/
.blog-card-left img {
    width: 100%;
    height: auto;
    border-radius: var(--borderRadius-padrao);
    object-fit: cover;
}

/* Profile Photo - Foto do Perfil com borda */
.profile-photo {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* Profile Name - Nome do Usuário */
.profile-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texto-cor-padrao);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* Profile Title - Título Profissional */
.profile-title {
    font-size: 0.9rem;
    color: var(--texto-cor-padrao-destaque);
    margin: 0 0 12px 0;
    line-height: 1.4;
    opacity: 0.85;
}

/* Profile Location - Localização */
.profile-location {
    font-size: 0.85rem;
    color: var(--texto-cor-padrao);
    margin: 0 0 4px 0;
    opacity: 0.7;
}

/* Profile Company - Empresa/Organização */
.profile-company {
    font-size: 0.8rem;
    color: var(--texto-cor-padrao);
    margin: 0 0 15px 0;
    opacity: 0.6;
}

/* Profile Skills - Seção de Habilidades */
.profile-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

/* Skill Tag - Tag Individual de Habilidade (Perfil) */
.skill-tag {
    background-color: var(--backg-Princ-cor);
    border: var(--borderSolid-padrao);
    color: var(--texto-cor-padrao);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: var(--transicao-padrao);
    cursor: default;
    display: inline-block;
}

.skill-tag:hover {
    background-color: #1a1a1a;
    border: var(--borderSolid-padrao);
    color: var(--texto-cor-padrao);
}

/* Profile Actions - Botões de Ação */
.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Button Secondary - Botão Estilo LinkedIn (Perfil - Ver perfil completo, Entrar em contato) */
.btn-secondary {
    background-color: var(--backg-Princ-cor);
    border: var(--borderSolid-padrao);
    color: var(--texto-cor-padrao);
    padding: 10px 16px;
    border-radius: var(--borderRadius-padrao);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: var(--transicao-padrao);
    display: block;
    width: 100%;
}

.btn-secondary:hover {
    background-color: #1a1a1a;
    border: var(--borderSolid-padrao);
    color: var(--texto-cor-padrao);
    transform: none;
}

/* Blog Card Left - Título
   - font-size: texto grande
   - color: cor padrão
   - margin: 0 remove margin
   - line-height: altura da linha padrão
*/
.blog-card-left h3 {
    font-size: var(--texto-Tamanho-Prin);
    color: var(--texto-cor-padrao);
    margin: 0;
    line-height: var(--line-height-padrao);
}

/* Blog Card Left - Descrição
   - font-size: texto pequeno
   - color: cor secundária
   - margin: 0 remove margin
   - opacity: 0.8 fica ligeiramente transparente
*/
.blog-card-left p {
    font-size: var(--texto-Tamanho-Sub);
    color: var(--texto-cor-padrao-destaque);
    margin: 0;
    opacity: 0.8;
}

/* Blog Card Left - Lista
   - list-style: none remove bullets
   - padding: 0 remove padding
   - margin: 0 remove margin
   - display: flex para organizar horizontalmente
   - flex-wrap: wrap permite quebra de linha
   - gap: 10px espaçamento entre itens
*/
.blog-card-left ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Blog Card Left - Item da Lista
   - background: cor escura
   - padding: 8px 12px espaçamento
   - border-radius: cantos arredondados
   - font-size: texto pequeno
   - color: cor padrão
*/
.blog-card-left li {
    background-color: var(--backg-Princ-cor);
    padding: 8px 12px;
    border-radius: var(--borderRadius-padrao);
    font-size: 0.85rem;
    color: var(--texto-cor-padrao);
}

/* Blog Card Left - Botão
   - Utiliza classe .btn-action existente
   - width: 100% ocupa largura total
   - margin-top: 10px espaçamento superior
*/
.blog-card-left .btn-action {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

/* ========================================
   COLUNA CENTRAL - CONTEÚDO DO BLOG
   Card grande com artigos e posts
   ======================================== */

/* Blog Main Content - Coluna Central
   - Contém os artigos principais do blog
*/
.blog-main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Blog Card Main - Card Principal Central (Artigos)
   - background: cor escura do tema
   - border: borda preto/padrão do tema
   - border-radius: cantos arredondados
   - padding: espaçamento interno
   - display: flex para organizar conteúdo em coluna
   - flex-direction: column para manter estrutura vertical
   - justify-content: space-between empurra botões para o final
   - height: auto tamanho automático conforme conteúdo
   - transition: transição suave para efeitos hover
   - Destinado para artigos e posts do blog
*/
.blog-card-main {
    background-color: var(--backg-Sub-cor);
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    border-radius: var(--borderRadius-padrao);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    transition: var(--transicao-padrao);
}

/* Blog Card Main - Hover (Feedback Visual) */
.blog-card-main:hover {
    background-color: #1a1a1a;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* Blog Card Main - Header
   - margin-bottom: 20px espaçamento inferior
   - border-bottom: linha divisória
   - padding-bottom: 20px espaçamento interno inferior
*/
.blog-card-main-header {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

/* Blog Card Main - Título
   - font-size: texto grande
   - color: cor padrão
   - margin: 0 remove margin
   - line-height: altura da linha padrão
*/
.blog-card-main h2 {
    font-size: var(--texto-Tamanho-Prin);
    color: var(--texto-cor-padrao);
    margin: 0 0 10px 0;
    line-height: var(--line-height-padrao);
}

/* Blog Card Main - Data e Autor
   - font-size: texto pequeno
   - color: cor secundária
   - display: flex para alinhamento
   - gap: 15px espaçamento entre elementos
   - align-items: center centraliza verticamente
*/
.blog-card-main-meta {
    font-size: 0.9rem;
    color: var(--texto-cor-padrao-destaque);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

/* Blog Card Main - Conteúdo
   - margin: 0 remove margin
   - line-height: altura da linha padrão
   - color: cor padrão
   - font-size: texto padrão
*/
.blog-card-main-content {
    margin: 0;
    line-height: var(--line-height-padrao);
    color: var(--texto-cor-padrao);
    font-size: var(--texto-Tamanho-Sub);
}

/* Blog Card Main - Paragráfo
   - margin-bottom: 15px espaçamento entre parágrafos
*/
.blog-card-main-content p {
    margin-bottom: 15px;
}

/* Blog Card Main - Heading
   - margin: 20px 0 espaçamento vertical
   - font-size: texto maior
   - color: cor padrão
*/
.blog-card-main-content h3 {
    margin: 20px 0 10px 0;
    font-size: 1.2rem;
    color: var(--texto-cor-padrao);
}

/* Blog Card Main - Lista
   - margin-left: 20px indentação
   - margin-bottom: 15px espaçamento inferior
*/
.blog-card-main-content ul,
.blog-card-main-content ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

/* Blog Card Main - Item da Lista
   - margin-bottom: 8px espaçamento
*/
.blog-card-main-content li {
    margin-bottom: 8px;
}

/* Blog Card Main - Footer
   - margin-top: 30px espaçamento superior
   - padding-top: 20px espaçamento interno
   - border-top: linha divisória
   - display: flex para alinhamento
   - gap: 15px espaçamento entre botões
   - flex-wrap: wrap permite quebra de linha
*/
.blog-card-main-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Blog Card Main - Botão
   - Utiliza classe .verMais existente
*/
.blog-card-main .verMais {
    flex: 1;
    min-width: 150px;
}

/* ========================================
   COLUNA DIREITA - SEÇÕES DO PASSADO
   Card pequeno com arquivo de artigos antigos
   ======================================== */

/* Blog Sidebar Right - Coluna Direita
   - position: relative para manter fluxo normal
   - Contém arquivo de artigos passados
*/
.blog-sidebar-right {
    position: relative;
}

/* Blog Card Right - Card Principal Direita (Arquivo)
   - background: cor escura do tema
   - border: borda preto/padrão do tema
   - border-radius: cantos arredondados
   - padding: espaçamento interno
   - height: 100% ocupa altura total do grid
   - display: flex para organizar conteúdo em coluna
   - flex-direction: column para manter estrutura vertical
   - position: sticky com top 80px (acompanha scroll)
   - transition: transição suave para efeitos hover
   - Contém arquivo de posts anteriores do blog
*/
.blog-card-right {
    background-color: var(--backg-Sub-cor);
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    border-radius: var(--borderRadius-padrao);
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 80px;
    transition: var(--transicao-padrao);
}

/* Blog Card Right - Hover (Feedback Visual) */
.blog-card-right:hover {
    background-color: #1a1a1a;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* Blog Card Right - Título
   - font-size: texto grande
   - color: cor padrão
   - margin: 0 0 15px 0 espaçamento inferior
   - line-height: altura da linha padrão
   - border-bottom: linha divisória
   - padding-bottom: 15px espaçamento interno inferior
*/
.blog-card-right h3 {
    font-size: 1.1rem;
    color: var(--texto-cor-padrao);
    margin: 0 0 15px 0;
    line-height: var(--line-height-padrao);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

/* Blog Card Right - Lista de Artigos
   - list-style: none remove bullets
   - padding: 0 remove padding
   - margin: 0 remove margin
   - display: flex para organizar em coluna
   - flex-direction: column alinha itens em coluna
   - gap: 10px espaçamento entre itens
*/
.blog-card-right ul,
.archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Blog Card Right - Item da Lista (Botões de Arquivo)
   - padding: 10px espaçamento interno
   - border-radius: cantos arredondados padrão
   - background: cor escura principal
   - border: borda padrão
   - transition: transição suave
   - cursor: pointer indica clicabilidade
   - display: block para ocupar largura total
*/
.blog-card-right li {
    padding: 10px;
    border-radius: var(--borderRadius-padrao);
    background-color: var(--backg-Princ-cor);
    border: var(--borderSolid-padrao);
    transition: var(--transicao-padrao);
    cursor: pointer;
    display: block;
}

/* Blog Card Right - Item Hover (Feedback Visual - Padrão Ver Mais) */
.blog-card-right li:hover {
    background-color: #1a1a1a;
    border: var(--borderSolid-padrao);
}

/* Blog Card Right - Link (Artigos do Arquivo) */
.blog-card-right a {
    color: var(--texto-cor-padrao);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: var(--line-height-padrao);
    transition: var(--transicao-padrao);
    display: block;
    width: 100%;
}

/* Blog Card Right - Link Hover (Feedback Visual - Mesmo padrão Ver Mais) */
.blog-card-right a:hover {
    color: var(--texto-cor-padrao);
    text-decoration: none;
}

/* ========================================
   RESPONSIVIDADE - ADAPTAR PARA DISPOSITIVOS
   Mantém funcionalidade em tablets e mobile
   ======================================== */

/* Tablets (máximo 1024px)
   - Grid: 2 colunas (perfil + conteúdo)
   - Arquivo: Movido abaixo, em 2 colunas
*/
@media (max-width: 1024px) {
    .blog-container {
        grid-template-columns: 1fr 1.5fr;
        gap: 15px;
    }

    .blog-sidebar-right {
        position: static;
        grid-column: 1 / -1;
    }

    .blog-card-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .blog-card-right h3 {
        grid-column: 1 / -1;
    }
}

/* Mobile (máximo 768px)
   - Grid: 1 coluna - todos os elementos empilhados
   - Perfil no topo, Artigos no centro, Arquivo abaixo
   - Padding reduzido para economia de espaço
*/
@media (max-width: 768px) {
    .blog-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }

    .blog-sidebar-left,
    .blog-sidebar-right {
        position: static;
    }

    .blog-card-main {
        padding: 15px;
        min-height: auto;
    }

    .blog-card-left,
    .blog-card-right {
        padding: 15px;
    }

    .blog-card-main-meta {
        flex-direction: column;
        gap: 8px;
    }

    .blog-card-right {
        display: flex;
        flex-direction: column;
    }
}