/* =========================================
   PROJECTS PAGE STYLES (projects.css)
   ========================================= */

/* --- Projects Grid Layout --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns on desktop */
    gap: 25px; /* Spacing between cards */
    padding: 20px 0 60px 0;
}

/* --- Project Card (Terminal Window Base) --- */
.project-card {
    display: block; /* Allows the <a> tag to act as a container */
    text-decoration: none;
    background-color: #1e1e1e; /* VS Code dark background */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: 'Consolas', 'Courier New', monospace;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* Hover effect to make it feel clickable */
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}


/* --- Terminal Body & Text Content --- */
.project-card .terminal-body {
    padding: 20px;
}

.project-title {
    color: #569cd6; /* Classic editor blue to match your homepage */
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.project-desc {
    color: #d4d4d4;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* --- Responsive Adjustments --- */

/* Tablet layout: 2 columns */
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile layout: 1 column (stacks automatically) */
@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .project-card .terminal