/* ==========================================================================
   IT Biponi ePaper - Responsive Media Queries
   ========================================================================== */

/* Large Screens (max-width: 1200px) */
@media (max-width: 1200px) {
	:root {
		--itbiponi-container-padding: 20px;
	}
}

/* Medium Screens / Tablets (max-width: 992px) */
@media (max-width: 992px) {
	.itbiponi-layout-grid {
		grid-template-columns: 1fr;
	}

	.header-ad-area,
	.header-ad-left,
	.header-ad-right {
		display: none !important;
	}

	.footer-widgets-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.news-grid-3col {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablets & Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
	.main-navigation {
		display: none;
	}

	.mobile-menu-toggle-btn {
		display: flex;
	}

	.news-grid-2col,
	.news-grid-3col {
		grid-template-columns: 1fr;
	}

	.itbiponi-topbar-left {
		width: 100%;
		justify-content: space-between;
	}

	.itbiponi-topbar-right {
		width: 100%;
		justify-content: space-between;
	}

	.epaper-strip-inner {
		flex-direction: column;
		text-align: center;
	}

	.epaper-strip-cover {
		margin: 0 auto;
	}

	.epaper-strip-actions {
		justify-content: center;
	}

	.article-title {
		font-size: 24px;
	}

	.news-card-lead .lead-title {
		font-size: 20px;
	}

	.footer-widgets-grid {
		grid-template-columns: 1fr;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
	.news-card-list {
		flex-direction: column;
	}

	.news-card-list .list-thumb {
		width: 100%;
		height: auto;
	}

	.news-card-list .list-thumb img {
		height: 160px;
	}

	.article-meta-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}


/* ==========================================================================
   Tablet & Mobile Refinements
   This file loads after epaper-viewer.css (see inc/enqueue.php), so these rules can
   refine the header, navigation and viewer. Everything sits inside a max-width or
   touch query: the desktop layout (> 1024px) is not affected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet landscape / small laptop (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.epaper-3col-container {
		grid-template-columns: 190px minmax(0, 1fr) 190px;
	}

	.epaper-3col-container > * {
		min-width: 0;
	}

	.top-branding-inner {
		gap: 12px;
	}

	.header-ad-banner-slot {
		max-width: 100%;
	}

	.header-ad-link {
		display: block;
	}

	.header-ad-link img {
		margin: 0 auto;
	}
}

/* --------------------------------------------------------------------------
   Tablet portrait & below (<= 992px): single content column, 2-up sidebar widgets
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.itbiponi-layout-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.itbiponi-layout-grid > * {
		min-width: 0;
	}

	.itbiponi-sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		align-items: start;
	}

	.itbiponi-sidebar .widget {
		margin-bottom: 0;
		min-width: 0;
	}

	.itbiponi-sidebar > .itbiponi-ad-container {
		grid-column: 1 / -1;
		margin: 0;
	}

	.itbiponi-sidebar .epaper-widget-cover img {
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Editor content must never push the page wider than the screen. */
	.article-body img,
	.article-body iframe,
	.article-body video,
	.article-body embed,
	.article-body object,
	.article-body figure,
	.article-body .wp-caption {
		max-width: 100%;
	}

	.article-body img {
		height: auto;
	}

	.article-body table,
	.article-body pre {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.article-body .alignwide,
	.article-body .alignfull {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.comment-form textarea,
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"] {
		width: 100%;
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Tablet portrait (<= 850px): viewer on top, thumbnails + sidebar side by side
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {
	.epaper-3col-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin: 14px 0 24px;
	}

	.epaper-center-column {
		grid-column: 1 / -1;
		order: 1;
	}

	.epaper-sidebar-right {
		order: 2;
	}

	.epaper-sidebar-left {
		order: 3;
	}

	/* Touch-sized controls (the news pop-up is built by epaper-viewer.js with inline styles). */
	#epaper-news-modal button:not([title]),
	#epaper-news-modal a[id^="epaper-news-"],
	#epaper-news-modal button[title="Copy Link"] {
		width: 44px !important;
		height: 44px !important;
	}

	.archive-date-input {
		min-height: 44px;
		font-size: 16px;
	}

	.btn-archive-find,
	.fb-follow-button {
		min-height: 44px;
	}

	.share-btn,
	.button {
		min-height: 40px;
	}

	.pagination-list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.pagination-list a,
	.pagination-list span {
		min-width: 44px;
		height: 44px;
	}

	.itbiponi-social-share {
		flex-wrap: wrap;
	}

	.comment-form textarea,
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.search-form .search-field {
		font-size: 16px; /* stops iOS from zooming into focused fields */
	}
}

/* --------------------------------------------------------------------------
   Card grids & typography (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.news-grid-2col,
	.news-grid-3col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.section-title {
		font-size: 18px;
	}

	.page-title {
		font-size: 22px;
		line-height: 1.35;
	}

	.widget-title {
		font-size: 16px;
	}

	.article-body {
		font-size: 17px;
		line-height: 1.75;
	}

	.article-body blockquote {
		font-size: 17px;
		padding: 10px 14px;
		margin: 18px 0;
	}

	/* Footer: the three columns stack, separated by horizontal rules. */
	.ref-footer-main {
		padding: 28px 0 4px;
	}

	.ref-footer-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.ref-footer-col,
	.ref-footer-col:first-child,
	.ref-footer-col:last-child {
		padding-left: 0;
		padding-right: 0;
	}

	.ref-footer-col + .ref-footer-col {
		margin-top: 22px;
		padding-top: 22px;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ref-footer-logo-text {
		font-size: 34px;
	}

	.ref-footer-social a {
		width: 44px;
		height: 44px;
	}

	.ref-footer-nav {
		margin-top: 22px;
	}
}

/* Footer columns get tighter between tablet landscape and desktop. */
@media (min-width: 769px) and (max-width: 1024px) {
	.ref-footer-col {
		padding-left: 20px;
		padding-right: 20px;
	}

	.ref-footer-col:first-child {
		padding-left: 0;
	}

	.ref-footer-col:last-child {
		padding-right: 0;
	}

	.ref-footer-logo-text {
		font-size: 34px;
	}
}

/* Footer navigation and bottom bar on phones. */
@media (max-width: 600px) {
	.ref-footer-nav-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.ref-footer-nav-list li + li {
		border-left: 0;
	}

	.ref-footer-nav-list li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.ref-footer-nav-list a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 6px 10px;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 6px;
		text-align: center;
	}

	.ref-footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Phones (<= 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.news-grid-2col,
	.news-grid-3col {
		grid-template-columns: minmax(0, 1fr);
	}

	/* ePaper edition archive keeps two compact cover cards per row. */
	.news-grid-3col:has(.epaper-archive-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.itbiponi-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Header: stacked logo + dates, full-width banner. */
	.itbiponi-top-branding-bar {
		padding: 10px 0;
	}

	.header-left-group {
		flex-direction: column;
		gap: 8px !important;
		width: 100%;
	}

	/* Large logo: fills the screen width up to 360px, never wider than the screen. */
	.site-branding-wrap {
		width: 100%;
		text-align: center;
	}

	.custom-site-logo,
	.custom-site-logo a {
		display: block;
	}

	.custom-site-logo img {
		width: 100%;
		max-width: min(100%, 360px);
		max-height: none;
		height: auto;
		margin: 0 auto;
	}

	.pp-brand-logo {
		justify-content: center;
	}

	.pp-logo-badge {
		width: 64px;
		height: 64px;
	}

	.pp-title {
		font-size: 34px;
	}

	.header-date-block {
		text-align: center !important;
	}

	.date-english {
		font-size: 0.95rem !important;
	}

	.date-bn-ar {
		font-size: 0.85rem !important;
	}

	.header-ad-banner-slot {
		width: 100%;
	}

	.header-ad-link img {
		width: 100%;
		max-height: none;
	}

	/* ePaper viewer */
	.epaper-3col-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.epaper-canvas-viewport {
		min-height: 240px;
		padding: 2px;
	}

	.page-numbers-grid {
		gap: 6px;
	}

	.page-num-btn {
		min-width: 40px;
		height: 40px;
		font-size: 15px;
	}

	.epaper-bottom-controls-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 6px 0 10px;
	}

	.btn-page-nav-maroon {
		justify-content: center;
		min-height: 44px;
		padding: 8px 10px;
		font-size: 13.5px;
		white-space: nowrap;
	}

	.epaper-social-share-circles {
		grid-column: 1 / -1;
		order: 3;
		justify-content: center;
		gap: 12px;
	}

	.soc-circle-btn {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	/* Page thumbnails become a swipeable strip instead of a nested scroll box. */
	.today-thumbnails-scroll-wrap {
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 0 8px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.today-thumbnails-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 96px;
		width: max-content;
	}

	.thumb-grid-card {
		scroll-snap-align: start;
	}

	/* Advertisements: one per row, every image spans the full available width. */
	.ads-stack-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.red-ad-banner-link,
	.red-ad-banner-card {
		width: 100%;
	}

	.red-ad-banner-link img {
		width: 100%;
		height: auto;
	}

	.itbiponi-ad-container a {
		display: block;
	}

	.itbiponi-ad-container .itbiponi-ad-img {
		width: 100%;
	}

	/* News pop-up (built by epaper-viewer.js with inline styles). */
	#epaper-news-modal {
		padding: 8px !important;
	}

	#epaper-news-modal > div {
		max-height: 94vh !important;
		max-height: 94dvh !important;
	}

	#epaper-news-crop-display {
		padding: 48px 10px 72px !important;
	}

	#epaper-news-modal button:not([title]) {
		top: 6px !important;
		right: 8px !important;
	}

	/* Single-article and misc. */
	.article-meta-left {
		gap: 8px 14px;
	}

	.itbiponi-social-share {
		gap: 8px;
	}

	.share-label {
		width: 100%;
	}

	.related-posts-section {
		margin: 28px 0 20px !important;
	}

	.error-404 {
		padding: 28px 16px !important;
		margin: 20px auto !important;
	}

	.error-404 > div:first-child {
		font-size: 56px !important;
	}
}

