/* Projects Page Styles - Ottimizzato */
@import 'base.css';

/* Layout di base */
.projects-page {
    color: var(--color-text);
    background-color: var(--color-gray-50);
    padding: var(--space-lg) var(--container-padding);
}

/* Introduzione progetti */
.projects-intro {
    text-align: center;
    margin-bottom: var(--space-xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.projects-intro h1 {
    font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
    background: var(--gradient-heading);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.projects-intro p {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    color: var(--color-gray-500);
    margin-bottom: var(--space-lg);
}

/* Filters */
.projects-filters {
    margin-bottom: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-normal);
    border: 1px solid var(--color-gray-200);
    background-color: white;
    color: var(--color-text);
    cursor: pointer;
}

.filter-btn:hover {
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-100);
    transform: translateY(-1px);
}

.filter-btn.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

/* Project Card */
.project-card {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    animation: fadeIn 0.5s ease forwards;
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Card colors */
.project-card[data-category="formazione"] {
    background-color: #f5f3ff;
    border-color: #e9d5ff;
}

.project-card[data-category="sviluppo-web-seo"] {
    background-color: #eff6ff;
    border-color: #dbeafe;
}

.project-card[data-category="innovazione-digitale"] {
    background-color: #eef2ff;
    border-color: #e0e7ff;
}

.project-card[data-category="hobby"] {
    background-color: #ecfdf5;
    border-color: #d1fae5;
}

.project-card[data-category="sociale"] {
    background-color: #fff1f2;
    border-color: #ffe4e6;
}

/* Project Header */
.project-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
}

.project-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    margin-right: var(--space-sm);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.project-icon.purple { color: #7c3aed; background-color: #f3e8ff; }
.project-icon.blue { color: #2563eb; background-color: #dbeafe; }
.project-icon.indigo { color: #4f46e5; background-color: #e0e7ff; }
.project-icon.emerald { color: #059669; background-color: #d1fae5; }
.project-icon.rose { color: #e11d48; background-color: #ffe4e6; }

.project-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.project-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

/* Project Description */
.project-description {
    color: var(--color-gray-500);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-md);
}

/* Project Metadata */
.project-metadata {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.metadata-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.metadata-item .icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.metadata-item span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Project Footer */
.project-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.project-status {
    display: flex;
    align-items: center;
}

.project-status .icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.project-status span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.read-more:hover {
    color: var(--color-primary-dark);
}

.read-more .icon {
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    transition: transform var(--transition-normal);
}

.read-more:hover .icon {
    transform: translateX(4px);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media Queries */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .projects-page {
        padding: var(--space-md) var(--container-padding);
    }

    .projects-filters {
        gap: var(--space-sm);
    }

    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: var(--font-size-sm);
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .project-metadata {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media screen and (min-width: 1025px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .projects-page {
        background-color: var(--color-gray-700);
    }

    .project-card {
        background-color: var(--color-gray-600);
        border-color: var(--color-gray-500);
    }

    .filter-btn {
        background-color: var(--color-gray-600);
        border-color: var(--color-gray-500);
        color: var(--color-gray-200);
    }

    .filter-btn:hover {
        background-color: var(--color-gray-500);
    }

    .project-header h2 {
        color: var(--color-gray-100);
    }

    .project-description {
        color: var(--color-gray-300);
    }

    .metadata-item span,
    .project-status span {
        color: var(--color-gray-300);
    }

    /* Colori card per dark mode */
    .project-card[data-category="formazione"] {
        background-color: rgba(245, 243, 255, 0.1);
        border-color: rgba(233, 213, 255, 0.2);
    }

    .project-card[data-category="sviluppo-web-seo"] {
        background-color: rgba(239, 246, 255, 0.1);
        border-color: rgba(219, 234, 254, 0.2);
    }

    .project-card[data-category="innovazione-digitale"] {
        background-color: rgba(238, 242, 255, 0.1);
        border-color: rgba(224, 231, 255, 0.2);
    }

    .project-card[data-category="hobby"] {
        background-color: rgba(236, 253, 245, 0.1);
        border-color: rgba(209, 250, 229, 0.2);
    }

    .project-card[data-category="sociale"] {
        background-color: rgba(255, 241, 242, 0.1);
        border-color: rgba(255, 228, 230, 0.2);
    }
}