/* ===== Projects Page Carousel Styles ===== */
/* Projects Carousel Styles for projects.php */

/* Remove height constraints from projects section */
#featured-projects {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

/* Main Slider Container */
.projects-carousel-wrapper,
.projects-marquee-container {
    width: 100%;
    position: relative;
    padding: 20px 0;
    /* Reduced to ensure no unwanted gaps */
    margin-bottom: 40px;
    overflow: hidden;
    /* Main wrapper hides overflow */
}

/* The Slider Itself - flexbox horizontal scroll */
.projects-carousel,
.projects-marquee-track {
    display: flex;
    width: max-content !important;
    overflow-x: hidden;
    overflow-y: visible;
    /* Allow box-shadows to show */
    padding: 30px 10px;
    /* Padding for hover lift effects */
}

.projects-carousel {
    gap: 25px;
}

.projects-marquee-track {
    gap: 25px;
    animation: scroll-left 60s linear infinite;
    /* Adjusted speed for 5 items seamless loop */
    /* Auto scroll */
}


/* Pause animation on hover */
.projects-carousel:hover,
.projects-marquee-track:hover {
    animation-play-state: paused !important;
}

/* Auto-scroll animations - Managed via JS for Touch Support */

/* Pause on hover/touch */
.projects-carousel:active,
.projects-marquee-track:active {
    cursor: grabbing;
}


/* Single Project Card - Scaled for Carousel */
.projects-carousel .project-card,
.projects-marquee-track .project-card {
    position: relative;
    flex: 0 0 auto;
    width: 256px;
    /* 320 * 0.8 */
    height: auto;
    display: flex;
    flex-direction: column;
    background: transparent;
    /* Remove background */
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(201, 169, 97, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 1;
    transform: none;
    pointer-events: all;
    top: auto;
    left: auto;
    right: auto;
}

/* Project Poster Image Container */
.projects-carousel .project-card .project-poster,
.projects-marquee-track .project-card .project-poster {
    position: relative;
    width: 100%;
    height: 360px;
    /* 450 * 0.8 */
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.projects-carousel .project-card .project-poster img,
.projects-marquee-track .project-card .project-poster img {
    width: 100%;
    height: 100%;
    /* Max width/height removed as per user request */
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
    will-change: transform, filter;
}

/* Project Info - Hidden */
.projects-carousel .project-card .project-info,
.projects-marquee-track .project-card .project-info {
    display: none !important;
}

/* Hover Effects - Lift Card & Gold Glow */
.projects-carousel .project-card:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: var(--accent-primary);
    box-shadow:
        0 20px 50px rgba(201, 169, 97, 0.4),
        0 0 30px rgba(201, 169, 97, 0.2);
    z-index: 2;
}

.projects-marquee-track .project-card:hover {
    transform: scale(1.05);
    /* Slight zoom for stuck cards */
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    /* Add shadow on hover */
}


.projects-carousel .project-card:hover .project-poster img,
.projects-marquee-track .project-card:hover .project-poster img {
    transform: scale(1.08);
    filter: brightness(1.1);
}



/* Remove skeleton loader after load */
.projects-carousel .skeleton-projects-slider {
    display: flex;
    gap: 25px;
    padding: 20px 30px;
}

.skeleton-project-card {
    flex: 0 0 auto;
    width: 320px;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(201, 169, 97, 0.1);
}

.skeleton-project-poster {
    width: 100%;
    height: 360px;
    /* 450 * 0.8 */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-project-info {
    display: none !important;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Responsive Design */
@media (max-width: 1400px) {

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        width: 240px;
        /* 300 * 0.8 */
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 336px;
        /* 420 * 0.8 */
    }
}

@media (max-width: 1200px) {

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        width: 224px;
        /* 280 * 0.8 */
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 320px;
        /* 400 * 0.8 */
    }

    .projects-carousel {
        gap: 20px;
        padding: 20px 25px;
    }
}

@media (max-width: 992px) {

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        width: 208px;
        /* 260 * 0.8 */
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 304px;
        /* 380 * 0.8 */
    }

    .projects-carousel {
        gap: 18px;
        padding: 18px 20px;
    }

    .projects-carousel-wrapper,
    .projects-marquee-container {
        padding: 25px 0;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        width: 180px;
        /* Optimized for mobile */
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 260px;
        /* 16:9 aspect ratio */
    }

    .projects-carousel {
        gap: 12px;
        padding: 15px 10px;
        /* scroll-snap-type removed to allow auto scroll */
    }

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        /* scroll-snap-align removed */
        width: 180px;
    }

    .projects-carousel-wrapper,
    .projects-marquee-container {
        padding: 20px 0;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        width: 120px;
        /* Reduced to ensure it appears fully */
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 180px;
        /* Adjusted height for 120px width (approx 2:3 ratio) */
    }

    .projects-carousel {
        gap: 10px;
        padding: 12px 8px;
    }

    .projects-carousel-wrapper,
    .projects-marquee-container {
        padding: 15px 0;
        margin-bottom: 20px;
    }

    .projects-carousel .project-card:hover,
    .projects-marquee-track .project-card:hover {
        transform: translateY(-5px) scale(1.02);
        /* Smaller hover effect on mobile */
    }
}

