html, body {
    overflow-y: auto; /* Ensure vertical scrolling */
    scroll-behavior: smooth; /* Optional */
    cursor: crosshair;
    padding: 10px;
}


/* Headings */
h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 4vw;
    font-weight: 700;
    cursor:pointer;
}

/* Set the font */
h2, a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1.5vw;
    font-weight: 700;
}

body{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1vw;
    font-weight: 700;
    line-height: 1.2;
}

/* Level-3 heading style used inside project-item */
h3 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1vw;
    font-weight: 400;
    line-height: 1.2;
}

.fade-in {
    opacity: 0; /* Initial state: invisible */
    transform: translateY(10px); /* Slightly moved down */
    animation: fadeInMoveUp 1.5s ease-out forwards; /* Animation setup */
}

.fade-in:nth-child(1) {
    animation-delay: 0.5s; /* Optional: stagger animations */
}

.fade-in:nth-child(2) {
    animation-delay: 1.5s;
}

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



/* Define the grid */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 10px;
    position: relative;
    box-sizing: border-box;
}

/* First Section */
.text-section {
    grid-column: 1 / span 5; /* Span 7 columns */
}

/* Project List */
.project-list {
    grid-column: 1 / span 5; /* Span 7 columns */
}


/* Image Gallery */
.image-gallery {
    position: fixed;
    top: 0;
    right: 0;
    width: 35%; /* Adjust as needed */
    padding: 0px;
    z-index: 1000;
}

/* Slideshow */
.slideshow {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Slideshow Images Container */
.slideshow-images {
    display: flex;
    align-items: flex-start;  /* Align images to the top */
}

.slideshow-images img {
    width: 100%;
    min-width: 100%; /* Ensures each slide is always full width */
    height: auto;
    object-fit: contain;
    flex-shrink: 0; /* Prevents images from shrinking when container resizes */
}

.project-list { 
    padding-top: 30px;
}

/* Project Item */
.project-item {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 5px;
    cursor: pointer;
    font-size: 1.5vw;
    font-weight: 700;
    padding: 0px 0;
    border-bottom: 1px solid transparent; /* reserve space so no jump */
}

/* Apply hover effect to .project-container */
.project-container:hover .project-item {
    background-color: #ffffff;
    border-bottom-color: #000; /* change color only */
}

/* Underline all text elements within the row on hover */
.project-container:hover .project-item h3 {
    text-decoration: none; /* disable default underline */
}

.project-name {
    /*width: 15vw;*/
    grid-column: 1 / span 2;
}

.project-type {
    grid-column: 3 / span 2;
}

.project-date {
    text-align: right;
    grid-column: 5 / span 1;

       /* width: 10vw;*/
}

.project-name,
.project-date,
.project-type {
    padding-top: 2px;
}

/* Project Description */
.project-description {
    grid-column: 1 / span 5;
    display: none;
    transition: opacity 0.3s ease;
}

.project-description p {
    margin-top: 10;
    margin-bottom: 30px;
}

/* Global link appearance: clean (no blue) and underline only on hover */
a {
    color: inherit; /* inherit text color (black) */
    text-decoration: none; /* remove default underline */
}

a:hover {
    text-decoration: underline; /* show underline on hover */
}

/* Footer */
footer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-column-gap: 10px;
    position: fixed;
    bottom: 0;
    padding-top: 10px;
    background-color: #ffffff;
    width: calc(7 * (100% / 12) - 1 * 5px); /* Calculate width based on 4 columns and gaps */
    left: 10px; /* Match container padding */
}

footer a {
    text-decoration: none; /* Removes the underline */
    color: inherit;        /* Inherits the text color from the parent element */
}

footer a:hover {
    text-decoration: underline; /* underline on hover */
    color: inherit;        /* Keep same color */
}

/* Footer Item Styling */
.footer-item {
}

/* Popup Overlay */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.70); /* White background with 95% opacity */
    z-index: 2000; /* Ensure it's on top of other elements */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* Popup Content */
.popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Popup Grid */
.popup-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 5px;
    width: 100%;
    max-width: 1200px; /* Optional: limit the width */
    box-sizing: border-box;
    align-items: center; /* Aligns grid items vertically */
}

/* Left Side (Text) */
.popup-text {
    grid-column: 1 / span 7;
}

/* Right Side (Image) */
.popup-image {
    grid-column: 8 / span 5;
    display: flex;
    align-items: flex-start; /* Align image to the top */
    justify-content: center; /* Keeps image centered horizontally */
}

.popup-image img {
    max-width: 100%;
    height: auto;
}

/* Style the email link in the Contact popup */
.popup-email a {
    text-decoration: none; /* Removes underline */
    color: inherit;        /* Inherits color from parent */
}

.popup-email a:hover {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;       /* Changes cursor to pointer on hover */
}

/* Adjust z-index of the image-gallery to ensure it's below the popup */
.image-gallery {
    z-index: 1000; /* Ensure it's below the popup */
}

/* Mobile Styles */
@media (max-width: 767px) {
    body {
        font-size: 4vw; /* Increase font size for readability on small screens */
    }

    h1 {
        font-size: 12vw;
    }

    h2 {
        font-size: 5.5vw;
    }

    /* Stack content vertically and apply consistent 10 px side gutters */
    .container {
        display: flex;
        flex-direction: column;
        padding: 0 10px; /* uniform left & right */
        box-sizing: border-box;
        margin-bottom: 70px; /* ensure content not hidden behind fixed footer */
    }

    /* Ensure text/list appear first, gallery after */
    .main-column {
        order: 1;
    }

    .image-gallery {
        order: 3;
        position: static; /* remove fixed positioning */
        width: 100%;
        padding: 0; /* same side gutters via container */
        margin: 20px 0; /* consistent vertical spacing */
        box-sizing: border-box;
        z-index: 0; /* ensure it sits below footer */
    }

    .text-section {
        grid-column: 1 / span 12;
        width: 100%;
        margin-bottom: 20px; /* space below title/about text */
        padding: 0; /* rely on container gutters */
        height: auto;
    }

    .project-list {
        grid-column: 1 / span 12;
        width: 100%;
        padding: 0;      /* side gutters already on container */
        margin-top: 30px;
        margin-bottom: 60px; /* leave room above footer */
    }
    .project-name {
        width: 30vw;
    }
    
    .project-date {
        text-align: center;
        width: 30vw;
    }

    .project-description{
        font-size: 4vw;

    }

    footer {
        grid-column: 1 / span 12;
        width: 100%;
        left: 0;
        padding: 10px;
        text-align: left;    
        box-sizing: border-box;
        z-index: 1001; /* higher than gallery */
    }

    .footer-item {
        padding: 10px 0;
        padding-right: 15px; /* Add padding to the left */
        font-size: 2vw; /* Match requested mobile size */
    }

    .slideshow {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .slideshow-images {
        flex-direction: row;
        align-items: flex-start; /* Ensure images are top-aligned on mobile as well */
    }

    .slideshow-images img {
        width: 100%;
        height: auto;
    }

    .project-item {
        grid-template-columns: 1fr 1fr 1fr; /* Adjust columns for mobile screen */
    }

    /* Increase size of project text */
    .project-item h3 {
        font-size: 2vw;
    }

    /* The popup container now scrolls and displays content from top */
    .popup-content {
        display: block;       /* Removes the vertical centering caused by flex */
        overflow-y: auto;     /* Allows vertical scrolling if content is long */
        max-height: 100vh;    /* Limits popup height to the viewport height */
        padding: 10px;        /* Add a bit of padding */
        box-sizing: border-box;
    }

    .popup-grid {
        display: block;       /* Stacks text and image in one column */
    }

    .popup-text {
        width: 100%;
        margin-bottom: 20px;  /* Space between the text and the image */
        text-align: left;     /* Ensures the Équipe text is left-aligned and visible at top */
    }

    /* Centering the email link specifically */
    .popup-email {
        text-align: center;   /* Centers the email text within the popup on mobile */
        margin-top: 20px;     /* Optional spacing above the email */
    }

    .popup-email a {
        display: inline-block; /* Ensure proper centering of the link */
        margin: 0 auto;
    }

    .popup-image {
        width: 100%;
        display: flex;
        justify-content: center; /* Keeps image centered horizontally */
        align-items: flex-start;
        padding: 0;
    }

    .popup-image img {
        width: 50%;           /* Image at half the container width on mobile */
        height: auto;
        display: block;
        margin: 0 auto;
    }

    #contact-popup .popup-content {
        display: flex;
        align-items: center;   /* Centers content vertically */
        justify-content: center; /* Centers content horizontally */
        text-align: center;    /* Centers the text if needed */
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;         /* Optional padding if needed */
    }
    
    /* If you need more control, you can style the .popup-email as well: */
    #contact-popup .popup-email {
        display: inline-block;
    }

    .popup-email a {
        font-size: 6vw;
    }

    /* Reduce extra space below project description when open */
    .project-description p {
        margin-bottom: 10px;
    }

    /* Standardise paragraph typography */
    .text-section p,
    .contact-details p {
        font-size: 4vw;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    /* Ensure contact-page behaves like normal flow on mobile */
    body.contact-page .contact-details {
        position: static;
        transform: none;
    }

    /* Make sure links inside contact details match paragraph size */
    .contact-details a {
        font-size: inherit;
    }
}

