/********************************************************/
/*
/*      Events CSS
/*
/********************************************************/
.wp-block-cke-events,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-events:is(.wp-block-cke-events) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--4);
    row-gap: var(--wp--preset--spacing--8);
    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;	
	}

    /* "Link to archive" button */
    & > .link-to-archive {
        grid-column: 1 / -1;
    }
	
    /************************************************************/
    /* Filters
    /************************************************************/
	& > #spinner {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		filter: var(--wp--custom--color--jon-brown--filter);
		pointer-events: none;
		translate: -50% -50%;
		z-index: 1;
		
		:has(.htmx-request) > & {
			display: block;
		}
	}
	
	& > .event-filters {
        grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
        justify-content: start;
		align-items: end;
		column-gap: var(--wp--preset--spacing--1-5);
		row-gap: var(--wp--preset--spacing--0-75);

        [type="submit"] {
            visibility: hidden !important;
        }
		
		& > .filter {
            display: contents;

            & > select {
                --color: var(--wp--custom--color--default--text);
                --bg-color: var(--wp--custom--color--default--bg);
                --border-color: var(--wp--custom--color--default--text);
                --svg: url('data:image/svg+xml, <svg viewBox="0 0 16.000082 15.999918" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path class="fill-1" d="M 0.66906799,15.80268 1.048819,12.31223 c 3.137483,0.395948 6.2274474,0.904861 8.970793,1.478313 l 0.141409,0.0296 0.396852,0.0832 0.211785,-0.345716 0.252482,-0.411898 0.264896,-0.43237 L 10.8915,12.396007 10.74968,12.282304 C 8.1437972,10.195926 4.988555,7.3267767 1.865212,4.203418 L -0.00123001,2.3363087 2.333755,0.00122999 4.200115,1.8675994 c 3.1219449,3.1212214 5.991326,6.2764796 8.079501,8.8843486 l 0.105235,0.131544 0.294329,0.368078 0.418885,-0.215979 0.39381,-0.203154 0.386081,-0.199043 -0.08567,-0.425958 -0.03001,-0.148974 C 13.154629,6.9725111 12.6777,4.0195024 12.30798,1.0514481 L 15.799399,0.67218899 15.998688,15.3024 15.299862,16.001312 Z" fill-rule="evenodd" /></svg>');

                width: max-content;
                max-width: 100%;
                font-family: var(--wp--preset--font-family--helvetica-neue-lt-pro);
                font-size: var(--wp--preset--font-size--medium);
                line-height: var(--wp--custom--line-height--equal);
                font-weight: 400;
                color: var(--color);
                background: url(../../assets/images/arrow-alt.svg) no-repeat center right var(--wp--preset--spacing--1) / 16px auto;
                padding-block: var(--wp--preset--spacing--0-75);
                padding-inline: var(--wp--preset--spacing--1) calc(5% + 16px + var(--wp--preset--spacing--1) );
                border: 2px solid var(--border-color);
                border-radius: 0;
                border-top-right-radius: var(--wp--custom--border-radius--small);
                box-sizing: content-box;
                appearance: none;
                cursor: pointer;
            }
		}

        & > .reset-filters > .wp-block-button__link::after {
            display: none;
        }
	}
	
	&:has(.htmx-request) {
        .event-filters,
        .event-item {
            opacity: .5;
		
            &, * {
                pointer-events: none;
            }
        }
	}

    /************************************************************/
    /* Items
    /************************************************************/
    & > .event-items {
        display: contents;

        & > .event-item {
            display: flex;
            flex-direction: column;
            justify-content: end;
            gap: unset;

            & > * {
                margin-block: unset;
            }

            & > .event-thumbnail {
                width: 100%;
                height: auto;
                aspect-ratio: 481/337;
                background: url(../../assets/images/logo-momenthom-bianca-white.svg) no-repeat center / 60%, var(--wp--custom--color--current--text);
                margin-block-start: var(--wp--preset--spacing--1);
                border-top-right-radius: 35px;
                overflow: clip;

                body.has-jon-brown-background-color & {
                    background: url(../../assets/images/logo-momenthom-jon-brown.svg) no-repeat center / 60%, var(--wp--custom--color--current--text);
                }
            }
            
            & > .event-terms {
                display: flex;
                flex-wrap: wrap;
                row-gap: var(--wp--preset--spacing--0-50);
                margin-block-start: var(--wp--preset--spacing--1);
                margin-block-end: auto;

                & > span {
                    line-height: var(--wp--custom--line-height--equal);

                    &:first-child:not(:last-child) {
                        padding-inline-end: var(--wp--preset--spacing--1-5);
                        border-inline-end: 2px solid currentcolor;
                        margin-inline-end: var(--wp--preset--spacing--1-5);
                    }
                }
            }

            & > .event-title {
                max-width: 75%;
                font-family: var(--wp--preset--font-family--helvetica-neue-lt-pro);
                font-size: var(--wp--preset--font-size--large);
                line-height: var(--wp--custom--line-height--equal);
                font-weight: 300;
                margin-block-start: var(--wp--preset--spacing--3-5);
            }
            
            & > .wp-block-button {
                margin-block-start: var(--wp--preset--spacing--2);

                & > .wp-block-button__link {
                    border: 2px solid var(--wp--custom--color--current--text);
                }
            }
        }
    }
    
    /************************************************************/
	/* Backend style
	/************************************************************/
    body:is(.wp-admin, .block-editor-iframe__body) & {
        width: calc(100% - (var(--wp--custom--outer-pad) * 2)) !important;
        min-width: calc(100% - (var(--wp--custom--outer-pad) * 2)) !important;
        max-width: calc(100% - (var(--wp--custom--outer-pad) * 2)) !important;
        margin-inline: var(--wp--custom--outer-pad) !important;
    }
    
    /************************************************************/
	/* Responsive
	/************************************************************/
    @media (width <= 1600px) {
        & > .event-items {
            & > .event-item {
                & > .event-terms {
                    & > span {
                        font-size: calc(var(--wp--preset--font-size--medium) * .8);

                        &:first-child:not(:last-child) {
                            padding-inline-end: var(--wp--preset--spacing--0-75);
                            margin-inline-end: var(--wp--preset--spacing--0-75);
                        }
                    }
                }

                & > .event-title {
                    max-width: 85%;
                    margin-block-start: var(--wp--preset--spacing--2);
                }

                & > .wp-block-button {
                    margin-block-start: var(--wp--preset--spacing--1);
                }
            }
        }
    }

    @media (width <= 1400px) {
        column-gap: var(--wp--preset--spacing--3);
        row-gap: var(--wp--preset--spacing--6);

        & > .event-items {
            & > .event-item {
                & > .event-title {
                    max-width: 95%;
                }
            }
        }
    }

    @media (width <= 1200px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    @media (width <= 700px) {
        grid-template-columns: 100%;
    }
    
    @media (width <= 350px) {
        & > .event-items {
            & > .event-item {
                & > .event-terms {
                    flex-direction: column;
                    flex-wrap: nowrap;
                    
                    & > span {
                        &:first-child:not(:last-child) {
                            padding-inline-end: unset;
                            border-inline-end: unset;
                            margin-inline-end: unset;
                        }
                    }
                }
            }
        }
    }
}