/**
 * Explore Block Styles
 *
 * @package KeyfactorTheme
 */

.kf-explore {
	--kf-explore-transition-duration: 300ms;
	--kf-explore-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--kf-explore-sidebar-width: 550px;
	--kf-explore-gap: 80px;
	--kf-explore-color-border: #19191926;
	--kf-explore-color-text: #1A1A1A;
	--kf-explore-color-text-muted: #fff;
	--kf-explore-color-active: #fff;
	--kf-explore-color-hover: #fff;
}

/* Hide mobile on desktop, desktop on mobile */
@media (min-width: 768px) {
	.kf-explore__mobile {
		display: none;
	}
}

@media (max-width: 767px) {
	.kf-explore__desktop {
		display: none;
	}
}

/* ============================================
   DESKTOP LAYOUT (>= 768px)
   ============================================ */
@media (min-width: 768px) {
	.kf-explore__desktop {
		display: grid;
		grid-template-columns: var(--kf-explore-sidebar-width) 1fr;
		gap: var(--kf-explore-gap);
		align-items: start;
	}

	.kf-explore-style-accordion .kf-explore__desktop {
		grid-template-columns: 1fr;
	}

	/* Sidebar */
	.kf-explore__sidebar {
        display: flex;
        flex-direction: column;
        gap: 15px;
	}

	.kf-explore__sidebar-item {
        border-radius: 10px;

        padding: 20px 35px;

		background: linear-gradient(108.65deg, rgba(95, 97, 255, 0.15) 1.19%, rgba(95, 97, 255, 0.03) 71.11%, rgba(95, 97, 255, 0.09) 100%);

		box-shadow: 0px 8px 16px 0px #1A182514;

		position: relative;

        transition: background-color var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);
	}

	.kf-explore__sidebar-item::before {
		content: '';
		position: absolute;
		z-index: 1;
		inset: 0px;
		
		border-radius: inherit;
		/* this is the border width */
		padding: 1px;

		background: linear-gradient(90.88deg, #FFFFFF 0.53%, rgba(255, 255, 255, 0.2) 100%);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;

		pointer-events: none;
	}

    .kf-explore__sidebar-item.is-active,
    .kf-explore__sidebar-item:hover,
    .kf-explore__sidebar-item:focus {
        background-color: #1A1825;
		box-shadow: 0px 24px 26px 0px #1A182514;
    }

	.kf-explore__sidebar-item.is-active::before,
    .kf-explore__sidebar-item:hover::before,
    .kf-explore__sidebar-item:focus::before {
		display: none;
    }


	.kf-explore__title-button {
		width: 100%;
		padding: 0px;
		background: none;
		border: none;
		text-align: left;
		color: var(--kf-explore-color-text);
		cursor: pointer;
		transition: color var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);

        font-family: "degular-variable", sans-serif;
        /* font-weight: 500; */
        font-size: clamp(18px, 15.82px + 0.68vw, 24px);
        line-height: 120%;

        padding: 20px 35px;
        margin-top: -20px;
        margin-left: -35px;
        margin-bottom: -20px;
        width: calc(100% + 70px);

        transition: all var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);

        display: flex;
        justify-content: space-between;
        align-items: center;
	}

    .kf-explore__title-button::after {
        content: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 26.5625C21.3858 26.5625 26.5625 21.3858 26.5625 15C26.5625 8.61421 21.3858 3.4375 15 3.4375C8.61421 3.4375 3.4375 8.61421 3.4375 15C3.4375 21.3858 8.61421 26.5625 15 26.5625Z" stroke="%23191919" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 9.6875V20.3125" stroke="%23191919" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.3125 15H9.6875" stroke="%23191919" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        transition: all var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);
        display: flex;
        aspect-ratio: 1;
    }

    .kf-explore__sidebar-item.is-active .kf-explore__title-button::after {
        transform: rotate(45deg);
    }

    .kf-explore__sidebar-item.is-active .kf-explore__title-button::after,
    .kf-explore__title-button:hover::after,
    .kf-explore__title-button:focus::after {
        filter: brightness(0) invert(1);
    }

	.kf-explore__title-button:hover,
    .kf-explore__title-button:focus {
		color: var(--kf-explore-color-hover);
	}

	.kf-explore__sidebar-item.is-active .kf-explore__title-button,
    .kf-explore__sidebar-item.is-active .kf-explore__title-button:hover,
    .kf-explore__sidebar-item.is-active .kf-explore__title-button:focus {
		color: var(--kf-explore-color-active);
	}

	.kf-explore__description-wrapper {
		height: 0;
		overflow: hidden;
		transition: height var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);
	}

	.kf-explore__description {
		padding-bottom: 0px;
        padding-top: 20px;
		color: var(--kf-explore-color-text-muted);

        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
	}

	.kf-explore__description > *:last-child {
		margin-bottom: 0;
	}

	/* Content Area */
	.kf-explore__content-wrapper {
		position: relative;
		min-height: 300px;
	}

	.kf-explore__content {
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--kf-explore-transition-duration) var(--kf-explore-transition-easing),
			visibility 0ms var(--kf-explore-transition-duration);
	}

	.kf-explore__content.is-active {
		opacity: 1;
		visibility: visible;
		transition:
			opacity var(--kf-explore-transition-duration) var(--kf-explore-transition-easing),
			visibility 0ms 0ms;
	}

	/* Prevent absolute positioning from collapsing content */
	.kf-explore__content:not(.is-active) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none;
	}
}

