/**
 * CLEAN CAROUSEL 2x2 CSS - Override all conflicting styles
 */

/* Container and layout */
.projects-container {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 1200px !important; /* Increased slightly for better spacing */
    margin: 0 auto 0 20% !important; /* Moved container to the left by using left margin */
    padding: 0 60px !important; /* Increased padding to prevent button cutoff and provide more space */
    min-height: 1100px !important; /* Maintained height for taller container */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* CRITICAL FIXES - Ensure clean 2x2 layout */

/* Force proper carousel display */
.projects-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 200% !important; /* Simplified to 200% for exact 2-page layout */
    gap: 70px !important; /* INCREASED GAP - prevents card bleeding between pages */
}

/* Force proper grid display for each page */
.projects-page {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 25px !important; /* Standard gap for good spacing */
    padding: 25px !important; /* Standard padding */
    margin: 0 auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    box-sizing: border-box !important;
    flex: 0 0 calc(50% - 30px) !important; /* Adjusted for larger gap (60px/2 = 30px) */
    max-width: calc(50% - 30px) !important;
}

/* Ensure exactly 4 cards per page - override any other rules */
.projects-page .project-card:nth-child(1),
.projects-page .project-card:nth-child(2),
.projects-page .project-card:nth-child(3),
.projects-page .project-card:nth-child(4) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide cards beyond 4 per page */
.projects-page .project-card:nth-child(n+5) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Project cards */
.project-card {
    display: flex !important;
    flex-direction: column !important;
    height: 580px !important; /* Increased from 560px to 580px (+20px) for even taller cards */
    min-height: 580px !important;
    max-height: 580px !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important; /* Changed to hidden to contain images */
    background: rgba(26, 26, 46, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    margin: 0 !important;
}

/* Hide duplicate technology tags - keep only cyberpunk-styled primary languages */
.project-card .project-technologies,
.projects-container .project-technologies,
.projects-carousel .project-technologies {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.project-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 243, 255, 0.2) !important;
}

/* Screenshot section */
.project-card .project-screenshot {
    height: 50% !important; /* Reduced from 55% to 50% to give more space for content */
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-radius: 12px 12px 0 0 !important; /* Round top corners */
}

.project-card .project-screenshot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important; /* Center the image */
}

/* Lock/unlock icon */
.project-card .repo-status {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(0, 255, 65, 0.2) !important;
    border: 2px solid #00ff41 !important;
    color: #00ff41 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    font-size: 14px !important;
}

.project-card .repo-status.private {
    background: rgba(255, 65, 65, 0.2) !important;
    border-color: #ff4141 !important;
    color: #ff4141 !important;
}

