/* ========================================
   FILE: projects.css
   DESCRIZIONE: Stili per la sezione Progetti.
   ======================================== */

/* ========================================
   PROJECTS GRID
   ======================================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;
}

/* ========================================
   PROJECT CARDS
   ======================================== */
.project-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e9e9e9; 
    border-radius: 12px;       
    padding: 1.6rem;             
    background-color: #ffffff;
    width: 100%;           
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- 1. HEADER: Titolo a SX, Link a DX --- */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Se il titolo va a capo, i link restano allineati in alto */
    gap: 1.5rem;
    margin-bottom: 1rem;       
}

.card-title {
    font-size: 1.25rem;         
    margin: 0;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
}

/* --- Links Esterni (ora in alto) --- */
.project-links {
    display: flex;
    gap: 1rem; 
    margin-top: 0.2rem;    
    margin-right: 0.5rem;
    flex-shrink: 0; /* Impedisce che i bottoni si rimpiccioliscano troppo */          
}

.link-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #000;               
    text-decoration: none;
    font-size: 0.7rem;         
    font-weight: 700;
    transition: color 0.3s;    
}

.link-btn svg {
    width: 16.5px;
    height: 16.5px;
    stroke-width: 2;
}

.link-btn:hover {
    color: #1877F2;               
}

/* --- 2. CORPO: Descrizione --- */
.card-body {
    flex-grow: 1; 
    margin-bottom: 1rem; 
}

.description {
    color: #000; /* Grigio scuro per creare gerarchia visiva con il titolo nero */               
    margin: 0;
    line-height: 1.7;          
    font-size: 0.8rem;
    font-weight: 500;
}

/* --- 3. FOOTER: Tags Tecnologie a SX --- */
.card-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;               
}

.tech-tag {
    background: #fff;   
    color: #000;               
    border: 1px solid #e9e9e9; 
    padding: 0.2rem 0.5rem;    
    border-radius: 6px;       
    font-size: 0.55rem;
    font-weight: 700;        
}

/* ========================================
   RESPONSIVE (MOBILE)
   ======================================== */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr; 
        gap: 1.5rem;
    }

    .project-card {
        display: flex;
        flex-direction: column;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; 
        margin-bottom: 1.2rem;
    }

    .link-btn {
        font-size: 0.75rem;
    }

    .link-btn svg {
        width: 15.5px;
        height: 15.5px;
    }

    .description {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .card-title {
        font-size: 1.2rem;
    }

    .tech-tag {
        font-size: 0.55rem;
    }

}