/* Improved mobile styles for project cards */

@media (max-width: 768px) {
    /* Make project cards more touch-friendly */
    .project-card {
        border-radius: 12px;
        margin-bottom: 25px;
        transform: none !important; /* Prevent unwanted hover effects on touch */
    }
      /* Improve project screenshot for mobile */
    .project-screenshot {
        height: 240px; /* Increased for better square proportions on mobile */
    }
    
    .project-screenshot img {
        height: 100%;
        object-fit: cover;
    }
    
    /* Make buttons more tappable */
    .view-project-btn, 
    .open-button {
        min-height: 44px; /* Recommended minimum touch target size */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve spacing in project content */
    .project-content {
        padding: 15px;
    }
    
    .project-description {
        margin: 8px 0 12px;
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Better tech tags on mobile */
    .project-tech-tag {
        padding: 4px 8px;
        margin: 3px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    /* Improve footer layout on mobile */
    .project-card-footer {
        padding: 12px 15px;
    }
    
    /* Add touch feedback */
    .project-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.2s;
    }
    
    .view-project-btn:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .project-screenshot {
        height: 160px;
    }
    
    /* Smaller tech tags to fit more */
    .project-tech-tag {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    /* Further reduce text size */
    .project-title-text {
        font-size: 16px;
    }
    
    .project-description {
        font-size: 13px;
        -webkit-line-clamp: 3; /* Limit to 3 lines on smallest screens */
    }
    
    .primary-language {
        font-size: 11px;
    }
}