/* Content section */
.project-card .project-content {
    flex: 1 !important;
    padding: 16px !important; /* Increased from 14px for better spacing with taller cards */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.project-card .project-title {
    margin-bottom: 8px !important; /* Increased margin for better spacing */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.project-card .project-title-text {
    font-weight: 600 !important;
    font-size: 0.95rem !important; /* Slightly larger title */
    color: #ffffff !important;
    line-height: 1.2 !important; /* Better line height */
}

.project-card .project-type {
    font-size: 0.7rem !important;
    color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.1) !important;
    padding: 3px 8px !important; /* Increased padding */
    border-radius: 10px !important; /* More rounded */
    font-weight: 500 !important; /* Medium weight */
}

.project-card .project-description {
    font-size: 0.8rem !important; /* Slightly larger description */
    line-height: 1.4 !important; /* Better line height */
    color: rgba(255, 255, 255, 0.85) !important; /* More visible text */
    margin-bottom: 12px !important; /* More space before technologies */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Increased from 2 to 3 lines for more content */
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

.project-card .project-technologies {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important; /* Increased gap between tags */
    margin-bottom: 10px !important; /* More space before footer */
}

.project-card .project-tech-tag {
    font-size: 0.7rem !important; /* Slightly larger font */
    padding: 3px 8px !important; /* More padding for better visibility */
    background: rgba(0, 243, 255, 0.15) !important; /* More visible background */
    border: 1px solid rgba(0, 243, 255, 0.3) !important; /* Add subtle border */
    border-radius: 8px !important; /* More rounded */
    color: #ffffff !important;
    font-weight: 500 !important; /* Medium weight */
}

/* Footer section */
.project-card .project-card-footer {
    padding: 16px !important; /* Increased from 14px for better button visibility with taller cards */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: auto !important; /* Push footer to bottom */
    gap: 12px !important; /* Add gap between languages and button */
    min-height: 60px !important; /* Ensure minimum height for button */
}

.project-card .primary-languages {
    display: flex !important;
    gap: 8px !important; /* Reduced gap to fit more languages */
    align-items: center !important;
    flex-wrap: wrap !important; /* Allow wrapping if needed */
    flex: 1 !important; /* Allow languages to take available space */
    max-width: 60% !important; /* Limit languages to 60% width */
    overflow: hidden !important; /* Hide overflow */
}

.project-card .primary-language {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important; /* Reduced gap between color dot and text */
    font-size: 0.7rem !important; /* Smaller font to fit more */
    color: rgba(255, 255, 255, 0.85) !important; /* More visible text */
    font-weight: 500 !important; /* Medium weight for better visibility */
    white-space: nowrap !important; /* Prevent text wrapping */
    flex-shrink: 0 !important; /* Prevent shrinking */
}

.project-card .language-color {
    width: 10px !important; /* Larger color dots */
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
}

/* VIEW PROJECT button */
.project-card .view-project-btn {
    padding: 8px 14px !important; /* Slightly reduced padding for better fit */
    background: transparent !important;
    border: 2px solid #00f3ff !important; /* Thicker border */
    border-radius: 20px !important; /* More rounded */
    color: #00f3ff !important;
    text-decoration: none !important;
    font-weight: 700 !important; /* Bolder text */
    font-size: 0.7rem !important; /* Smaller font to fit better */
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important; /* Use flex for better centering */
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-transform: uppercase !important; /* Make text uppercase */
    letter-spacing: 0.5px !important; /* Add letter spacing */
    overflow: hidden !important;
    max-width: 120px !important; /* Reduced max width */
    min-width: 100px !important; /* Ensure minimum width */
    flex-shrink: 0 !important; /* Prevent button from shrinking */
    /* Prevent any color bleeding */
    contain: layout style paint !important;
    isolation: isolate !important;
}

.project-card .view-project-btn:hover {
    background: #00f3ff !important;
    color: #1a1a2e !important;
    transform: scale(1.08) !important; /* Slightly more scale on hover */
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4) !important; /* Add glow effect with reduced intensity */
    /* Ensure no color bleeding beyond button bounds */
    clip-path: inset(0 0 0 0 round 20px) !important;
    contain: layout style paint !important;
}

/* Navigation buttons */
.carousel-nav {
    position: absolute !important;
    top: 50% !important; /* Center vertically */
    left: 0 !important;
    right: 0 !important;
    height: 0 !important; /* No height, just positioning */
    pointer-events: none !important;
    z-index: 100 !important;
    transform: translateY(-50%) !important; /* Center the nav container */
}

.carousel-prev,
.carousel-next {
    position: absolute !important;
    top: 0 !important; /* Relative to centered nav container */
    transform: translateY(-50%) !important; /* Center the buttons themselves */
    width: 40px !important; /* Slightly smaller buttons */
    height: 40px !important;
    border: 2px solid #00f3ff !important;
    background: rgba(26, 26, 46, 0.95) !important;
    color: #00f3ff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1rem !important; /* Slightly smaller icon */
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    z-index: 200 !important;
}

.carousel-prev {
    left: 20px !important; /* Moved slightly inward for better spacing */
}

.carousel-next {
    right: 20px !important; /* Moved slightly inward for better spacing */
}

.carousel-prev:hover,
.carousel-next:hover {
    background: #00f3ff !important;
    color: #1a1a2e !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Pagination dots */
.carousel-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 30px !important;
}

.carousel-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.carousel-dot.active {
    background: #00f3ff !important;
    transform: scale(1.3) !important;
}

/* Hide extra cards */
.projects-page .project-card:nth-child(n+5) {
    display: none !important;
}

/* Ensure proper grid centering */
.projects-carousel {
    margin: 0 auto !important;
    justify-content: center !important;
}

.projects-page {
    margin: 0 auto !important;
    justify-content: center !important;
    align-content: center !important;
}

/* Responsive */
@media (max-width: 768px) {
    .projects-container {
        padding: 0 50px !important; /* Reduced for smaller screens */
        min-height: 550px !important; /* Increased for taller cards */
        max-width: 800px !important;
        margin: 0 auto 0 10% !important; /* Reduced left margin for tablets */
    }
    
    .projects-page {
        gap: 15px !important;
        padding: 15px !important;
        grid-auto-rows: minmax(260px, 1fr) !important; /* Increased for mobile */
    }
    
    .project-card {
        height: 260px !important; /* Increased mobile card height */
        min-height: 260px !important;
        max-height: 260px !important;
        /* Removed aspect-ratio to allow rectangular cards */
    }
    
    /* Responsive footer for tablets */
    .project-card .project-card-footer {
        flex-direction: row !important; /* Keep horizontal on tablets */
        padding: 12px !important;
    }
    
    .project-card .primary-languages {
        max-width: 55% !important; /* Slightly less space for languages */
    }
    
    .project-card .primary-language {
        font-size: 0.65rem !important; /* Smaller text on tablets */
    }
    
    .project-card .view-project-btn {
        font-size: 0.65rem !important; /* Smaller button text */
        padding: 6px 12px !important;
        max-width: 110px !important;
        min-width: 90px !important;
    }
    
    .carousel-prev, .carousel-next {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    .carousel-prev {
        left: 10px !important;
    }
    
    .carousel-next {
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .projects-container {
        padding: 0 30px !important;
        max-width: 600px !important;
        min-height: 500px !important; /* Increased for small screens */
        margin: 0 auto !important; /* Center on mobile for better usability */
    }
    
    .projects-page {
        gap: 10px !important;
        padding: 10px !important;
        grid-auto-rows: minmax(220px, 1fr) !important; /* Increased for small screens */
    }
    
    .project-card {
        height: 220px !important; /* Increased small screen card height */
        min-height: 220px !important;
        max-height: 220px !important;
        /* Removed aspect-ratio to allow rectangular cards */
    }
    
    /* Stack footer vertically on mobile for better button visibility */
    .project-card .project-card-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px !important;
        gap: 8px !important;
        min-height: 50px !important;
    }
    
    .project-card .primary-languages {
        max-width: 100% !important; /* Full width for languages */
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    
    .project-card .primary-language {
        font-size: 0.6rem !important; /* Very small text on mobile */
    }
    
    .project-card .view-project-btn {
        align-self: stretch !important; /* Full width button */
        text-align: center !important;
        max-width: none !important;
        min-width: none !important;
        width: 100% !important;
        font-size: 0.65rem !important;
        padding: 8px 12px !important;
    }
}

/* Additional responsive handling for cards with many languages */
@media (max-width: 1200px) {
    /* When space gets tight on desktop, optimize footer layout */
    .project-card .primary-languages {
        max-width: 55% !important;
        gap: 6px !important;
    }
    
    .project-card .primary-language {
        font-size: 0.68rem !important;
        gap: 3px !important;
    }
    
    .project-card .view-project-btn {
        font-size: 0.68rem !important;
        padding: 7px 12px !important;
        max-width: 110px !important;
    }
}

/* Hide overflow languages when too many (progressive enhancement) */
.project-card .primary-languages .primary-language:nth-child(n+4) {
    display: none !important;
}

@media (min-width: 1200px) {
    /* Show more languages on larger screens */
    .project-card .primary-languages .primary-language:nth-child(n+4) {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    /* Show only 3 languages max on tablets */
    .project-card .primary-languages .primary-language:nth-child(n+4) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Show only 2 languages max on mobile */
    .project-card .primary-languages .primary-language:nth-child(n+3) {
        display: none !important;
    }
}

/* CRITICAL FINAL OVERRIDES - Must be at end of file */
/* Absolutely enforce 2x2 grid layout - Override ALL conflicting styles */
.projects-container .projects-carousel .projects-page {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;    grid-auto-rows: minmax(580px, 1fr) !important; /* Updated to match new desktop height (580px) */
    grid-template-areas: none !important; /* Remove any template areas */
    max-width: 600px !important;
    width: 100% !important;    box-sizing: border-box !important;
    min-width: calc(50% - 30px) !important; /* Adjusted for larger gap (60px/2 = 30px) */
    flex: 0 0 calc(50% - 30px) !important; /* Adjusted for larger gap (60px/2 = 30px) */
}

/* Force exactly 4 cards per page with ultra-high specificity */
.projects-container .projects-carousel .projects-page > .project-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;    height: 580px !important; /* Updated to match new desktop height (580px) */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Force all 4 cards to be visible - override any hiding */
.projects-container .projects-carousel .projects-page > .project-card:nth-child(1),
.projects-container .projects-carousel .projects-page > .project-card:nth-child(2),
.projects-container .projects-carousel .projects-page > .project-card:nth-child(3),
.projects-container .projects-carousel .projects-page > .project-card:nth-child(4) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Hide any cards beyond the first 4 */
.projects-container .projects-carousel .projects-page > .project-card:nth-child(n+5) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Remove square aspect ratio enforcement for better height */
.project-card {
    width: 100% !important;
}

/* Fix container centering */
.projects-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.projects-carousel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200% !important; /* Fixed to match JavaScript calculations */
    gap: 70px !important; /* INCREASED GAP - prevents card bleeding between pages */
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 768px) {
    .project-card {
        height: 500px !important; /* Mobile height - increased from 400px to 500px (+100px) */
        min-height: 500px !important;
        max-height: 500px !important;
    }
    
    .projects-container {
        min-height: 1000px !important; /* Increased container for mobile to match new card heights */
        padding: 0 30px !important; /* Reduce padding on mobile */
    }
    
    .carousel-prev {
        left: 10px !important; /* Closer to edge on tablets */
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    .carousel-next {
        right: 10px !important; /* Closer to edge on tablets */
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .project-card {
        height: 420px !important; /* Small mobile height - increased from 320px to 420px (+100px) */
        min-height: 420px !important;
        max-height: 420px !important;
    }
    
    .projects-container {
        min-height: 900px !important; /* Increased container for small mobile to match new card heights */
        padding: 0 15px !important; /* Further reduce padding */
    }
    
    .projects-page {
        gap: 15px !important; /* Smaller gap on very small screens */
        padding: 15px !important; /* Reduce padding */
    }
    
    .carousel-prev {
        left: 5px !important; /* Very close to edge on small screens */
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }
    
    .carousel-next {
        right: 5px !important; /* Very close to edge on small screens */
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }
}

/* Ensure no horizontal overflow and proper centering */
body, html {
    overflow-x: hidden !important;
}

.projects-carousel {
    margin: 0 auto !important;
    overflow: visible !important; /* Allow slight overflow for navigation buttons */
}

.projects-page {
    overflow: visible !important; /* Prevent clipping of content */
    margin: 0 auto !important;
}