/* =========================================================
 * Tech Resolve — Editorial Insights
 * Version: 1.0.0
 * ======================================================= */


/* =========================================================
 * Section
 * ======================================================= */

.tr-insights {
	position: relative;
	isolation: isolate;

	padding:
		88px
		0
		92px;

	overflow: hidden;

	background:
		#f4f8f5;
}


.tr-insights__shell {
	position: relative;

	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-wide)
	);

	margin-inline: auto;
}


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

.tr-insights__background {
	position: absolute;
	z-index: -2;

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-insights__grid {
	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(
			rgba(8, 72, 53, 0.032) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(8, 72, 53, 0.032) 1px,
			transparent 1px
		);

	background-size:
		54px
		54px;

	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000 15%,
			#000 87%,
			transparent
		);
}


.tr-insights__glow {
	position: absolute;

	border-radius: 50%;
}


.tr-insights__glow--one {
	top: -380px;
	left: -280px;

	width: 760px;
	height: 760px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.10),
			transparent 70%
		);
}


.tr-insights__glow--two {
	right: -320px;
	bottom: -420px;

	width: 800px;
	height: 800px;

	background:
		radial-gradient(
			circle,
			rgba(20, 215, 232, 0.06),
			rgba(135, 87, 255, 0.018) 45%,
			transparent 72%
		);
}


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

.tr-insights__header {
	display: grid;

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

	align-items: end;

	gap:
		clamp(50px, 8vw, 135px);

	margin-bottom:
		50px;
}


.tr-insights__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-bottom: 18px;

	color:
		#0baa5c;

	font-size:
		clamp(10px, 0.72vw, 12px);

	font-weight: 830;

	letter-spacing:
		0.15em;
}


.tr-insights__eyebrow-line {
	display: block;

	width: 34px;
	height: 1px;

	background:
		var(--tr-green);

	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.25);
}


.tr-insights__title {
	max-width: 870px;

	margin: 0;

	color:
		#101713;

	font-size:
		clamp(44px, 4.7vw, 74px);

	font-weight: 790;

	line-height:
		1;

	letter-spacing:
		-0.052em;

	text-wrap: balance;
}


.tr-insights__header-side {
	display: grid;
	gap: 23px;

	justify-items: start;
}


.tr-insights__description {
	max-width: 570px;

	margin: 0;

	color:
		#68766f;

	font-size:
		clamp(14px, 1vw, 17px);

	line-height:
		1.72;
}


/* =========================================================
 * All Articles
 * ======================================================= */

.tr-insights__all {
	display: inline-flex;
	align-items: center;
	gap: 13px;

	color:
		#17241e;

	font-size: 12px;
	font-weight: 760;

	text-decoration: none;
}


.tr-insights__all-icon {
	display: grid;
	place-items: center;

	width: 36px;
	height: 36px;

	border:
		1px solid rgba(7, 53, 40, 0.10);

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.64);

	color:
		#0bae5e;

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


.tr-insights__all-icon svg {
	width: 16px;
	height: 16px;
}


.tr-insights__all:hover
.tr-insights__all-icon {
	color:
		#03170d;

	background:
		var(--tr-green);

	transform:
		translateX(5px)
		rotate(-35deg);
}


/* =========================================================
 * Magazine
 * ======================================================= */

.tr-insights__magazine {
	display: grid;

	grid-template-columns:
		minmax(0, 1.38fr)
		minmax(340px, 0.62fr);

	grid-template-rows:
		repeat(2, minmax(0, 1fr));

	gap: 14px;

	min-height: 650px;
}


/* =========================================================
 * Article
 * ======================================================= */

.tr-insights__article {
	position: relative;
	isolation: isolate;

	min-width: 0;

	overflow: hidden;

	border:
		1px solid rgba(8, 51, 39, 0.08);

	border-radius: 28px;

	background:
		#0b1815;

	box-shadow:
		0 24px 58px rgba(7, 40, 31, 0.08);

	transform:
		translateZ(0);

	transition:
		transform 550ms var(--tr-ease),
		box-shadow 350ms ease,
		border-color 350ms ease;
}


