/* SarkariAtlas — Responsive overrides
   Breakpoints target: 320, 375, 390, 430, 768, 1024, 1440 */

/* =========================================================
   Large desktop refinement
   ========================================================= */
@media (max-width: 1280px) {
	.sa-feature-box { padding: var(--sa-space-6); gap: var(--sa-space-6); }
}

/* =========================================================
   Tablet / small desktop (<=1024px)
   ========================================================= */
@media (max-width: 1024px) {
	.sa-card-grid { grid-template-columns: repeat(2, 1fr); }
	.sa-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sa-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.sa-tools-grid { grid-template-columns: repeat(2, 1fr); }
	.sa-rules-list { grid-template-columns: repeat(2, 1fr); }
	.sa-salary-links { grid-template-columns: repeat(2, 1fr); }
	.sa-paylevel-grid { grid-template-columns: repeat(6, 1fr); }
	.sa-feature-box { grid-template-columns: 1fr; }

	.sa-main-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.sa-main-layout .sidebar {
		order: 2;
	}
	.sa-main-layout .sa-main-col {
		order: 1;
	}
}

/* =========================================================
   Tablet (<=900px) — nav starts to collapse
   ========================================================= */
@media (max-width: 900px) {
	.sa-header-search { display: none; }
	.sa-nav-menu > li > a { padding: 0 var(--sa-space-3); font-size: 0.8125rem; }
}

/* =========================================================
   Mobile (<=768px)
   ========================================================= */
@media (max-width: 768px) {
	:root {
		--sa-space-7: 32px;
		--sa-space-8: 40px;
	}

	.sa-container { padding-left: var(--sa-space-4); padding-right: var(--sa-space-4); }

	/* Utility bar: keep single line, hide links on very small screens handled below */
	.sa-utility-bar .sa-container { flex-wrap: wrap; row-gap: 4px; padding-top: 4px; padding-bottom: 4px; }

	/* Header */
	.sa-header-inner { flex-wrap: wrap; gap: var(--sa-space-3); padding-top: var(--sa-space-4); padding-bottom: var(--sa-space-4); }
	.sa-brand-tagline { display: none; }
	.sa-brand img.sa-logo-image { max-height: 34px; }
	.sa-brand-name { font-size: 1.25rem; }

	.sa-header-search {
		order: 3;
		max-width: none;
		flex-basis: 100%;
	}

	.sa-menu-toggle { display: inline-flex; }

	/* Primary nav becomes an off-canvas drawer, toggled via JS */
	.sa-primary-nav { display: none; }

	.sa-mobile-nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 1000;
	}

	.sa-mobile-nav[data-open="true"] {
		display: block;
	}

	.sa-mobile-nav-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(15, 26, 42, 0.5);
	}

	.sa-mobile-nav-panel {
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: min(320px, 86vw);
		background: var(--sa-surface);
		overflow-y: auto;
		box-shadow: -8px 0 24px rgba(0,0,0,0.15);
		padding: var(--sa-space-4);
	}

	.sa-mobile-nav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: var(--sa-space-3);
		margin-bottom: var(--sa-space-3);
		border-bottom: var(--sa-border-w) solid var(--sa-border);
	}

	.sa-mobile-nav-close {
		width: 40px; height: 40px;
		display: flex; align-items: center; justify-content: center;
		background: var(--sa-bg);
		border: var(--sa-border-w) solid var(--sa-border);
		border-radius: var(--sa-radius-sm);
	}
	.sa-mobile-nav-close svg { width: 18px; height: 18px; }

	.sa-mobile-nav-menu { list-style: none; margin: 0; padding: 0; }
	.sa-mobile-nav-menu li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: var(--sa-border-w) solid var(--sa-border);
	}
	.sa-mobile-nav-menu li > a {
		flex: 1 1 auto;
		display: block;
		padding: 14px 4px;
		color: var(--sa-text);
		font-weight: 600;
		font-size: 1rem;
	}
	.sa-mobile-nav-menu li > a:hover { color: var(--sa-secondary); text-decoration: none; }

	.sa-mobile-nav-menu .sub-menu {
		flex-basis: 100%;
		list-style: none;
		margin: 0 0 var(--sa-space-2);
		padding-left: var(--sa-space-4);
		display: none;
	}
	.sa-mobile-nav-menu .sub-menu li { border-bottom: none; }
	.sa-mobile-nav-menu .sub-menu a { font-weight: 500; font-size: 0.9375rem; padding: 10px 4px; }
	.sa-mobile-nav-menu li.sa-sub-open > .sub-menu { display: block; }

	.sa-mobile-nav-toggle-caret {
		flex-shrink: 0;
		background: none; border: none; padding: 8px;
		display: flex; align-items: center; justify-content: center;
	}
	.sa-mobile-nav-toggle-caret svg { width: 14px; height: 14px; transition: transform var(--sa-transition); }
	.sa-mobile-nav-menu li.sa-sub-open > .sa-mobile-nav-toggle-caret svg { transform: rotate(180deg); }

	body.sa-nav-locked { overflow: hidden; }

	/* Hero */
	.sa-hero { padding-top: var(--sa-space-7); padding-bottom: var(--sa-space-6); }
	.sa-hero-search { flex-direction: column; }
	.sa-hero-search button { padding: 14px; }

	/* Sections */
	.sa-section { padding-top: var(--sa-space-6); padding-bottom: var(--sa-space-6); }
	.sa-section-head { flex-direction: column; align-items: flex-start; }

	/* Latest updates */
	.sa-update-row { grid-template-columns: 1fr; gap: var(--sa-space-2); }

	/* Grids collapse to single column */
	.sa-card-grid,
	.sa-grid--2, .sa-grid--3, .sa-grid--4, .sa-grid--5,
	.sa-tools-grid {
		grid-template-columns: 1fr;
	}

	.sa-rules-list, .sa-salary-links { grid-template-columns: 1fr; }

	.sa-paylevel-grid { grid-template-columns: repeat(4, 1fr); }

	.sa-feature-box { padding: var(--sa-space-5); }
	.sa-feature-box-actions { flex-direction: column; }
	.sa-feature-box-actions .sa-btn { width: 100%; }

	.sa-newsletter { padding: var(--sa-space-6) var(--sa-space-4); }
	.sa-newsletter-form { flex-direction: column; }

	/* Article */
	.sa-article-meta { gap: var(--sa-space-2) var(--sa-space-4); }
	.sa-article-body { font-size: 1rem; }

	.sa-author-card { flex-direction: column; align-items: center; text-align: center; }

	.sa-footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sa-space-5); }
	.sa-footer-bottom-inner { flex-direction: column; align-items: flex-start; }

	.sa-404-code { font-size: 3rem; }
}

/* =========================================================
   Small mobile (<=430px)
   ========================================================= */
@media (max-width: 430px) {
	.sa-paylevel-grid { grid-template-columns: repeat(3, 1fr); }
	.sa-footer-grid { grid-template-columns: 1fr; }
	.sa-utility-links { gap: var(--sa-space-3); }
}

/* =========================================================
   Extra small mobile (<=375px)
   ========================================================= */
@media (max-width: 375px) {
	.sa-brand-name { font-size: 1.125rem; }
	.sa-hero-sub { font-size: 1rem; }
	.sa-paylevel-grid { grid-template-columns: repeat(2, 1fr); }
	.sa-utility-links li:nth-child(n+3) { display: none; }
}