/**
 * "Tools we use" (owner request 2026-11-02): the tools behind a service, on the service pages
 * (build-services.php) and the White Label pages (build-white-label.php). Markup from
 * wxs_stack_groups() in tools/blocks/services-more.php; logos in ../stack-icons/.
 */

/* "Tools we use": the languages, frameworks, platforms and databases behind a service
   (owner request 2026-11-02). Each group is a row: its name on the left, its tools on the
   right as a quiet logo grid (Simple Icons in assets/stack-icons, initials when a brand has
   no icon); a logo darkens and lifts on hover. */
.wx-stack__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 60px;
	border-top: 1px solid var(--wx-line, #ebebeb);
}

.wx-stack__group {
	display: grid;
	align-content: start;
	gap: 18px;
	padding: 24px 0 26px;
	border-bottom: 1px solid var(--wx-line, #ebebeb);
}

.wx-stack p.wx-stack__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	color: var(--wx-dark, #131313);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.wx-stack p.wx-stack__label::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
}

.wx-stack ul.wx-stack__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 18px 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.wx-stack .wx-stack__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	text-align: center;
}

.wx-tool__logo {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(160deg, #fff 0%, #f6f1ea 100%);
	box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .06), 0 14px 26px -18px rgba(19, 19, 19, .35);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, background-color .45s ease;
}

.wx-tool__logo img {
	width: 22px;
	height: 22px;
	opacity: .78;
	transition: opacity .3s ease;
}

.wx-tool__mark {
	color: var(--wx-dark, #131313);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	opacity: .78;
}

.wx-tool__name {
	color: var(--wx-grey, #575757);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	transition: color .3s ease;
}

.wx-stack .wx-stack__list li:hover .wx-tool__logo {
	box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .14), 0 22px 34px -18px rgba(19, 19, 19, .45);
	transform: translateY(-3px);
}

.wx-stack .wx-stack__list li:hover .wx-tool__logo img,
.wx-stack .wx-stack__list li:hover .wx-tool__mark {
	opacity: 1;
}

.wx-stack .wx-stack__list li:hover .wx-tool__name {
	color: var(--wx-dark, #131313);
}

@media (max-width: 900px) {
	.wx-stack__groups {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.wx-stack ul.wx-stack__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px 6px;
	}

	.wx-tool__logo {
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}

	.wx-tool__logo img {
		width: 20px;
		height: 20px;
	}

	.wx-tool__name {
		font-size: 12px;
	}
}