/********************************************************/
/*
/*      Projects CSS
/*
/********************************************************/
.wp-block-cke-projects,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-projects:is(.wp-block-cke-projects) {
    display: flex;
    flex-direction: column;
    position: relative;

    /* Overwrite editor style */
	&:not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer) {
		width: 100% !important;
		max-width: var(--wp--style--global--wide-size) !important;	
	}
	
    /************************************************************/
    /* Filters
    /************************************************************/
	& > #spinner {
		display: none;
		position: absolute;
		top: 25svh;
		left: 50%;
		filter: var(--wp--custom--color--yellowish-orange--filter);
		pointer-events: none;
		translate: -50% -50%;
		z-index: 1;
		
		:has(.htmx-request) > & {
			display: block;
		}
	}
	
	& > .project-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		column-gap: var(--wp--preset--spacing--2);
		row-gap: var(--wp--preset--spacing--0-75);
		margin-block-end: var(--wp--preset--spacing--7-5);
		
		.project-filter {
            font-family: var(--wp--preset--font-family--maison-neue);
            font-size: var(--wp--preset--font-size--medium-large);
            line-height: normal;
            font-weight: 500;
			text-decoration: none;
			color: var(--wp--custom--color--default--accent--2);
			cursor: pointer;
			transition: color var(--wp--custom--duration--short);

            &:not(:last-of-type) {
                padding-inline-end: var(--wp--preset--spacing--2);
                border-inline-end: 2px solid var(--wp--custom--color--default--accent--2);
            }
			
			&:is(:hover, :focus, :active) {
				color: var(--wp--custom--color--default--accent--1);
			}
			
			&.active {
				color: var(--wp--custom--color--default--accent--1);
				cursor: default;
				pointer-events: none;
			}
		}
	}
	
	&:has(.htmx-request) :is(.project-filter, .wp-block-cke-slider, .project-item) {
		opacity: .5;
		
		* {
			pointer-events: none;
		}
	}
	
    /************************************************************/
    /* Common style
    /************************************************************/
    .project-thumbnail {
        position: relative;
        width: 100%;
        background: url(../../assets/images/logo-simple-white.svg) no-repeat center / 25%, var(--wp--custom--color--default--accent--1);

        * {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            translate: unset;
        }
    }

    .project-terms {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--wp--preset--spacing--0-50);
        row-gap: var(--wp--preset--spacing--0-75);
        max-width: 100%;
        
        span {
            font-family: var(--wp--preset--font-family--maison-neue);
            font-size: var(--wp--preset--font-size--medium);
            line-height: normal;
            font-weight: 700;
            color: var(--wp--custom--color--default--text--main);
            
            &:first-of-type:not(:last-of-type) {
                padding-inline-end: var(--wp--preset--spacing--0-50);
                border-inline-end: 2px solid currentcolor;
            }
        }
    }
    
    /************************************************************/
    /* Slider layout
    /************************************************************/
	&[data-layout="slider"],
    &:has([data-layout="slider"]) {
        --number-height: 110px;
        --slide-translate: calc(100% + var(--wp--custom--outer-pad));
        --active-slide-translate: calc(var(--wp--style--global--wide-size) * .25 * -1);
        --adjacent-slide-translate: 0;
        
        & > .project-items {
            display: grid;
            grid-template-columns: 75% minmax(0, 1fr);
            grid-template-rows: calc(90svh - var(--wp--custom--stickied-header-height));

            & > .wp-block-cke-slider {
                position: relative;
                counter-reset: projectCount;

                &, & > .slider-items {
                    grid-column: 1 / span 2;
                    display: grid;
                    grid-template-columns: subgrid;
                    grid-template-rows: subgrid;
                    column-gap: unset;
                    width: 100%;
                    height: 100%;

                    &.slider-items {
                        translate: unset !important;
                    }
                }

                /******************************/
                /* Slide
                /******************************/
                .slide-item {
                    --translate-val: var(--slide-translate);

                    grid-column: 1 / span 2;
                    justify-self: end;
                    display: flex;
                    position: relative;
                    width: 25%;
                    min-width: 25%;
                    max-width: 25%;
                    height: 100%;
                    min-height: 100%;
                    max-height: 100%;
                    padding-block-start: calc(var(--number-height) + var(--wp--preset--spacing--3));
                    padding-inline: var(--wp--preset--spacing--1);
                    border-inline-start: 2px solid var(--wp--custom--color--default--accent--2); /* Reversed because of direction property */
                    box-sizing: border-box;
                    pointer-events: none;
                    counter-increment: projectCount;
                    transition: width var(--wp--custom--duration--longer), min-width var(--wp--custom--duration--longer), max-width var(--wp--custom--duration--longer), padding var(--wp--custom--duration--longer), border-color var(--wp--custom--duration--normal);

                    /* This makes width expand to the left */
                    direction: rtl;
                    
                    & * {
                        direction: ltr;

                    }
                    
                    .wp-block-cke-projects:not(.sliding) & {
                        translate: var(--translate-val);
                    }

                    &::before {
                        content: counter(projectCount);
                        display: flex;
                        align-items: center;
                        position: absolute;
                        top: 0;
                        right: var(--wp--preset--spacing--1);
                        max-height: var(--number-height);
                        font-family: var(--wp--preset--font-family--maison-neue);
                        font-size: calc(var(--wp--preset--font-size--x-large) * 1.75);
                        font-weight: 300;
                        color: var(--wp--custom--color--default--accent--2);
                        box-sizing: border-box;
                        user-select: none;
                        transition: color var(--wp--custom--duration--normal)
                    }

                    /* Add a 0 to counter of first 9 items */
                    &:nth-of-type(-n+9)::before {
                        content: "0" counter(projectCount);
                    }

                    & > :is(.project-thumbnail, .project-infobox) {
                        transition: width var(--wp--custom--duration--longer), min-width var(--wp--custom--duration--longer), max-width var(--wp--custom--duration--longer), height var(--wp--custom--duration--longer), min-height var(--wp--custom--duration--longer), max-height var(--wp--custom--duration--longer), opacity var(--wp--custom--duration--long);
                        transform-origin: right;
                    }
                    
                    & > .project-thumbnail {
                        min-width: 100%;
                        max-width: 100%;
                        height: 40%;
                        min-height: 40%;
                        max-height: 40%;
                        margin-inline: auto 0;
                        margin-block: 0 auto;
                        opacity: .15;
                    }

                    & > .project-infobox {
                        position: absolute;
                        top: 100%;
                        left: 0;
                        width: 100%;
                        min-width: 100%;
                        max-width: 100%;
                        height: max-content;
                        max-height: 100%;
                        margin: unset;

                        & > :not(.project-title) {
                            max-height: 0px;
                            margin-block: 0px;
                            overflow: clip;
                            transition: max-height var(--wp--custom--duration--short), margin var(--wp--custom--duration--normal), opacity var(--wp--custom--duration--short);
                            transition-behavior: allow-discrete;
                        }
                        
                        & > h6 {
                            color: var(--wp--custom--color--default--accent--2);
                            margin-block-end: .5em !important;
                        }

                        & > .project-title {
                            max-width: calc(100% - (var(--wp--preset--spacing--1) * 2));
                            color: var(--wp--custom--color--default--accent--2);
                            margin-block: unset !important;
                            translate: var(--wp--preset--spacing--1) -110%;
                            transition: color var(--wp--custom--duration--normal), translate var(--wp--custom--duration--normal);
                        }

                        & > .wp-block-buttons > .wp-block-button {
                            font-size: var(--wp--preset--font-size--medium);

                            &::before {
                                width: 13px;
                            }
                        }
                    }

                    /**** Active slide ****/
                    &.active {
                        --translate-val: var(--active-slide-translate);

                        width: 75%;
                        min-width: 75%;
                        max-width: 75%;
                        padding-inline: var(--wp--preset--spacing--1) 0; /* Reversed because of direction property */
                        border-color: var(--wp--custom--color--default--accent--1);
                        pointer-events: all;

                        & + .slide-item,
                        .slide-item:first-child:has(~ &:last-child) {
                            --translate-val: var(--adjacent-slide-translate);
                        }

                        &::before {
                            color: var(--wp--custom--color--default--text--main);
                        }

                        & > .project-thumbnail {
                            width: calc(100% * (2/3));
                            min-width: calc(100% * (2/3));
                            max-width: calc(100% * (2/3));
                            height: 100%;
                            min-height: 100%;
                            max-height: 100%;
                            opacity: 1;
                        }
                        
                        & > .project-infobox {
                            top: var(--wp--preset--spacing--10);
                            width: 25%;
                            min-width: 25%;
                            max-width: 25%;

                            & > * {
                                margin-block: unset;

                                & + :not(.project-title) {
                                    margin-block-start: 1em;
                                }
                            }

                            & > .project-title {
                                color: var(--wp--custom--color--default--accent--1);
                                translate: 0 0;
                            }

                            & > :not(.project-title) {
                                max-height: max-content;
                            }
                        }
                    }
                }

                /******************************/
                /* Controls
                /******************************/
                & > .controls {
                    position: absolute;
                    top: calc(var(--number-height) + var(--wp--preset--spacing--3) + 50%);
                    left: calc(75% + var(--wp--preset--spacing--1));
                    translate: 0 -50%;

                    & > .wp-block-button:has(> a[rel="prev"]) {
                        display: none !important;
                    }
                }
            }
        }
    }

    /************************************************************/
    /* Mosaic layout
    /************************************************************/
    &[data-layout="mosaic"],
    &:has([data-layout="mosaic"]) {
        margin-block-end: 15svh;

        & > .project-items {
            display: grid;
            grid-template-columns: 33% 17% 17% 33%;
            grid-auto-rows: 15svh;

            & > .project-item {
                grid-row: span 5;
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: minmax(0, 1fr) repeat(2, max-content);

                &:nth-child(5n-4) { grid-column: 1 / span 2; }
                &:nth-child(5n-3) { grid-column: 4 / span 1; }
                &:nth-child(5n-2) { grid-column: 1 / span 1; }
                &:nth-child(5n-1) { grid-column: 3 / span 2; }
                &:nth-child(5n)   { grid-column: 1 / span 4; }
                
                &:nth-child(5n-4),
                &:nth-child(5n-2) { grid-row: calc((round(down, (var(--index) / 2)) * 6) + 1 + (7 * round(down, var(--index) / 5))) / span 5; }
                
                &:nth-child(5n-3),
                &:nth-child(5n-1),
                &:nth-child(5n)   { grid-row: calc((round(down, (var(--index) / 2)) * 6) + 2 + (7 * round(down, var(--index) / 5))) / span 5; }

                & > a {
                    display: contents;

                    & > * {
                        margin-block: unset;

                        &:not(.project-thumbnail) {
                            width: max-content;
                        }
                    }

                    & > .project-thumbnail {
                        height: 100%;
                        overflow: clip;
                        transition: background var(--wp--custom--duration--long);                        

                        * {
                            scale: 1;
                            transform-origin: center;
                            transition: scale var(--wp--custom--duration--long);
                        }

                        .project-item:has(> :is(:hover, :focus, :active)) & {
                            background: url(../../assets/images/logo-simple-white.svg) no-repeat center / calc(25% * 1.025), var(--wp--custom--color--default--accent--1);

                            * {
                                scale: 1.025;
                            }
                        }
                    }

                    & > .project-terms {
                        margin-block-start: var(--wp--preset--spacing--2);

                        span {
                            font-family: var(--wp--preset--font-family--cooper-lt-bt);
                            font-weight: 300;

                            &:first-of-type:not(:last-of-type) {
                                border-width: 1px;
                            }
                        }
                    }
                    
                    & > .project-title {
                        margin-block-start: var(--wp--preset--spacing--0-50);
                    }
                }
            }
        }
    }

    /******************************/
    /* Archive link
    /******************************/
    & > .archive-link {
        margin-block-start: var(--wp--preset--spacing--1);

        /**** Slider layout ****/
        [data-layout="slider"] > &,
        [data-layout="slider"] ~ & {
            align-self: end;
            translate: calc(100% + var(--active-slide-translate));
        }
    }
	
	/************************************************************/
	/* Animations (slider layout only)
	/************************************************************/
    &.pre-sliding {
        .slide-item.active,
        .project-infobox {
            animation-name: fade-out;
            animation-duration: var(--wp--custom--duration--normal);
            animation-fill-mode: forwards;
            animation-play-state: running;
        }
    }

    &.sliding {
        .slide-item {
            animation-name: translate-stay-offscreen;
            animation-duration: var(--wp--custom--duration--longer);
            animation-fill-mode: forwards;
            animation-play-state: running;
        }

        .slide-item.active {
            animation-name: translate-adjacent-to-active;
            animation-duration: var(--wp--custom--duration--longer);
            animation-fill-mode: forwards;
            animation-play-state: running;;
        }
        
        .slide-item:not(:first-child):has(+ .slide-item.active),
        .slide-item:first-child:has(+ .slide-item.active:not(:last-child)),
        .slide-item.active:first-child ~ :not(.slide-item.active) + .slide-item:last-child {
            animation-name: translate-active-to-offscreen;
            animation-duration: var(--wp--custom--duration--longer);
            animation-fill-mode: forwards;
            animation-play-state: running;
        }

        .slide-item.active + .slide-item,
        .slide-item:first-child:has(+ .slide-item.active:last-child) {
            animation-name: translate-offscreen-to-adjacent;
            animation-duration: var(--wp--custom--duration--longer);
            animation-fill-mode: forwards;
            animation-play-state: running;
        }
        
        .slide-item:not(:first-child):has(+ .slide-item.active),
        .slide-item:first-child:has(+ .slide-item.active:not(:last-child)),
        .slide-item.active:first-child ~ :not(.slide-item.active) + .slide-item:last-child,
        .project-infobox {
            opacity: 0 !important;
        }
    }
    
    /************************************************************/
	/* Responsive
	/************************************************************/
}