/*
    Main 
*/

main {
    padding: 0rem 0.5rem;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    main {
        padding: 0rem 2rem;
    }
}

/* 
    Grid 
*/

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: max-content;
    gap: 0rem 0.5rem;
}

.grid-col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0rem 0.5rem;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .grid-col-8 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 0rem 0.5rem;
    }    
}

/* 
    PAGES 
*/

/* 
    Home Page
*/

.home-page {
    padding: 0;
    max-width: 100vw;
}

/* 
    Hero Section 
*/

.home-page-hero {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

.hero-images {
    position: relative;
    height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.home-page-hero-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    opacity: 0;
    transition: opacity 1s ease;
    will-change: transform, opacity;
    mix-blend-mode: difference;
    filter: saturate(30%);
    overflow: hidden;
}

.home-page-hero-cover.active {
    opacity: 1;
    transform: scale(1.3) rotate(3deg);
}

.home-page-hero-cover-image {
    width: auto;
    height: 100%;
    scale: 1.5;
    transition: transform 1.5s ease;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .home-page-hero-cover-image {
        height: auto;
        width: 100%;
    }
}

.hero-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.hero-list-project {
    position: absolute;
    color: rgba(255, 255, 255, 0.85);
    filter: blur(0px);
    place-items: start;
    box-sizing: border-box;
    padding: 0.5rem 0 0;
    /* background-color: rgba(0, 0, 255, 0.1);
    outline: 1px solid blue; */
}

.hero-list-project:hover + .hero-images img {
    opacity: 1;
    display: block;
}

.hero-list-mob-project {
    position: fixed;
    bottom: 0.875rem;
    left: 0.5rem;
    right: 0.5rem;
    display: none;
    z-index: 2;
}

.hero-list-mob-project.active {
    display: block;
}

.hero-list-mob-project-categories-span,
.hero-list-project-categories-item-span {
    margin: 0 0.25rem 0 0;
}

.hero-list-mob-project-categories-year-span,
.hero-list-project-categories-year-span {
    margin: 0 0.25rem;
}

/* Hero Related Image */
/* .hero-related-images-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.5);
    transition: opacity 1s ease, transform 1.5s ease;
    will-change: transform, opacity;
    mix-blend-mode: difference;
}

.hero-related-images-cover.active {
    opacity: 1;
    transform: scale(1.3) rotate(3deg);
} */


/* 
    Projects Section
*/

.home-page-projects {
    margin: 4rem 0 0;
}

.home-page-projects-gallery-list {
    padding: 0 0 0 0.5rem;
}

.home-page-projects-gallery-list-item {
    position: relative;
    flex-shrink: 0;
    width: 0;
    opacity: 0;
    margin: 0;
    transition: all 300ms, height 300ms 300ms ease, margin 300ms 300ms, width 600ms 300ms, opacity 300ms 300ms;
}

.home-page-projects-gallery-list-item.active {
    margin: 0 0.5rem 0 0;
    width: var(--elementWidth, fit-content);
    opacity: 1;
    transition: all 300ms, height 300ms 300ms ease, margin 300ms 300ms, width 600ms 300ms, opacity 300ms 600ms;
}

.home-page-projects-gallery-list-item:last-child {
    margin: 0 0.5rem 0 0;
}

.home-page-projects-gallery-list-item-cover {
    height: 70vh;
}

.home-page-projects-gallery-list-item-cover-image {
    width: auto;
    height: 100%;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .home-page-projects-gallery-list {
        padding: 0 0 0 2rem;
    }

    .home-page-projects-gallery-list-item:last-child {
        margin: 0;
    }

    .home-page-projects-gallery-list-item-cover {
        height: calc(80vh - 2rem);
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .home-page-projects {
        padding: 0;
    }

    .home-page-projects-gallery {
        margin: 0;
    }

    .home-page-projects-gallery-list-item:last-child {
        padding: 0 2rem 0 0;
    }
}


/* Gallery Items Info */
.home-page-projects-gallery-list-item-info {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: max-content;
    gap: 0rem 0.5rem;
    margin: 0.25rem 0 0 0;
    color: #B2B2B2;
}

.home-page-projects-gallery-list-item-info-title {
    grid-column: 1/-4;
}

.home-page-projects-gallery-list-item .home-page-projects-gallery-list-item-cover.landscape ~ .home-page-projects-gallery-list-item-info .home-page-projects-gallery-list-item-info-title {
    grid-column: 1/-6;
}

.home-page-projects-gallery-list-item-info-categories {
    display: none;
}

.home-page-projects-gallery-list-item-info-categories-item-span {
    padding: 0 0.25rem 0 0;
}

.home-page-projects-gallery-list-item-info-categories-item:last-child .home-page-projects-gallery-list-item-info-categories-item-span {
    display: none;
}

.home-page-projects-gallery-list-item-info-year {
    grid-column: -4/-1;
}

.home-page-projects-gallery-list-item .home-page-projects-gallery-list-item-cover.landscape ~ .home-page-projects-gallery-list-item-info .home-page-projects-gallery-list-item-info-year {
    grid-column: -6/-1;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .home-page-projects-gallery-list-item-info {
        opacity: 0;
        transition: opacity 300ms;
    }

    .home-page-projects-gallery-list-item:hover .home-page-projects-gallery-list-item-info {
        opacity: 1;
    }

    .home-page-projects-gallery-list-item-info-title {
        grid-column: 1/4;
    }
    
    .home-page-projects-gallery-list-item .home-page-projects-gallery-list-item-cover.landscape ~ .home-page-projects-gallery-list-item-info .home-page-projects-gallery-list-item-info-title {
        grid-column: 1/3;
    }
    
    .home-page-projects-gallery-list-item-info-categories {
        display: flex;
        grid-column: 4/-1;
    }
    
    .home-page-projects-gallery-list-item .home-page-projects-gallery-list-item-cover.landscape ~ .home-page-projects-gallery-list-item-info .home-page-projects-gallery-list-item-info-categories {
        grid-column: 3/-1;
    }
}


/* 
    About Page
*/

.about-page {
    width: 100vw;
    height: 100vh;
    position: fixed;
    padding: 4rem 0.5rem 4rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    overflow: auto;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .about-page {
        padding: 4rem 2rem 0;
    }
}

/* Content */
.about-page-contact {
    grid-column: 1/-1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0rem 0.5rem;
    margin: 0 0 1rem;
}

.about-page-contact-title {
    grid-column: 1/2;
}

.about-page-contact-email {
    grid-column: 2/-1;
}

.about-page-contact-list {
    grid-column: 2/-1;
}

.about-page-contact-list span {
    padding: 0 0.25rem;
}

.about-page-contact-list span:last-child {
    display: none;
}

.about-page-description {
    grid-column: 1/-1;
    grid-row: 1;
}

.about-page-datasheet {
    grid-column: 1/-1;
    grid-row: 3;
}

.about-page-datasheet-list-item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0rem 0.5rem;
    margin: 0 0 1rem;
}

.about-page-datasheet-list-item-category {
    grid-column: 1/2;
    margin-bottom: 0.25rem;
}

.about-page-datasheet-list-item-content {
    grid-column: 2/-1;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .about-page-description {
        grid-column: 1 / -4;
        padding: 0 1rem 0 0;
    }

    .about-page-contact {
        margin: 0 0 2rem;
    }

    .about-page-datasheet-list.grid-col-8 {
        gap: 1.5rem 0.5rem;
    }

    .about-page-datasheet-list-item {
        display: block;
        margin: 0;
        grid-column: span 2;
        padding: 0 1rem 0 0 ;
    }

    .about-page-datasheet-list-item:last-child {
        padding: 0;
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .about-page-contact {
        grid-column: 1/4;
        display: block;
        grid-row: 1;
        margin: 0;
    }

    .about-page-contact-title {
        margin: 0 0 0.75rem;
    }

    .about-page-contact-email {
        grid-column: 2/-1;
    }

    .about-page-description {
        grid-column: 4/-4;
        padding: 0;
    }
    
    .about-page-datasheet {
        grid-column: 4/-2;
        grid-row: 2;
    }

    .about-page-datasheet-list-item {
        padding: 0 0.75rem 0 0 ;
    }
}

/* Desktop Large */
@media only screen and (min-width: 100rem) {
    .about-page-description {
        grid-column: 4/-6;
        padding: 0;
    }
}

/* Close About */
.about-page-close {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    padding: 0.875rem 0.5rem;
}

.about-page-close-info {
    position: relative;
    width: fit-content;
    justify-self: end;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .about-page-close {
        padding: 1rem 2rem 0.875rem;
    }
    
}


/* 
    Project Page 
*/

.project-page {
    padding: 0;
}

.project-page::-webkit-scrollbar {
    display: none;
}

.gallery {
    padding: 0 0 0 0.5rem;
}

.project-page-gallery.content-hidden .gallery-image,
.project-page-gallery.content-hidden .video-player {
    filter: opacity(0);
    transition: 250ms ease;
}

.gallery-image.active,
.video-player.active,
.project-page-gallery.content-hidden .gallery-image.active,
.project-page-gallery.content-hidden .video-player.active {
    filter: opacity(1);
}

.project-page-gallery,
.project-page-gallery.fullscreen .gallery-image {
    height: 65vh;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .project-page-gallery.fullscreen .gallery-image:last-child {
        margin: 0;
    }

    .gallery {
        padding: 0 2rem 0;
    }

    .project-page-gallery.fullscreen .gallery-image {
        height: calc(80vh - 2rem);
    }
}

/* Gallery */
.gallery-item {
    height: calc(80vh - 2rem);
}

.gallery-image {
    margin: 0 0.5rem 0 0;
}

.gallery-image-picture-image {
    width: auto;
    height: 100%;
}

@media (hover: hover) {
    .gallery-item:hover {
        cursor: pointer;
    }
}

/* Project Page Content */
.project-page-content {
    width: 100vw;
    height: 100vh;
    position: fixed;
    padding: 4rem 0.5rem 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.project-page-content-description {
    grid-column: 1/-1;
}

.project-page-content-datasheet {
    margin: 2rem 0 0;
    grid-column: 1/-1;
}

.project-page-content-datasheet-list-item {
    margin: 0 0 0.5rem 0;
}

.project-page-content-datasheet-list-item-category {
    grid-column: 1/2;
    align-self: end;
}

.project-page-content-datasheet-list-item-content {
    grid-column: 2/-1;
    align-self: end;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .project-page-content-description {
        grid-column: 4/-4;
    }

    .project-page-content-datasheet {
        grid-column: 4/-4;
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .project-page-content {
        padding: 0 2rem;
    }

    .project-page-content-description {
        margin: 9rem 0 0;
        grid-column: 4/-5;
    }

    .project-page-content-datasheet {
        margin: 5rem 0 0;
        grid-column: 4/-6;
    }
}

/* Desktop Large */
@media only screen and (min-width: 100rem) {
    .project-page-content-description {
        grid-column: 4/-6;
    }
}


/* Project Page Info */
.project-page-info {
    position: fixed;
    margin: 0 0.5rem 0.875rem;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 300ms ease;
}

.project-page-info-pop-up {
    position: relative;
    grid-column: 1/4;
    grid-row: 1;
    margin-bottom: 0.5rem;
    width: fit-content;
}

.project-page-info-title {
    grid-column: 1/-2;
    grid-row: 2;
}

.project-page-info-categories {
    grid-column: 1/-1;
    grid-row: 3;
}

.project-page-info-categories-item-span {
   margin: 0 0.25rem 0 0; 
}

.project-page-info-year  {
    grid-column: -2/-1;
    grid-row: 2;
    justify-self: end;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .project-page-info-title {
        grid-column: 1 / -10;
    }

    .project-page-info-categories {
        grid-column: 4 / -2;
        grid-row: 2;
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .project-page-info {
        margin: 0 2rem 0.875rem;
    }

    .project-page-info-title {
        grid-column: 1/4;
    }

    .project-page-info-categories {
        grid-column: 4/-6;
        grid-row: 2;
    }
    
    .project-page-info-year  {
        grid-column: -6/-5;
        grid-row: 2;
        justify-self: end;
    }
}


/* 
    Projects Page 
*/

.projects-page {
    overflow: scroll;
}

.projects-page::-webkit-scrollbar {
    display: none;
}

/* Index */
.projects-page-index {
    margin-top: 8rem;
}

.projects-page-index-list-item {
    position: relative;
    height: 0;
    opacity: 0;
    margin-bottom: 0;
    transition: all 300ms, opacity 300ms 300ms ease, height 600ms 300ms ease, margin 300ms 300ms, width 600ms 300ms;
}

.projects-page-index-list-item.active {
    margin-bottom: 0.75rem;
    height: var(--elementHeight, fit-content);
    opacity: 1;
}

.projects-page-index-list-item-title {
    grid-column: 1/-2;
}

.projects-page-index-list-item-categories {
    display: none;
}

.projects-page-index-list-item-year {
    grid-column: -2/-1;
    justify-self: end;
}

.projects-page-index-list-item-categories-item-span {
    padding: 0 0.25rem 0 0;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .projects-page-index-list-item-title {
        grid-column: 1/4;
    }

    .projects-page-index-list-item-categories  {
        display: flex;
        grid-column: 4/-3;
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .projects-page-index-list-item-categories  {
        grid-column: 4/-6;
    }

    .projects-page-index-list-item-year  {
        grid-column: -6/-5;
    }
}

/* Projects Page List */
.projects-page-images-list {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.projects-page-images-list-item.active {
    height: auto;
    width: 100%;
}

.projects-page-images-list-item.active .projects-page-images-list-item-cover {
   height: 100vh;
   width: 100vw; 
}

.projects-page-images-list-item-cover-image {
    display: none;
}

.projects-page-images-list-item.active .projects-page-images-list-item-cover-image {
    display: flex;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}


/* 
    Error Page 
*/

.error-content {
    grid-column: 1/-1;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .error-content {
        grid-column: 4/-4;
    }
}


/*
    Components 
*/

/* Span Items */
.close-cross,
.bullet-dot {
    filter: opacity(0);
    padding: 0 0.25rem;
    transition: 400ms ease;
}

.bullet-dot.active,
.footer-project-index-item.active .bullet-dot {
    filter: opacity(1);
    transition: 400ms ease;
}

@media (hover: hover) {
    .about-page-close-info:hover .close-cross,
    .project-page-info-pop-up:hover .bullet-dot {
        filter: opacity(1);
        transition: 400ms ease;
    }
}

/* Effects */
.blur {
    background-color: rgba(150, 146, 146, 0.3);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
}

.text-blur {
    -webkit-filter: blur(1px);
    filter: blur(1px);
    transition: 300ms ease;
}

.content-blur {
    filter: blur(5px) opacity(0.75);
    -webkit-filter: blur(5px) opacity(0.75);
    transition: 300ms ease;
}


/* 
    Horizontal Scroll Animation 
*/

.horizontal-scroll-target {
    height: var(--scrollHeight, 200vh) !important;
    max-width: 100vw;
}

.horizontal-scroll-container {
    overflow-x: hidden;
    overflow-y: hidden;
}

.horizontal-scroll-elements {
    width: fit-content;
}