/* =========================================================
   ISGAMER — BLOG / ARTICLE LIBRARY
   Final Stable Version
========================================================= */


/* =========================================================
   01 — VARIABLES
========================================================= */

.isg-blog {
	--blog-bg: #05070c;

	--blog-panel: #0b1420;
	--blog-panel-2: #0e1928;

	--blog-line:
		rgba(255, 255, 255, .09);

	--blog-line-strong:
		rgba(255, 255, 255, .14);

	--blog-text: #f7f9ff;
	--blog-copy: #b8c3d3;
	--blog-muted: #8793a6;

	--blog-cyan: #39e7ff;
	--blog-purple: #7657ff;
	--blog-pink: #ff3d81;

	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;

	color: var(--blog-text);
}


/* =========================================================
   02 — LOCAL RESET
========================================================= */

.isg-blog *,
.isg-blog *::before,
.isg-blog *::after {
	box-sizing: border-box;
}


.isg-blog a {
	text-decoration: none !important;
}


.isg-blog img {
	display: block;

	max-width: 100%;
}


/* =========================================================
   03 — CONTAINER
========================================================= */

.isg-blog__container {
	width:
		min(
			1280px,
			calc(100% - 80px)
		);

	margin: 0 auto;

	padding: 0;
}


/* =========================================================
   04 — HERO
========================================================= */

.isg-blog__hero {
	padding:
		68px 0 62px;

	border-bottom:
		1px solid var(--blog-line);
}


.isg-blog__hero-main {
	max-width: 1050px;
}


/* =========================================================
   EYEBROW
========================================================= */

.isg-blog__eyebrow {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 27px;

	color: var(--blog-pink);

	font-size: 10px;
	font-weight: 900;

	letter-spacing: .16em;

	text-transform: uppercase;
}


.isg-blog__eyebrow-number {
	display: grid;

	place-items: center;

	width: 44px;
	height: 38px;

	flex: 0 0 44px;

	border:
		1px solid
		rgba(255, 61, 129, .38);

	border-radius: 8px;

	background:
		rgba(255, 61, 129, .05);

	color: var(--blog-pink);
}


.isg-blog__eyebrow-line {
	display: block;

	width: 27px;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--blog-pink),
			var(--blog-purple),
			var(--blog-cyan)
		);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.isg-blog__hero-content {
	display: grid;

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

	align-items: end;

	gap:
		clamp(
			55px,
			7vw,
			90px
		);
}


