/* =========================================================
 * Tech Resolve — WordPress Integrations Hub
 * ======================================================= */

.tr-wordpress-integrations {
	padding:
		clamp(105px,10vw,175px)
		var(--tr-gutter);

	color: #0c1912;

	background: #f4f6f3;
}


.tr-wordpress-integrations__shell {
	width: min(100%,var(--tr-container));
	margin: 0 auto;
}


/* Header */

.tr-wordpress-integrations__header {
	display: grid;
	grid-template-columns:
		minmax(0,1.12fr)
		minmax(330px,.88fr);
	align-items: end;
	gap: clamp(50px,8vw,120px);

	margin-bottom: 65px;
}


.tr-wordpress-integrations__eyebrow {
	display: block;

	margin-bottom: 17px;

	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
	letter-spacing: .15em;
}


.tr-wordpress-integrations__header h2 {
	max-width: 880px;
	margin: 0;

	font-size: clamp(43px,5.2vw,74px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.053em;
}


.tr-wordpress-integrations__header > p {
	margin: 0;

	color: #68746d;

	font-size: 14px;
	line-height: 1.78;
}


/* Hub */

.tr-wordpress-integrations__hub {
	overflow: hidden;

	background: #fff;

	border: 1px solid #dfe5e1;
	border-radius: 23px;

	box-shadow:
		0 30px 90px rgba(10,28,18,.06);
}


.tr-wordpress-integrations__hub-top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 52px;
	padding: 0 20px;

	color: #929d97;

	background: #f8faf8;

	border-bottom: 1px solid #e3e8e5;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: .12em;
}


.tr-wordpress-integrations__hub-top > div {
	display: flex;
	align-items: center;
	gap: 7px;

	color: #08b95d;
}


.tr-wordpress-integrations__hub-top i {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;
}


/* Network */

.tr-wordpress-integrations__network {
	position: relative;

	min-height: 690px;
	padding: 35px;
}


.tr-wordpress-integrations__network::before {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 520px;
	height: 520px;

	border:
		1px solid rgba(8,185,93,.08);

	border-radius: 50%;

	transform:
		translate(-50%,-50%);

	pointer-events: none;
}


.tr-wordpress-integrations__core {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	width: 120px;
	height: 120px;

	background: #07120e;

	border:
		1px solid rgba(25,224,120,.25);

	border-radius: 50%;

	transform:
		translate(-50%,-50%);

	box-shadow:
		0 25px 60px rgba(7,18,14,.2);
}


.tr-wordpress-integrations__core > span {
	color: #19e078;

	font-size: 8px;
	font-weight: 800;
}


.tr-wordpress-integrations__core strong {
	margin-top: 5px;

	color: #fff;

	font-size: 28px;
}


.tr-wordpress-integrations__core small {
	margin-top: 4px;

	color: rgba(255,255,255,.3);

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .12em;
}


/* Items */

.tr-wordpress-integrations__items {
	display: grid;
	grid-template-columns:
		repeat(4,minmax(0,1fr));
	gap: 12px;

	position: relative;
	z-index: 2;
}


.tr-wordpress-integrations__item {
	position: relative;

	min-height: 285px;
	padding: 22px;

	background: #fff;

	border: 1px solid #dfe5e1;
	border-radius: 14px;

	transition:
		transform 180ms var(--tr-ease),
		border-color 180ms ease;
}


.tr-wordpress-integrations__item:hover {
	border-color:
		rgba(8,185,93,.3);

	transform:
		translateY(-4px);
}


.tr-wordpress-integrations__item:nth-child(n+5) {
	margin-top: 90px;
}


.tr-wordpress-integrations__item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.tr-wordpress-integrations__item-top span {
	color: #08b95d;

	font-size: 8px;
	font-weight: 800;
}


.tr-wordpress-integrations__item-top small {
	color: #a0aaa4;

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .1em;
}


/* Connector */

.tr-wordpress-integrations__connector {
	position: relative;

	width: 54px;
	height: 54px;

	margin-top: 28px;

	background:
		rgba(25,224,120,.05);

	border:
		1px solid rgba(8,185,93,.14);

	border-radius: 50%;
}


.tr-wordpress-integrations__connector span {
	position: absolute;
	inset: 14px;

	border:
		1px solid rgba(8,185,93,.18);

	border-radius: 50%;
}


.tr-wordpress-integrations__connector i {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

	transform:
		translate(-50%,-50%);
}


/* Copy */

.tr-wordpress-integrations__item h3 {
	margin: 23px 0 0;

	font-size: 18px;
	line-height: 1.1;
}


.tr-wordpress-integrations__item p {
	margin: 12px 0 0;

	color: #707b75;

	font-size: 9px;
	line-height: 1.7;
}


.tr-wordpress-integrations__state {
	position: absolute;
	right: 22px;
	bottom: 20px;
	left: 22px;

	display: flex;
	align-items: center;
	gap: 7px;

	color: #9aa39e;

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .09em;
}


.tr-wordpress-integrations__state i {
	width: 5px;
	height: 5px;

	background: #19e078;

	border-radius: 50%;
}


/* Closing */

.tr-wordpress-integrations__closing {
	display: grid;
	grid-template-columns:
		minmax(180px,.32fr)
		minmax(0,1fr);
	align-items: center;
	gap: 40px;

	padding:
		clamp(32px,4vw,50px);

	color: #fff;

	background: #07120e;
}


.tr-wordpress-integrations__closing > div {
	display: flex;
	align-items: center;
	gap: 9px;
}


.tr-wordpress-integrations__closing > div span {
	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;
}


.tr-wordpress-integrations__closing > div strong {
	color: #19e078;

	font-size: 8px;
	letter-spacing: .12em;
}


.tr-wordpress-integrations__closing h3 {
	max-width: 850px;
	margin: 0;

	color: #fff;

	font-size:
		clamp(25px,3.3vw,46px);

	line-height: 1.04;
	letter-spacing: -.04em;
}


@media (max-width: 1050px) {

	.tr-wordpress-integrations__header {
		grid-template-columns: 1fr;
	}


	.tr-wordpress-integrations__items {
		grid-template-columns:
			repeat(2,minmax(0,1fr));
	}


	.tr-wordpress-integrations__item:nth-child(n+5) {
		margin-top: 0;
	}


	.tr-wordpress-integrations__core,
	.tr-wordpress-integrations__network::before {
		display: none;
	}


	.tr-wordpress-integrations__network {
		min-height: auto;
	}

}


@media (max-width: 700px) {

	.tr-wordpress-integrations__items,
	.tr-wordpress-integrations__closing {
		grid-template-columns: 1fr;
	}

}