.tr-insights__article--1 {
	grid-row:
		1
		/
		3;

	min-height: 650px;
}


.tr-insights__article--2,
.tr-insights__article--3 {
	min-height: 318px;
}


.tr-insights__article:hover,
.tr-insights__article:focus-within {
	border-color:
		rgba(25, 224, 120, 0.24);

	box-shadow:
		0 35px 80px rgba(7, 40, 31, 0.14),
		0 0 40px rgba(25, 224, 120, 0.045);

	transform:
		translateY(-6px);
}


/* =========================================================
 * Link
 * ======================================================= */

.tr-insights__article-link {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;

	color:
		inherit;

	text-decoration: none;
}


/* =========================================================
 * Media
 * ======================================================= */

.tr-insights__media {
	position: absolute;

	inset: 0;

	overflow: hidden;
}


.tr-insights__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit:
		cover;

	object-position:
		center;

	filter:
		saturate(0.88)
		contrast(1.02)
		brightness(0.79);

	transform:
		scale(1.025);

	transition:
		transform 900ms var(--tr-ease),
		filter 500ms ease;
}


.tr-insights__article:hover
.tr-insights__image,
.tr-insights__article:focus-within
.tr-insights__image {
	filter:
		saturate(1)
		contrast(1.03)
		brightness(0.88);

	transform:
		scale(1.07);
}


/* =========================================================
 * Placeholder
 * ======================================================= */

.tr-insights__placeholder {
	position: absolute;

	inset: 0;

	display: grid;
	place-content: center;

	gap: 14px;

	background:
		linear-gradient(
			135deg,
			#0b211a,
			#091820 55%,
			#0b1020
		);
}


.tr-insights__placeholder span {
	display: block;

	width: 180px;
	height: 13px;

	border-radius: 30px;

	background:
		rgba(255, 255, 255, 0.08);
}


.tr-insights__placeholder span:first-child {
	width: 75px;

	background:
		var(--tr-green);
}


.tr-insights__placeholder span:last-child {
	width: 125px;
}


/* =========================================================
 * Overlay
 * ======================================================= */

.tr-insights__media-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(3, 13, 11, 0.05) 0%,
			rgba(4, 15, 13, 0.14) 38%,
			rgba(3, 14, 12, 0.80) 78%,
			rgba(3, 14, 12, 0.96) 100%
		),
		linear-gradient(
			115deg,
			rgba(25, 224, 120, 0.10),
			transparent 42%
		);

	transition:
		background 450ms ease;
}


.tr-insights__article--2
.tr-insights__media-overlay,
.tr-insights__article--3
.tr-insights__media-overlay {
	background:
		linear-gradient(
			180deg,
			rgba(3, 13, 11, 0.06),
			rgba(3, 14, 12, 0.82) 72%,
			rgba(3, 14, 12, 0.96)
		),
		linear-gradient(
			115deg,
			rgba(25, 224, 120, 0.07),
			transparent 48%
		);
}


/* =========================================================
 * Media Grid
 * ======================================================= */

.tr-insights__media-grid {
	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px
		);

	background-size:
		40px
		40px;

	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000
		);

	opacity: 0;

	transition:
		opacity 450ms ease;
}


.tr-insights__article:hover
.tr-insights__media-grid {
	opacity: 0.55;
}


/* =========================================================
 * Number
 * ======================================================= */

.tr-insights__number {
	position: absolute;

	top: 25px;
	left: 25px;

	color:
		transparent;

	font-size:
		clamp(58px, 6vw, 96px);

	font-weight: 860;

	line-height:
		0.76;

	letter-spacing:
		-0.08em;

	-webkit-text-stroke:
		1px
		rgba(255, 255, 255, 0.30);

	transition:
		-webkit-text-stroke 350ms ease,
		transform 500ms var(--tr-ease);
}


