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


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

.tr-blog-archive {
	position: relative;

	overflow: hidden;

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

	color:
		#0b1712;

	background:
		#f4f6f3;
}


.tr-blog-archive__shell {
	width:
		min(100%, var(--tr-container-wide));

	margin:
		auto;
}


/* =========================================================
 * Intro
 * ======================================================= */

.tr-blog-archive__intro {
	width:
		min(100%, var(--tr-container));

	margin:
		0
		auto
		clamp(46px, 5vw, 70px);
}


.tr-blog-archive__intro > 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-archive__intro > div {
	display: grid;

	grid-template-columns:
		minmax(0, 0.96fr)
		minmax(330px, 0.46fr);

	align-items:
		end;

	gap:
		clamp(50px, 7vw, 110px);
}


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

	color:
		#0b1712 !important;

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

	font-weight:
		900;

	line-height:
		0.98;

	letter-spacing:
		-0.055em;
}


.tr-blog-archive__intro p {
	margin: 0;

	color:
		#66746c !important;

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

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

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


/* =========================================================
 * Filters
 * ======================================================= */

.tr-blog-archive__filters {
	display: flex;
	flex-wrap: wrap;

	gap:
		8px;

	margin-bottom:
		26px;
}


.tr-blog-archive__filters a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height:
		40px;

	padding:
		0
		15px;

	color:
		#66746c !important;

	background:
		#ffffff;

	border:
		1px solid #dfe6e2;

	border-radius:
		999px;

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

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

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

	text-transform:
		uppercase;

	text-decoration:
		none !important;
}


.tr-blog-archive__filters a.is-active {
	color:
		#06100d !important;

	background:
		var(--tr-green);

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


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

.tr-blog-archive__grid {
	display: grid;

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

	gap:
		14px;
}


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

.tr-blog-archive__card {
	overflow: hidden;

	background:
		#ffffff;

	border:
		1px solid #e0e7e2;

	border-radius:
		20px;
}


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

.tr-blog-archive__image {
	display: block;

	height:
		220px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#153526,
			#5f8a6f
		);
}


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

	object-fit:
		cover;
}


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

	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			145deg,
			#153526,
			#5f8a6f
		);
}


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

.tr-blog-archive__card-content {
	padding:
		22px;
}


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

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

	gap:
		8px
		12px;
}


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

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

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

	text-transform:
		uppercase;
}


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

	text-decoration:
		none !important;
}


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


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

.tr-blog-archive__card h3 {
	margin:
		14px
		0
		0;

	color:
		#0b1712 !important;

	font-size:
		clamp(22px, 1.8vw, 28px);

	font-weight:
		900;

	line-height:
		1.08;

	letter-spacing:
		-0.04em;
}


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

	text-decoration:
		none !important;
}


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

.tr-blog-archive__card p {
	margin:
		14px
		0
		0;

	color:
		#728078 !important;

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

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

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


/* =========================================================
 * Pagination
 * ======================================================= */

.tr-blog-archive__pagination {
	margin-top:
		34px;
}


.tr-blog-archive__pagination ul {
	display: flex;
	flex-wrap: wrap;

	gap:
		8px;

	margin: 0;
	padding: 0;

	list-style:
		none;
}


.tr-blog-archive__pagination a,
.tr-blog-archive__pagination span {
	display: grid;
	place-items: center;

	min-width:
		40px;

	height:
		40px;

	padding:
		0
		12px;

	color:
		#0b1712 !important;

	background:
		#ffffff;

	border:
		1px solid #dfe6e2;

	border-radius:
		999px;

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

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

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

	text-decoration:
		none !important;
}


.tr-blog-archive__pagination .current {
	background:
		var(--tr-green);

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


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

@media (max-width: 980px) {

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

}


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

@media (max-width: 720px) {

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


	.tr-blog-archive__intro > div {
		grid-template-columns:
			1fr;

		gap:
			26px;
	}


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


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

}