/* --------------------------------------------------------------------------
   Small phones (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--itbiponi-container-padding: 14px;
		--itbiponi-font-size-base: 16px;
	}

	.site-content {
		padding: 16px 0 28px;
	}

	.article-title {
		font-size: 22px;
		line-height: 1.35;
	}

	.article-body {
		font-size: 16.5px;
	}

	.itbiponi-epaper-strip {
		padding: 16px;
		margin: 24px 0;
	}

	.epaper-strip-cover {
		width: 160px;
	}
}

@media (max-width: 359px) {
	.news-grid-3col:has(.epaper-archive-card) {
		grid-template-columns: minmax(0, 1fr);
	}

	.btn-page-nav-maroon span {
		font-size: 12.5px;
	}
}

/* --------------------------------------------------------------------------
   Touch screens (no hover): hotspots stay invisible (no outline / fill)
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.epaper-mapped-region {
		background-color: transparent;
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}

	.thumb-grid-card:hover {
		transform: none;
	}
}


/* ==========================================================================
   Icon-only navigation (all screen sizes)
   A full-width bar in the normal page flow directly below the header:
   Online Version (left) | horizontally scrolling menu | Home (right).
   Item labels stay in the markup as visually hidden text (and as aria-label / tooltip).
   ========================================================================== */

