:root {
    --box-shadow-top: 0 -35px 20px -30px rgba(0,0,0,0.05);
    --box-shadow-bottom: 0px 35px 20px -30px rgba(0,0,0,0.05);
}

[class^="gradient"] {
    position: relative;
}

[class^="gradient"]::before,
[class^="gradient"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

@media screen and (min-width: 1025px) {
    .hidden-large {
        display: none !important;
    }
}

.wp-block-post-excerpt__more-link {
    position: relative;
    display: inline-block;
    align-items: center;
    padding-inline-end: 60px;
}

.gradient-top,
.gradient-bottom {
    --_box-shadow-top: 0 -35px 20px -30px rgba(0,0,0,0);
    --_box-shadow-bottom: 0px 35px 20px -30px rgba(0,0,0,0);
    --gradient--top-position: 0;
    --gradient--bottom-position: 0;
    --gradient--margin--inline: var(--wp--style--root--padding-right);
    --gradient--margin--block-start: var(--wp--preset--spacing--40);
    --gradient--margin--block-end: var(--wp--preset--spacing--80) !important;
    --gradient--padding--inline: var(--wp--preset--spacing--20);
    --gradient--padding--block-start: var(--wp--preset--spacing--60);
    --gradient--padding--block-end: var(--wp--preset--spacing--80);

    @media screen and (min-width: 769px) {
        --gradient--padding--inline: var(--wp--preset--spacing--40);
        --gradient--padding--block-start: var(--wp--preset--spacing--80);

        body:not(.home) & {
            --gradient--padding--block-end: 150px;
        }

        &:has(.push-to-gradient-edge) {
            --gradient--padding--block-end: 150px;
        }
    }

    box-shadow: var(--_box-shadow-top), var(--_box-shadow-bottom);
    position: relative;
    margin-inline: calc(var(--gradient--margin--inline)* -1) !important;
    padding-inline: var(--gradient--padding--inline);
    /*padding-inline: var(--wp--style--root--padding-right);*/
    /*padding-inline: clamp(var(--wp--preset--spacing--20), 5cqi, var(--wp--preset--spacing--40));*/
}

.gradient-top {
    --_box-shadow-top: var(--box-shadow-top);
    margin-block-start: var(--gradient--margin--block-start);
    padding-block-start: var(--gradient--padding--block-start);
}

.gradient-bottom {
    --_box-shadow-bottom: var(--box-shadow-bottom);
    margin-block-end: var(--gradient--margin--block-end);
    padding-block-end: var(--gradient--padding--block-end);

    @media screen and (max-width: 1024px) {
        .push-to-gradient-edge {
            justify-content: start;
        }
    }

    @media screen and (min-width: 1025px) {
        &:has(.chair-pull-up) {
            margin-block-end: clamp(100px, 18vw, 270px) !important;
            padding-bottom: 1px !important;
        }

        .chair-pull-up {
            margin-block-end: clamp(-300px, -19vw, -88px) !important;
            margin-top: max(-193px, -13vw) !important;
        }

        & > .push-to-gradient-edge {
            translate: 0 182px;
            margin-block-start: -115px !important;
        }
    }
}

.gradient-top > *,
.gradient-bottom > * {
    position: relative;
    z-index: 1;
}

.gradient-top::before,
.gradient-bottom::after {
    content: "";
    height: var(--gradient--height, 30%);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    overflow: clip;
}

.gradient-top::before {
    top: var(--gradient--top-position, 0);
    border-radius: var(--wp--custom--border-radius--block) var(--wp--custom--border-radius--block) 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.gradient-bottom::after {
    bottom: var(--gradient--bottom-position, 0);
    border-radius: 0 0 var(--wp--custom--border-radius--block) var(--wp--custom--border-radius--block);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.no-bottom-margin {
    margin-block-end: 0 !important;
    margin-bottom: 0 !important;
}

.clickable-parent {
    position: relative;

    a:not(.wp-block-post-excerpt__more-link)::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 100;
    }

    a:not(.wp-block-post-excerpt__more-link):hover {
        text-decoration: none;
    }

    &:focus-within {
        :focus {
            box-shadow: none;
            outline: none;
        }
    }
}

.splide__slide {
    translate: 0 !important;
}

.splide__arrow {
    background: none;
    position: absolute;
    z-index: 10;
    top: 50%;
    translate: 0 -50%;
    border: none;
    padding-block: 40px;

    svg {
        display: none;
    }

    &::before,
    &::after {
        --arrow--offset--x: 0 !important;
    }
}

.splide__arrow--prev {
    left: 0;
    padding-inline: 0 40px;
}

.splide__arrow--next {
    right: 0;
    padding-inline: 40px 0;
}

@media screen and (min-width: 1025px) {
    .review:nth-child(2n) {
        .wp-block-post-content {
            display: flex;
            flex-direction: column-reverse;
        }
    }
}

.advanced-link {
    --ratio: 280 / 158;
    --minimum-width: 350px;
    --play-button--circle--color: rgba(255,255,255,0.4);
    --play-button--shape--color: rgba(255,255,255,1);

	--padding-block: var(--wp--preset--spacing--60));
	--padding-inline: clamp(var(--wp--preset--spacing--20), 5cqi,  var(--wp--preset--spacing--60));

	container-type: inline-size;

    /*aspect-ratio: 14 / 19;*/
    /*padding-inline: clamp(var(--wp--preset--spacing--20), 9cqi, 70px);*/
    /*padding-block: var(--wp--preset--spacing--60);*/

	position: relative;
	display: grid;
    /*min-height: 300px;*/
	grid-template-rows: var(--padding-block) 1fr max-content min-content var(--padding-block);
	grid-template-columns: var(--padding-inline) 1fr var(--padding-inline);
	grid-template-areas:
	    '... ....... ...'
	    '... header  ...'
	    '... content ...'
	    '... footer  ...'
	    '... ....... ...';
	aspect-ratio: var(--ratio);
	border-radius: 10px;
	overflow: clip;

    &.advanced-link--has-video {
        .wp-block-tantrachair-video-link:not(.play-inline) & {
            &::after {
                content: '';
                position: absolute;
                z-index: 20;
                inset: 0;
                pointer-events: none;
                border-radius: 10px;
                border: 6px solid var(--wp--preset--color--accent-1);
                opacity: 0;
                transition-property: opacity;
                transition-duration: var(--transition--duration);
                transition-timing-function: var(--transition--timing-function);
            }

            &.playing {
                &::after {
                    opacity: 1;
                }
            }
        }

        &:hover {
            --play-button--circle--color: rgba(255,255,255,1);
            --play-button--shape--color: rgba(0,0,0,1);
        }
    }

	.advanced-link__video-player {
	    position: relative;
	    grid-row-start: 1;
	    grid-row-end: 6;
	    grid-column-start: 1;
	    grid-column-end: 4;
	    /*background-color: rgba(255,255,255,1);*/
	    /*background-color: rgba(0,0,0,1);*/
	    transition-property: all;
	    transition-duration: var(--transition--duration);
	    transition-timing-function: var(--transition--timing-function);

	    > div:not(.spinner) {
	        position: absolute;
	        inset: 0;
	        z-index: 101;
	    }

        &.playing {
            z-index: 100;
        }
	}

    > * {
        z-index: 10;
    }

	.wp-block-button.is-style-button-link .wp-element-button {
		background-color: transparent;
		border-width: 0;
		padding-top: 1.25rem;
		padding-right: 75px;
		padding-bottom: 1.25rem;
		padding-left: 0;
	}

    .play-button {
        pointer-events: none;
        backdrop-filter: blur(8px);
        border-radius: 50%;
        /*background-color: rgba(255,255,255,0.4);*/
        width: 100px;
        height: 100px;
        pointer-events: none;
        grid-area: 1 / 1 / 6 / 4;
        place-self: center;
        z-index: 20;

        #circle,
        #line1,
        #line2 {
            transition-property: all;
            transition-duration: var(--transition--duration);
            transition-timing-function: var(--transition--timing-function);
        }

        #line1,
        #line2 {
            fill: var(--play-button--shape--color) !important;
            stroke: var(--play-button--shape--color) !important;
        }

        #circle {
            fill: var(--play-button--circle--color) !important;
        }
    }

    img,
    .advanced-link__video-cover {
		--transition--timing-function: cubic-bezier(.86,0,.07,1);

        object-fit: cover;
        object-position: 50% 50%;
        max-width: none;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        grid-row-start: 1;
        grid-row-end: 6;
        grid-column-start: 1;
        grid-column-end: 4;
		transition-property: scale;
		transition-duration: 750ms;
		transition-timing-function: var(--transition--timing-function);
    }

	.advanced-link__title,
	p {
		color: #fff;
		margin: 0;
	}

	.advanced-link__link {
        display: inline-block;
        color: var(--wp--preset--color--accent-6);
        font-size: clamp(45px, 10cqi, 60px);

		&::before,
		&::after {
			content: "";
			inset: 0;
			position: absolute;
			z-index: -1;
		}

		&::before {
			background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
		}

		&::after {
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
		}

        .playing & {
            pointer-events: none;
        }
	}

    .advanced-link__text {
        grid-area: footer;
        align-self: end;
    }

	.spinner {
	    position: absolute;
	    z-index: 1000;
	    inset: 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    pointer-events: none;
	    background-color: rgba(255,255,255,1);
        transition-property: all;
	    transition-duration: var(--transition--duration);
	    transition-timing-function: var(--transition--timing-function);

        > svg {
	        width: 100px;
	        height: 100px;
	    }
	}

    .loading .spinner {
	    opacity: 1;
	}

	.wp-block-button.is-style-button-link .wp-element-button {
        --link--color: rgba(255,255,255,0.5);
		background-color: transparent;
		border-width: 0;
		padding-top: 1.25rem;
		padding-right: 75px;
		padding-bottom: 1.25rem;
		padding-left: 0;
	}

    .section:not(.section--featured) & {
        .advanced-link__text {
            display: block;
            width: 0;
            height: 0;
            opacity: 0;
        }

        .advanced-link__link {
            display: inline-block;
            width: 0;
            height: 0;
        }
    }

    &:hover {
        --play-button--circle--color: rgba(255,255,255,1);
        --play-button--shape--color: rgba(0,0,0,1);

        img {
            scale: 1.05;
        }

        .wp-block-button.is-style-button-link .wp-element-button {
            --link--color: rgba(255,255,255,1);
        }

        .play-button {
            #circle {
                fill:white !important;
            }

            #line1,
            #line2 {
                stroke: #000000 !important;
                fill: #000000 !important;
            }
        }
    }

    &:focus-within {
        :focus {
            box-shadow: none;
            outline: none;
        }
    }

    @container (min-width: 500px) {
        --ratio: 1280 / 720;
    }

    @container (max-width: 599px) {
        row-gap: 20px;

        .section--featured & {
            .play-button {
                grid-area: content;
                place-self: end start;
            }
        }

        .section:not(.section--featured) & {
            .play-button {
                grid-area: 1 / 1 / 6 / 4;
                place-self: center;
            }
        }
    }

    @container (min-width: 600px) {
        .section--featured & {
            .play-button {
                grid-area: footer;
                place-self: end;
            }
        }

        .advanced-link__link {
            max-width: calc(100% - 120px);
        }
    }

    @container (max-width: 499px) {
        row-gap: 0;
    }
}

.wp-block-query .video {
    .wp-block-tantrachair-video-link.play-inline {
        .advanced-link {
            &.advanced-link--has-video {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
    }
}

.wp-block-wpdev-wcphx-2024 {
    .wp-block-image {
        width: 100%;
        height: 100%;
        min-width: 100px;
        max-width: 300px;
        min-height: 50px;
        max-height: 100px;

        img {
            max-height: 100%;
            object-fit: contain;
        }
    }
}

.google-recaptcha-info {
    color: var(--wp--preset--color--accent-5);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    line-height: 1.5;
}