/**
 * ZeltaCode Focus List — front-end styles.
 */

.zcfl {
	--zcfl-icon-box: 32px;

	background: #000;
}

.zcfl *,
.zcfl *::before,
.zcfl *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Heading block                                                       */
/* ------------------------------------------------------------------ */

.zcfl__head {
	margin-bottom: 54px;
}

.zcfl .zcfl__eyebrow {
	margin: 0 0 16px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
	color: #5e9eff;
}

.zcfl .zcfl__heading {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.2px;
	color: #fff;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* List and rows                                                       */
/* ------------------------------------------------------------------ */

/* The closing line sits on the list, so it is not a phantom row border. */
.zcfl__list {
	border-bottom: 0 solid #1c1f26;
}

.zcfl-lastline-yes .zcfl__list {
	border-bottom-style: solid;
}

.zcfl__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	column-gap: 40px;
	align-items: start;
	padding: 30px 0 34px;
	border-top: 1px solid #1c1f26;
	transition: background-color 0.25s ease;
}

.zcfl__row.has-link {
	cursor: pointer;
}

/**
 * Stretched link. Locked across every state because theme and Elementor Kit
 * rules ( .elementor-kit-N a:hover, .entry-content a, … ) outrank a
 * single-class reset and would otherwise paint a background over the row.
 */
.zcfl .zcfl__link,
.zcfl .zcfl__link:link,
.zcfl .zcfl__link:visited,
.zcfl .zcfl__link:hover,
.zcfl .zcfl__link:focus,
.zcfl .zcfl__link:active {
	position: absolute;
	inset: 0;
	z-index: 4;
	border: 0 none !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.zcfl .zcfl__link:focus-visible {
	outline: 2px solid #5e9eff;
	outline-offset: -3px;
}

/* ------------------------------------------------------------------ */
/* Left column — icon, number, title                                   */
/* ------------------------------------------------------------------ */

.zcfl__label {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.zcfl__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--zcfl-icon-box);
	height: var(--zcfl-icon-box);
	border: 1px solid #242830;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.02);
	color: #8a90a0;
	font-size: 14px;
	line-height: 1;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.zcfl .zcfl__icon i,
.zcfl .zcfl__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.zcfl .zcfl__icon svg {
	fill: currentColor;
}

.zcfl__row.is-highlighted .zcfl__icon {
	border-color: #2f6bff;
	background-color: rgba(94, 158, 255, 0.08);
	color: #5e9eff;
}

.zcfl__labeltext {
	min-width: 0;
}

.zcfl .zcfl__num {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;
	color: #4e5561;
}

.zcfl .zcfl__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #fff;
	/* A flex item will not shrink below its longest word unless told to. */
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	transition: color 0.25s ease;
}

/* ------------------------------------------------------------------ */
/* Right column — description                                          */
/* ------------------------------------------------------------------ */

.zcfl .zcfl__desc {
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.72;
	color: #8a90a0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.zcfl .zcfl__desc > *:first-child {
	margin-top: 0;
}

.zcfl .zcfl__desc > *:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Overflow safety                                                     */
/* ------------------------------------------------------------------ */

.zcfl,
.zcfl__list,
.zcfl__row,
.zcfl__label,
.zcfl__labeltext {
	min-width: 0;
}

.zcfl__list,
.zcfl__row,
.zcfl__labeltext {
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.zcfl__row,
	.zcfl__icon,
	.zcfl__title {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Responsive stacking                                                 */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.zcfl-stack-tablet .zcfl__row {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	/* Indent the description to line up under the title, not the icon. */
	.zcfl-stack-tablet .zcfl__desc {
		padding-left: calc(var(--zcfl-icon-box) + 14px);
	}
}

@media (max-width: 767px) {
	.zcfl-stack-mobile .zcfl__row {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}

	.zcfl-stack-mobile .zcfl__desc,
	.zcfl-stack-tablet .zcfl__desc {
		padding-left: 0;
	}

	.zcfl .zcfl__heading {
		font-size: 28px;
		letter-spacing: -0.8px;
	}

	.zcfl__head {
		margin-bottom: 36px;
	}

	.zcfl__row {
		padding: 24px 0 26px;
	}
}