/********************************************************/
/*
/*      Services block CSS
/*
/********************************************************/
.wp-block-cke-services,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-services:is(.wp-block-cke-services) {
    /* 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--content-size) !important;
    }
    
    & > .services-inner {
        --gap: var(--wp--preset--spacing--1-5);

        display: grid;
        gap: var(--gap);

        & > .service-item {
            display: grid;
            grid-template-columns: 45% 52.5%;
            grid-template-rows: 0 max-content 1fr max-content;
            grid-template-areas:
                'empty   pictogram'
                'title   pictogram'
                'excerpt pictogram'
                'btn     pictogram';
            justify-content: space-between;
            gap: unset;
            text-decoration: none;
            color: var(--wp--custom--color--default--text--light);
            background-color: var(--wp--custom--color--default--text--dark);
            padding: var(--wp--preset--spacing--0-50) var(--wp--preset--spacing--1-5);
            border-radius: var(--wp--custom--border-radius--small);
            box-sizing: border-box;

            /* Style for dark BGs */
            body:is(
                .has-temptress-red-background-color,
                .has-castro-red-background-color,
                .has-cumin-brown-background-color,
                .has-copper-brown-background-color,
                .has-cement-brown-background-color
            ) & {
                color: var(--wp--custom--color--default--text--dark);
                background-color: var(--wp--custom--color--default--text--light);
    
                /* Hover state */
                &:is(:hover, :focus, :active) {
                    &::after {
                        color: var(--wp--custom--color--default--text--light);
                        background-color: var(--wp--custom--color--default--text--dark);
                    }
                }
            }

            &::after {
                content: '↘';
                grid-area: btn;
                display: block;
                width: 48px;
                max-width: 100%;
                height: auto;
                aspect-ratio: 1;
                font-family: var(--wp--preset--font-family--mozaic-geo-variable);
                font-size: var(--wp--preset--font-size--medium-large);
                font-weight: 500;
                text-align: center;
                color: inherit;
                background-color: transparent;
                border: 2px solid var(--wp--custom--color--default--accent);
                border-radius: 50%;
                margin-block-end: var(--wp--preset--spacing--0-50);
                box-sizing: border-box;
                transition: color var(--wp--custom--duration--short), background-color var(--wp--custom--duration--short);
            }

            & > * {
                width: 100%;
                color: inherit;
                margin-block: unset;

                &:is(h2, p) {
                    margin-block-end: var(--wp--preset--spacing--1-5);
                    z-index: 3;

                    &:is(h2) {
                        grid-area: title;
                        margin-block-start: var(--wp--preset--spacing--2);
                    }
                    
                    &:is(p) {
                        grid-area: excerpt;
                    }
                }

                &.service-pictogram {
                    grid-area: pictogram;
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 100%;
                    height: 100%;

                    & > * {
                        grid-column: 1;
                        grid-row: 1;
                        width: 100%;
                        height: 100%;
                    }

                    :is(img, svg) {
                        object-fit: contain;
                        z-index: 2;
                        
                        &:first-child {
                            z-index: 0;
                        }
                    }
                        
                    & > span {
                        background-color: var(--wp--custom--color--default--text--dark);
                        opacity: 1;
                        transition: opacity var(--wp--custom--duration--medium);
                        z-index: 1;

                        /* Style for dark BGs */
                        body:is(
                            .has-temptress-red-background-color,
                            .has-castro-red-background-color,
                            .has-cumin-brown-background-color,
                            .has-copper-brown-background-color,
                            .has-cement-brown-background-color
                        ) & {
                            background-color: var(--wp--custom--color--default--text--light);
                        }
                    }
                }
            }

            /* Hover state */
            &:is(:hover, :focus, :active) {
                &::after {
                    color: var(--wp--custom--color--default--text--dark);
                    background-color: var(--wp--custom--color--default--text--light);
                }

                & > * {
                    &.service-pictogram {
                        & > span {
                            opacity: 0;
                        }
                    }
                }
            }
        } 
    }
    
    /************************************************************/
    /* Grid layout
    /************************************************************/
	&[data-layout="grid"],
    &:has([data-layout="grid"]) {
        margin-inline: auto !important;

        & > .services-inner {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: max-content;

            & > :is(h2, .wp-block-buttons) {
                display: none;
            }
        }
    }
    
    /************************************************************/
    /* Slider layout
    /************************************************************/
	&[data-layout="slider"],
    &:has([data-layout="slider"]) {
        --scroll-height: 500px;

        width: var(--block-width, var(--wp--custom--viewport-width));
        min-height: calc(var(--item-count) * var(--scroll-height));
        margin-inline: 25% var(--wp--custom--outer-pad) !important;
        
        /* Don't add left margin if block's container already has left padding/margin */
        .wp-block-group:is([style*="padding-left"], [style*="margin-left"]) > & {
            margin-inline: 0 var(--wp--custom--outer-pad) !important;
        }

        /* Overwrite editor style */
        &:not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer) {
            max-width: calc(var(--wp--style--global--content-size) * .75) !important;
        }

        & > .services-inner {
            --slide-width: min(calc(var(--wp--style--global--content-size) / 2), var(--block-width));
            --grid-width: calc((var(--slide-width) * var(--item-count)) + (var(--gap) * (var(--item-count) - 1)));

            width: var(--grid-width);
            grid-template-columns: repeat(var(--item-count), var(--slide-width));
            grid-template-rows: max-content auto max-content;
            row-gap: 0;
            position: sticky;
            top: calc(var(--wp--custom--stickied-header-height) + var(--gap));
            max-height: calc(100vh - var(--wp--custom--stickied-header-height) - (var(--gap) * 2));
            translate: calc((var(--grid-width) - var(--block-width)) * var(--offset) * -1);

            & > :is(h2, .wp-block-buttons) {
                grid-column: 1;
                translate: calc((var(--grid-width) - var(--block-width)) * var(--offset) * 1);

                &:is(h2) {
                    grid-row: 1;
                    color: var(--wp--custom--color--default--accent);
                    margin-block: 0 var(--wp--preset--spacing--3);
                }

                &.wp-block-buttons {
                    grid-row: 3;
                    margin-block-start: var(--wp--preset--spacing--2);
                }
            }
            
            & > .service-item {
                grid-row: 2;
                width: var(--slide-width);
            }
        }

        /******************************/
        /* Backend style
        /******************************/
        :is(.edit-post-visual-editor, .editor-styles-wrapper) & {
            min-height: revert;
            padding-inline-start: var(--wp--custom--outer-pad) !important;

            & > .services-inner {
                --slide-width: 40vw;
            }
        }
    }

    /******************************/
    /* Responsive
    /******************************/
    @media (width <= 1720px) {
        & > .services-inner {
            & > .service-item {
                grid-template-columns: 50% 47.5%;
            }
        }
    }
    
    @media (width <= 1600px) {
        &[data-layout="slider"],
        &:has([data-layout="slider"]) {
            & > .services-inner {
                --slide-width: calc(var(--wp--custom--max-size) / 2);
            }
        }
    }

    @media (width <= 1400px) {
        & > .services-inner {
            & > .service-item {
                &::after {
                    padding-block-start: 2px;
                }
            }
        }

        &[data-layout="grid"],
        &:has([data-layout="grid"]) {
            & > .services-inner {
                & > .service-item {
                    grid-template-columns: 55% 47.5%;
                }
            }
        }

        &[data-layout="slider"],
        &:has([data-layout="slider"]) {
            & > .services-inner {
                --slide-width: calc(var(--wp--custom--max-size) * (2/3));
            }
        }
    }

    @media (width <= 1000px) {
        & > .services-inner {
            & > .service-item {
                &::after {
                    padding-block-start: 3px;
                }
            }
        }

        &[data-layout="slider"],
        &:has([data-layout="slider"]) {
            & > .services-inner {
                --slide-width: calc(var(--wp--custom--max-size) * .75);
            }
        }
    }
    
    @media (width <= 800px) {
        & > .services-inner {
            & > .service-item {
                grid-template-columns: 45% 52.5%;
                grid-template-rows: max-content 1fr max-content;
                grid-template-areas:
                    'title   title'
                    'excerpt pictogram'
                    'btn     pictogram';
                padding-block-end: var(--wp--preset--spacing--1);

                &::after {
                    padding-block-start: 4px;
                }

                & > * {
                    &.service-pictogram {
                        align-self: end;
                        height: max-content;
                        margin-block-start: var(--wp--preset--spacing--0-75);
                    }
                }
            }
        }

        &[data-layout="grid"],
        &:has([data-layout="grid"]) {
            & > .services-inner {
                & > .service-item {
                    & > * {
                        &:is(h2, p) {
                            margin-block-end: var(--wp--preset--spacing--0-75);
            
                            &:is(h2) {
                                margin-block-start: var(--wp--preset--spacing--1);
                            }
                        }
                    }
                }
            }
        }
    }

    @media (width <= 700px) {
        & > .services-inner {
            & > .service-item {
                grid-template-columns: 52.5% 45%;

                &::after {
                    padding-block-start: 5px;
                }

                & > * {
                    &.service-pictogram {
                        & > span {
                            display: none;
                        }
                    }
                }
            }
        }

        &[data-layout="grid"],
        &:has([data-layout="grid"]) {
            & > .services-inner {
                grid-template-columns: 100%;
            }
        }

        &[data-layout="slider"],
        &:has([data-layout="slider"]) {
            padding-inline: unset !important;
            margin-inline: 0 var(--wp--custom--outer-pad) !important;

            &:not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer) {
                max-width: 100% !important;
            }

            & > .services-inner {
                --slide-width: var(--wp--custom--max-size);
            }
        }
    }

    @media (width <= 600px) {
        & > .services-inner {
            & > .service-item {
                grid-template-columns: 57.5% 40%;

                &::after {
                    width: 40px;
                    padding-block-start: 2px;
                }

                & > * {
                    &:is(h2, p) {
                        margin-block-end: var(--wp--preset--spacing--0-75);

                        &:is(h2) {
                            margin-block-start: var(--wp--preset--spacing--1);
                        }
                    }
                }
            }
        }
    }
}