/* ============================================
   MOBILE LAYOUT (<= 767px)
   ============================================ */
@media (max-width: 767px) {
	.kf-explore__mobile {
		display: block;
	}

	.kf-explore__accordion-item {
		border-bottom: 1px solid var(--kf-explore-color-border);
	}

    .kf-explore__accordion-item.is-active {
        border-bottom: none;
    }

    .kf-explore__accordion-head {
        background-color: transparent;

        transition: background-color var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);

        padding: 0 25px;

    }

    .kf-explore__accordion-item.is-active .kf-explore__accordion-head {
        background-color: #191919;
        border-radius: 20px;

        padding: 0px;
        padding-top: 0;

        box-shadow: 0px 24px 26px 0px #0A0B5A18;
        
    }

	.kf-explore__accordion-header.kf-explore__accordion-header {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
	}

	.kf-explore__accordion-button {
		width: 100%;
		padding: 25px 0 18px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		background: none;
		border: none;
		text-align: left;
		font-family: inherit;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4;
		color: var(--kf-explore-color-text);
		cursor: pointer;
		transition: color var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);

        font-family: "degular-variable", sans-serif;
        /* font-weight: 500; */
        font-size: 24px;
        line-height: 120%;

	}

	.kf-explore__accordion-item.is-active .kf-explore__accordion-button {
		color: var(--kf-explore-color-active);
	}

    .kf-explore__accordion-button:focus-visible  {
        outline: none;
    }

	.kf-explore__accordion-title {
		flex: 1;
	}

	/* Accordion Icon (Plus/Minus) */
	.kf-explore__accordion-icon {
		position: relative;
		width: 24px;
		height: 24px;
		flex-shrink: 0;

        color: #5F61FF;
	}

	.kf-explore__accordion-icon::before,
	.kf-explore__accordion-icon::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: currentColor;
		transition: transform var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);
	}

	.kf-explore__accordion-icon::before {
		width: 12px;
		height: 2px;
		transform: translate(-50%, -50%);
	}

	.kf-explore__accordion-icon::after {
		width: 2px;
		height: 12px;
		transform: translate(-50%, -50%);
	}

	.kf-explore__accordion-item.is-active .kf-explore__accordion-icon {
        display: none;
	}

	/* Accordion Panel */
	.kf-explore__accordion-panel {
		height: 0;
		overflow: hidden;
		transition: height var(--kf-explore-transition-duration) var(--kf-explore-transition-easing);
	}

	.kf-explore__accordion-inner {
	}

	.kf-explore__accordion-inner .kf-explore__description {
		margin-bottom: 20px;
		color: var(--kf-explore-color-text-muted);

        font-weight: 400;
        font-size: 12px;
        line-height: 150%;
        opacity: .85;

	}

	.kf-explore__accordion-inner .kf-explore__description:empty {
		display: none;
	}

	.kf-explore__accordion-inner .kf-explore__description > *:last-child {
		margin-bottom: 0;
	}

	.kf-explore__accordion-content > *:last-child {
		margin-bottom: 0;
	}

    .kf-explore__accordion-content .kf-explore__accordion-inner {
        padding-top: 30px;
    }

	.kf-explore__accordion-item.is-active .kf-explore__accordion-button,
	.kf-explore__accordion-inner .kf-explore__description,
	.kf-explore__accordion-inner .acf-innerblocks-container > *:not(.kf-gradient-quote) {
		padding-right: 20px;
		padding-left: 20px;
	}
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Hint browser about what will change */
.kf-explore__description-wrapper,
.kf-explore__accordion-panel {
	will-change: height;
}

.kf-explore__content {
	will-change: opacity;
}

/* Remove will-change after animation (handled by removing class) */
.kf-explore__sidebar-item:not(.is-active) .kf-explore__description-wrapper,
.kf-explore__accordion-item:not(.is-active) .kf-explore__accordion-panel,
.kf-explore__content:not(.is-active) {
	will-change: auto;
}


.kf-explore-style-1 .kf-explore__desktop .acf-innerblocks-container > .kf-video-popup + .kf-gradient-quote {
	position: relative;
}

.kf-explore-style-1 .kf-explore__desktop .acf-innerblocks-container > .kf-video-popup + .kf-gradient-quote::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, rgba(26, 24, 37, 0) 0%, rgba(26, 24, 37, 0.5) 50%, rgba(26, 24, 37, 0) 100%);
}