/* --- In Personal Portfolio/component_stylings/skills-grid.css --- */

#skills {
    /* Override default section centering */
    text-align: left;
    max-width: 75rem;
    margin: 0 auto;
    padding: 6rem 2rem;
    min-height: 65rem; /* Keep it full-screen for scroll trigger */

    /* REMOVED: 'align-items: stretch' is no longer needed. */
}

#skills h2 {
    /* "Technical skills." */
    font-size: 2.5rem;
    color: #f5f5f5;
    margin-bottom: 3rem;
}

.skills-category {
    margin-bottom: 3rem;
}

.skills-category h3 {
    /* "Programming languages", "Front-End", etc. */
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #aaa;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.skills-grid {
    display: grid;
    /*
     * Use minmax(100px, 1fr) to ensure at least 7 columns
     * fit on a standard 1100px wide container.
    */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1.5rem;
}

.skill-tile {
    /* The individual skill card */
    background-color: #222; /* Dark background from example */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1rem;
    
    /* Center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* Space between icon and text */
    
    height: 140px; /* Uniform height */
    
    /* Effects */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.skill-tile:hover {
    transform: translateY(-5px);
    background-color: #2a2a2a;
}

.skill-tile svg {
    /* Style the embedded SVG icons */
    width: 48px;
    height: 48px;
    fill: #f5f5f5; /* Default icon color */
}

.skill-tile p {
    /* The skill name */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: #ccc;
    text-align: center;
    margin: 0; /* Override default <p> margins */
}

/* --- Optional: Add brand colors --- */
/* You can add these to make the grid more colorful */
.skill-tile[data-skill="TypeScript"] svg { fill: #3178C6; }
.skill-tile[data-skill="JavaScript"] svg { fill: #F7DF1E; }
.skill-tile[data-skill="Python"] svg { fill: #3776AB; }
.skill-tile[data-skill="Java"] svg { fill: #007396; }
.skill-tile[data-skill="Swift"] svg { fill: #F05138; }
.skill-tile[data-skill="Dart"] svg { fill: #0175C2; }
.skill-tile[data-skill="React"] svg { fill: #61DAFB; }
.skill-tile[data-skill="Angular"] svg { fill: #DD0031; }
.skill-tile[data-skill="Next.js"] svg { fill: #FFFFFF; } /* Next is white on dark */
.skill-tile[data-skill="Vite"] svg { fill: #646CFF; }
.skill-tile[data-skill="HTML"] svg { fill: #E34F26; }
.skill-tile[data-skill="Tailwind"] svg { fill: #06B6D4; }
.skill-tile[data-skill="Flutter"] svg { fill: #02569B; }
.skill-tile[data-skill="Node.js"] svg { fill: #339933; }
.skill-tile[data-skill="PostgreSQL"] svg { fill: #4169E1; }
.skill-tile[data-skill="Firebase"] svg { fill: #FFCA28; }
.skill-tile[data-skill="Supabase"] svg { fill: #3ECF8E; }
.skill-tile[data-skill="Flask"] svg { fill: #FFFFFF; } /* Flask is white on dark */
.skill-tile[data-skill="Scikit-learn"] svg { fill: #F7931E; }
.skill-tile[data-skill="Selenium"] svg { fill: #43B02A; }








/* --- Add to end of skills-grid.css --- */

@media (max-width: 820px) {
    #skills h2 {
        text-align: center; /* Center the title */
    }
    
    .skills-category h3 {
        text-align: center; /* Center category titles */
    }
}