/* Labels are hidden visually but stay available to screen readers. */
.itbiponi-primary-navbar .nav-home-button .nav-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.itbiponi-primary-navbar {
	position: static;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border-top: 1px solid #d1d5db;
	border-bottom: 1px solid #d1d5db;
	box-shadow: none;
}

.itbiponi-primary-navbar .itbiponi-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.itbiponi-primary-navbar .navbar-inner-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	min-height: 0;
	gap: 0;
	padding: 0;
}

/* Flatten the wrappers so the side controls and the menu become direct cells of one row. */
.itbiponi-primary-navbar .nav-left-group,
.itbiponi-primary-navbar .nav-right-info,
.itbiponi-primary-navbar .nav-social-icons {
	display: contents !important;
}

/* Every item is the same square icon button. */
.itbiponi-primary-navbar .nav-home-button,
.itbiponi-primary-navbar .reference-nav-menu li a,
.itbiponi-primary-navbar .nav-online-link,
.itbiponi-primary-navbar .nav-social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	min-height: 48px;
	padding: 0;
	gap: 0;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.itbiponi-primary-navbar .reference-nav-menu li a,
.itbiponi-primary-navbar .nav-online-link,
.itbiponi-primary-navbar .nav-social-icons a {
	color: #1e293b !important; /* the social links carry an inline white colour */
	font-size: 20px !important;
}

.itbiponi-primary-navbar .reference-nav-menu li a:hover,
.itbiponi-primary-navbar .reference-nav-menu li a:focus-visible,
.itbiponi-primary-navbar .nav-online-link:hover,
.itbiponi-primary-navbar .nav-online-link:focus-visible,
.itbiponi-primary-navbar .nav-social-icons a:hover,
.itbiponi-primary-navbar .nav-social-icons a:focus-visible,
.itbiponi-primary-navbar .reference-nav-menu .current-menu-item > a {
	color: var(--itbiponi-primary) !important;
	background: rgba(var(--itbiponi-primary-rgb), 0.1);
}

.itbiponi-primary-navbar .nav-home-button:focus-visible,
.itbiponi-primary-navbar a:focus-visible {
	outline: 2px solid var(--itbiponi-primary);
	outline-offset: -2px;
}

/* Order: Home (left) | scrolling menu | Online Version (right). */
.itbiponi-primary-navbar .nav-home-button {
	order: 1;
}

.itbiponi-primary-navbar .nav-menu-container {
	order: 2;
}

.itbiponi-primary-navbar .nav-social-icons a {
	order: 3;
}

.itbiponi-primary-navbar .nav-online-link {
	order: 4;
}

/* Side controls stay fixed; only the middle menu scrolls horizontally. */
.itbiponi-primary-navbar .nav-home-button,
.itbiponi-primary-navbar .nav-online-link,
.itbiponi-primary-navbar .nav-social-icons a {
	flex: 0 0 auto;
}

