/**
 * Block Name: acf/capabilities-item
 * Description: Title, image and description to showcase capabilities within a tabbed capabilities block.
 *
 */

 .block__acf-capabilities-item__header {
	white-space: nowrap;
}

.block__acf-capabilities-item__main {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	padding: 1.5rem;
	transition: 0.1s opacity ease-in-out;
}

.block__acf-capabilities-item:not(.block__acf-capabilities-item--active) .block__acf-capabilities-item__main a {
	display: none;
}

.block__acf-capabilities-item__header .is-style-red-outline-button .wp-block-button__link {
	border: 2px solid #38393B !important;
}

.block__acf-capabilities-item__header .is-style-red-outline-button:hover .wp-block-button__link,
.block__acf-capabilities-item--active .block__acf-capabilities-item__header .is-style-red-outline-button .wp-block-button__link,
.block__acf-capabilities.is-loading .block__acf-capabilities-item:first-child .block__acf-capabilities-item__header .is-style-red-outline-button .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--seclore-red) !important;
	background: rgb(230 39 79 / 0.2);
}

.block__acf-capabilities-item--active .block__acf-capabilities-item__main,
.block__acf-capabilities.is-loading .block__acf-capabilities-item:first-child .block__acf-capabilities-item__main {
	opacity: 1;
	pointer-events: auto;
	transition: 0.5s opacity ease-in-out;
}

.block__acf-capabilities-item__header .wp-element-button * {
	pointer-events: none;
}

.block__acf-capabilities-item__header .wp-element-button {
	pointer-events: auto;
}

@media (max-width: 1023px) {

	.block__acf-capabilities-item + .block__acf-capabilities-item {
		margin-left: 1rem;
	}

	.block__acf-capabilities-item__main {
		top: var(--capabilities-tabs-height);
		left: 0;
	}

	[dir="rtl"] .block__acf-capabilities-item__main {
		left: auto;
		right: 0;
	}
}

@media (min-width: 1024px) {

	.block__acf-capabilities-item__header {
		max-width: 29%;
		padding-top: 1rem;
	}

	.block__acf-capabilities-item__main {
		top: 0;
		right: 0;
		max-width: 69%;
		gap: clamp(1.5rem, calc(1.5rem + ((1vw - 0.64rem) * 5.7692)), 3rem);
	}

	[dir="rtl"] .block__acf-capabilities-item__main {
		right: auto;
		left: 0;
	}
}