/* =============================================================================
   Block: Main Header (acf/kf-main-header)
   ========================================================================== */

.kf-main-header {
	position: relative;
	width: 100%;
	overflow: hidden;
    min-height: calc(100vh - 80px);

    padding-top: 120px;
	padding-bottom: 50px;

	border-radius: 50px;
	margin-top: 40px;

	justify-content: center;
    display: flex;
    flex-direction: column;
}

.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header {
	max-width: 100%
}

/* -----------------------------------------------------------------------------
   Background media layer
   -------------------------------------------------------------------------- */

.kf-main-header__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.kf-main-header__bg::after {
	/* content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1)); */
}

.kf-main-header__bg-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	object-position: bottom;
}

/* Responsive visibility: hide desktop-only media on mobile */
@media (max-width: 767px) {
	.kf-main-header__bg-media--desktop {
		display: none !important;
	}
}

/* Responsive visibility: hide mobile-only media on desktop */
@media (min-width: 768px) {
	.kf-main-header__bg-media--mobile {
		display: none !important;
	}
}

/* -----------------------------------------------------------------------------
   Content layer
   -------------------------------------------------------------------------- */

.kf-main-header__container {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    right: 0;
    bottom: 120px;
}

.kf-main-header__content {
	--padding-x: 0px;

	flex: 1;
	min-width: 0;

	padding: 0 var(--padding-x);
	margin-top: 50px;

	position: relative;
}

.kf-main-header__content::after {
	content: url('data:image/svg+xml,<svg width="111" height="141" viewBox="0 0 111 141" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M95.75 133.75L30.75 133.75C14.1815 133.75 0.750005 120.319 0.750005 103.75L0.75 0.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="0.1 8"/><path d="M110.75 133.754L98.75 126.75L98.75 140.75L110.75 133.754Z" fill="white"/></svg>');

	position: absolute;
	bottom: 15px;
	left: calc(var(--padding-x) + 20px);

	pointer-events: none;
}

