/*! ==========================================================================
 * Saransh Dainik — Mobile UI layer
 * Responsive, app-like mobile presentation on top of the SAME backend, URLs,
 * controllers and content. Desktop is NOT restyled here.
 *
 * Class prefix: sd-mobile- / sd-m-
 * Primary breakpoint: max-width: 991px (matches the existing mobile-header
 * switch in news-header.css). Refinements at 767px and 480px.
 *
 * Every desktop-affecting rule is scoped inside a media query so the desktop
 * layout stays pixel-identical.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * FIXED-LAYER Z-INDEX SCALE — centralized. Do NOT scatter z-index values.
 * --------------------------------------------------------------------------
 *   normal content          auto
 *   sticky mobile app bar   --sd-z-sticky:     900   (existing .nav-mobile-header)
 *   bottom navigation       --sd-z-bottomnav:  8000
 *   back-to-top             auto (existing .scrollup)
 *   Radio player            --sd-z-radio:      9000  (existing .np-radio-player)
 *   latest-news notif       --sd-z-notify:     9010  (existing .sd-news-popup)
 *   More bottom sheet       --sd-z-sheet:      9015
 *   app-download modal      --sd-z-modal:      9020  (existing .sd-app-prompt)
 *   cookies warning         9999 (existing)
 *   search modal            999999 (existing)
 *   mobile nav drawer       9999999 (existing)
 * -------------------------------------------------------------------------- */
:root {
	--sd-z-sticky: 900;
	--sd-z-bottomnav: 8000;
	--sd-z-radio: 9000;
	--sd-z-notify: 9010;
	--sd-z-sheet: 9015;
	--sd-z-modal: 9020;
	/* shared bottom offset used by Radio / notifications so nothing overlaps
	   the bottom navigation (56px nav + safe area). */
	--sd-bottom-nav-h: 58px;
}

/* ==========================================================================
 * 1. MOBILE APP BAR (existing mobile header, refined to [Menu][Logo][Search])
 * ========================================================================== */
@media (max-width: 991px) {
	/* balance the two side columns so the logo is mathematically centred */
	.mobile-header-container .mobile-button-buttons {
		width: 48px;
		text-align: right;
		padding-right: 4px;
	}
	.mobile-header-container .mobile-menu-button { width: 48px; }
	.mobile-header-container .mobile-button-buttons .sd-biz-btn,
	.mobile-header-container .mobile-button-buttons .mobile-radio-btn {
		display: none; /* Business + Radio moved to the quick-action strip */
	}
	.mobile-header-container .mobile-logo img {
		max-width: 150px;
		max-height: 40px;
	}
	/* reserve room for the app bar + quick-action strip so content is never
	   hidden under the fixed header */
	.mobile-nav-container { min-height: 104px; }
	.nav-mobile { padding-top: 104px; }
}

/* ==========================================================================
 * 2. QUICK-ACTION STRIP (Live Radio · Business World · Videos)
 * ========================================================================== */