.isg-blog__hero-copy {
	max-width: 720px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.isg-blog__hero h1 {
	margin: 0 !important;

	color: #ffffff !important;

	font-size:
		clamp(
			52px,
			4.6vw,
			72px
		) !important;

	font-weight: 950 !important;

	line-height: .94 !important;

	letter-spacing:
		-.052em !important;

	text-transform: uppercase;
}


.isg-blog__hero h1 span {
	display: block;

	margin-top: 7px;

	background:
		linear-gradient(
			90deg,
			#ff3d81 0%,
			#bd46cd 48%,
			#7657ff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color:
		transparent;
}


/* =========================================================
   HERO TEXT
========================================================= */

.isg-blog__hero-copy > p {
	max-width: 620px;

	margin: 25px 0 0 !important;

	color:
		var(--blog-copy) !important;

	font-size: 15px !important;

	line-height: 1.7 !important;
}


/* =========================================================
   ARTICLE COUNTER
========================================================= */

.isg-blog__hero-stat {
	position: relative;

	padding:
		21px 0 5px 25px;

	border-left:
		1px solid
		rgba(57, 231, 255, .18);
}


.isg-blog__hero-stat::before {
	content: "";

	position: absolute;

	top: 0;
	left: -1px;

	width: 2px;
	height: 37px;

	background:
		linear-gradient(
			180deg,
			var(--blog-cyan),
			var(--blog-purple)
		);
}


.isg-blog__hero-stat > span {
	display: block;

	margin-bottom: 17px;

	color:
		var(--blog-cyan);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .16em;

	white-space: nowrap;
}


.isg-blog__hero-number {
	display: flex;

	align-items: flex-end;

	gap: 13px;
}


.isg-blog__hero-number strong {
	color: #e7edf6;

	font-size: 66px;
	font-weight: 950;

	line-height: .78;

	letter-spacing: -.06em;
}


.isg-blog__hero-number > div {
	display: flex;

	flex-direction: column;

	gap: 3px;

	padding-bottom: 1px;
}


.isg-blog__hero-number small {
	color:
		var(--blog-muted);

	font-size: 8px;
	font-weight: 900;

	line-height: 1.15;

	letter-spacing: .13em;
}


/* =========================================================
   05 — AD SYSTEM
========================================================= */

/*
 * Empty ad slots NEVER appear.
 */

.isg-blog .isg-ad-slot {
	display: none;
}


/*
 * As soon as you insert anything inside:
 */

.isg-blog .isg-ad-slot:not(:empty) {
	display: block;
}


/* TOP / BOTTOM BANNER */

.isg-blog .isg-ad-slot--blog-top:not(:empty),
.isg-blog .isg-ad-slot--blog-bottom:not(:empty) {
	width:
		min(
			970px,
			100%
		);

	margin:
		34px auto;

	text-align: center;
}


/* IN FEED */

.isg-blog__grid
.isg-ad-slot--blog-feed:not(:empty) {
	grid-column:
		1 / -1;

	width: 100%;

	margin: 5px 0;

	text-align: center;
}


/* FUTURE SIDEBAR */

.isg-blog
.isg-ad-slot--floating-sidebar {
	display: none;
}


/* =========================================================
   06 — CONTROLS
========================================================= */

.isg-blog__controls {
	padding:
		54px 0 46px;

	border-bottom:
		1px solid var(--blog-line);
}


.isg-blog__controls-head {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 45px;

	margin-bottom: 27px;
}


.isg-blog__controls-kicker {
	display: block;

	margin-bottom: 7px;

	color: var(--blog-pink);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .16em;
}


.isg-blog__controls-head h2 {
	margin: 0 !important;

	color: #fff !important;

	font-size:
		clamp(
			30px,
			3vw,
			40px
		) !important;

	font-weight: 950 !important;

	line-height: 1.08 !important;

	letter-spacing:
		-.035em !important;
}


.isg-blog__controls-head > p {
	max-width: 420px;

	margin: 0 !important;

	color:
		var(--blog-muted) !important;

	font-size: 13px !important;

	line-height: 1.65 !important;
}


/* =========================================================
   07 — SEARCH
========================================================= */

.isg-blog__search {
	display: grid;

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

	gap: 10px;

	width: 100%;

	margin:
		0 0 20px;
}


.isg-blog__search-field {
	position: relative;

	display: flex;

	align-items: center;
}


.isg-blog__search-icon {
	position: absolute;

	left: 19px;

	z-index: 2;

	color:
		var(--blog-cyan);

	font-size: 22px;

	pointer-events: none;
}


.isg-blog__search
input[type="search"] {
	width: 100% !important;
	height: 57px !important;

	margin: 0 !important;

	padding:
		0 22px 0 53px !important;

	border:
		1px solid
		var(--blog-line-strong) !important;

	border-radius:
		10px !important;

	outline: none !important;

	background:
		linear-gradient(
			145deg,
			#0d1928,
			#09131f
		) !important;

	box-shadow:
		none !important;

	color:
		#fff !important;

	font-family:
		inherit !important;

	font-size:
		14px !important;

	transition:
		border-color .22s ease,
		box-shadow .22s ease;
}


.isg-blog__search
input[type="search"]::placeholder {
	color:
		#667386 !important;
}


.isg-blog__search
input[type="search"]:focus {
	border-color:
		rgba(
			57,
			231,
			255,
			.48
		) !important;

	box-shadow:
		0 0 0 3px
		rgba(
			57,
			231,
			255,
			.04
		) !important;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.isg-blog__search button {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	gap: 12px;

	height: 57px !important;

	margin: 0 !important;

	padding:
		0 22px !important;

	border:
		1px solid
		rgba(
			57,
			231,
			255,
			.37
		) !important;

	border-radius:
		10px !important;

	background:
		linear-gradient(
			135deg,
			rgba(
				57,
				231,
				255,
				.10
			),
			rgba(
				118,
				87,
				255,
				.08
			)
		) !important;

	color:
		#71efff !important;

	font-size:
		12px !important;

	font-weight:
		900 !important;

	cursor: pointer;

	transition:
		transform .2s ease,
		border-color .2s ease;
}


.isg-blog__search button:hover {
	transform:
		translateY(-2px);

	border-color:
		rgba(
			57,
			231,
			255,
			.65
		) !important;
}


/* =========================================================
   08 — FILTER BAR
========================================================= */

.isg-blog__filter-bar {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 25px;
}


.isg-blog__filters {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;
}


.isg-blog__filters a {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 38px;

	padding:
		0 16px;

	border:
		1px solid
		var(--blog-line);

	border-radius: 8px;

	background:
		rgba(
			255,
			255,
			255,
			.018
		);

	color:
		var(--blog-muted) !important;

	font-size: 11px;
	font-weight: 850;

	transition:
		transform .2s ease,
		border-color .2s ease,
		color .2s ease,
		background .2s ease;
}


.isg-blog__filters a:hover {
	transform:
		translateY(-2px);

	border-color:
		rgba(
			57,
			231,
			255,
			.28
		);

	color:
		#fff !important;
}


.isg-blog__filters
a.is-active {
	border-color:
		rgba(
			57,
			231,
			255,
			.42
		);

	background:
		linear-gradient(
			135deg,
			rgba(
				57,
				231,
				255,
				.08
			),
			rgba(
				118,
				87,
				255,
				.05
			)
		);

	color:
		var(--blog-cyan) !important;
}


/* =========================================================
   09 — SORT
========================================================= */

.isg-blog__sort {
	display: flex;

	align-items: center;

	gap: 10px;

	margin: 0;
}


.isg-blog__sort label {
	margin: 0;

	color:
		var(--blog-muted);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .1em;

	text-transform: uppercase;
}


.isg-blog__sort select {
	min-width: 120px;
	height: 38px !important;

	margin: 0 !important;

	padding:
		0 34px 0 13px !important;

	border:
		1px solid
		var(--blog-line) !important;

	border-radius:
		8px !important;

	background-color:
		#0c1725 !important;

	color:
		#dbe4ef !important;

	font-size:
		11px !important;

	font-weight: 800;

	cursor: pointer;
}


/* =========================================================
   10 — ARTICLES
========================================================= */

.isg-blog__articles {
	padding:
		63px 0 95px;
}


.isg-blog__articles-head {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 45px;

	margin-bottom: 31px;
}


.isg-blog__articles-head
> div:first-child
> span {
	display: block;

	margin-bottom: 8px;

	color: var(--blog-pink);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .16em;

	text-transform: uppercase;
}


.isg-blog__articles-head h2 {
	position: relative;

	margin: 0 !important;

	padding-bottom: 15px;

	color: #fff !important;

	font-size:
		clamp(
			34px,
			3.5vw,
			46px
		) !important;

	font-weight: 950 !important;

	line-height: 1.05 !important;

	letter-spacing:
		-.04em !important;
}


.isg-blog__articles-head h2::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: 0;

	width: 70px;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--blog-pink),
			var(--blog-purple),
			var(--blog-cyan)
		);
}