.tr-insights__article--2
.tr-insights__number,
.tr-insights__article--3
.tr-insights__number {
	font-size:
		clamp(42px, 4vw, 62px);
}


.tr-insights__article:hover
.tr-insights__number {
	-webkit-text-stroke:
		1px
		rgba(25, 224, 120, 0.75);

	transform:
		translateY(-3px);
}


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

.tr-insights__signal {
	position: absolute;

	top: 27px;
	right: 27px;

	display: grid;
	place-items: center;

	width: 22px;
	height: 22px;

	border:
		1px solid rgba(25, 224, 120, 0.22);

	border-radius: 50%;

	background:
		rgba(3, 20, 14, 0.50);
}


.tr-insights__signal span {
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 13px rgba(25, 224, 120, 0.70);
}


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

.tr-insights__article-content {
	position: absolute;

	z-index: 5;

	right: 0;
	bottom: 0;
	left: 0;

	padding:
		34px;

	color:
		#ffffff;
}


.tr-insights__article--1
.tr-insights__article-content {
	padding:
		clamp(30px, 4vw, 50px);
}


.tr-insights__article--2
.tr-insights__article-content,
.tr-insights__article--3
.tr-insights__article-content {
	padding:
		25px;
}


/* =========================================================
 * Meta
 * ======================================================= */

.tr-insights__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap:
		8px
		14px;

	margin-bottom:
		15px;

	color:
		rgba(229, 240, 235, 0.58);

	font-size:
		9px;

	font-weight:
		700;

	letter-spacing:
		0.065em;

	text-transform:
		uppercase;
}


.tr-insights__category {
	color:
		var(--tr-green);
}


.tr-insights__date,
.tr-insights__reading-time {
	position: relative;

	padding-left:
		13px;
}


.tr-insights__date::before,
.tr-insights__reading-time::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 4px;
	height: 4px;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.25);

	transform:
		translateY(-50%);
}


/* =========================================================
 * Article Title
 * ======================================================= */

.tr-insights__article-title {
	max-width: 720px;

	margin:
		0
		0
		24px;

	color:
		#ffffff;

	font-size:
		clamp(31px, 3.2vw, 51px);

	font-weight:
		760;

	line-height:
		1.05;

	letter-spacing:
		-0.045em;

	text-wrap:
		balance;
}


.tr-insights__article--2
.tr-insights__article-title,
.tr-insights__article--3
.tr-insights__article-title {
	max-width: 440px;

	margin-bottom: 16px;

	font-size:
		clamp(19px, 1.55vw, 25px);

	line-height:
		1.12;
}


/* =========================================================
 * Read
 * ======================================================= */

.tr-insights__read {
	display: inline-flex;
	align-items: center;

	gap: 13px;

	color:
		rgba(239, 248, 244, 0.78);

	font-size:
		11px;

	font-weight:
		720;
}


.tr-insights__read-icon {
	display: grid;
	place-items: center;

	width: 35px;
	height: 35px;

	border:
		1px solid rgba(255, 255, 255, 0.13);

	border-radius: 50%;

	background:
		rgba(3, 20, 14, 0.46);

	color:
		var(--tr-green);

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


.tr-insights__read-icon svg {
	width: 16px;
	height: 16px;
}


.tr-insights__article:hover
.tr-insights__read-icon {
	color:
		#03170d;

	background:
		var(--tr-green);

	transform:
		translateX(5px)
		rotate(-35deg);
}


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

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

	gap: 30px;

	margin-top:
		22px;

	color:
		#87948e;

	font-size:
		8px;

	font-weight:
		800;

	letter-spacing:
		0.13em;
}


.tr-insights__footer-line {
	display: flex;
	align-items: center;

	gap: 6px;

	flex: 1;
}


.tr-insights__footer-line span {
	display: block;

	width: 7px;
	height: 7px;

	border-radius: 20px;

	background:
		rgba(6, 50, 38, 0.13);
}


