/**
 * Blocks CSS
 * 
 * Contains general block styles. Is enqueued in the front- & backend.
 * This file does not get processed and is loaded *after* editor styles so it
 * will take precedence over editor-specific styles using the same selectors.
 */


/*
----------------------------------------------------------

                    Core Blocks

----------------------------------------------------------
*/

/*    General
__________________________________
*/
.is-upper {
    text-transform: uppercase;
}
p:empty {
    display: none;
}


/*    Group
__________________________________
*/
.group_wrap {
	position: relative;
	/* margin-left: 0 !important; */
	/* margin-right: 0 !important; */
	margin-left: 0;
	margin-right: 0;
	max-width: none !important;
    /* tbd */
	/* overflow: auto; */
}
/* .wp-block-group {
    max-width: 100%;
} */
/* .wp-block-group[id^="wp-container-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter, 0.5em);
} */
/* .wp-block-group__inner-container {
    border: 1px solid transparent;
    margin: -1px;
} */


/*    Embed
__________________________________
*/
/**
 * This fixes a bug rendering aspect-ratio-adjusted embeds.
 * The core registers the following line:
 * .wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { ... }
 * This result in the iframe displayed below an empty space.
 */
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper > div[style*="padding"] {
    padding: 0 !important;
    position: absolute !important;
    inset: 0;
}
.dynamic .wp-block-embed__wrapper:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.dynamic .wp-block-embed__wrapper iframe {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}


/*    Video
__________________________________
*/
.wp-block-video video {
    display: block;
}


/*    Spacer
__________________________________
*/
.spacer_wrap .wp-block-spacer {
	display: none;
}

.spacer_wrap {
	margin-top: 0 !important;
}

/* hidden columns per breakpoint */
@media (max-width: 576px) {
	.spacer_wrap .wp-block-spacer.inner-sm {
		display: block;
	}
}

@media (min-width: 576px) and (max-width: 992px) {
	.spacer_wrap .wp-block-spacer.inner-md {
		display: block;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.spacer_wrap .wp-block-spacer.inner-lg {
		display: block;
	}
}

@media (min-width: 1200px) {
	.spacer_wrap .wp-block-spacer.inner-xl {
		display: block;
	}
}


/**
 * Media & Text
 * ____________________________________________________________________
 */
 .wp-block-media-text {
	/**
	 * prevent a grid blowout
	 * @see https://css-tricks.com/preventing-a-grid-blowout/
	 */
	grid-template-columns: 50% minmax(0, 1fr);
}

.wp-block-media-text.has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) 50%;
}

@media (min-width: 601px) and (max-width: 992px) {
	.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}
}

@media (max-width: 576px) {
	.wp-block-media-text .wp-block-media-text__content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* styles */
.wp-block-media-text.is-style-rounded-corners img,
.wp-block-media-text.is-style-rounded-corners video {
	border-radius: 0.5em;
}
.wp-block-media-text.is-style-has-shadow img,
.wp-block-media-text.is-style-has-shadow video {
	box-shadow: 0px 10px 15px -4px rgba(40, 40, 40, 0.25);
}
.wp-block-media-text.is-style-diagonal-up img,
.wp-block-media-text.is-style-diagonal-up video {
	clip-path: polygon(0 12%,0 100%,100% 88%,100% 0);
}
.wp-block-media-text.is-style-diagonal-down img,
.wp-block-media-text.is-style-diagonal-down video {
	clip-path: polygon(0 0,0 88%,100% 100%,100% 12%);
}
.wp-block-media-text.is-style-rotate-left img,
.wp-block-media-text.is-style-rotate-left video {
	transform: rotate(357deg);
}
.wp-block-media-text.is-style-rotate-right img,
.wp-block-media-text.is-style-rotate-right video {
	transform: rotate(3deg);
}
.wp-block-media-text.is-style-tilt-left img,
.wp-block-media-text.is-style-tilt-left video {
	transform: perspective(400px) rotateY(10deg);
	box-shadow: -40px 110px 50px -60px rgb(0 0 0 / 15%);
}
.wp-block-media-text.is-style-tilt-right img,
.wp-block-media-text.is-style-tilt-right video {
	transform: perspective(400px) rotateY(350deg);
	box-shadow: 40px 110px 50px -60px rgb(0 0 0 / 15%);
}
.wp-block-media-text:not(.is-style-rounded) > figure {
	border-radius: inherit;
}


/*
----------------------------------------------------------

                    Greyd Blocks

----------------------------------------------------------
*/


/*    greydClass
__________________________________
*/
/* :where(body:not(.wp-admin) [class*="gs_"]) {
    position: relative;
    transition: none;
} */
/* class 'animate_fast' is added via js
:where(body.wp-admin [class*="gs_"]),
:where(body.animate_fast [class*="gs_"]) {
    transition: all .3s ease;
} */

/* .wp-block-greyd-template-post,
.wp-block-greyd-template-posts,
.wp-block-greyd-template-details,
.wp-block-greyd-posts {
    padding: 10px 20px !important;
    background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgb(255, 236, 201) 10px, rgb(255, 236, 201) 20px, transparent 20px);
}
.wp-block-greyd-posts-links {
    padding: 10px 20px !important;
    background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgb(255, 222, 203) 10px, rgb(255, 222, 203) 20px, transparent 20px);
} */


/*    Trigger & Links
__________________________________
*/
.has-trigger {
	cursor: pointer;
	position: relative;
	isolation: isolate;
}

button:focus-visible, [tabindex="1"]:focus-visible,
[role=button]:focus-visible, [role=link]:focus-visible {
	/**
	 * Set var(--text-color) to use for outline color
	 * @since 2.2.0
	 */
    outline: 2px dotted var( --text-color, var(--wp--preset--color--foreground, currentColor) );
    outline-offset: 2px;
}
.hidden-trigger-link,
.hidden-box-link {
    all: unset;
}
.hidden-trigger-link:after,
.hidden-trigger-link:before {
    display: none;
}
.has-trigger > .hidden-trigger-link,
.has-trigger > .hidden-box-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
[data-greyd-trigger][data-onload="hide"][data-onload="hide"] {
    display: none;
}

/*    Anim
__________________________________
*/
.wp-block-greyd-anim {
    display: block !important;
}
.wp-block-greyd-anim.aligncenter {
    text-align: center;
    float: none !important;
}
.wp-block-greyd-anim.alignright {
    text-align: right;
    float: none !important;
}


/*    Pop-up close button
      todo: move to Popups Feature
__________________________________
*/
.popup_close_button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 40px;
    font-size: 4px;
    transition: all 0.3s ease;
}
.popup_close_button::before {
    content: "";
    display:block;
    padding-top: 100%;
}
.popup_close_button .close_icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.popup_close_button .close_icon span {
    position: absolute;
    top: 5%;
    left: 50%;
    height: 90%;
    width: 1em;
    margin-left: -.5em !important;
    background-color: currentColor;
}
.popup_close_button .close_icon span:first-child {
    transform: rotate(45deg);
}
.popup_close_button .close_icon span:last-child {
    transform: rotate(-45deg);
}
/* alignment */
.wp-block-greyd-popup-close, .popup_close_button {
    float: none !important;
    margin: 0;
}
.wp-block-greyd-popup-close.alignright {
    text-align: right;
}
.wp-block-greyd-popup-close.aligncenter {
    text-align: center;
}


