/* ============================================================
   ANDRA2 — NEWS WORLD BACKGROUND FIX
   ============================================================ */

.andra-news-page {
	position: relative;
	z-index: 0;

	min-height: 900px;
	padding: 42px 0 100px;

	/* ВАЖНО */
	isolation: auto;

	/* сама страница прозрачная */
	background: transparent !important;
}


/* ============================================================
   WORLD BACKGROUND
   ============================================================ */

.andra-news-world {
	display: block !important;

	position: absolute;

	/* НЕ отрицательный */
	z-index: 0;

	top: -54px;
	bottom: -100px;

	left: 50%;
	width: 100vw;

	transform: translateX(-50%);

	background-image:
		linear-gradient(
			to bottom,
			rgba(4, 9, 16, .18) 0%,
			rgba(4, 9, 16, .28) 35%,
			rgba(5, 10, 17, .58) 72%,
			rgba(5, 9, 15, .90) 100%
		),
		url("/img/theme/andra-news-world.webp");

	background-position:
		center top,
		center top;

	background-size:
		100% 100%,
		cover;

	background-repeat:
		no-repeat,
		no-repeat;

	pointer-events: none;
	overflow: hidden;
}


/* затемнение краёв */

.andra-news-world::before {
	content: "";
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(4,8,14,.72) 0%,
			rgba(4,8,14,.18) 17%,
			transparent 38%,
			transparent 62%,
			rgba(4,8,14,.18) 83%,
			rgba(4,8,14,.72) 100%
		);

	pointer-events: none;
}


/* голубое свечение */

.andra-news-world-glow {
	position: absolute;
	inset: 0;

	background:
		radial-gradient(
			ellipse at 50% 12%,
			rgba(70, 173, 236, .20) 0%,
			rgba(35, 100, 160, .08) 32%,
			transparent 62%
		);

	pointer-events: none;
}


/* HUD сетка */

.andra-news-world-grid {
	position: absolute;
	inset: 0;

	opacity: .10;

	background-image:
		linear-gradient(
			rgba(91,207,239,.13) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(91,207,239,.13) 1px,
			transparent 1px
		);

	background-size: 70px 70px;

	pointer-events: none;
}


/*
 * Весь реальный контент страницы поднимаем
 * НАД игровым background.
 */

.andra-news-page > .andra-news-box,
.andra-news-page > .box-sm-v1 {
	position: relative;
	z-index: 2;
}


/* ============================================================
   NEWS PANEL
   ============================================================ */

.andra-news-box {
	position: relative;

	background:
		linear-gradient(
			145deg,
			rgba(16, 31, 47, .80),
			rgba(7, 15, 25, .91)
		) !important;

	border:
		1px solid rgba(105, 220, 250, .17) !important;

	border-radius: 9px !important;

	box-shadow:
		0 32px 90px rgba(0, 0, 0, .48),
		0 0 80px rgba(48, 176, 226, .035),
		inset 0 1px rgba(255,255,255,.035) !important;

	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);

	overflow: hidden;
}


/* Свет сверху */

.andra-news-box::before {
	content: "";

	position: absolute;
	z-index: 5;

	left: 8%;
	top: 0;

	width: 84%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(102, 224, 255, .75),
			rgba(102, 224, 255, .25),
			transparent
		);

	box-shadow:
		0 0 18px rgba(85, 216, 255, .35);

	pointer-events: none;
}


.andra-news-box > .inner {
	position: relative;
	z-index: 2;

	background: transparent !important;
}


/* ============================================================
   HEADER
   ============================================================ */

.andra-news-heading {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	padding-bottom: 20px;
	margin-bottom: 26px;
}


.andra-news-heading-copy {
	display: flex;
	flex-direction: column;
}


.andra-news-kicker {
	margin-bottom: 7px;

	color: #5ee7ff;

	font-size: 8px;
	font-weight: 900;

	letter-spacing: .20em;

	text-transform: uppercase;

	text-shadow:
		0 0 13px rgba(94, 231, 255, .22);
}


.andra-news-heading-copy strong {
	color: #f4f8ff;

	font-size: 25px;
	font-weight: 800;

	line-height: 1.05;

	text-shadow:
		0 2px 12px rgba(0,0,0,.55);
}


.andra-news-heading-copy small {
	margin-top: 7px;

	color: #829db0;

	font-size: 10px;
	font-weight: 600;
}


/* ============================================================
   LIVE STATUS
   ============================================================ */

.andra-news-status {
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 7px 11px;

	border:
		1px solid rgba(92, 238, 188, .22);

	border-radius: 20px;

	background:
		rgba(56, 194, 147, .06);

	color: #82f1c5;

	font-size: 7px;
	font-weight: 900;

	letter-spacing: .12em;
}


.andra-news-status i {
	display: block;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #72f5bd;

	box-shadow:
		0 0 9px rgba(114,245,189,.85);

	animation:
		andraNewsLive 2s ease-in-out infinite;
}


