/* =========================================================
 * Tech Resolve — WordPress Architecture
 * ======================================================= */

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

	color: #0c1912;

	background: #f4f6f3;
}


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


/* Header */

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

	margin-bottom: 17px;

	color: #08b95d;

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


.tr-wordpress-architecture__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-architecture__header > p {
	margin: 0;

	color: #68746d;

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


/* System */

.tr-wordpress-architecture__system {
	overflow: hidden;

	background: #fff;

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

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


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

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

	color: #919c96;

	background: #f8faf8;

	border-bottom: 1px solid #e3e8e5;

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


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

	color: #08b95d;
}


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

	background: #19e078;

	border-radius: 50%;
}


/* Layers */

.tr-wordpress-architecture__layer {
	display: grid;
	grid-template-columns:
		75px
		minmax(0, 1fr)
		minmax(150px, 230px)
		95px;
	align-items: center;
	gap: 28px;

	min-height: 150px;
	padding: 22px 25px;

	border-bottom:
		1px solid #e5e9e7;

	transition:
		background 180ms ease;
}


.tr-wordpress-architecture__layer:hover {
	background:
		linear-gradient(
			90deg,
			rgba(25,224,120,.05),
			transparent
		);
}


.tr-wordpress-architecture__layer-index span {
	display: block;

	color: #08b95d;

	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}


.tr-wordpress-architecture__layer-index small {
	display: block;

	margin-top: 6px;

	color: #99a39d;

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


.tr-wordpress-architecture__layer-copy h3 {
	margin: 0;

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

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


.tr-wordpress-architecture__layer-copy p {
	max-width: 720px;
	margin: 11px 0 0;

	color: #6c7871;

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


/* Map */

.tr-wordpress-architecture__layer-map {
	display: grid;
	grid-template-columns:
		7px
		minmax(30px, 1fr)
		7px;
	align-items: center;
	gap: 8px;
}


.tr-wordpress-architecture__layer-map span {
	width: 7px;
	height: 7px;

	border: 1px solid #08b95d;
	border-radius: 50%;
}


.tr-wordpress-architecture__layer-map span:last-child {
	background: #19e078;
}


.tr-wordpress-architecture__layer-map i {
	position: relative;

	height: 1px;

	background: #d7dfda;
}


.tr-wordpress-architecture__layer-map i::after {
	content: "";

	position: absolute;
	top: -1px;
	left: 0;

	width: 28%;
	height: 3px;

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

	border-radius: 99px;

	transition:
		width 250ms var(--tr-ease);
}


.tr-wordpress-architecture__layer:hover
.tr-wordpress-architecture__layer-map i::after {
	width: 100%;
}


.tr-wordpress-architecture__layer-state {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;

	color: #98a29c;

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


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

	background: #19e078;

	border-radius: 50%;
}


/* Principle */

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

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

	color: #fff;

	background: #07120e;
}


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


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

	background: #19e078;

	border-radius: 50%;
}


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

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


.tr-wordpress-architecture__principle 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: 900px) {

	.tr-wordpress-architecture__header,
	.tr-wordpress-architecture__principle {
		grid-template-columns: 1fr;
	}


	.tr-wordpress-architecture__layer {
		grid-template-columns:
			55px
			minmax(0,1fr);
	}


	.tr-wordpress-architecture__layer-map,
	.tr-wordpress-architecture__layer-state {
		display: none;
	}

}