/* =========================================================
   RESULTS
========================================================= */

.isg-blog__result-count {
	display: flex;

	align-items: baseline;

	gap: 9px;
}


.isg-blog__result-count strong {
	color: #fff;

	font-size: 31px;
	font-weight: 950;
}


.isg-blog__result-count span {
	color:
		var(--blog-muted);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .13em;
}


/* =========================================================
   11 — ARTICLE GRID
========================================================= */

.isg-blog__grid {
	display: grid !important;

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

	gap:
		22px !important;

	align-items:
		stretch !important;

	width:
		100% !important;
}


/* =========================================================
   12 — CARD
========================================================= */

.isg-blog__card {
	position: relative;

	display: flex !important;

	flex-direction:
		column !important;

	width:
		100% !important;

	min-width:
		0 !important;

	height: 100%;

	margin:
		0 !important;

	padding:
		0 !important;

	overflow: hidden;

	border:
		1px solid
		var(--blog-line);

	border-radius:
		15px;

	background:
		linear-gradient(
			180deg,
			#0e1b2b,
			#09131f
		);

	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}


.isg-blog__card::before {
	content: "";

	position: absolute;

	z-index: 3;

	top: 0;
	left: 23px;

	width: 53px;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--blog-cyan),
			var(--blog-purple),
			transparent
		);

	opacity: 0;
}