/* Desktop-specific layout for the image gallery */
@media (min-width: 768px) {
    /* Image gallery: top-right 5 columns */
    .image-gallery {
        position: relative;
        grid-column: 8 / span 5; /* columns 8-12 */
        grid-row: 1;            /* first row */
        width: 100%;
        height: calc(100vh - 20px); /* keep 10px gap at bottom to match body padding */
        padding: 0;
    }

    /* Text section: top-left 7 columns */
    .text-section {
        grid-column: 1 / span 7;
        grid-row: 1;
    }

    /* The slideshow itself should fill the gallery */
    .slideshow {
        height: 100%;
    }

    /* Default sizing for slideshow images (landscape) */
    .slideshow-images img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Portrait images should fill the height and crop horizontally */
    .slideshow-images img.portrait {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    /* Main left column containing text and projects */
    .main-column {
        grid-column: 1 / span 5;
        grid-row: 1;
        display: flex;
        flex-direction: column;
    }

    /* Remove grid positioning previously applied directly */
    .text-section,
    .project-list {
        grid-column: auto;
        grid-row: auto;
    }

    body.contact-page .text-section {
        position: relative; /* reference for absolute centering */
        min-height: 100vh; /* ensures full viewport height for centering math */
    }

    body.contact-page .contact-details {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Custom cursor element */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4000;
    display: none; /* Shown only when needed */
    background-size: contain;
    background-repeat: no-repeat;
}

.custom-cursor.arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' stroke='black' stroke-width='4' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='8' y1='32' x2='55' y2='32'/%3E%3Cpolyline points='40 16 56 32 40 48'/%3E%3C/svg%3E");
}

.custom-cursor.arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' stroke='black' stroke-width='4' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='8' y1='32' x2='55' y2='32'/%3E%3Cpolyline points='40 16 56 32 40 48'/%3E%3C/svg%3E");
    transform: translate(-50%, -50%) scaleX(-1); /* flip horizontally */
}

/* Utility to hide native cursor */
.hide-cursor {
    cursor: none !important;
}

/* Contact page specific tweaks */
body.contact-page .container {
    min-height: 100vh; /* full viewport height so centering works */
}

body.contact-page .main-column {
    justify-content: flex-start; /* keep title at top */
    min-height: 100vh; /* fill viewport height so internal centering works */
}

/* Vertically center the contact info only, not the title */
body.contact-page .text-section {
    position: relative; /* reference for absolute centering */
    min-height: 100vh; /* ensures full viewport height for centering math */
}

body.contact-page .contact-details {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}