.kf-main-header__title {
    font-size: clamp(clamp(clamp(50px, 0.17vw + 49.37px, 50.51px), 2.48vw + 33.71px, 57.98px), 17.23vw + -110.5px, 110px);
    max-width: 920px;
	max-width: 16ch;
    text-wrap-style: pretty;

	font-weight: 200;
	line-height: 100%;

	background: linear-gradient(80.76deg, #7779BE 1.56%, #FFFFFF 38%, #AAAAB4 63.12%);
    -webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color: transparent;



	display: inline-block;
	background-image: linear-gradient(56.76deg, #7779BE 25.78%, #FFFFFF 44%, #AAAAB4 56.56%);
	background-size: 200% 100%;
	background-position: 50% 0%;
  
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
  
	animation: gradient-slide linear;
	animation-timeline: scroll(root);
	animation-range: 0vh 60vh;
  }
  
  @keyframes gradient-slide {
	from { background-position: 50% 0%; }
	to   { background-position: 0% 0%; }
  }

.kf-main-header__overline + .kf-main-header__title {
	margin-top: 0;
}

.kf-main-header__overline,
.kf-main-header__subtitle {
    font-size: var(--wp--preset--font-size--x-18);
    max-width: 620px;
    text-wrap-style: pretty;
	line-height: 150%;

	opacity: 0.85;
}


.kf-main-header__overline {
	margin-top: 2em;
	margin-bottom: 1em;
	opacity: 0.8;

	text-wrap-style: balance;

	color: #A5A7FF;

	font-weight: 600;
	font-size: 12px;
	letter-spacing: 8%;
	text-transform: uppercase;
}

.kf-main-header__overline::before {
	content: "////";
	letter-spacing: 20%;
}

.kf-main-header__subtitle {
	padding-left: 72px;
	max-width: 540px;
	font-weight: 400;
}

.kf-main-header__inner-blocks {
	margin-top: 16px;
	padding-left: 160px;
}

/* -----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.kf-main-header__cards {
	flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
	margin-left: auto;
	width: 365px;
}

.kf-main-header__card {
	display: flex;
	flex-direction: row-reverse;
	gap: 15px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	position: relative;

	/* font-family: "degular-variable", sans-serif; */
	/* font-weight: 500; */
	font-size: 16px;
	line-height: 100%;
	vertical-align: middle;

	padding: 10px 10px 10px 10px;

	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;

	background: linear-gradient(95.67deg, rgba(255, 255, 255, 0.15) 0.02%, rgba(255, 255, 255, 0.015) 100.02%);

	box-shadow: 0px 4px 30px 0px #00000026;

	transform: translateX(0px);

	transition: all 0.2s ease;
}

.kf-main-header__card--always-open {
	transform: translateX(0px);
}

.kf-main-header__card:hover,
.kf-main-header__card:focus {
	opacity: 0.85;
	transform: translateX(0px);
	margin-left: -4px;
	padding-right: 14px;
}

.kf-main-header__card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0px;
 
  border-radius: inherit;
  /* this is the border width */
  padding: 1px;
  padding-right: 0px;
  /* background: linear-gradient(
    to bottom right,
    #171717 0%,
    #525252 62%,
    #171717 100%
  ); */
  background: linear-gradient(to bottom right, #ffffff78 0%, #e0e0e02e 62%, #ffffff7d 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-main-header__card-image {
	flex-shrink: 0;
}

.kf-main-header__card-image img {
	display: block;
	width: 190px;
	height: 95px;
	object-fit: cover;
	border-radius: 10px;
}

.kf-main-header__card-body {
	display: flex;
	flex-direction: column;

	gap: 10px;
}

.kf-main-header__card-learn-more {
	display: flex;
    align-items: center;
    gap: .3em;
    flex-wrap: nowrap;

	transition: all 0.3s ease;

	font-size: 14px;

	color: #A5A7FF;
}

.kf-main-header__card:hover .kf-main-header__card-learn-more {
	gap: .6em;
}

/* -----------------------------------------------------------------------------
   Mobile layout
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
	.kf-main-header {
		min-height: 772px;
		padding-top: 80px;
		padding-bottom: 30px;
	}

	.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header.kf-main-header {
		width: calc(100% + var(--wp--style--root--padding-left, 40px) + var(--wp--style--root--padding-right, 40px));
		max-width: none;
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 40px));
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 40px));
		box-sizing: border-box;
	}

	.kf-main-header__content::after {
		display: none;
	}

	.kf-main-header__container {
		flex-direction: column;
		align-items: center;

		position: relative;
        bottom: 0;
        margin-top: 40px;
		margin-bottom: 20px;
	}

	.kf-main-header__card {
		padding: 10px;
		padding-right: 20px;
		border-radius: 16px;
		margin: 0 20px;

		transform: translateX(0px);
	}

	.kf-main-header__inner-blocks .wp-block-acf-kf-buttons {
		justify-content: center;
	}

	.kf-main-header__content {
		width: 100%;
	}

	.kf-main-header__overline,
    .kf-main-header__title,
    .kf-main-header__subtitle {
        text-align: center;
		margin-left: auto;
        margin-right: auto;
    }

	.kf-main-header__overline {
		margin-top: 1.5em;
	}

	.kf-main-header__subtitle,
	.kf-main-header__inner-blocks {
		padding-left: initial;
		padding-right: initial;
	}

	.kf-main-header__cards {
		width: 100%;
		align-items: center;
	}

	.kf-main-header__card::before {
		padding-right: 1px;
	}

	.wp-block-acf-kf-buttons, 
	.wp-block-acf-kf-buttons > .acf-innerblocks-container {
		justify-content: center;
		gap: 0 15px;
	}
}

@media (max-width: 767px) {
	.kf-main-header__content {
		padding-top: 30px;
	}
}