.isg-blog__card:hover {
	transform:
		translateY(-6px);

	border-color:
		rgba(
			57,
			231,
			255,
			.28
		);

	box-shadow:
		0 24px 55px
		rgba(
			0,
			0,
			0,
			.23
		);
}


.isg-blog__card:hover::before {
	opacity: 1;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.isg-blog__card-image {
	position: relative;

	display: block;

	width: 100%;

	aspect-ratio:
		16 / 9;

	overflow: hidden;

	background:
		#101d2d;
}


.isg-blog__card-image img {
	width: 100% !important;
	height: 100% !important;

	object-fit: cover;

	transition:
		transform .42s ease;
}


.isg-blog__card:hover
.isg-blog__card-image img {
	transform:
		scale(1.045);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.isg-blog__placeholder {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	min-height: 200px;

	background:
		radial-gradient(
			circle at center,
			rgba(
				118,
				87,
				255,
				.08
			),
			transparent 60%
		),
		linear-gradient(
			145deg,
			#101e30,
			#09131f
		);

	text-align: center;
}


.isg-blog__placeholder span {
	color:
		var(--blog-cyan);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .17em;
}


.isg-blog__placeholder strong {
	margin-top: 10px;

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

	font-size: 39px;
	font-weight: 950;
}


/* =========================================================
   CARD BODY
========================================================= */

.isg-blog__card-body {
	display: flex;

	flex: 1;

	flex-direction: column;

	padding:
		23px 24px 24px;
}


.isg-blog__card-top {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 14px;

	margin-bottom: 15px;
}


/* CATEGORY */

.isg-blog__category {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	max-width: 70%;

	min-height: 25px;

	padding:
		0 9px;

	overflow: hidden;

	border:
		1px solid
		rgba(
			57,
			231,
			255,
			.22
		);

	border-radius: 999px;

	background:
		rgba(
			57,
			231,
			255,
			.045
		);

	color:
		var(--blog-cyan) !important;

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .07em;

	text-overflow:
		ellipsis;

	text-transform:
		uppercase;

	white-space:
		nowrap;
}


/* READING TIME */

.isg-blog__reading {
	color:
		var(--blog-muted);

	font-size: 9px;
	font-weight: 750;

	white-space: nowrap;
}


/* =========================================================
   CARD TITLE
========================================================= */

.isg-blog__card-body h3 {
	margin:
		0 0 12px !important;

	color:
		#fff !important;

	font-size:
		21px !important;

	font-weight:
		900 !important;

	line-height:
		1.23 !important;

	letter-spacing:
		-.025em !important;
}


.isg-blog__card-body h3 a {
	color:
		#fff !important;
}


.isg-blog__card-body h3 a:hover {
	color:
		var(--blog-cyan) !important;
}


/* =========================================================
   EXCERPT
========================================================= */

.isg-blog__excerpt {
	margin: 0 !important;

	color:
		var(--blog-muted) !important;

	font-size:
		13px !important;

	line-height:
		1.68 !important;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.isg-blog__card-footer {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	margin-top: auto;

	padding-top: 22px;
}


.isg-blog__card-footer time {
	color: #748196;

	font-size: 9px;
}


.isg-blog__read {
	color:
		var(--blog-cyan) !important;

	font-size: 11px;
	font-weight: 850;

	white-space: nowrap;

	transition:
		transform .2s ease;
}


.isg-blog__read:hover {
	transform:
		translateX(3px);
}


/* =========================================================
   13 — PAGINATION
========================================================= */

.isg-blog__pagination {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 48px;
}


.isg-blog__pagination
.page-numbers {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 42px;

	padding:
		0 13px;

	border:
		1px solid
		var(--blog-line);

	border-radius: 8px;

	background:
		rgba(
			255,
			255,
			255,
			.018
		);

	color:
		var(--blog-copy) !important;

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


.isg-blog__pagination
.page-numbers.current {
	border-color:
		rgba(
			57,
			231,
			255,
			.43
		);

	background:
		rgba(
			57,
			231,
			255,
			.07
		);

	color:
		var(--blog-cyan) !important;
}


/* =========================================================
   14 — EMPTY
========================================================= */

.isg-blog__empty {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-height: 300px;

	padding: 48px;

	border:
		1px dashed
		rgba(
			57,
			231,
			255,
			.23
		);

	border-radius: 15px;

	text-align: center;
}


.isg-blog__empty > span {
	color:
		var(--blog-pink);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .16em;
}


.isg-blog__empty h3 {
	margin:
		13px 0 0 !important;

	color:
		#fff !important;

	font-size:
		27px !important;

	font-weight:
		950 !important;
}


.isg-blog__empty p {
	margin:
		10px 0 0 !important;

	color:
		var(--blog-muted) !important;

	font-size:
		13px !important;
}


.isg-blog__empty a {
	margin-top: 22px;

	color:
		var(--blog-cyan) !important;

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


/* =========================================================
   15 — TABLET
========================================================= */

@media (max-width: 1050px) {

	.isg-blog__container {
		width:
			calc(
				100% - 48px
			);
	}


	.isg-blog__hero-main {
		max-width: 100%;
	}


	.isg-blog__hero-content {
		grid-template-columns:
			1fr;

		gap: 35px;
	}


	.isg-blog__hero-stat {
		width: max-content;
	}


	.isg-blog__grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			) !important;
	}

}


/* =========================================================
   16 — SMALL TABLET
========================================================= */

@media (max-width: 820px) {

	.isg-blog__controls-head,
	.isg-blog__articles-head {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap: 20px;
	}


	.isg-blog__filter-bar {
		align-items:
			flex-start;

		flex-direction:
			column;
	}

}


/* =========================================================
   17 — MOBILE
========================================================= */

@media (max-width: 700px) {

	.isg-blog__container {
		width:
			calc(
				100% - 30px
			);
	}


	.isg-blog__hero {
		padding:
			48px 0 50px;
	}


	.isg-blog__hero h1 {
		font-size:
			clamp(
				42px,
				12vw,
				56px
			) !important;
	}


	.isg-blog__hero-stat {
		padding-left: 20px;
	}


	.isg-blog__hero-number strong {
		font-size: 55px;
	}


	.isg-blog__controls {
		padding:
			45px 0 41px;
	}


	.isg-blog__search {
		grid-template-columns:
			1fr;
	}


	.isg-blog__search button {
		width: 100%;
	}


	.isg-blog__filters {
		width: 100%;
	}


	.isg-blog__filters a {
		flex:
			1 1 auto;
	}


	.isg-blog__articles {
		padding:
			52px 0 72px;
	}


	.isg-blog__grid {
		grid-template-columns:
			1fr !important;
	}

}


/* =========================================================
   18 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.isg-blog__filters {
		display: grid;

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

		gap: 7px;
	}


	.isg-blog__filters a {
		width: 100%;
	}


	.isg-blog__card-body {
		padding: 21px;
	}


	.isg-blog__card-footer {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap: 9px;
	}

}