/* =========================================================
 * Tech Resolve — Existing WordPress / Migration
 * ======================================================= */

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

	color: #0c1912;

	background: #f4f6f3;
}


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


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

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

	margin-bottom: 17px;

	color: #08b95d;

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


.tr-wordpress-migration__header h2 {
	max-width: 900px;
	margin: 0;

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


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

	color: #68746d;

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


/* =========================================================
 * Diagnostic
 * ======================================================= */

.tr-wordpress-migration__diagnostic {
	overflow: hidden;

	background: #fff;

	border:
		1px solid #dfe5e1;

	border-radius: 23px;

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


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

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

	color: #929d97;

	background: #f8faf8;

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


.tr-wordpress-migration__diagnostic-top {
	border-bottom:
		1px solid #e3e8e5;
}


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

	color: #08b95d;
}


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

	background: #19e078;

	border-radius: 50%;
}


/* =========================================================
 * Body
 * ======================================================= */

.tr-wordpress-migration__body {
	display: grid;
	grid-template-columns:
		minmax(330px,.72fr)
		minmax(0,1.28fr);
}


/* =========================================================
 * Problems
 * ======================================================= */

.tr-wordpress-migration__problems {
	padding:
		clamp(30px,4vw,52px);

	color: #fff;

	background: #07120e;
}


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

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


.tr-wordpress-migration__problems h3 {
	max-width: 460px;
	margin: 15px 0 0;

	color: #fff;

	font-size:
		clamp(27px,3.2vw,45px);

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


.tr-wordpress-migration__problems ul {
	display: grid;
	grid-template-columns:
		repeat(2,minmax(0,1fr));
	gap: 10px 18px;

	margin: 35px 0 0;
	padding: 0;

	list-style: none;
}


.tr-wordpress-migration__problems li {
	display: flex;
	align-items: flex-start;
	gap: 9px;

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

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


.tr-wordpress-migration__problems li > span {
	flex: 0 0 auto;

	width: 5px;
	height: 5px;
	margin-top: 5px;

	background: #19e078;

	border-radius: 50%;
}


.tr-wordpress-migration__diagnostic-meter {
	margin-top: 42px;
	padding-top: 18px;

	border-top:
		1px solid rgba(255,255,255,.08);
}


.tr-wordpress-migration__diagnostic-meter > span {
	color: rgba(255,255,255,.28);

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


.tr-wordpress-migration__diagnostic-meter > div {
	overflow: hidden;

	height: 3px;
	margin-top: 11px;

	background:
		rgba(255,255,255,.08);

	border-radius: 99px;
}


.tr-wordpress-migration__diagnostic-meter i {
	display: block;

	width: 72%;
	height: 100%;

	background:
		linear-gradient(
			to right,
			#19e078,
			#14d7e8
		);
}


/* =========================================================
 * Paths
 * ======================================================= */

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


.tr-wordpress-migration__path {
	position: relative;

	min-height: 310px;
	padding: 26px;

	border-right:
		1px solid #e4e9e6;

	border-bottom:
		1px solid #e4e9e6;

	transition:
		background 180ms ease;
}


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


.tr-wordpress-migration__path:hover {
	background:
		rgba(25,224,120,.04);
}


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


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

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


.tr-wordpress-migration__path-top small {
	color: #9aa49e;

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


.tr-wordpress-migration__path h3 {
	margin: 39px 0 0;

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

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


.tr-wordpress-migration__path p {
	margin: 15px 0 0;

	color: #707b75;

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


.tr-wordpress-migration__path-state {
	position: absolute;
	right: 26px;
	bottom: 23px;
	left: 26px;

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

	color: #99a39d;

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


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

	background: #19e078;

	border-radius: 50%;
}


/* =========================================================
 * Footer
 * ======================================================= */

.tr-wordpress-migration__footer {
	justify-content: center;
	gap: 13px;

	border-top:
		1px solid #e3e8e5;
}


.tr-wordpress-migration__footer i {
	width: 20px;
	height: 1px;

	background: #ccd6d0;
}


@media (max-width: 950px) {

	.tr-wordpress-migration__header,
	.tr-wordpress-migration__body {
		grid-template-columns: 1fr;
	}

}


@media (max-width: 700px) {

	.tr-wordpress-migration__paths,
	.tr-wordpress-migration__problems ul {
		grid-template-columns: 1fr;
	}


	.tr-wordpress-migration__path {
		border-right: 0;
	}

}