/* Mobile Styles - Loaded only on screens smaller than 768px */

/* 1. Reset body for scrolling */
body {
    overflow: auto; /* Enable scrolling on mobile */
    height: auto;
    cursor: auto; /* Use default cursor on touch devices */
}

/* 2. Hide custom cursor elements */
.custom-cursor, #cursor-trail {
    display: none !important;
}

/* Hide Scroll Hint Arrow */
.scroll-hint {
    display: none !important;
}

/* Hide Background Grid Lines */
.grid-lines {
    display: none !important;
}

/* Hide Footer Contact on Mobile (since it is in the menu now) */
.site-footer {
    display: none !important;
}

/* Mobile Footer */
.mobile-footer {
    display: block !important;
    background-color: transparent; /* Removed grey background */
    padding: 20px 20px 40px 20px; /* Reduced top padding (was 60px) */
    width: 100%;
    text-align: center; /* Center align everything */
}

.connect-title {
    font-family: var(--font-main); /* Or inherit */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0px; /* No space needed if links are gone */
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer; /* Suggests interactivity if it links somewhere later */
}

/* Hide actual links as requested */
.mobile-footer .footer-links {
    display: none !important;
}

.mobile-footer a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 1rem;
}

/* Mobile Intro Text Styling - Full Screen Hero */
.intro-text {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-height: 60vh; /* Reduced height to bring projects closer (was 85vh) */
    margin: 0 !important;
    padding: 0 20px; /* Side padding */
    order: -10;
    position: static !important;
    text-align: left;
    height: auto !important;
    justify-content: center; /* Center vertically */
}

/* Ensure Logo and Nav don't overlap awkwardly */
.intro-text p {
    font-size: 1.4rem !important; /* Smaller to fit in 2 lines */
    line-height: 1.2 !important;
    white-space: normal !important;
    font-weight: 700;
    text-transform: uppercase !important; 
    letter-spacing: -0.01em; /* Tighter letter spacing to help fit */
}

/* 3. Adjust Navigation */
.site-nav {
    padding: 20px 20px 20px 20px; /* Ensure 20px left padding matches content */
}

/* Adjust SVG Logo Position to visually align with text below */
.site-logo svg {
    /* The SVG has some internal whitespace/viewbox offset. 
       Negative margin pulls it left to align the 'T' with the text below.
       Or if it's too far left, positive margin. 
       Assuming based on 'align TAVGA with edge of about text'request that they are currently misaligned.
       The screenshot suggests TAVGA might be slightly displaced or different visual weight.
       Let's try to zero out any potential shifts or add a specific adjust.
    */
    display: block; /* Remove inline behaviors */
    margin-left: -15px; /* Increased optical adjustment (was -10px) */
}

.nav-left {
    position: absolute !important; /* Scroll with page on mobile */
    top: 20px !important;
    left: 20px !important;
    padding: 0 !important;
    mix-blend-mode: normal !important; /* Prevent difference blending issues over text */
}

.site-logo svg {
    display: block; 
    margin-left: 0 !important; /* Reset to zero for natural alignment */
    height: 38px; /* Original size */
}

/* Fix invisible logo on mobile: Change stroke from white (default) to black */
.site-logo svg path {
    stroke: #000 !important;
}

/* Adjust mobile toggle position to match */
.mobile-menu-toggle {
    display: none !important; /* Hide navigation "three stripes"/hamburger on mobile */
    position: absolute;
    right: 20px;
    top: 20px; /* Aligned with Logo */
    z-index: 1001;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    color: var(--text-color, #000);
}

.nav-right {
    display: none; /* Hide links by default on mobile */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-color, #FFF);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    mix-blend-mode: normal; /* Override desktop 'difference' */
    
    /* Animation Start State */
    display: flex; /* Always display to allow transitions */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%); /* Start above screen (Slide Down) */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, visibility 0.6s;
}

.nav-right.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0); /* Slide into view */
}

