/* =========================================================
 * Tech Resolve — Blog Selected
 * Version: 1.1.0
 * Typography System Integration
 * ======================================================= */


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

.tr-blog-selected {
	position: relative;

	overflow: hidden;

	padding:
		clamp(105px, 9vw, 155px)
		var(--tr-gutter);

	color:
		#0b1712;

	background:
		#ffffff;
}


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

.tr-blog-selected__shell {
	display: grid;

	grid-template-columns:
		minmax(330px, 0.48fr)
		minmax(650px, 1fr);

	align-items:
		start;

	gap:
		clamp(64px, 8vw, 120px);

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

	margin:
		auto;
}


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

.tr-blog-selected__copy {
	position: sticky;

	top:
		120px;
}


.tr-blog-selected__copy > span {
	display: block;

	margin-bottom:
		20px;

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

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.15em;
}


.tr-blog-selected__copy h2 {
	margin: 0;

	color:
		#0b1712 !important;

	font-size:
		clamp(44px, 4.5vw, 64px);

	font-weight:
		900;

	line-height:
		0.98;

	letter-spacing:
		-0.055em;
}


.tr-blog-selected__copy p {
	margin:
		28px
		0
		0;

	color:
		#66746c !important;

	font-size:
		var(--tr-text-body);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-body);
}


/* =========================================================
 * Marker
 * ======================================================= */

.tr-blog-selected__marker {
	display: flex;
	align-items: center;

	gap:
		10px;

	margin-top:
		34px;

	padding:
		13px
		15px;

	color:
		rgba(255, 255, 255, 0.42);

	background:
		#0b1712;

	border-radius:
		999px;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.08em;
}


.tr-blog-selected__marker i {
	flex: 1;

	height:
		1px;

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


.tr-blog-selected__marker strong {
	color:
		var(--tr-green) !important;

	font-size:
		inherit;

	font-weight:
		inherit;
}


/* =========================================================
 * Stack
 * ======================================================= */

.tr-blog-selected__stack {
	display: grid;

	gap:
		14px;
}


/* =========================================================
 * Card
 * ======================================================= */

.tr-blog-selected__card {
	display: grid;

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

	align-items:
		center;

	gap:
		20px;

	min-height:
		245px;

	padding:
		18px;

	background:
		#f4f6f3;

	border:
		1px solid #e0e7e2;

	border-radius:
		22px;
}


.tr-blog-selected__card:nth-child(even) {
	transform:
		translateX(32px);
}


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

.tr-blog-selected__number {
	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	color:
		#06100d;

	background:
		var(--tr-green);

	border-radius:
		50%;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		1;
}


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

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

	gap:
		8px
		12px;
}


.tr-blog-selected__meta a,
.tr-blog-selected__meta span {
	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.06em;

	text-transform:
		uppercase;
}


.tr-blog-selected__meta a {
	color:
		var(--tr-green-deep) !important;

	text-decoration:
		none !important;
}


.tr-blog-selected__meta span {
	color:
		#8b988f;
}


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

.tr-blog-selected__card h3 {
	margin:
		12px
		0
		0;

	color:
		#0b1712 !important;

	font-size:
		clamp(24px, 2.1vw, 32px);

	font-weight:
		900;

	line-height:
		1.06;

	letter-spacing:
		-0.04em;
}


.tr-blog-selected__card h3 a {
	color:
		inherit !important;

	text-decoration:
		none !important;
}


/* =========================================================
 * Description
 * ======================================================= */

.tr-blog-selected__card p {
	margin:
		12px
		0
		0;

	color:
		#728078 !important;

	font-size:
		var(--tr-text-card);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-card);
}


/* =========================================================
 * Image
 * ======================================================= */

.tr-blog-selected__image {
	display: block;

	height:
		190px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#173525,
			#4a765d
		);

	border-radius:
		14px;
}


.tr-blog-selected__image img {
	width: 100%;
	height: 100%;

	object-fit:
		cover;
}


.tr-blog-selected__image > span {
	display: block;

	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			145deg,
			#173525,
			#4a765d
		);
}


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

@media (max-width: 1080px) {

	.tr-blog-selected__shell {
		grid-template-columns:
			1fr;
	}


	.tr-blog-selected__copy {
		position:
			relative;

		top:
			auto;
	}


	.tr-blog-selected__card:nth-child(even) {
		transform:
			none;
	}

}


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

@media (max-width: 720px) {

	.tr-blog-selected {
		padding:
			86px
			16px;
	}


	.tr-blog-selected__copy h2 {
		font-size:
			clamp(40px, 10.5vw, 56px);
	}


	.tr-blog-selected__card {
		grid-template-columns:
			38px
			1fr;

		min-height:
			0;
	}


	.tr-blog-selected__image {
		grid-column:
			1
			/
			-1;

		grid-row:
			1;

		height:
			220px;
	}

}