/* =========================================================
 * Tech Resolve — About Principles
 * Operating Protocol
 * ======================================================= */

.tr-about-principles {
	padding:
		clamp(100px, 10vw, 170px)
		var(--tr-gutter);

	color: #102018;

	background:
		#f3f5f1;
}


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


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

.tr-about-principles__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.15fr)
		minmax(330px, 0.85fr);
	align-items: end;
	gap: clamp(45px, 8vw, 120px);

	margin-bottom:
		clamp(55px, 6vw, 90px);
}


.tr-about-principles__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #08b95d;

	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.15em;
}


.tr-about-principles__header h2 {
	max-width: 880px;
	margin: 0;

	color: #0a1811;

	font-size: clamp(42px, 5vw, 72px);
	font-weight: 800;
	line-height: 0.99;
	letter-spacing: -0.052em;
}


.tr-about-principles__intro > p {
	max-width: 560px;
	margin: 0;

	color: #69756e;

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


.tr-about-principles__range {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin-top: 28px;
	padding-top: 16px;

	border-top:
		1px solid #dce3df;
}


.tr-about-principles__range span {
	color: #9aa49f;

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


.tr-about-principles__range strong {
	color: #08b95d;

	font-size: 10px;
	letter-spacing: 0.12em;
}


/* =========================================================
 * Board
 * ======================================================= */

.tr-about-principles__board {
	overflow: hidden;

	background: #fff;

	border:
		1px solid #dfe5e1;

	border-radius: 24px;

	box-shadow:
		0 30px 80px rgba(13, 30, 21, 0.07);
}


.tr-about-principles__board-top,
.tr-about-principles__board-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	padding: 17px 21px;

	color: #8d9892;

	background:
		#f8faf8;

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


.tr-about-principles__board-top {
	border-bottom:
		1px solid #e5e9e7;
}


.tr-about-principles__board-top > div {
	display: flex;
	align-items: center;
	gap: 8px;

	color: #08b95d;
}


.tr-about-principles__board-top i {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;

	box-shadow:
		0 0 0 5px rgba(25, 224, 120, 0.08);
}


/* =========================================================
 * Items
 * ======================================================= */

.tr-about-principles__item {
	position: relative;

	display: grid;
	grid-template-columns:
		100px
		minmax(0, 1fr)
		minmax(150px, 220px)
		38px;
	align-items: center;
	gap: 28px;

	min-height: 160px;
	padding:
		24px 24px;

	border-bottom:
		1px solid #e5e9e7;

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


.tr-about-principles__item:last-child {
	border-bottom: 0;
}


.tr-about-principles__item:hover {
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.045),
			transparent 70%
		);
}


.tr-about-principles__number {
	display: flex;
	align-items: baseline;
	gap: 3px;
}


.tr-about-principles__number span {
	color: #0a1811;

	font-size: 37px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
}


.tr-about-principles__number small {
	color: #a5aea9;

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


.tr-about-principles__copy h3 {
	margin: 0;

	color: #111d17;

	font-size: clamp(20px, 2vw, 28px);
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -0.025em;
}


.tr-about-principles__copy p {
	max-width: 700px;
	margin: 13px 0 0;

	color: #6d7872;

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


/* =========================================================
 * Signal
 * ======================================================= */

.tr-about-principles__signal {
	display: flex;
	align-items: center;
	gap: 11px;
}


.tr-about-principles__signal > span {
	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

	box-shadow:
		0 0 0 5px rgba(25, 224, 120, 0.08);
}


.tr-about-principles__signal i {
	position: relative;

	display: block;

	width: 100%;
	height: 1px;

	background:
		#dce4df;
}


.tr-about-principles__signal i::after {
	content: "";

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

	width: 35%;
	height: 3px;

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

	border-radius: 999px;

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


.tr-about-principles__item:hover
.tr-about-principles__signal i::after {
	width: 85%;
}


/* =========================================================
 * Arrow
 * ======================================================= */

.tr-about-principles__arrow {
	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	color: #8c9891;

	background: #f5f8f6;

	border:
		1px solid #e0e6e2;

	border-radius: 50%;

	transition:
		color 170ms ease,
		background 170ms ease,
		transform 170ms var(--tr-ease);
}


.tr-about-principles__item:hover
.tr-about-principles__arrow {
	color: #06110c;

	background: #19e078;

	border-color: #19e078;

	transform:
		translateX(4px);
}


.tr-about-principles__arrow svg {
	width: 16px;
	height: 16px;
}


/* =========================================================
 * Board Bottom
 * ======================================================= */

.tr-about-principles__board-bottom {
	justify-content: center;

	border-top:
		1px solid #e5e9e7;
}


.tr-about-principles__board-bottom i {
	width: 24px;
	height: 1px;

	background: #ccd5d0;
}


/* =========================================================
 * Responsive Base
 * ======================================================= */

@media (max-width: 980px) {

	.tr-about-principles__header {
		grid-template-columns: 1fr;
	}


	.tr-about-principles__item {
		grid-template-columns:
			70px
			minmax(0, 1fr)
			34px;
	}


	.tr-about-principles__signal {
		display: none;
	}

}