/*    Post archive
__________________________________
*/
.wp-block-archives-list {
	list-style: none;
	padding-inline-start: 0;
}
:where( .wp-block-archives-list li ) {
	display: block;
	margin-left: 0;
}
:where( .wp-block-archives-list li a ) {
	display: inline-block;
    line-height: 1.5;
}
:where( .wp-block-archives-list li a.active ) {
    opacity: 0.7;
}
ul.wp-block-archives-list li:not(:first-child):not(.child-term) {
    margin-top: var(--wp--preset--spacing--small, 0.4em );
}
ul.wp-block-archives-list li.child-term {
    font-size: 0.85em;
    margin-top: var(--wp--preset--spacing--tiny, 0.2em );
}
ul.wp-block-archives-list:not(.center, .right) li.child-term {
    margin-left: var(--wp--style--block-gap);
}
ul.wp-block-archives-list.right li.child-term {
    margin-right: var(--wp--style--block-gap);
}
.wp-block-archives-dropdown select {
    width: auto;
}

/* align */
ul.wp-block-archives-list.center {
	text-align: center;
}
ul.wp-block-archives-list.right {
	text-align: right;
}


/*    Live Search load more button
__________________________________
*/
.load_more_wrapper {
    --align: center;
    --buttonWidth: auto;
    text-align: var(--align);
    width: 100%;
    position: relative;
    margin: var(--wp--style--block-gap) 0 0 0;
}
.load_more_wrapper > * {
    display: inline-block;
    margin: 0 !important;
    width: var(--buttonWidth);
}


/*    Additional CSS classes for plugin patterns 
__________________________________
*/
/* Grid Settings: Grid-Max-Columns */
@media (min-width: 1199px) {
	.grid-max-8 {
		grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
	}
	
	.grid-max-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
	
	.grid-max-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
	
	.grid-max-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	
	.grid-max-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	
	.grid-max-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Quick and Easy Off-Grid Elements: Respect Grid in Full Width Parent Container */
.respect-grid-left{
	padding-left: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--wide-size) / 2)));
}

.respect-grid-right{
	padding-right: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--wide-size) / 2)));
}

/* Quick and Easy Responsive Rows */
@media (max-width: 599px) {
	.break-sm {
		flex-wrap: wrap !important;
	}
	.reverse-sm {
		flex-direction: column-reverse;
	}
}

@media (max-width: 992px) {
	.break-md {
		flex-wrap: wrap !important;
	}
	.reverse-md {
		flex-direction: column-reverse;
	}
}

@media (max-width: 1199px) {
	.break-lg {
		flex-wrap: wrap !important;
	}
	.reverse-lg {
		flex-direction: column-reverse;
	}
}