/**
 * NEws Theme - Responsive Breakpoints & Mobile-First Overrides
 *
 * Organized strictly mobile-first with four practical responsive target tiers:
 * - Mobile (< 768px): default rules & mobile off-canvas drawer
 * - Tablet (>= 768px): intermediate expansions & 2-column grids
 * - Desktop (>= 1024px): desktop header, sticky menu, 2-column content + sidebar
 * - Large Desktop (>= 1280px): large container expansions, hero layouts
 *
 * @package NewsCore
 * @since 1.2.0
 */

/* ==========================================================================
   1. Mobile Tier (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
	.site-top-bar {
		display: none; /* Keep mobile header clean and fast */
	}

	.site-title {
		font-size: var(--nc-font-size-2xl);
	}

	/* Tap target assurances on mobile */
	.pagination .page-numbers,
	.posts-pagination .page-numbers,
	.btn,
	.header-action-btn {
		min-height: 44px;
	}

	.search-input-group {
		flex-direction: column;
	}

	.search-modal-submit-btn {
		width: 100%;
	}

	.search-form-group {
		flex-direction: column;
	}

	.search-form .search-submit {
		inline-size: 100%;
	}
}

/* ==========================================================================
   2. Tablet Tier (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
	.site-top-bar {
		display: block;
	}

	.posts-grid-standard {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--nc-space-6);
	}

	.news-card--standard .card-media,
	.news-card-standard .card-media {
		aspect-ratio: 3 / 2;
	}
}

/* ==========================================================================
   3. Desktop Tier (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
	.posts-grid-standard {
		grid-template-columns: repeat(2, 1fr);
	}

	.no-sidebar .posts-grid-standard {
		grid-template-columns: repeat(3, 1fr);
	}

	.primary-menu > li > a {
		padding: var(--nc-space-3) var(--nc-space-4);
	}
}

/* ==========================================================================
   4. Large Desktop Tier (>= 1280px)
   ========================================================================== */
@media (min-width: 1280px) {
	:root {
		--nc-gutter: 2rem;
	}

	.posts-grid-standard {
		gap: var(--nc-space-8);
	}
}