/* ===================
   ESTILOS DOS PROJETOS
   =================== */

/* A seção principal de projetos */
#projetos {
    /* Fundo escuro, combinando com seu site */
    background-color: #000; 
    padding: 80px 20px; /* Espaçamento interno */
    width: 100%;
    
    /* --- AQUI ESTÁ A MÁGICA DA FUMAÇA --- */
    /* Cria um gradiente vertical:
       - Começa com preto semi-transparente (fumaça) no topo.
       - Fica totalmente preto no meio da seção (conteúdo opaco).
       - Termina com preto semi-transparente (fumaça) na parte de baixo.
    */
    background: linear-gradient(
        to bottom, /* Direção do gradiente: de cima para baixo */
        rgba(0, 0, 0, 0.027) 0%,    /* Começa com 60% de opacidade (fumaça suave) */
        rgba(0, 0, 0, 1) 15%,     /* Atinge 100% de opacidade (preto sólido) em 15% da altura */
        rgba(0, 0, 0, 1) 85%,     /* Mantém 100% de opacidade até 85% da altura */
        rgba(0, 0, 0, 0.055) 100%   /* Volta para 60% de opacidade (fumaça suave) no final */
    );
    /* Se você quiser o grid de fundo, pode adicionar uma imagem de fundo junto.
       Ex: background: linear-gradient(..., ...), url('/caminho/para/seu-grid.png') repeat;
       Por enquanto, o gradiente de fumaça substitui o gradiente anterior.
    */
    
}

/* Container para centralizar o conteúdo */
#projetos .container-projetos {
    max-width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0 auto;
}

/* O título da seção (caso decida usar) */
#projetos .titulo-secao {
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}

/* A grade que segura os cards */
.projeto-grid {
    /* ERRO: Não use largura fixa */
    /* width: 1200px; */ 

    /* CORREÇÃO: Use largura MÁXIMA e 100% de largura */
    max-width: 1200px; /* Será no MÁXIMO 1200px em telas grandes */
    width: 100%;       /* Vai encolher para 100% em telas menores */

    /* O resto do seu código está PERFEITO */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; 
    margin: 0 auto;
}

/* O card do projeto:
   Aqui está a mágica da "borda sombreada"
*/
.projeto-card {
    background-color: #111; /* Fundo do card, um pouco mais claro que o #000 */
    border-radius: 12px;
    overflow: hidden; /* Garante que a imagem não saia das bordas */
    
    /* 1. A BORDA SUTIL */
    border: 1px solid #222; 
    
    /* 2. A BORDA SOMBREADA (Sombra) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    transition: all 0.3s ease;
}

/* Efeito de hover para o card */
.projeto-card:hover {
    transform: translateY(-5px); /* Eleva o card sutilmente */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Sombra mais forte */
    border-color: #333;
}

/* Container da imagem */
.card-imagem {
    width: 100%;
    aspect-ratio: 16 / 10; /* Proporção da imagem (ajuste se precisar) */
    overflow: hidden;
}

.card-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
}

/* Conteúdo de texto abaixo da imagem */
.card-conteudo {
    padding: 24px;
}

/* Cabeçalho (Tecnologias + Ano) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #aaa;
}

.card-header .tecnologias {
    font-weight: 500;
    color: #bbb;
}

/* Nome do Projeto */
.projeto-card h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #f0f0f0;
    margin: 0;
    margin-bottom: 8px;
}

/* Tipo do Projeto */
.projeto-card .tipo-projeto {
    font-size: 1rem;
    color: #ccc;
    margin: 0;
}