.itbiponi-primary-navbar .nav-menu-container {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.itbiponi-primary-navbar .nav-menu-container::-webkit-scrollbar {
	display: none;
}

.itbiponi-primary-navbar .reference-nav-menu {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.itbiponi-primary-navbar .reference-nav-menu li {
	flex: 0 0 auto;
}

/* Menu items are text-only button tabs: no icons, visible labels. */
.itbiponi-primary-navbar .reference-nav-menu {
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
}

.itbiponi-primary-navbar .reference-nav-menu li a i {
	display: none;
}

.itbiponi-primary-navbar .reference-nav-menu li a {
	min-width: 0;
	min-height: 0;
	padding: 8px 16px;
	font-size: 14.5px !important;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	background: #f1f5f9;
	border: 1px solid #d1d5db;
	border-radius: 6px;
}

.itbiponi-primary-navbar .reference-nav-menu li a:hover,
.itbiponi-primary-navbar .reference-nav-menu li a:focus-visible,
.itbiponi-primary-navbar .reference-nav-menu .current-menu-item > a {
	border-color: var(--itbiponi-primary);
}

@media (max-width: 768px) {
	.itbiponi-primary-navbar .nav-home-button,
	.itbiponi-primary-navbar .nav-online-link,
	.itbiponi-primary-navbar .nav-social-icons a {
		min-height: 56px;
	}
}

@media print {
	.itbiponi-primary-navbar {
		display: none;
	}
}

/* ==========================================================================
   Page template + "Today's ePaper" widget (responsive)
   ========================================================================== */
@media (max-width: 992px) {
	/* The ePaper widget gets a full-width, side-by-side card instead of a half-width column. */
	.itbiponi-sidebar .widget_itbiponi_epaper_preview {
		grid-column: 1 / -1;
	}

	.today-epaper {
		flex-direction: row;
		align-items: center;
		gap: 22px;
	}

	.today-epaper__cover {
		flex: 0 0 200px;
		width: 200px;
	}

	.today-epaper__body {
		flex: 1 1 auto;
		text-align: left;
	}

	.today-epaper__actions {
		justify-content: flex-start;
	}

	.today-epaper__actions .button {
		flex: 0 0 auto;
	}
}

@media (max-width: 768px) {
	.itbiponi-page-card {
		border-radius: 10px;
	}

	.itbiponi-page-hero {
		padding: 20px 18px 16px;
	}

	.itbiponi-page-hero .page-title {
		font-size: 24px;
	}

	.itbiponi-page-card .page-body {
		padding: 18px 18px 22px;
	}

	.itbiponi-page-card .comments-area {
		padding: 0 18px 22px;
	}
}

@media (max-width: 480px) {
	.itbiponi-page-hero .page-title {
		font-size: 21px;
	}

	.today-epaper {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 14px;
	}

	.today-epaper__cover {
		flex: none;
		width: 100%;
		max-width: 260px;
		margin: 0 auto;
	}

	.today-epaper__body {
		text-align: center;
	}

	.today-epaper__actions {
		justify-content: center;
	}

	.today-epaper__actions .button {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   Header refinements: smaller desktop date text, Online Version button
   ========================================================================== */
@media (min-width: 769px) {
	.header-date-block .date-english {
		font-size: 1rem !important;
	}

	.header-date-block .date-bn-ar {
		font-size: 0.85rem !important;
	}

	/* Online Version: a button with icon and text. */
	.itbiponi-primary-navbar .nav-online-link {
		align-self: center;
		gap: 8px;
		min-width: 0;
		min-height: 0;
		margin: 6px 12px 6px 8px;
		padding: 9px 18px;
		font-size: 15px !important;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		color: #ffffff !important;
		background: linear-gradient(180deg, var(--itbiponi-primary) 0%, var(--itbiponi-primary-dark) 100%);
		border-radius: 999px;
		box-shadow: 0 2px 6px rgba(var(--itbiponi-primary-rgb), 0.35);
		transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	}

	.itbiponi-primary-navbar .nav-online-link:hover,
	.itbiponi-primary-navbar .nav-online-link:focus-visible {
		color: #ffffff !important;
		background: linear-gradient(180deg, var(--itbiponi-primary) 0%, var(--itbiponi-primary-dark) 100%);
		filter: brightness(1.08);
		transform: translateY(-1px);
		box-shadow: 0 4px 10px rgba(var(--itbiponi-primary-rgb), 0.45);
	}

	.itbiponi-primary-navbar .nav-online-link i {
		font-size: 16px;
	}

	.itbiponi-primary-navbar .nav-online-link .nav-label {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}
}

/* Mobile: Online Version stays icon-only. */
@media (max-width: 768px) {
	.itbiponi-primary-navbar .nav-online-link .nav-label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}