/* 1. Variables de cores baseadas na paleta Sborg - Requisito 4 */
:root {
    --sb-bg-deep: #1a1e29;      
    --sb-card-base: #132d46;    
    --sb-neon-green: #01c38e;   
    --sb-white: #ffffff;        
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Reset básico para asegurar consistencia entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 3. Estilo do corpo con fondo escuro profundo */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--sb-bg-deep);
    color: var(--sb-white);
    padding: 3rem;
}

/* 4. Estilo do header con liña de acento neón */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--sb-neon-green);
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
}

/* 5. Definición da estrutura CSS GRID - Requisito 2 */
.grid-container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
        "intro intro img-s interests"
        "philo wide wide interests"
        "proj proj proj proj";
}

/* 6. Asignación das áreas do Grid a cada contenedor */
.intro-card { grid-area: intro; }
.img-small { grid-area: img-s; }
.interests-card { grid-area: interests; }
.philosophy-card { grid-area: philo; }
.img-wide { grid-area: wide; }
.projects-card { grid-area: proj; }

/* 7. Estilo base das tarxetas con bordes redondeados, transicións e BORDE DEGRADADO (Opción B) */
/*  */
.card {
    position: relative;
    border-radius: 24px;
    padding: 2rem;
    transition: var(--transition);
    overflow: hidden;
    
    /* Implementación de borde degradado compatible con border-radius */
    border: 1px solid transparent;
    background: 
        linear-gradient(var(--sb-card-base), var(--sb-card-base)) padding-box, 
        linear-gradient(135deg, var(--sb-card-base) 0%, var(--sb-neon-green) 100%) border-box;
}

/* 8. Tarxeta de Introducción: Aplicación de degradado premium sólido */
.intro-card {
    background: linear-gradient(135deg, var(--sb-card-base) 0%, var(--sb-neon-green) 100%) border-box !important;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Exemplo de anidamento 1: Estilo do título sobre o degradado */
    h2 {
        color: var(--sb-white);
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        margin-bottom: 0.5rem;
    }
}

/* 9. Hover de alto contraste: cambia o fondo a verde neón e texto a negro */
.card:not(.intro-card):not(.img-small):not(.img-wide):hover {
    /* Sobrescribimos o degradado do borde cun fondo sólido neón */
    background: var(--sb-neon-green);
    transform: translateY(-5px);
    
    /* Cambiamos todos os elementos de texto a negro no hover (Anidamento 2) */
    h3, h4, blockquote, li, p {
        color: #000000;
    }
}

/* 10. Estilo para as imaxes sen espaciado interno */
.img-small, .img-wide {
    padding: 0;
    border: none; /* Quitamos o borde degradado nas imaxes para un look máis limpo */
}
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 11. Sección de Proxectos: Xestión de espaciado mediante Flexbox */
.projects-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;

    .projects-links {
        display: flex;
        gap: 50px; 
        
        .project-item {
            display: flex;
            align-items: center;
            gap: 15px;

            .btn {
                text-decoration: none;
                background-color: var(--sb-white);
                color: #000000;
                padding: 10px 20px;
                border-radius: 12px;
                font-weight: bold;
                transition: var(--transition);

                &:hover {
                    background-color: var(--sb-bg-deep);
                    color: var(--sb-neon-green);
                }
            }
        }
    }
}

/* 12. Media Queries para asegurar o deseño responsive - Requisito 3 */
@media (max-width: 1100px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "intro intro"
            "img-s philo"
            "interests interests"
            "wide wide"
            "proj proj";
    }
    .projects-card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 650px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "img-s" "philo" "wide" "interests" "proj";
    }
    .projects-links { flex-direction: column; gap: 20px; }
}