/* ============================================================
   SARANSH DAINIK — Article-detail page UI
   Page-scoped: loaded ONLY on public post pages (see _header.php).
   Redesigns the article presentation while reusing the existing
   backend data/features. Does not touch the homepage, header,
   market ticker, Breaking News, Business World, admin, API or
   Android app.
   ============================================================ */

#main { padding: 0 0 40px; }

/* ---------- Breadcrumb ---------- */
#main .page-breadcrumb { margin: 16px 0 4px; }
#main .page-breadcrumb .breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 13px;
}
#main .page-breadcrumb .breadcrumb a { color: #6b7280; }
#main .page-breadcrumb .breadcrumb a:hover { color: #c8102e; }
#main .page-breadcrumb .breadcrumb > .active { color: #9ca3af; }
#main .page-breadcrumb .breadcrumb > li + li::before {
	color: #cbd5e1;
	content: "\203A";
	padding: 0 6px;
}

/* ---------- Headline ---------- */
.post-content .post-title { margin: 12px 0 0; }
.post-content .post-title .title {
	font-size: 40px;
	line-height: 1.18;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px;
	letter-spacing: -0.2px;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------- Reader action bar (TTS + font controls) ---------- */
.article-action-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 6px 0 14px;
	padding: 10px 0;
	border-top: 1px solid #f0f1f3;
	border-bottom: 1px solid #f0f1f3;
	overflow-wrap: anywhere;
}
.article-action-bar > * { min-width: 0; max-width: 100%; }
.article-action-bar .tts-article-control { margin: 0; }
.article-action-bar .article-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	min-width: 0;
	max-width: 100%;
}
.article-action-bar .article-reading-time { font-size: 13px; color: #6b7280; }

/* ---------- Metadata row ---------- */
.post-content .post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	line-height: 1.6;
	margin: 0 0 12px;
}
.post-content .post-meta > span,
.post-content .post-meta > a,
.post-content .post-meta form button,
.post-content .post-meta form a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	color: #6b7280;
	margin: 0;
}
.post-content .post-meta .post-meta-cat {
	color: #c8102e;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-size: 12.5px;
}
.post-content .post-meta a:hover { color: #c8102e; }
.post-content .post-meta form { margin-left: auto; }
.post-content .post-meta .add-to-reading-list,
.post-content .post-meta .delete-from-reading-list,
.post-content .post-meta > a.add-to-reading-list {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid #e5e7eb;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.4;
	background: #fff;
}
.post-content .post-meta .add-to-reading-list { color: #16a34a !important; }
.post-content .post-meta .delete-from-reading-list { color: #dc2626 !important; }

/* ---------- Summary ---------- */
.post-content .post-summary { margin: 4px 0 18px; }
.post-content .post-summary h2 {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 500;
	color: #374151;
}

/* ---------- Featured image ---------- */
.post-content .post-image {
	margin: 0 0 18px;
	border-radius: 12px;
	overflow: hidden;
}
.post-content .post-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Video (YouTube embed) — 16:9, full article-column width ---------- */
.post-content .post-video { margin: 0 0 18px; }
.post-content .post-video .embed-responsive {
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}
.post-content .post-video .embed-responsive iframe { border: 0; }

/* ---------- Article body typography ---------- */
/* The theme's `.text-style` sets font-size/line-height with !important;
 * we override it here with the same weight (the reader A+/A− controls set
 * inline !important font-size, so they keep working). The theme ALSO sets
 * `.post-content .post-text { display: table-cell; float: left }` which can
 * collapse the reading column into a narrow strip — force a full-width block. */
.post-content .post-text {
	display: block;
	float: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-size: 18px !important;
	line-height: 1.8 !important;
	color: #1f2937;
	margin-top: 6px;
}
.post-content .post-text p { margin: 0 0 1.35em; }
.post-content .post-text h2,
.post-content .post-text h3,
.post-content .post-text h4 {
	font-weight: 700;
	color: #111827;
	line-height: 1.4;
	margin: 1.4em 0 0.6em;
}
.post-content .post-text h2 { font-size: 24px; }
.post-content .post-text h3 { font-size: 20px; }
.post-content .post-text h4 { font-size: 18px; }
.post-content .post-text a {
	color: #c8102e;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post-content .post-text blockquote {
	border-left: 4px solid #c8102e;
	background: #faf7f4;
	margin: 1.5em 0;
	padding: 14px 18px;
	font-size: 19px;
	color: #374151;
}
.post-content .post-text img { border-radius: 8px; }
.post-content .post-text ul,
.post-content .post-text ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.post-content .post-text iframe,
.post-content .post-text object,
.post-content .post-text embed { border: 0; }
.post-content .post-text .btn-optional-link { display: inline-block; }

/* ---------- Tags ---------- */
.post-content .post-tags { margin-top: 20px; margin-bottom: 26px; }
.post-content .post-tags .tags-title { line-height: 32px; margin-right: 14px; font-size: 15px; color: #111827; }
.post-content .post-tags .tag-list li a { border-radius: 999px !important; font-size: 13px; padding: 5px 12px; }

/* ---------- Share row ---------- */
.post-content .post-share { margin-top: 8px; margin-bottom: 26px; }
.post-content .post-share .btn-share { border-radius: 8px; font-size: 14px; width: auto; min-width: 108px; padding: 0 14px; }
.post-content .post-share .share-extra-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #374151;
	border-radius: 8px;
	padding: 0 14px;
	height: 40px;
	font-size: 13.5px;
	margin: 0 8px 10px 0;
}

/* ---------- Reactions / ad zones ---------- */
.reactions { margin: 6px 0 12px; }
.bn-bottom-post { margin: 4px 0 18px; }

/* ---------- Author card ---------- */
.about-author {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	border: 1px solid #eef0f2;
	border-radius: 12px;
	padding: 22px;
	margin: 26px 0 0;
	background: #fbfbfc;
}
.about-author .about-author-left { flex: 0 0 auto; }
.about-author .about-author-left img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}
.about-author .about-author-right { flex: 1 1 auto; }
.about-author .p-about-author { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.about-author .author-link { color: #111827; }
.about-author .about-author-row { font-size: 14.5px; color: #4b5563; line-height: 1.65; }
.about-author .author-social-cnt { margin-top: 10px; }
.about-author .author-social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 15px;
}

/* ---------- Related posts ---------- */
/* OVERLAP FIX (final-UI phase): the theme floats BOTH .related-posts and
   .comment-section (width:100%; float:left) with no clear. On some articles
   that float-collapse lets the Comments / Facebook Comments block ride up
   over the related cards. We contain each block in a block-formatting context
   (display:flow-root — contains floats WITHOUT clipping titles), clear the
   legacy float at the component level, and let the grid compute full height.
   No absolute positioning, no fixed card heights, no global overflow-x. */
.related-posts {
	margin-top: 30px;
	float: none;
	width: 100%;
	box-sizing: border-box;
	display: flow-root;
}
.related-posts::after { content: ""; display: table; clear: both; }
.related-posts .related-posts-row { margin-left: 0; margin-right: 0; }
.related-posts .post-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 18px 0 0;
	padding: 0;
}
.related-posts .post-list li {
	list-style: none;
	display: block;
	min-width: 0;                 /* grid children can never blow out the track */
	overflow-wrap: anywhere;
}
.related-posts .post-list li .external-post-image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: #eef0f3;
}
.related-posts .post-list li .img-responsive,
.related-posts .post-list li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.related-posts .post-list li .title {
	font-size: 16px;
	line-height: 1.45;
	font-weight: 600;
	margin: 12px 0 0;
	color: #111827;
	/* controlled 2-line clamp so long Hindi/Odia titles never escape the card */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.related-posts .post-list li .title a { color: #111827; }
.related-posts .related-post-title .title {
	font-size: 17px;
	font-weight: 700;
	color: #111827;
	text-transform: none;
	border-bottom: 2px solid #eef0f2;
}
.related-posts .related-post-title .title::after { background: #c8102e; }

/* ---------- Comments ---------- */
/* Starts only after the complete Related Posts section (clear legacy float),
   with professional vertical spacing. Never overlaps related cards. */
.comment-section {
	margin-top: 24px;
	float: none;
	width: 100%;
	box-sizing: border-box;
	display: flow-root;
}
.comment-section::after { content: ""; display: table; clear: both; }

/* ---------- TRUE ZERO OVERFLOW (final-UI phase) ----------
   Bootstrap `.row` uses `margin: 0 -15px`. Nested inside `.comment-section` or
   the article sidebar (which have no compensating padded column) that negative
   margin extends ~15px past the viewport; it is still REPORTED by
   documentElement.scrollWidth (masked by the theme's body overflow-x:hidden).
   Neutralise it at the component level so scrollWidth === clientWidth. */
.comment-section .row,
.comment-section .form-row,
.sd-article-sidebar .row,
.sd-article-sidebar .form-row {
	margin-left: 0;
	margin-right: 0;
}
.comment-section .comment-total .label-comment { font-size: 17px; color: #111827; }
.comment-section form .form-control {
	border-radius: 8px;
	border-color: #e5e7eb;
	padding: 12px 14px;
	font-size: 15px;
}
.comment-section form .btn-custom { border-radius: 8px; padding: 10px 24px; font-weight: 600; }
.comment-section .comments .comment-list li .left img { border-radius: 50%; }
.comment-section .comments .comment-list li .right .username { font-size: 15px; }

/* ---------- Article sidebar (compact) ---------- */
.sd-article-sidebar .sidebar-widget { margin-bottom: 22px; }
.sd-article-sidebar .widget-title .title {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	border-bottom: 2px solid #eef0f2;
	padding-bottom: 10px;
	margin-bottom: 14px;
}

/* ---------- Mobile (below 992px) ---------- */
@media (max-width: 991px) {
	#main .container { padding-left: 14px; padding-right: 14px; }
	#main .container .row { margin-left: 0; margin-right: 0; } /* TRUE zero overflow: container padding is 14px while Bootstrap .row uses -15px margins -> 1px overshoot */
	#main .col-md-8,
	#main .col-md-4 { padding-left: 0; padding-right: 0; }

	.post-content .post-title .title { font-size: 28px; line-height: 1.25; }

	.article-action-bar { flex-direction: column; align-items: stretch; gap: 8px; }
	.article-action-bar .article-tools { width: 100%; justify-content: flex-start; }
	.article-action-bar .font-size-btn { min-width: 44px; min-height: 44px; }

	.post-content .post-text { font-size: 17px !important; line-height: 1.75 !important; }
	.post-content .post-meta { gap: 8px 12px; }
	.post-content .post-meta form { margin-left: 0; }

	.related-posts .post-list { grid-template-columns: 1fr 1fr; gap: 14px; }

	.post-content .post-share .btn-share { min-width: 44px; min-height: 44px; width: auto; padding: 0 12px; }
	.post-content .post-share .share-extra-btn { height: 44px; min-height: 44px; }

	.about-author { flex-direction: row; padding: 18px; }

	/* full usable width for every article block + responsive media on mobile */
	.post-content .post-image,
	.post-content .post-video,
	.post-content .post-summary,
	.post-content .post-tags,
	.post-content .post-share,
	.post-content .post-title {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		float: none;
		box-sizing: border-box;
	}
	.post-content .post-image img,
	.post-content .post-image .img-responsive {
		width: 100%;
		max-width: 100%;
		height: auto;
		display: block;
	}
	.post-content .post-video .embed-responsive,
	.post-content .post-video .embed-responsive iframe {
		width: 100%;
		max-width: 100%;
	}
	.post-content .post-text img,
	.post-content .post-text iframe,
	.post-content .post-text video {
		max-width: 100%;
		height: auto;
	}
	.post-content .post-text iframe { aspect-ratio: 16 / 9; width: 100%; }
	.post-content .post-text table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}
@media (max-width: 480px) {
	.related-posts .post-list { grid-template-columns: 1fr; }
	.post-content .post-title .title { font-size: 25px; line-height: 1.28; }
}
/* ---------- Very small screens (<=360px) ---------- */
@media (max-width: 360px) {
	#main .container { padding-left: 10px; padding-right: 10px; }
	.post-content { padding: 0 10px; }
	.post-content .post-title .title { font-size: 23px; line-height: 1.3; }
	.post-content .post-meta { gap: 6px 10px; }
	.about-author { padding: 14px; gap: 12px; }
	.about-author .about-author-left img { width: 68px; height: 68px; }
	.post-content .post-share .btn-share { min-width: 42px; padding: 0 10px; }
	.post-content .post-share .share-extra-btn { padding: 0 10px; }
}