.nav-right .nav-link {
    font-size: 2rem;
    opacity: 1 !important;
    transform: none !important;
    color: var(--text-color, #000); /* Ensure visible against white background */
}

/* Ensure the Contact link is visible in the mobile menu */
.mobile-only-link {
    display: block !important;
}

/* 4. Adjust Layout - Single Column List for Mobile */
.gallery-track {
    display: flex !important;
    flex-direction: column !important; /* Stack vertically */
    gap: 60px; /* Airy spacing between projects */
    padding: 0 20px; /* Standard side padding */
    padding-top: 5vh;
    padding-bottom: 0px;
    transform: none !important;
    width: 100%;
    will-change: auto;
    overflow: visible;
}

/* Reset Project Card margins */
.project-card {
    width: 100% !important; /* Full width */
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex;
    flex-direction: column;
}

/* Typography Updates to match Reference (Serif Titles) */
.project-info {
    margin-top: 5px !important; /* REDUCED SPACE between image and text */
    text-align: left;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Reduce image wrapper bottom margin on mobile and make full width */
body .project-card .image-wrapper {
    margin-bottom: 5px !important;
    width: calc(100% + 40px) !important; /* Full width override */
    margin-left: -20px !important; /* Pull left */
    max-width: none !important;
}

.project-category {
    display: block !important; /* Brought back */
    font-family: var(--font-main) !important;
    font-size: 0.75rem !important;
    color: #555 !important;
    margin-bottom: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500 !important;
}

.project-title {
    display: block;
    font-family: var(--font-main) !important;
    font-size: 1.2rem !important; /* Match Desktop Size */
    font-weight: 700 !important; /* Bold Sans-Serif */
    line-height: 1.1 !important;
    color: #000;
    margin: 0 0 5px 0 !important;
}

/* Style the description to look like the subtitle/meta info */
.project-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 80% !important; /* Reduced width as requested */
    margin-bottom: 0 !important;
    font-family: var(--font-main) !important;
    font-size: 0.9rem !important;
    color: #666 !important; /* Greener text */
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

/* Force specific elements full width */
.intro-text,
.about-card,
.about-image-card {
    width: 100% !important;
}

/* Hide the About headline SVG on mobile - explicit strict rule */
.about-card .scribble-logo,
.about-headline {
    display: none !important;
}

/* Keep About Profile & Text Full Width - Padding adjustment */
.about-card {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* About Image Card - Full Screen Width */
.about-image-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -20px !important; /* Pull left to overcome container padding */
    width: calc(100% + 40px) !important; /* Full width including gutters */
    max-width: none !important;
}

.intro-text {
    padding-left: 0 !important; /* Removed extra padding to align with container margin */
    padding-right: 0 !important;
}

/* Force children to be visible on mobile without JS events */
.project-card .image-wrapper,
.project-card .project-info,
.project-card .img-default,
.about-image-card .image-wrapper img {
    opacity: 1 !important;
    transform: none !important;
}

/* 
   Mobile Scroll Reveal Animations
*/
.project-card, 
.about-card, 
.about-image-card,
.intro-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.project-card.visible, 
.about-card.visible, 
.about-image-card.visible,
.intro-text.visible {
    opacity: 1; /* Visible by default to prevent pop-in */
    transform: none;
}



/* Standardize spacing inside about cards */
.about-content p {
    margin-bottom: 0 !important;
}

.about-card {
    margin-top: 100px !important; /* Increased space before About section */
    margin-bottom: 25px !important;
    width: 100% !important;
    padding: 0 20px !important;
}

/* MOVED TO BOTTOM TO OVERRIDE */

/* New Mobile Projects Headline */
.mobile-projects-headline {
    display: none !important;
}

/* Hide the About headline SVG on mobile */
.about-card .about-headline {
    display: none !important;
}

/* 5. Reorder Content: About Section Last */
/* Image comes first after projects */
.about-image-card {
    order: 10 !important; 
    margin-top: 100px !important; /* Big separator from projects */
}

/* Then the text parts */
.about-card {
    order: 11 !important;
    margin-top: 0px !important; /* Zero gap */
    margin-bottom: 0px !important; /* Zero gap */
}

/* 6. Hide the second redundant About headline at the bottom */
.about-headline-only {
    display: none !important;
}

/* Ensure container is static on mobile to allow natural scrolling */
.gallery-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Overwrite Main Overflow to prevent clipping */
main {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
    display: block !important;
}

/* HIGH SPECIFICITY RESET FOR TRANSFORMS 
   Must override style.css: .gallery-track > .project-card:nth-child(odd) { ... !important }
*/
body .gallery-track > .project-card:nth-child(odd),
body .gallery-track > .project-card:nth-child(even),
body .gallery-track > .project-card {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 60px !important; /* Move gap here to ensure spacing */
}

/* Remove spacing specifically for About Cards to bring them closer */
body .gallery-track > .project-card.about-card,
body .gallery-track > .project-card.about-image-card {
    margin-bottom: 0px !important;
}

/* Specific fix for about image card layout attributes - override reset */
body .gallery-track > .project-card.about-image-card {
    margin-bottom: 20px !important; /* "A bit" of distance */
}

/* Add spacing after the final bio text - override reset */
body .gallery-track > .project-card.about-last-text {
    margin-top: 20px !important; /* "A bit" of distance */
    margin-bottom: 50px !important; 
}

.gallery-track {
    gap: 0 !important; /* We handle gap on cards now */
}

/* Modern lazy loading transition */
@supports (loading: lazy) {
    .image-wrapper img {
        opacity: 0;
        transition: opacity 0.5s ease-in;
    }
    
    .image-wrapper img.loaded {
        opacity: 1;
    }
}

/* =========================================
   Mobile Project Modal Overrides
   Layout: Text (Top) -> Images (Bottom)
   Scrolling: Native Vertical Scroll
   ========================================= */

.project-modal {
    display: block !important; /* Allow normal block flow for scrolling */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important; /* Use dynamic viewport height */
    overflow-y: auto !important; /* Enable native scroll */
    -webkit-overflow-scrolling: touch;
    background-color: transparent !important; /* Transparent for animation */
    padding-top: 60px; /* Space for close button */
    z-index: 99999 !important;
    overscroll-behavior: none; /* Prevent scroll chaining */
}

/* Ensure body doesn't scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

.modal-content {
    display: flex !important;
    flex-direction: column !important; /* Stack vertically */
    height: auto !important;
    min-height: 100% !important; /* Ensure it fills at least the modal height */
    overflow: visible !important;
    background-color: #fff !important;
    
    /* Jalousy/Curtain Effect: Slide down from top */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: clip-path;
}

.project-modal.active .modal-content {
    clip-path: inset(0 0 0 0);
}

/* 1. Header (Text) Section */
.modal-header {
    width: 100% !important;
    height: auto !important;
    order: 1 !important;
    padding: 20px 20px 40px 20px !important; /* Comfortable padding */
    clip-path: none !important; /* Disable wipe animation */
    overflow: visible !important;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Optional separator */
}

.modal-title {
    font-size: 1.5rem !important; /* Smaller than desktop */
    margin-bottom: 1rem !important;
}

.modal-description {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

/* 2. Gallery (Images) Section */
.modal-gallery {
    width: 100% !important;
    height: auto !important;
    order: 3 !important; /* Context: Hero Image (1), Text (2), Gallery (3) */
    position: relative !important;
    overflow: visible !important; /* Allow images to flow naturally */
    clip-path: none !important;
    padding-bottom: 50px;
}

.modal-gallery-track {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 Columns grid */
    width: 100% !important;
    padding: 0 20px 40px 20px !important;
    gap: 10px !important;
    transform: none !important; /* Disable JS Scroll Logic */
    height: auto !important;
}

/* Make images fill grid cell */
.modal-image-wrapper {
    width: 100% !important;
    height: 100% !important; 
    margin: 0 !important;
    left: 0 !important;
    transform: none !important;
    aspect-ratio: 1 / 1 !important; /* Force square for consistent grid */
}

/* Mobile Hero Image Container */
.mobile-hero-wrapper {
    order: 1 !important; /* First Element */
    width: 100%;
    padding: 20px 20px 0 20px; /* Top padding */
    display: block;
}

.mobile-hero-wrapper img,
.mobile-hero-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.modal-header {
    order: 2 !important; /* Second Element (Text) */
    padding-top: 20px !important;
}

/* Next Project Link at Bottom */
.mobile-next-project {
    grid-column: 1 / -1 !important; /* Span full width of grid */
    display: block;
    width: 100%;
    text-align: center;
    padding: 40px 0 20px 0;
    font-family: var(--font-main);
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    color: #666;
    letter-spacing: 0.1em;
}

.mobile-next-project .next-project-title {
    display: block;
    color: #000;
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: 5px;
    letter-spacing: 0;
}

.modal-image, 
.modal-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ensure content covers the square */
}

/* Controls */
.modal-close {
    top: 20px !important; /* Top right corner */
    right: 20px !important;
    color: #000 !important; /* Text Color */
    mix-blend-mode: normal !important; /* Ensure no mixing */
    z-index: 2005 !important;
    
    /* Background for visibility over images */
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: auto !important;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 700;
    
    /* Reveal Animation */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease; /* Quick fade out on close */
}

.project-modal.active .modal-close {
    opacity: 1 !important;
    pointer-events: auto;
    transition: opacity 0.5s ease 0.5s; /* Delay fade in until curtain is down */
}

.modal-prev,
.modal-next {
    display: none !important; /* Simplification for mobile: hide nav arrows? */
}

/* Enable Reveal Animation for Mobile Modal Items */
.modal-image-wrapper {
    opacity: 0 !important; /* Start hidden */
    transform: translateY(30px) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
}

.modal-image-wrapper.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Mobile Modal Header Animations */
.project-modal.active .modal-title,
.project-modal.active .modal-meta-row,
.project-modal.active .modal-description,
project-modal.active .modal-role-wrapper {
    animation: mobileAppearing 0.8s ease forwards;
    opacity: 0;
}

.project-modal.active .modal-title { animation-delay: 0.3s; }
.project-modal.active .modal-meta-row { animation-delay: 0.4s; }
.project-modal.active .modal-description { animation-delay: 0.5s; }
.project-modal.active .modal-role-wrapper { animation-delay: 0.6s; }

/* Section Headers need to be observed */
.mobile-section-header {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.mobile-section-header.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@keyframes mobileAppearing {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Arrows */
.mobile-down-arrow-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}

.mobile-back-to-top {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    cursor: pointer;
    gap: 10px;
}

.mobile-back-to-top span {
    font-family: var(--font-main);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}