@keyframes andraNewsLive {

	0%, 100% {
		opacity: .55;
		box-shadow:
			0 0 5px rgba(114,245,189,.45);
	}

	50% {
		opacity: 1;
		box-shadow:
			0 0 13px rgba(114,245,189,.95);
	}

}


/* ============================================================
   OLD DIVIDER
   ============================================================ */

.andra-news-heading .horizontal-line {
	width: 100%;
	margin-top: 17px;

	opacity: .45;
}


.andra-news-heading .horizontal-line img {
	display: block;

	width: 100%;
	height: 1px;

	object-fit: cover;
}


/* ============================================================
   NEWS ITEMS
   ============================================================ */

.andra-news-page .news,
.andra-news-page .news-item,
.andra-news-page .article,
.andra-news-page .media {
	position: relative;

	margin-bottom: 14px;
	padding: 19px;

	background:
		linear-gradient(
			135deg,
			rgba(28, 52, 74, .64),
			rgba(10, 23, 36, .76)
		) !important;

	border:
		1px solid rgba(104, 218, 248, .10);

	border-radius: 6px;

	box-shadow:
		0 12px 30px rgba(0,0,0,.18),
		inset 0 1px rgba(255,255,255,.025);

	transition:
		transform .20s ease,
		border-color .20s ease,
		box-shadow .20s ease;
}


.andra-news-page .news:hover,
.andra-news-page .news-item:hover,
.andra-news-page .article:hover,
.andra-news-page .media:hover {
	transform: translateY(-2px);

	border-color:
		rgba(102, 225, 255, .27);

	box-shadow:
		0 17px 38px rgba(0,0,0,.27),
		0 0 28px rgba(60,188,235,.045);
}


/* ============================================================
   LINKS
   ============================================================ */

.andra-news-page a {
	transition:
		color .18s ease,
		text-shadow .18s ease;
}


.andra-news-page a:hover {
	color: #72e6ff;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.andra-news-page .pagination > li > a,
.andra-news-page .pagination > li > span {
	background:
		rgba(10, 27, 42, .88);

	border-color:
		rgba(102, 217, 247, .13);

	color: #a9c7d9;
}


.andra-news-page .pagination > li > a:hover {
	background:
		rgba(30, 79, 107, .84);

	border-color:
		rgba(102, 224, 255, .34);

	color: #fff;
}


.andra-news-page .pagination > .active > a,
.andra-news-page .pagination > .active > span {
	background:
		linear-gradient(
			180deg,
			#39c5e8,
			#178db5
		) !important;

	border-color:
		#61dcf9 !important;

	color:
		#fff !important;

	box-shadow:
		0 0 17px rgba(59, 203, 242, .20);
}


/* ============================================================
   ALERTS
   ============================================================ */

.andra-news-page .alert {
	border-radius: 5px;

	background:
		rgba(8, 20, 31, .92);

	border:
		1px solid rgba(107, 218, 247, .14);

	color: #dcecf5;
}


.andra-news-page .alert-danger {
	background:
		linear-gradient(
			90deg,
			rgba(255, 81, 100, .09),
			rgba(18, 15, 22, .92)
		);

	border-color:
		rgba(255, 91, 108, .22);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 991px) {

	.andra-news-page {
		min-height: 750px;

		padding-top: 25px;
		padding-bottom: 70px;
	}


	.andra-news-world {
		background:
			linear-gradient(
				180deg,
				rgba(4,10,17,.36),
				rgba(5,11,19,.64) 48%,
				rgba(5,9,15,.96)
			),
			url("/img/theme/andra-news-world.webp")
			center top / auto 800px
			no-repeat;
	}


	.andra-news-world-grid {
		opacity: .07;
	}

}


@media (max-width: 640px) {

	.andra-news-page {
		padding-top: 14px;
		padding-bottom: 55px;
	}


	.andra-news-box {
		border-radius: 5px !important;

		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}


	.andra-news-heading {
		align-items: flex-start;
		gap: 15px;

		margin-bottom: 20px;
	}


	.andra-news-heading-copy strong {
		font-size: 21px;
	}


	.andra-news-status {
		padding: 6px 9px;
	}


	.andra-news-page .news,
	.andra-news-page .news-item,
	.andra-news-page .article,
	.andra-news-page .media {
		padding: 15px;
	}

}

/* ============================================================
   /NEWS — SHOW WORLD THROUGH HOME PANELS
   ============================================================ */

.andra-news-page .andra-home-status,
.andra-news-page .andra-home-news,
.andra-news-page .andra-home-ranking,
.andra-news-page .andra-home-server,
.andra-news-page .andra-home-cta {
	background:
		linear-gradient(
			rgba(118,236,255,.018) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(118,236,255,.018) 1px,
			transparent 1px
		),
		linear-gradient(
			180deg,
			rgba(9,17,28,.84),
			rgba(5,10,17,.91)
		) !important;

	background-size:
		32px 32px,
		32px 32px,
		auto !important;

	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

