/* ==========================================================================
   News single page — reading progress, share panel, related news, typography
   ========================================================================== */

/* Reading progress bar */
#reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: #cd2122;
	z-index: 2000;
	transition: width .1s ease-out;
}

/* Post meta row additions (reading time / views already share .post-info styles) */
.post-info .fa-clock,
.post-info .fa-eye,
.post-info .ti {
	margin-right: 4px;
}

/* ---------------------------------------------------------------------- */
/* Desktop sticky share column — pinned to the left edge of the content   */
/* column itself (not the container/viewport), so it always sits right   */
/* next to the article text. Only shown once there is enough gutter      */
/* width outside the container to fit it without causing overflow.       */
/* ---------------------------------------------------------------------- */
.news-detail-section .right_sidebar {
	position: relative;
}

.share-sticky-col {
	display: none;
	position: absolute;
	top: 0;
	left: -64px;
	width: 60px;
	height: 100%;
	z-index: 20;
}

@media (min-width: 1300px) {
	.share-sticky-col {
		display: block;
	}
}

.share-sticky {
	/* Base/fallback position; JS (news-single.js) drives the actual sticky
	   behavior via inline styles since #page_wrapper's overflow:hidden
	   disables native position:sticky here. */
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-bottom: 30px;
}

.share-sticky .share-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #ABABAB;
	margin-bottom: 4px;
	writing-mode: vertical-rl;
}

.share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #E6E6E6;
	color: #222;
	font-size: 18px;
	background: #fff;
	transition: color .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out;
	cursor: pointer;
}

.share-btn:hover,
.share-btn:focus {
	color: #fff;
	border-color: var(--share-brand, #cd2122);
	background-color: var(--share-brand, #cd2122);
	text-decoration: none;
	outline: none;
}

.share-btn[data-network="facebook"] { --share-brand: #1877F2; }
.share-btn[data-network="telegram"] { --share-brand: #29A9EA; }
.share-btn[data-network="x"] { --share-brand: #000000; }
.share-btn[data-network="whatsapp"] { --share-brand: #25D366; }
.share-btn[data-network="linkedin"] { --share-brand: #0A66C2; }
.share-btn[data-network="copy"] { --share-brand: #cd2122; }
.share-btn[data-network="print"] { --share-brand: #555555; }

.share-copied-tip {
	position: absolute;
	top: -34px;
	left: 50%;
	white-space: nowrap;
	background: #222;
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
}

.share-copied-tip.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------------- */
/* Mobile bottom sticky share bar                                         */
/* ---------------------------------------------------------------------- */
.mobile-share-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #fff;
	padding: 6px 4px;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
}

@media (min-width: 1300px) {
	.mobile-share-bar {
		display: none;
	}
}

.mobile-share-bar .share-btn {
	width: 38px;
	height: 38px;
	font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/* Sticky sidebar (desktop only)                                          */
/* ---------------------------------------------------------------------- */
@media (min-width: 992px) {
	#sidebar-widget.sidebar {
		position: sticky;
		top: 100px;
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------------- */
/* Content typography                                                     */
/* ---------------------------------------------------------------------- */
.text_box {
	line-height: 1.8;
	color: #333;
}

.text_box img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 14px 0;
}

.text_box h2,
.text_box h3,
.text_box h4 {
	margin-top: 28px;
	margin-bottom: 14px;
}

.text_box blockquote {
	margin: 20px 0;
	padding: 12px 20px;
	border-left: 3px solid #cd2122;
	background: #F7F7F7;
	font-style: italic;
	color: #555;
}

.text_box p {
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------------- */
/* Related news grid                                                      */
/* ---------------------------------------------------------------------- */
.related-news {
	margin-top: 50px;
	border-top: solid 1px #E6E6E6;
	padding-top: 30px;
}

.related-news .related-news-title {
	margin-bottom: 20px;
}

.related-news-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.related-news-card {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
	background: #fff;
	transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

.related-news-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
	text-decoration: none;
}

.related-news-card img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
}

.related-news-card .related-news-body {
	padding: 14px;
}

.related-news-card .related-news-date {
	font-size: 12px;
	color: #ABABAB;
	margin-bottom: 6px;
	display: block;
}

.related-news-card .related-news-headline {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Prev / Next navigation                                                 */
/* ---------------------------------------------------------------------- */
.news-pager {
	display: flex;
	gap: 20px;
	margin-top: 30px;
}

.news-pager-item {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px solid #E6E6E6;
	border-radius: 6px;
	color: #333;
	transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.news-pager-item:hover {
	border-color: #cd2122;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	text-decoration: none;
	color: #333;
}

.news-pager-item.next {
	justify-content: flex-end;
	text-align: right;
}

.news-pager-icon {
	font-size: 20px;
	color: #cd2122;
	flex-shrink: 0;
}

.news-pager-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #ABABAB;
	margin-bottom: 4px;
}

.news-pager-headline {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 991px) {
	.related-news-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1299.98px) {
	body {
		padding-bottom: 62px;
	}
}

@media (max-width: 767px) {
	.related-news-grid {
		grid-template-columns: 1fr;
	}

	.news-pager {
		flex-direction: column;
	}

	.news-pager-item.next {
		justify-content: flex-start;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------- */
/* Print                                                                  */
/* ---------------------------------------------------------------------- */
.print-source {
	display: none;
}

@media print {

	/* Chrome/Firefox both need this to keep background colors/images that
	   are meant to survive printing (none here — we hide them instead). */
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body {
		padding-bottom: 0 !important;
	}

	#reading-progress,
	.share-sticky-col,
	.mobile-share-bar,
	#sidebar-widget,
	#totop,
	header,
	footer,
	.support_panel,
	#page_header,
	.news-pager,
	.related-news,
	.breadcrumbs2 {
		display: none !important;
	}

	/* The sidebar column is hidden above; let the article claim the full page width */
	.news-detail-section .container,
	.news-detail-section .row,
	.news-detail-section .right_sidebar {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.news-detail-section {
		padding-top: 10px !important;
	}

	.tbk__title,
	.text_box,
	.text_box p {
		color: #000 !important;
	}

	.tbk__subtitle {
		color: #333 !important;
	}

	/* Icon fonts are unreliable in print output across browsers/printer
	   drivers — keep the text (dates, reading time, views), drop the glyphs. */
	.post-info .far,
	.post-info .fas,
	.post-info .ti {
		display: none !important;
	}

	.text_box a {
		color: #000 !important;
		text-decoration: underline;
	}

	.text_box a[href]:after {
		content: " (" attr(href) ")";
		font-size: 11px;
		font-weight: normal;
		color: #555;
	}

	#lightgallery a {
		pointer-events: none;
	}

	.print-source {
		display: block;
		margin-top: 24px;
		padding-top: 12px;
		border-top: 1px solid #999;
		font-size: 11px;
		color: #555;
	}
}