body {
    padding: 0px !important;
}


body {
    overflow: hidden;
    height: 100svh;
}

header {
    position: fixed;
    width: 100%;
    text-align: center;
    top: 3.5vh;
    z-index: 1;

    & a {
        padding: 1lh;
    }
}


/* --- Images Wrapper --- */

.project {
    width: 100vw;
    height: 100dvh;

    /* display: flex; */
    gap: 0;
    flex: 1;
    scroll-snap-type: x mandatory;
    overflow: hidden;
    /* overscroll-behavior-x: contain; */

}


/* --- Debug Figures --- */

/* figure {
    outline: 1px solid green;
  }
  
  picture {
    outline: 1px solid fuchsia;
  }
  
  img {
    outline: 1px solid red;
  } */

/* --- Figures --- */


figure {
    box-sizing: border-box;
    position: relative;

    margin: 0 auto;

    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    gap: 2lh;
    padding: 0lh clamp(var(--padding), 2lh + 9vw, 10lh) 0lh;
}

/* --- Picture --- */


picture {

    display: flex;
    justify-content: center;
    /* Default horizontal alignment */
    align-items: center;
    /* Default vertical alignment */
    padding-bottom: 1lh;
}



/* --- Nav --- */

.navigation-links {
    position: absolute;

    display: flex;
    height: 100%;
    opacity: 0.5;
    width: 100%;
}

.navigation-links a {
    flex: 1;
}

.next-link {
    cursor: e-resize;

}

.prev-link {
    cursor: w-resize;

}

/* --- Footer --- */



footer {
    display: none;
    position: fixed;
    width: max-content;
    max-width: calc(100vw - calc(2* var(--padding)));
    bottom: 4vh;
    transform: translateX(-50%);
    left: 50%;
}

footer>a {
    display: inline-flex;
    gap: .5lh;
}


footer:hover .full-name {
    /* display: inline; */
    /* display: none; */
}

.image-count {
    text-align: center;
    display: inline;
}

footer:hover .image-count,
footer:hover .initials,
footer:hover .client {
    display: none;
}


/* --- Caption --- */



.full-name {
    display: none;
}



.figure-caption {
    position: absolute;
    width: max-content;
    bottom: 4vh;
    transform: translateX(-50%);
    left: 50%;
    max-width: calc(100vw - 2lh);
    text-align: center;
    text-wrap: balance;
}

.figure-caption>a {
    display: inline-flex;
    gap: 1lh;
}


/* .figure-caption:hover .full-name {
    display: inline;
  }
  
  .figure-caption:hover .image-count,
  .figure-caption:hover .initials,
  .figure-caption:hover .client {
    display: none;
  } */


/* --- Double/Single --- */

.single {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.double {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* padding: var(--padding); */
    /* padding: 0 calc(var(--padding) * 2); */
}

/* --- Sizes --- */

picture .large {
    max-height: 75vh;
}

picture:has(.large.single) {
    /* padding: 0; */
}

picture .medium {
    max-height: 60vh;
}

picture .small {
    max-height: 33vh;
}

/* --- VERTICAL ALIGNMENT --- */
picture .top {
    align-self: flex-start;
}

picture .bottom {
    align-self: flex-end;
}

/* --- HORIZONTAL ALIGNMENT --- */

picture .left {
    margin-right: auto;
}

picture .right {
    margin-left: auto;
}



/* --------------- Responsive --------------- */


@media only screen and (max-width: 1200px),
only screen and (orientation: portrait) {
    body {
        /* background-color: lightblue; */
    }

    .project figure {
        display: contents;
    }

    footer {
        display: block;
    }

    .navigation-links,
    .all-pics {
        display: none;
    }

    picture {
        /* positioned relatively for absolute positioning inside */
        flex-shrink: 0;
        box-sizing: border-box;
        position: relative;

        margin: 0 auto;

        position: relative;
        /* scroll-snap-align: start; */
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        padding: var(--padding);
        padding-bottom: 1.5lh;
    }

    .mobile-navigation-links {
        display: block;
        /* display: none; */
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .mobile-navigation-links .prev-link,
    .mobile-navigation-links .next-link {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        cursor: w-resize;
    }

    .mobile-navigation-links .next-link {
        cursor: e-resize;
    }

    .mobile-navigation-links .prev-link {
        left: 0;
    }

    .mobile-navigation-links .next-link {
        right: 0;
    }

    figure .navigation-links {
        display: none;
    }

    /* --- SIZE CLASSES Mobile--- */

    picture .large {
        max-height: 70svh;
    }

    picture .medium {
        max-height: 70svh;
    }

    picture .small {
        max-height: 70svh;
    }

    /* --- VERTICAL ALIGNMENT Mobile --- */
    picture .top {
        align-self: center;
    }

    picture .bottom {
        align-self: center;
    }

    /* --- HORIZONTAL ALIGNMENT Mobile --- */

    picture .left {
        margin-right: 0;
    }

    picture .right {
        margin-left: 0;
    }

    img {
        padding: 0;
    }

    a {
        -webkit-tap-highlight-color: transparent;
    }
}