/* =========================================================
 * Tech Resolve — WordPress Platform Fit
 * ======================================================= */

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

	color: #0c1912;

	background: #f4f6f3;
}


.tr-wordpress-fit__shell {
	width:
		min(100%, var(--tr-container));

	margin:
		0 auto;
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-wordpress-fit__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-fit__eyebrow {
	display: block;

	margin-bottom: 17px;

	color: #08b95d;

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


.tr-wordpress-fit__header h2 {
	max-width: 870px;
	margin: 0;

	font-size:
		clamp(43px, 5.2vw, 74px);

	font-weight: 800;
	line-height: .99;
	letter-spacing: -.053em;
}


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

	color: #68746d;

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


.tr-wordpress-fit__intro > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin-top: 26px;
	padding-top: 15px;

	border-top:
		1px solid #dce3df;
}


.tr-wordpress-fit__intro span {
	color: #98a19c;

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


.tr-wordpress-fit__intro strong {
	color: #08b95d;

	font-size: 9px;
	letter-spacing: .1em;
}


/* =========================================================
 * Matrix
 * ======================================================= */

.tr-wordpress-fit__matrix {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	overflow: hidden;

	background: #fff;

	border:
		1px solid #dfe5e1;

	border-radius: 23px;

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


.tr-wordpress-fit__item {
	position: relative;

	min-height: 305px;
	padding: 25px;

	border-right:
		1px solid #e4e9e6;

	border-bottom:
		1px solid #e4e9e6;

	transition:
		background 180ms ease;
}


.tr-wordpress-fit__item:nth-child(3n) {
	border-right: 0;
}


.tr-wordpress-fit__item:nth-last-child(-n+3) {
	border-bottom: 0;
}


.tr-wordpress-fit__item:hover {
	background:
		linear-gradient(
			145deg,
			rgba(25, 224, 120, .055),
			transparent
		);
}


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


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

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


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

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


/* =========================================================
 * Indicator
 * ======================================================= */

.tr-wordpress-fit__indicator {
	position: relative;

	width: 72px;
	height: 72px;

	margin-top: 29px;

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

	border-radius: 50%;

	background:
		rgba(25, 224, 120, .045);
}


.tr-wordpress-fit__indicator > span {
	position: absolute;
	inset: 15px;

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

	border-radius: 50%;
}


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

	width: 8px;
	height: 8px;

	background: #19e078;

	border-radius: 50%;

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

	box-shadow:
		0 0 0 6px rgba(25, 224, 120, .08);
}


/* =========================================================
 * Copy
 * ======================================================= */

.tr-wordpress-fit__item h3 {
	margin: 27px 0 0;

	font-size:
		clamp(20px, 2vw, 27px);

	line-height: 1.08;
	letter-spacing: -.025em;
}


.tr-wordpress-fit__item p {
	margin: 14px 0 0;

	color: #707b75;

	font-size: 10px;
	line-height: 1.72;
}


.tr-wordpress-fit__state {
	position: absolute;
	right: 25px;
	bottom: 22px;
	left: 25px;

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

	color: #9aa39e;

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


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

	background: #19e078;

	border-radius: 50%;
}


/* =========================================================
 * Honest Positioning
 * ======================================================= */

.tr-wordpress-fit__honesty {
	display: grid;
	grid-template-columns:
		90px
		minmax(0, 1fr);
	align-items: center;
	gap: 30px;

	margin-top: 13px;
	padding:
		clamp(30px, 4vw, 48px);

	color: #fff;

	background: #07120e;

	border-radius: 18px;
}


.tr-wordpress-fit__honesty-index {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 12px;
}


.tr-wordpress-fit__honesty-index span {
	display: grid;
	place-items: center;

	width: 55px;
	height: 55px;

	color: #06100d;

	background: #19e078;

	border-radius: 50%;

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


.tr-wordpress-fit__honesty-index i {
	width: 1px;
	height: 42px;

	background:
		linear-gradient(
			to bottom,
			#19e078,
			transparent
		);
}


.tr-wordpress-fit__honesty-label {
	color: #19e078;

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


.tr-wordpress-fit__honesty h3 {
	margin: 11px 0 0;

	color: #fff;

	font-size:
		clamp(27px, 3.4vw, 47px);

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


.tr-wordpress-fit__honesty p {
	max-width: 860px;

	margin: 17px 0 0;

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

	font-size: 11px;
	line-height: 1.76;
}


@media (max-width: 980px) {

	.tr-wordpress-fit__header,
	.tr-wordpress-fit__matrix {
		grid-template-columns: 1fr;
	}


	.tr-wordpress-fit__item,
	.tr-wordpress-fit__item:nth-child(3n),
	.tr-wordpress-fit__item:nth-last-child(-n+3) {
		border-right: 0;

		border-bottom:
			1px solid #e4e9e6;
	}


	.tr-wordpress-fit__item:last-child {
		border-bottom: 0;
	}

}