/**
 * ZeltaCode Tool Stack — front-end styles.
 */

.zcts {
	--zcts-logo: 19px;

	background: #000;
}

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

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

.zcts__head {
	margin-bottom: 44px;
}

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

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

.zcts .zcts__sub {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: #8a90a0;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Rows                                                                */
/* ------------------------------------------------------------------ */

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

.zcts-lastline-yes .zcts__list {
	border-bottom-style: solid;
}

.zcts__row {
	display: grid;
	grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
	column-gap: 32px;
	align-items: center;
	padding: 18px 0;
	border-top: 1px solid #1c1f26;
	transition: background-color 0.25s ease;
}

/* ------------------------------------------------------------------ */
/* Category column                                                     */
/* ------------------------------------------------------------------ */

.zcts__cat {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.zcts__cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #6e7480;
	font-size: 13px;
	line-height: 1;
}

.zcts .zcts__cat-icon i,
.zcts .zcts__cat-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.zcts .zcts__cat-icon svg {
	fill: currentColor;
}

.zcts__cat-label {
	min-width: 0;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.45;
	text-transform: uppercase;
	color: #c7cbd1;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Tool pills                                                          */
/* ------------------------------------------------------------------ */

.zcts__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

/**
 * Locked across every state. Theme and Elementor Kit link rules
 * ( .elementor-kit-N a:hover, .entry-content a, … ) outrank a single-class
 * reset and would otherwise repaint the pill on hover.
 */
.zcts .zcts__tool,
.zcts .zcts__tool:link,
.zcts .zcts__tool:visited,
.zcts .zcts__tool:hover,
.zcts .zcts__tool:focus,
.zcts .zcts__tool:active {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 7px 14px 7px 8px;
	border: 1px solid #262a32;
	border-radius: 999px;
	background-color: #14161b;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.zcts .zcts__tool:hover {
	background-color: #1b1e25;
	border-color: #3a4150;
}

.zcts .zcts__tool--link {
	cursor: pointer;
}

.zcts .zcts__tool--link:focus-visible {
	outline: 2px solid #5e9eff;
	outline-offset: 2px;
}

.zcts__logo,
.zcts__mono {
	display: block;
	flex: 0 0 auto;
	width: var(--zcts-logo);
	height: var(--zcts-logo);
	border-radius: 50%;
}

.zcts__logo {
	object-fit: contain;
	background-color: rgba(255, 255, 255, 0.04);
}

/* Letter shown when a tool has no logo yet, so rows still read evenly. */
.zcts__mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.06);
	color: #c7cbd1;
	font-size: calc(var(--zcts-logo) * 0.5);
	font-weight: 600;
	line-height: 1;
}

.zcts__name {
	min-width: 0;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	color: #ededed;
	white-space: nowrap;
	transition: color 0.22s ease;
}

.zcts .zcts__tool:hover .zcts__name {
	color: #fff;
}

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

.zcts,
.zcts__list,
.zcts__row,
.zcts__cat,
.zcts__tools {
	min-width: 0;
}

.zcts__list,
.zcts__row,
.zcts__tools {
	max-width: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
	.zcts__row,
	.zcts__tool,
	.zcts__name {
		transition: none !important;
	}
}

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

@media (max-width: 1024px) {
	.zcts .zcts__heading {
		font-size: 32px;
		letter-spacing: -0.9px;
	}

	/* Category label moves above its pills rather than squeezing beside them. */
	.zcts-stack-tablet .zcts__row {
		grid-template-columns: 1fr;
		row-gap: 14px;
		align-items: start;
		padding: 22px 0;
	}
}

@media (max-width: 767px) {
	.zcts__head {
		margin-bottom: 32px;
	}

	.zcts .zcts__heading {
		font-size: 26px;
		letter-spacing: -0.6px;
	}

	.zcts .zcts__sub {
		font-size: 13.5px;
	}

	.zcts-stack-mobile .zcts__row {
		grid-template-columns: 1fr;
		row-gap: 12px;
		align-items: start;
		padding: 20px 0;
	}

	/* Pills tighten rather than wrapping to one per line. */
	.zcts__tools {
		gap: 7px;
	}

	.zcts .zcts__tool {
		padding: 6px 11px 6px 6px;
		gap: 7px;
	}

	.zcts {
		--zcts-logo: 17px;
	}

	.zcts__name {
		font-size: 11.5px;
	}

	.zcts__cat-label {
		font-size: 10px;
		letter-spacing: 1.2px;
	}
}

/**
 * Very narrow screens: a long tool name would otherwise force the pill wider
 * than the viewport, since the name is nowrap by design.
 */
@media (max-width: 380px) {
	.zcts__name {
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
	}
}