/* The animation code */
@keyframes project-title-scroll {
    from {transform: none}
    to {transform: translateX(-12.5%)}
  }

.paragraph--type--paragraph-showcase .field-field_title {
    height: 135px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-bottom: 1px solid black;
    padding: 32px;
    overflow: hidden;
}

.paragraph--type--paragraph-showcase .field-field_title h2 {
    animation: project-title-scroll 15s infinite linear;
}

.field-field_projects {
    display: flex;
    flex-direction: column;
}

.node-project {
    overflow: hidden;
}

.node-project .summary-info {
    background-color: var(--color-background);
    display: flex;
    position: relative;
    flex-direction: column;
}

.summary {
    display: flex;
    justify-content: space-around;
}

@media (min-width:721px) {
    .summary-cover {
        width: 50%;
    }
    
    .summary-info {
        width: 50%;
        padding: 32px;
    }

    .alternate-row {
        flex-direction: row-reverse;
    }
}

@media (max-width:720px) {
    .summary {
        flex-direction: column;
    }

    .summary-info {
        padding: 20px;
    }
}

.node-project .field-body {
    font-size: 18px;
    line-height: 24px;;
    font-weight: 300;
    max-width: 380px;
}


.node-project .field-title {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

.node-project .field-field_year {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: var(--color-primary-low-contrast);
    white-space: nowrap;
}

.node-project .field-title::before,
.node-project .field-field_year .field-item::before {
    display: inline;
    content: '[ ';
}

.node-project .field-title::after,
.node-project .field-field_year .field-item::after {
    display: inline;
    content: ' ]';
}

.node-project .media-image.view-mode-thumbnail {
    width: 100%;
}

.node-project.view-mode-summary .field-field_cover {
    aspect-ratio: 1 / 1;
    background: black;
    overflow: hidden;
}

.node-project.view-mode-summary .field-field_cover img {
    transition: 500ms;
}   

.node-project.view-mode-summary .field-field_cover:hover img {
    transform: scale(1.05);
}

.node-project.view-mode-summary .field-field_cover .field-field_media_image {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.node-project .field-field_cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

dialog.project-gallery {
    background-color: black;
}

.node-project.view-mode-gallery.single-item video {
    max-width: 90vw;
    max-height: 90vh;
}

dialog.project-gallery .dialog-content:has(.multiple-items.gallery-mode-vertical) {
    aspect-ratio: 3/4;
}

dialog.project-gallery .dialog-content:has(.multiple-items.gallery-mode-vertical_wide) {
    aspect-ratio: 4/3;
    max-height: 98vh;
    height: 98vh;
    max-width: 1280px;
}

.node-project.view-mode-gallery.multiple-items img,
.node-project.view-mode-gallery.multiple-items video {
    width: 100%;
    height: auto;
    display: block;
}
 
.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
}

.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples > div {
    min-width: 100%;
    scroll-snap-align: center;
    display: inline-block;
}

.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples .field-field_media_video_file,
.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples .field-field_media_image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples .field-field_media_video_file  video,
.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples .field-field_media_image img {
    max-width: 100vw;
    max-height: 90vh;
    object-fit: contain;
}


.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .carousel-controls {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 40px;
    z-index: 1;
    pointer-events: none;
}

.carousel-controls button {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    pointer-events: all;
    color: rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0.5);
    transition: 250ms;
    position: relative;
}

.carousel-controls button.action-next::before,
.carousel-controls button.action-previous::before {
    display: block;
    position: absolute;
    top: 9px;
    content: '';
    width: 14px;
    height: 14px;
    border-left: 2px solid;
    border-top: 2px solid;
    transform-origin: center;
}

.carousel-controls button.action-next::before {
    left: 6px;
    transform: rotate(135deg);
}

.carousel-controls button.action-previous::before {
    left: 12px;
    transform: rotate(-45deg);
}

.node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .carousel-controls button:hover {
    transform: scale(1.1);
    color: rgba(255,255,255,1);
    background-color: rgba(128,128,128,0.3);
}

/* 
dialog.project-gallery article.view-mode-gallery:has(.field-field_project_samples > :nth-child(1):last-child) {
    column-count: 2;
}

dialog.project-gallery article.view-mode-gallery:has(.field-field_project_samples > :nth-child(2):last-child) {
    column-count: 3;
}

dialog.project-gallery article.view-mode-gallery:has(.field-field_project_samples > :nth-child(3):last-child) {
    column-count: 2;
}

dialog.project-gallery article.view-mode-gallery:has(.field-field_project_samples > :nth-child(4):last-child) {
    column-count: 5;
} */

/* dialog.project-gallery article.view-mode-gallery:has(.field-field_project_samples > :nth-child(4):last-child) .field-field_cover {
    column-span: all;
 } */

@media (min-width:721px) {
    .node-project .project-tags {
        display: flex;
        gap: 16px;
        position: absolute;
        left: 32px;
        bottom: 32px;
        transform-origin: left top;
        transform: translateY(100%) rotate(-90deg); 
    }
    
    .alternate-row .project-tags {
        left: unset;
        right: 32px;
        transform-origin: left bottom;
        transform: translateX(100%) rotate(-90deg); 
    }

    .node-project .field-body {
        text-align: right;
        margin-left: 32px;
    }

    .node-project .summary-info {
        justify-content: flex-end;
        align-items: flex-end;
    }
    
    .alternate-row .field-body {
        text-align: left;
        margin-right: 32px;
        margin-left: 0;
    }

    .alternate-row .summary-info {
        align-items: flex-start;
    }
    
    .alternate-row .field-body {
        text-align: left;
    }
    
}

@media (max-width:720px) {
    .node-project .project-tags {
        display: flex;
        gap: 20px;
    }

    .node-project .summary-info {
        gap: 32px;
    }
}

@media only screen and (hover: none) {
    .node-project.view-mode-gallery.multiple-items.gallery-mode-carousel .field-field_project_samples {
        overflow-x: scroll;
    }
    .carousel-controls {
        display: none !important;
    }
}