/* Mobile responsiveness */
@media (max-width: 768px) {
    #portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile Layout (Max Width 768px) OR Tablet Portrait */
@media (max-width: 768px),
(max-width: 1024px) and (orientation: portrait) {

    /* 1. Tame the Navigation */
    nav {
        padding: 1.2rem 2.5rem 1.5rem 1rem;
        /* Adjusted: Higher (1.2rem) and Menu Left-er (2.5rem right pad) */
    }

    /* 2. Shrink the Giant Hero Text on Mobile */
    .hero-section {
        /* On mobile, 25% down is enough */
        padding-top: 25vh;
        min-height: auto;
    }

    .hero-section h1 {
        font-size: 3rem;
        line-height: 1.2;
        /* Tighten line height */
    }

    /* FIX: Reduce gap to almost nothing on mobile */
    .hero-section h1 span {
        margin: 0 4px;
        /* Changed from 15px to 4px */
        display: inline-block;
    }

    #portfolio-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        /* Add this line to give cards more room */
        padding-left: 20px !important;
        padding-right: 20px !important;
        /* ... existing lines ... */
    }

    .project-card:nth-child(even) {
        margin-top: 0;
        /* DISABLE stagger on mobile so they stack evenly */
    }


    /* Adjust this breakpoint as needed for your definition of "mobile" */
    .overlay {
        padding: 0 !important;
        /* Set padding-left to 0 */
    }

    .overlay-content h3 {
        margin: 0 0 0 0;
    }


    /* --- MOBILE CAROUSEL: 3D Gesture System --- */
    #carousel-container.mobile-mode {
        /* Layout */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;

        /* Dimensions */
        height: 600px !important;
        width: 100% !important;
        max-width: 100% !important;

        /* Removing Scroll */
        margin: 40px 0 !important;
        padding: 0 !important;
        overflow: hidden !important;

        /* 3D Stage */
        perspective: 1000px !important;
        transform-style: preserve-3d !important;
    }

    /* Base Card Styling - Absolute Stack */
    #carousel-container.mobile-mode .project-card {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        /* Sizing */
        width: 75vw !important;
        max-width: 340px !important;
        height: 60vh !important;
        min-height: 500px !important;
        margin: 0 !important;
        /* No layout margins needed for absolute */

        /* Centering the absolute element */
        transform-origin: center center !important;
        /* Start Hidden/Centered */
        transform: translate(-50%, -50%) scale(0.8) !important;

        opacity: 0 !important;
        z-index: 0 !important;
        border-radius: 20px !important;
        border: 1px solid #000 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        background: #000 !important;
        /* Fix white flicker */

        /* Optimizations */
        background-color: #000 !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;


        /* Efficient Transitions (No Box-Shadow) */
        transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
            opacity 1.2s ease,
            filter 1.2s ease,
            z-index 0s linear 0.6s !important;
        /* Delay z-index switch to half of transition */

        pointer-events: none !important;
        /* Click through inactive */
    }

    /* 1. ACTIVE State */
    #carousel-container.mobile-mode .project-card.active {
        /* Center, Full Scale, Top Z */
        transform: translate(-50%, -50%) scale(1.0) translateZ(0) !important;
        opacity: 1 !important;
        z-index: 10 !important;
        filter: none !important;
        pointer-events: auto !important;
        /* Efficient Transitions (No Box-Shadow) */
        transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
            opacity 1.2s ease,
            filter 1.2s ease,
            z-index 0s linear 0.6s !important;
        /* Delay z-index switch to half of transition */
    }

    /* 2. PREV State (Left & Behind) */
    #carousel-container.mobile-mode .project-card.prev {
        /* Move Left, Rotate away, Fade */
        transform: translate(-150%, -50%) scale(0.8) rotateY(15deg) !important;
        opacity: 0.2 !important;
        /* Reduced to ghost level */
        z-index: 5 !important;
        /* Removed expensive blur */
    }

    /* 3. NEXT State (Right & Behind) */
    #carousel-container.mobile-mode .project-card.next {
        /* Move Right, Rotate away, Fade */
        transform: translate(50%, -50%) scale(0.8) rotateY(-15deg) !important;
        opacity: 0.2 !important;
        /* Reduced to ghost level */
        z-index: 5 !important;
        /* Removed expensive blur */
    }

    /* 4. HIDDEN State */
    #carousel-container.mobile-mode .project-card.hidden {
        transform: translate(-50%, -50%) scale(0.4) !important;
        /* Smaller hidden scale */
        opacity: 0 !important;
        z-index: 0 !important;
    }

    /* Content Styling (Overlay etc) - Center Text */
    #carousel-container.mobile-mode .project-card .overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%) !important;
        transform: translateY(0) !important;
        /* Always visible but transparent bg helps */
        opacity: 0 !important;
        transition: opacity 0.6s ease !important;
        padding: 20px !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* CENTER VERTICALLY */
        align-items: center !important;
        /* CENTER HORIZONTALLY */
    }

    #carousel-container.mobile-mode .project-card.active .overlay {
        opacity: 1 !important;
    }

    #carousel-container.mobile-mode .project-card .overlay-content {
        width: 100%;
        text-align: center !important;
        /* CENTER TEXT */
        padding-bottom: 0 !important;
    }

    #carousel-container.mobile-mode .project-card .overlay-content h3 {
        transform: translateY(20px) !important;
        opacity: 0 !important;
        font-size: 2.5rem !important;
        /* Larger for center focus */
        font-weight: 300 !important;
        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease !important;
    }

    #carousel-container.mobile-mode .project-card.active .overlay-content h3 {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    #carousel-container.mobile-mode .project-card .reveal-text {
        opacity: 0 !important;
        transform: translateY(20px) !important;
        transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s !important;
        color: rgba(255, 255, 255, 0.9) !important;
        letter-spacing: 2px !important;
        font-size: 1rem !important;
        text-transform: uppercase !important;
        margin-top: 10px !important;
    }

    #carousel-container.mobile-mode .project-card.active .reveal-text {
        opacity: 1 !important;
        transform: translateY(0) !important;
        filter: blur(0px) !important;
        /* Force remove blur */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        /* Add readability shadow */
    }

    /* Kill Buttons in Mobile Mode */
    .mobile-mode~.nav-btn,
    .mobile-mode~.nav-zone {
        display: none !important;
    }

    /* Images - handled via background in main.js now */
    .mobile-mode .project-card img {
        display: none !important;
    }



    /* FIX: Separate Mobile Mode Wrapper from Grid Wrapper to avoid conflict */
    /* FIX: Separate Mobile Mode Wrapper from Grid Wrapper to avoid conflict */
    /* FIX: Separate Mobile Mode Wrapper from Grid Wrapper to avoid conflict */
    .mobile-mode .media-wrapper {
        animation: none !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        aspect-ratio: auto !important;

        /* Match Parent Radius */
        border-radius: 20px !important;
        overflow: hidden !important;

        /* Background Handling (Inline style handles url) */
        background-color: #000;
        background-repeat: no-repeat;
        /* background-size & position handled mainly by inline, but good to fallback */

        position: absolute !important;
        top: 0;
        left: 0;
    }

    /* Img tag is gone in mobile mode, so removed that selector */

    /* Keep Grid Styling untouched */
    #portfolio-grid .project-card,
    #portfolio-grid .media-wrapper {
        animation: none !important;
        width: 100% !important;
        max-width: 390px !important;
        height: auto !important;
        aspect-ratio: 390/530;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Kill Overlay Padding causing shift */
    .project-card .overlay {
        padding: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .info h3 {
        font-size: 1.4rem;
    }


    /* 4. Philosophy Section Stack */
    .philosophy-content {
        grid-template-columns: 1fr;
        /* Single column */
        gap: 40px;
    }

    .col-left h2 {
        font-size: 2.5rem;
        /* Smaller headline for mobile */
    }

    .col-right {
        padding-top: 0;
        /* RESET: Removes the extra space on mobile */
    }

    .philosophy-section {
        margin: 80px auto;
        /* Less vertical gap on mobile */
    }

    /* 5. Stack the Footer */
    footer {
        padding: 4rem 2rem;
    }

    .footer-cta h2 {
        font-size: 2.5rem;
    }

    .email-link {
        font-size: 1.5rem;
    }

    .footer-info {
        flex-direction: column;
        /* Stack columns vertically */
        gap: 3rem;
    }

    /* 6. Video Modal Fixes */
    .modal-content {
        width: 95%;
    }

    .close-modal {
        right: 20px;
        top: 10px;
    }

    /* 7. Project Detail Page */
    .project-hero {
        height: 60vh;
        margin-bottom: 60px;
    }

    .project-title {
        font-size: 3rem;
    }

    .client-label {
        font-size: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cinema-heading {
        margin-bottom: 20px;
    }

    /* 8. Load More Button (Mobile Only) */
    .load-more-container {
        display: flex;
        justify-content: center;
        margin: 20px 0 60px 0;
        width: 100%;
    }

    /* Override pill btn styles if needed or rely on global */
    .load-more-container .pill-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

/* Default State (Desktop): Hidden */
#load-more-container {
    display: none;
}

/* Tablet Layout (Max Width 1024px) */
@media (max-width: 1024px) {

    /* Work Page: Center Alignment (Kill Spine Effect) */
    #portfolio-grid .project-card:nth-child(odd),
    #portfolio-grid .project-card:nth-child(even) {
        margin-left: auto;
        margin-right: auto;
        /* margin-top: 0; */
        /* Optional: Keep vertical stagger or remove? Keeping stagger usually looks okay on tablet, but alignment must be center. */
    }
}

/* Mobile State: Visible */
/* Mobile State: Visible */
@media (max-width: 768px),
(max-width: 1024px) and (orientation: portrait) {
    #load-more-container {
        display: flex;
    }
}

/* Fix Services Page Mobile Overflow */
@media (max-width: 768px) {
    .service-details-container {
        padding: 0 20px !important;
        gap: 40px !important;
    }

    .service-enquiry-form {
        padding: 20px !important;
    }

    .service-info h3 {
        font-size: 2rem !important;
        word-wrap: break-word !important;
    }

    .service-info p {
        font-size: 1.1rem !important;
    }

    .enquiry-form input,
    .select-wrapper select {
        font-size: 1rem !important;
        /* Reduced from 1.1rem to fit longer text */
        padding: 15px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /* Ensure the wrapper doesn't force width */
    .select-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .services-title {
        font-size: 3.5rem !important;
        margin-bottom: 60px !important;
    }

    .carousel-3d-container {
        height: 500px !important;
        margin-bottom: 60px !important;
    }

    .carousel-3d-track {
        width: 280px !important;
        height: 400px !important;
    }

    .card-overlay h2 {
        font-size: 2rem !important;
    }
}