.tr-insights__footer-line span:first-child {
	width: 58px;

	background:
		var(--tr-green);

	box-shadow:
		0 0 13px rgba(25, 224, 120, 0.20);
}


/* =========================================================
 * Entrance
 * ======================================================= */

.tr-has-insights-js
.tr-insights__header,
.tr-has-insights-js
.tr-insights__article {
	opacity: 0;

	transform:
		translateY(25px);
}


.tr-has-insights-js
.tr-insights.is-inview
.tr-insights__header,
.tr-has-insights-js
.tr-insights.is-inview
.tr-insights__article {
	opacity: 1;

	transform:
		translateY(0);

	transition:
		opacity 800ms ease,
		transform 950ms var(--tr-ease);
}


.tr-has-insights-js
.tr-insights.is-inview
.tr-insights__article--1 {
	transition-delay:
		100ms;
}


.tr-has-insights-js
.tr-insights.is-inview
.tr-insights__article--2 {
	transition-delay:
		190ms;
}


.tr-has-insights-js
.tr-insights.is-inview
.tr-insights__article--3 {
	transition-delay:
		280ms;
}


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

@media (max-width: 1050px) {

	.tr-insights__header {
		grid-template-columns:
			1fr;

		gap: 22px;
	}


	.tr-insights__description {
		max-width: 720px;
	}


	.tr-insights__magazine {
		grid-template-columns:
			1.2fr
			0.8fr;

		min-height: 590px;
	}


	.tr-insights__article--1 {
		min-height: 590px;
	}


	.tr-insights__article--2,
	.tr-insights__article--3 {
		min-height: 288px;
	}

}


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

@media (max-width: 720px) {

	.tr-insights {
		padding:
			58px
			0
			62px;
	}


	.tr-insights__shell {
		width:
			calc(100% - 24px);
	}


	.tr-insights__header {
		margin-bottom:
			34px;
	}


	.tr-insights__title {
		font-size:
			clamp(38px, 10.5vw, 51px);
	}


	.tr-insights__description {
		font-size:
			15px;
	}


	.tr-insights__magazine {
		display: grid;

		grid-template-columns:
			1fr;

		grid-template-rows:
			auto;

		gap: 11px;

		min-height: 0;
	}


	.tr-insights__article--1,
	.tr-insights__article--2,
	.tr-insights__article--3 {
		grid-row: auto;

		min-height:
			390px;
	}


	.tr-insights__article--2,
	.tr-insights__article--3 {
		min-height:
			330px;
	}


	.tr-insights__article {
		border-radius:
			22px;
	}


	.tr-insights__article-content,
	.tr-insights__article--1
	.tr-insights__article-content,
	.tr-insights__article--2
	.tr-insights__article-content,
	.tr-insights__article--3
	.tr-insights__article-content {
		padding:
			23px;
	}


	.tr-insights__number,
	.tr-insights__article--2
	.tr-insights__number,
	.tr-insights__article--3
	.tr-insights__number {
		top: 21px;
		left: 21px;

		font-size:
			46px;
	}


	.tr-insights__signal {
		top: 21px;
		right: 21px;
	}


	.tr-insights__article-title {
		font-size:
			clamp(26px, 8vw, 37px);
	}


	.tr-insights__article--2
	.tr-insights__article-title,
	.tr-insights__article--3
	.tr-insights__article-title {
		font-size:
			24px;
	}


	.tr-insights__meta {
		font-size:
			8px;
	}


	.tr-insights__all {
		font-size:
			11px;
	}

}


/* =========================================================
 * Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.tr-insights__article,
	.tr-insights__image,
	.tr-insights__number,
	.tr-insights__read-icon,
	.tr-insights__all-icon {
		transition: none;
	}


	.tr-has-insights-js
	.tr-insights__header,
	.tr-has-insights-js
	.tr-insights__article {
		opacity: 1;

		transform: none;

		transition: none;
	}

}