/* =========================================================
 * Tech Resolve — Online Store Commerce Journey
 * ======================================================= */

.tr-online-store-journey {
	position: relative;
	overflow: hidden;

	padding:
		clamp(110px, 10vw, 175px)
		var(--tr-gutter);

	color:
		#0c1912;

	background:
		#f4f6f3;
}


/* =========================================================
 * Background
 * ======================================================= */

.tr-online-store-journey::before {
	content: "";

	position: absolute;
	top: -320px;
	left: -250px;

	width: 760px;
	height: 760px;

	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, .055),
			transparent 68%
		);
}


.tr-online-store-journey::after {
	content: "";

	position: absolute;
	right: -320px;
	bottom: -410px;

	width: 850px;
	height: 850px;

	pointer-events: none;

	background:
		radial-gradient(
			circle,
			rgba(57, 120, 255, .045),
			transparent 69%
		);
}


/* =========================================================
 * Shell
 * ======================================================= */

.tr-online-store-journey__shell {
	position: relative;
	z-index: 2;

	width:
		min(100%, var(--tr-container-wide));

	margin:
		0 auto;
}


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

.tr-online-store-journey__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(320px, .55fr);

	align-items: end;

	gap:
		clamp(48px, 7vw, 110px);

	width:
		min(100%, var(--tr-container));

	margin:
		0 auto
		clamp(70px, 8vw, 105px);
}