.sd-mobile-quick {
	display: none; /* mobile only */
}
@media (max-width: 991px) {
	.sd-mobile-quick {
		display: flex;
		align-items: stretch;
		position: fixed;
		top: 60px;                     /* directly below the app bar */
		left: 0;
		right: 0;
		z-index: var(--sd-z-sticky);
		background: #ffffff;
		border-bottom: 1px solid #ececec;
		box-shadow: 0 2px 6px rgba(7, 21, 47, .08);
	}
	.sd-mobile-quick-item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 6px 4px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.2;
		color: #07152f;
		text-decoration: none;
		white-space: nowrap;
	}
	.sd-mobile-quick-item .sd-mobile-quick-ico { font-size: 17px; line-height: 1; }
	.sd-mobile-quick-item:active { background: #f1f2f4; }
	.sd-mobile-quick-item.sd-mobile-quick-biz {
		background: #f5b301;           /* brand gold highlight, dark text */
		color: #07152f;
		margin: 5px 6px;
		border-radius: 10px;
		box-shadow: 0 2px 6px rgba(245, 179, 1, .4);
	}
	.sd-mobile-quick-item.sd-mobile-quick-biz:active { background: #ffc107; }
	.sd-mobile-quick-item.sd-mobile-quick-active {
		color: #c8102e;
	}
	.sd-mobile-quick-item.sd-mobile-quick-active .sd-mobile-quick-ico { color: #c8102e; }
}

/* ==========================================================================
 * 3. CATEGORY CHIPS (horizontal scroll row)
 * ========================================================================== */
.sd-mobile-chips {
	display: none;
}
@media (max-width: 991px) {
	.sd-mobile-chips {
		display: block;
		background: #fff;
		border-bottom: 1px solid #ececec;
	}
	.sd-mobile-chips-inner {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;         /* hide scrollbar but keep scrolling */
		-ms-overflow-style: none;
		padding: 8px 12px;
		gap: 8px;
	}
	.sd-mobile-chips-inner::-webkit-scrollbar { display: none; }
	.sd-mobile-chip {
		flex: 0 0 auto;
		scroll-snap-align: start;
		display: inline-flex;
		align-items: center;
		height: 36px;
		padding: 0 14px;
		border: 1px solid #e2e5e9;
		border-radius: 18px;
		background: #fff;
		color: #333;
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}
	.sd-mobile-chip.sd-mobile-chip-active {
		background: #c8102e;           /* brand red active */
		border-color: #c8102e;
		color: #fff;
	}
}

/* ==========================================================================
 * 4. HOMEPAGE — MOBILE APP-LIKE PRESENTATION
 * ========================================================================== */
@media (max-width: 991px) {
	/* hero slider → lead-story look */
	.np-home #slider { margin: 0; }
	.home-slider-container { border-radius: 0; }
	#slider .home-slider-item .item-info .title { font-size: 19px; line-height: 1.35; }

	/* section headers */
	.np-section-header { margin-bottom: 12px; }

	/* latest / more news cards → mobile-friendly */
	.np-news-card { gap: 12px; }

	/* category lead card */
	.np-cat-lead .np-lead-title { font-size: 19px; line-height: 1.35; }
}
@media (max-width: 767px) {
	/* tighten grids for the feed look */
	.np-latest-grid { gap: 14px; }
	.np-more-grid { gap: 14px; }
	.np-news-card .np-card-title { font-size: 17px; }
	.np-mini-title { font-size: 15px; }
	/* business world grid */
	.yp-grid { gap: 12px; }
}

/* mobile Videos row */
.sd-mobile-videos {
	display: none;
}
@media (max-width: 991px) {
	.sd-mobile-videos {
		display: block;
	}
	.sd-mobile-videos-track {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 12px;
		padding: 4px 2px 8px;
	}
	.sd-mobile-videos-track::-webkit-scrollbar { display: none; }
	.sd-mobile-video-card {
		flex: 0 0 200px;
		scroll-snap-align: start;
		width: 200px;
		text-decoration: none;
		color: #333;
	}
	.sd-mobile-video-media {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 10px;
		background: #07152f;
	}
	.sd-mobile-video-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.sd-mobile-video-play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: rgba(0, 0, 0, .55);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
	}
	.sd-mobile-video-title {
		margin-top: 6px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ==========================================================================
 * 5. BOTTOM NAVIGATION + MORE SHEET
 * ========================================================================== */
.sd-mobile-bottomnav,
.sd-mobile-sheet {
	display: none; /* mobile only */
}
@media (max-width: 991px) {
	.sd-mobile-bottomnav {
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--sd-z-bottomnav);
		height: calc(var(--sd-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #ffffff;
		border-top: 1px solid #e6e8eb;
		box-shadow: 0 -2px 10px rgba(7, 21, 47, .08);
	}
	.sd-mobile-bottomnav-item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		font-size: 10.5px;
		font-weight: 600;
		color: #5a6472;
		text-decoration: none;
		line-height: 1.15;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.sd-mobile-bottomnav-item .sd-mobile-bottomnav-ico { font-size: 19px; line-height: 1; }
	.sd-mobile-bottomnav-item.sd-mobile-bottomnav-active { color: #c8102e; }
	.sd-mobile-bottomnav-item.sd-mobile-bottomnav-active .sd-mobile-bottomnav-ico { color: #c8102e; }

	/* more sheet */
	.sd-mobile-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--sd-z-sheet);
		background: #fff;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 30px rgba(7, 21, 47, .25);
		max-height: 70vh;
		overflow-y: auto;
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.sd-mobile-sheet[hidden] { display: none; }
	.sd-mobile-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	.sd-mobile-sheet-title { font-size: 15px; font-weight: 800; color: #07152f; }
	.sd-mobile-sheet-x {
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: #f1f2f4;
		color: #444;
		font-size: 16px;
		cursor: pointer;
	}
	.sd-mobile-sheet-x:hover, .sd-mobile-sheet-x:focus-visible { background: #e2e5e9; color: #07152f; outline: 2px solid #0494b1; }
	.sd-mobile-sheet-group { margin: 6px 0 10px; }
	.sd-mobile-sheet-group-title {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .6px;
		color: #8890a0;
		margin: 0 0 4px;
	}
	.sd-mobile-sheet-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 6px;
		font-size: 14px;
		color: #333;
		text-decoration: none;
		border-radius: 8px;
		min-height: 40px;
	}
	.sd-mobile-sheet-link:active { background: #f1f2f4; }
	.sd-mobile-sheet-link .sd-mobile-sheet-link-ico { font-size: 17px; width: 22px; text-align: center; }
	.sd-mobile-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: calc(var(--sd-z-sheet) - 1);
		background: rgba(0, 0, 0, .4);
	}
	.sd-mobile-sheet-backdrop[hidden] { display: none; }
	body.sd-mobile-sheet-open { overflow: hidden; }
}

/* ==========================================================================
 * 6. BARS ORDER + ANCHORS + PAGE/NOTIFICATION CLEARANCE
 * ========================================================================== */
.sd-bars-wrap { /* neutral wrapper (desktop unchanged: block stack) */ }
.sd-anchor { display: block; }
@media (max-width: 991px) {
	/* Market bar above Breaking News on mobile (desktop order preserved) */
	.sd-bars-wrap { display: flex; flex-direction: column; }
	.sd-bars-wrap .sd-market { order: -1; }

	/* keep anchor targets below the fixed mobile header */
	.sd-anchor, #np-latest, #sd-mobile-videos, #weather-widget { scroll-margin-top: 112px; }

	/* page content clears the fixed bottom navigation */
	body { padding-bottom: calc(var(--sd-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 4px); }

	/* Radio launcher sits above the bottom navigation */
	.np-radio-player {
		bottom: calc(var(--sd-bottom-nav-h) + 30px + env(safe-area-inset-bottom, 0px));
	}
	/* back-to-top clears the bottom navigation */
	.scrollup {
		bottom: calc(var(--sd-bottom-nav-h) + 22px + env(safe-area-inset-bottom, 0px));
	}
	/* latest-news notification clears the bottom navigation */
	.sd-news-popup {
		bottom: calc(var(--sd-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
	}
}

/* ==========================================================================
 * 7. FOOTER — MOBILE
 * ========================================================================== */
@media (max-width: 991px) {
	/* single-column stack, comfortable tap targets */
	#footer .footer-widgets > .col-sm-4 { width: 100%; margin-bottom: 18px; }
	#footer .footer-bottom-left, #footer .footer-bottom-right { float: none; text-align: center; }
	#footer .nav-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
	#footer { padding-bottom: calc(var(--sd-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ==========================================================================
 * 8. ADVERTISEMENTS — MOBILE (label + fit, no new ad backend)
 * ========================================================================== */
@media (max-width: 991px) {
	/* clear "Advertisement" label above ad slots (content from Admin) */
	.bn-lg, .bn-md, .bn-sm, .bn-lg-sidebar, .bn-sm-sidebar,
	.np-ad-block, .bn-list {
		position: relative;
	}
	.np-ad-block::before,
	.bn-list::before,
	.bn-lg::before, .bn-md::before, .bn-sm::before,
	.bn-lg-sidebar::before, .bn-sm-sidebar::before {
		content: "Advertisement";
		display: block;
		font-size: 10px;
		letter-spacing: .5px;
		text-transform: uppercase;
		color: #9aa1ac;
		text-align: center;
		margin-bottom: 6px;
	}
	/* never overflow: cap ad containers to their column */
	.bn-lg, .bn-md, .bn-sm, .bn-lg-sidebar, .bn-sm-sidebar,
	.np-ad-block iframe, .np-ad-block img, .np-ad-block ins,
	.bn-list iframe, .bn-list img, .bn-list ins {
		max-width: 100%;
	}
	.np-ad-block { overflow: hidden; }
}

/* ==========================================================================
 * 9. ARTICLE LIST / CATEGORY / SEARCH — MOBILE CARDS
 * ========================================================================== */
@media (max-width: 991px) {
	/* horizontal-card look for list pages: fixed thumb, clamped title */
	.post-item-horizontal { display: flex; gap: 12px; padding: 10px 0; }
	.post-item-horizontal .item-image { flex: 0 0 110px; width: 110px; }
	.post-item-horizontal .item-content { min-width: 0; }
	.post-item-horizontal .item-content .title { font-size: 16px; line-height: 1.35; }
	.post-item-horizontal .summary { display: none; }
	.post-item-horizontal .post-buttons { display: none; }
	.post-item-horizontal .item-image img, .post-item-horizontal .item-image .img-responsive { width: 110px; height: 80px; object-fit: cover; }
	/* boxes layouts already stack */
}

/* ==========================================================================
 * 10. ARTICLE DETAIL — MOBILE READING
 * ========================================================================== */
@media (max-width: 991px) {
	.post-content { padding: 0 14px; }
	.post-content .post-title h1.title { font-size: 22px; line-height: 1.35; }
	/* theme sets .text-style{font-size:15px!important}; article-reader.js reads the
	   computed size as its base, so use a higher-specificity !important to give mobile
	   readers a comfortable 17px while preserving the A+/A- text-size controls. */
	.post-content .post-text { font-size: 17px !important; line-height: 1.7 !important; }
	.post-content .post-text img, .post-content .post-text iframe { max-width: 100%; height: auto; }
	.post-content .post-text table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.post-content .post-text iframe { aspect-ratio: 16 / 9; }
	.post-content .post-text { overflow-wrap: break-word; word-break: break-word; }
	/* HARDEN — full usable mobile width for the article body.
	   The theme's .post-content .post-text uses display:table-cell + float,
	   which can shrink the reading column into a narrow vertical strip and
	   make articles unnaturally long. Force a full-width block on mobile —
	   this also covers a stale/missing article-detail.css. */
	.post-content .post-text {
		display: block !important;
		float: none !important;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	/* no article block may reserve a side column beside the text on mobile */
	.post-content .post-image,
	.post-content .post-video,
	.post-content .post-summary,
	.post-content .post-title,
	.post-content .post-tags,
	.post-content .post-share {
		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;
	}
	#main .container { padding-left: 8px; padding-right: 8px; }
	/* Bootstrap rows inside the 8px-gutter #main container used the default -15px
	   margins, pushing every non-article page (category/search/tag/gallery/contact/
	   static) 7px past the viewport on mobile. Compensate the container's own
	   8px padding exactly (same pattern already proven on article pages). */
	#main .container .row { margin-left: 0; margin-right: 0; }
}

/* ==========================================================================
 * 11. REDUCED MOTION
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sd-mobile-sheet { transition: none; }
}