/* Infinite Autoplay Animations (Global) */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.autoplay-left {
    animation: scroll-left 120s linear infinite;
}

.autoplay-right {
    animation: scroll-right 120s linear infinite;
}

/* Ensure gpu acceleration */
.projects-carousel,
.projects-marquee-track {
    will-change: transform;
    /* Force GPU */
    transform: translateZ(0);
}

/* Pause on hover */
.projects-carousel:hover,
.projects-marquee-track:hover {
    animation-play-state: paused;
}

/* Mobile speed adjustment */
@media (max-width: 768px) {

    .autoplay-left,
    .autoplay-right,
    .projects-marquee-track {
        animation-duration: 60s;
        /* Slowed down from 30s as requested */
    }
}



/* =========================================
   Ads Slider Support (Mobile Only)
   Restores Desktop "Deck" view by limiting these overrides to mobile.
   ========================================= */

@media (max-width: 768px) {

    /* Container Styles - Convert to Linear Scroll on Mobile */
    .slider-cards-container {
        display: flex !important;
        width: max-content !important;
        height: auto !important;
        /* Override fixed height */
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 25px 15px !important;
        gap: 15px !important;
        animation: none !important;
        /* Let user scroll */
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* Card Styles - Reset absolute positioning */
    .slider-cards-container .project-card {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 180px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        border: 2px solid rgba(201, 169, 97, 0.2) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        transition: transform 0.3s ease !important;
        cursor: pointer !important;

        /* Reset Desktop States */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
    }

    /* Small Mobile sizing & optimizations */
    @media (max-width: 480px) {

        /* Larger Hero-style cards for mobile */
        .slider-cards-container .project-card {
            width: 220px !important;
        }

        .slider-cards-container .card-image-wrapper {
            height: 330px !important;
        }

        /* More breathing room */
        .slider-cards-container {
            gap: 15px !important;
            padding: 30px 15px 40px !important;
            margin-bottom: 20px;
            overflow-y: visible !important;
        }

        .slider-cards-container .card-overlay {
            display: none;
        }

        /* HIDE ARROWS on mobile to prevent clutter */
        .projects-carousel .slick-prev-custom,
        .projects-carousel .slick-next-custom,
        .slick-arrow,
        .slider-arrow {
            display: none !important;
        }
    }

    /* Inner Wrapper (replaces project-poster behavior) */
    .slider-cards-container .card-image-wrapper {
        position: relative;
        width: 100%;
        height: 260px;
        /* Tablet/Mobile Height */
        overflow: hidden;
        background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    }

    .slider-cards-container .card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .slider-cards-container .card-overlay {
        display: none !important;
        /* Clean look on mobile */
    }

    /* Disable Desktop Active/Next/Prev classes effects on mobile */
    .project-card.prev,
    .project-card.active,
    .project-card.next {
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}

/* ==========================================================================
   FINAL OVERRIDE FOR PROJECTS CAROUSEL VISIBILITY
   Fixes "disappearing behind something" issue
   ========================================================================== */
@media (max-width: 768px) {
    .projects-carousel-wrapper {
        overflow: hidden !important;
        z-index: 5 !important;
        position: relative !important;
        padding: 0 15px 50px 15px !important;
        /* Added 15px side padding + 50px bottom */
    }

    .projects-marquee-container,
    .projects-carousel {
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: max-content !important;
        /* UNLOCKED WIDTH for smooth animation */
        min-width: 100% !important;
        z-index: 10 !important;
        position: relative !important;
        padding: 20px 25px 50px 0 !important;
        /* Added 25px right padding for loop gap */
        background: transparent !important;
        /* Ensure scrolling works */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .projects-marquee-container {
        overflow: visible !important;
        /* Allow track padding to show */
    }

    .projects-marquee-track {
        display: flex !important;
        gap: 15px !important;
        width: max-content !important;
        overflow: visible !important;
        padding-bottom: 40px !important;
        /* BREATHING ROOM */
    }

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        flex: 0 0 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 5 !important;
        transform: none !important;
        position: relative !important;
        /* Ensure size is locked but scaled for mobile */
        width: 180px !important;
        max-width: none !important;
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 280px !important;
        /* Increased from 260px */
        width: 100% !important;
        opacity: 1 !important;
    }
}

/* Extra support for very small screens */
@media (max-width: 480px) {
    .projects-carousel {
        padding: 20px 25px 40px 0 !important;
    }

    .projects-carousel .project-card,
    .projects-marquee-track .project-card {
        width: 140px !important;
    }

    .projects-carousel .project-card .project-poster,
    .projects-marquee-track .project-card .project-poster {
        height: 230px !important;
    }
}