.tr-online-store-journey__eyebrow {
	display: block;

	margin-bottom: 18px;

	color:
		var(--tr-green-deep);

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


.tr-online-store-journey__header h2 {
	max-width: 930px;

	margin: 0;

	color:
		#0a1810;

	font-size:
		clamp(44px, 5.15vw, 75px);

	font-weight: 850;
	line-height: .98;
	letter-spacing: -.056em;
}


.tr-online-store-journey__header > p {
	max-width: 560px;

	margin: 0;

	color:
		#6a776f;

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


/* =========================================================
 * Canvas
 * ======================================================= */

.tr-online-store-journey__canvas {
	overflow: hidden;

	border:
		1px solid #dce4df;

	border-radius:
		26px;

	background:
		#fff;

	box-shadow:
		0 38px 110px rgba(9, 31, 18, .065);
}


/* =========================================================
 * Canvas Head
 * ======================================================= */

.tr-online-store-journey__canvas-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

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

	color:
		#929c96;

	border-bottom:
		1px solid #e2e8e4;

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


.tr-online-store-journey__canvas-head > div {
	display: flex;
	align-items: center;
	gap: 9px;
}


.tr-online-store-journey__status {
	width: 6px;
	height: 6px;

	background:
		var(--tr-green);

	border-radius:
		50%;

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


/* =========================================================
 * Canvas Title
 * ======================================================= */

.tr-online-store-journey__canvas-title {
	display: grid;

	grid-template-columns:
		185px
		minmax(0, 1fr);

	align-items: center;

	gap: 34px;

	min-height: 126px;

	padding:
		30px 36px;

	border-bottom:
		1px solid #e2e8e4;
}


.tr-online-store-journey__canvas-title > span {
	color:
		#a0aaa4;

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


.tr-online-store-journey__canvas-title h3 {
	max-width: 800px;

	margin: 0;

	color:
		#15221a;

	font-size:
		clamp(28px, 3vw, 42px);

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


/* =========================================================
 * Track
 * ======================================================= */

.tr-online-store-journey__track {
	position: relative;

	display: grid;

	grid-template-columns:
		repeat(6, minmax(0, 1fr));

	min-height: 430px;

	padding:
		48px 34px 42px;

	background:
		linear-gradient(
			180deg,
			#fbfcfb,
			#f5f8f6
		);

	border-bottom:
		1px solid #e2e8e4;
}


.tr-online-store-journey__track-line {
	position: absolute;
	top: 104px;
	left: 7%;
	right: 7%;

	height: 1px;

	background:
		linear-gradient(
			to right,
			#dbe3de,
			rgba(8, 185, 93, .55),
			#dbe3de
		);
}


/* =========================================================
 * Stage
 * ======================================================= */

.tr-online-store-journey__stage {
	position: relative;

	display: grid;

	grid-template-rows:
		82px
		minmax(0, 1fr);

	min-width: 0;

	padding:
		0 17px;

	border-right:
		1px solid #e3e9e5;
}


.tr-online-store-journey__stage:last-child {
	border-right: 0;
}


/* =========================================================
 * Node
 * ======================================================= */

.tr-online-store-journey__stage-node {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	gap: 10px;
}


.tr-online-store-journey__stage-node > span {
	display: grid;
	place-items: center;

	min-width: 52px;
	height: 34px;
	padding:
		0 10px;

	color:
		#758279;

	background:
		#fff;

	border:
		1px solid #dce4df;

	border-radius:
		999px;

	font-size: 5px;
	font-weight: 850;
	letter-spacing: .08em;

	white-space: nowrap;
}


.tr-online-store-journey__stage-node > i {
	width: 9px;
	height: 9px;

	background:
		var(--tr-green);

	border:
		2px solid #f6f9f7;

	border-radius:
		50%;

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


/* =========================================================
 * Stage Content
 * ======================================================= */

.tr-online-store-journey__stage-content {
	padding-top: 17px;
}


.tr-online-store-journey__stage-kicker {
	display: block;

	margin-bottom: 10px;

	color:
		#adb6b0;

	font-size: 6px;
	font-weight: 850;
}


.tr-online-store-journey__stage-content h3 {
	margin: 0;

	color:
		#17231c;

	font-size:
		clamp(18px, 1.6vw, 23px);

	font-weight: 850;
	line-height: 1.1;
	letter-spacing: -.03em;
}


.tr-online-store-journey__stage-content > strong {
	display: block;

	margin-top: 13px;

	color:
		var(--tr-green-deep);

	font-size: 8px;
	font-weight: 800;
	line-height: 1.45;
}


.tr-online-store-journey__stage-content > p {
	margin:
		13px
		0
		0;

	color:
		#748078;

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


/* =========================================================
 * Principle
 * ======================================================= */

.tr-online-store-journey__principle {
	display: grid;

	grid-template-columns:
		300px
		minmax(0, 1fr);

	align-items: center;

	gap:
		clamp(40px, 6vw, 90px);

	padding:
		clamp(42px, 5vw, 66px);

	color:
		#fff;

	background:
		#07140f;
}


/* =========================================================
 * Principle Visual
 * ======================================================= */

.tr-online-store-journey__principle-visual {
	display: grid;
	gap: 15px;
}


.tr-online-store-journey__principle-visual > div {
	display: grid;

	grid-template-columns:
		auto
		1fr
		auto
		1fr
		auto
		1fr
		auto;

	align-items: center;

	gap: 8px;
}


.tr-online-store-journey__principle-visual span,
.tr-online-store-journey__principle-visual strong {
	display: grid;
	place-items: center;

	min-width: 38px;
	height: 38px;
	padding:
		0 8px;

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

	border:
		1px solid rgba(255, 255, 255, .09);

	border-radius:
		50%;

	font-size: 5px;
	font-weight: 850;
}


.tr-online-store-journey__principle-visual strong {
	min-width: 64px;

	color:
		#06100d;

	background:
		var(--tr-green);

	border-color:
		var(--tr-green);

	border-radius:
		999px;
}


.tr-online-store-journey__principle-visual i {
	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .04),
			rgba(25, 224, 120, .28),
			rgba(255, 255, 255, .04)
		);
}


.tr-online-store-journey__principle-visual small {
	color:
		rgba(255, 255, 255, .18);

	font-size: 5px;
	font-weight: 850;
	letter-spacing: .09em;
}


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

.tr-online-store-journey__principle-copy > span {
	display: block;

	margin-bottom: 12px;

	color:
		var(--tr-green);

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


.tr-online-store-journey__principle-copy h3 {
	max-width: 780px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(28px, 3.15vw, 44px);

	font-weight: 850;
	line-height: 1.04;
	letter-spacing: -.043em;
}


.tr-online-store-journey__principle-copy p {
	max-width: 730px;

	margin:
		18px
		0
		0;

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

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


/* =========================================================
 * Laptop
 * ======================================================= */

@media (max-width: 1180px) {

	.tr-online-store-journey__track {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		min-height: 0;

		padding:
			30px;
	}


	.tr-online-store-journey__track-line {
		display: none;
	}


	.tr-online-store-journey__stage {
		grid-template-rows:
			60px
			minmax(0, 1fr);

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

		border-bottom:
			1px solid #e3e9e5;
	}


	.tr-online-store-journey__stage:nth-child(3n) {
		border-right: 0;
	}


	.tr-online-store-journey__stage:nth-last-child(-n + 3) {
		border-bottom: 0;
	}

}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 850px) {

	.tr-online-store-journey__track {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.tr-online-store-journey__stage:nth-child(3n) {
		border-right:
			1px solid #e3e9e5;
	}


	.tr-online-store-journey__stage:nth-child(2n) {
		border-right: 0;
	}


	.tr-online-store-journey__stage:nth-last-child(-n + 3) {
		border-bottom:
			1px solid #e3e9e5;
	}


	.tr-online-store-journey__stage:nth-last-child(-n + 2) {
		border-bottom: 0;
	}


	.tr-online-store-journey__principle {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 720px) {

	.tr-online-store-journey {
		padding:
			90px
			16px;
	}


	.tr-online-store-journey__header {
		grid-template-columns: 1fr;
		gap: 28px;

		margin-bottom: 50px;
	}


	.tr-online-store-journey__header h2 {
		font-size:
			clamp(40px, 11vw, 58px);
	}


	.tr-online-store-journey__canvas-title {
		grid-template-columns: 1fr;
		gap: 10px;

		padding:
			28px 22px;
	}


	.tr-online-store-journey__track {
		grid-template-columns: 1fr;

		padding:
			0;
	}


	.tr-online-store-journey__stage {
		grid-template-columns:
			58px
			minmax(0, 1fr);

		grid-template-rows: auto;

		gap: 16px;

		min-height: 0;

		padding:
			26px 20px;

		border-right: 0 !important;
		border-bottom:
			1px solid #e3e9e5 !important;
	}


	.tr-online-store-journey__stage:last-child {
		border-bottom:
			0 !important;
	}


	.tr-online-store-journey__stage-node {
		align-items: flex-start;
		flex-direction: column;
		gap: 9px;
	}


	.tr-online-store-journey__stage-node > span {
		min-width: 0;
		width: 48px;
		height: 29px;
		padding:
			0 6px;

		overflow: hidden;
	}


	.tr-online-store-journey__stage-content {
		padding-top: 0;
	}


	.tr-online-store-journey__principle {
		padding:
			36px 24px;
	}


	.tr-online-store-journey__principle-visual {
		display: none;
	}

}