/* =========================================================================
   MK Gadget — responsive.css
   Breakpoints: 1024px (tablet), 768px (small tablet / large phone), 480px (phone)
   Grid: 3 columns desktop -> 2 columns tablet -> 1 column mobile (rule #8)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Large desktop refinement (no layout change, just tighter gutters at
   very large widths so the fixed 1200px container keeps its proportions)
   ------------------------------------------------------------------------- */
@media (min-width: 1600px) {
	.mkg-container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* -------------------------------------------------------------------------
   Tablet: 1024px and below
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.mkg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.mkg-sidebar {
		order: 2;
	}

	.mkg-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px;
	}

	.mkg-nav__menu {
		gap: 0;
	}

	.mkg-nav__menu a {
		padding: 10px 10px;
		font-size: 0.9rem;
	}
}

/* -------------------------------------------------------------------------
   Small tablet / large phone: 768px and below — switch to mobile navigation
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--mkg-header-height: 64px;
		--mkg-gap: 20px;
	}

	.mkg-nav {
		display: none;
	}

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

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

	.mkg-search {
		display: none;
	}

	.mkg-article__title {
		font-size: 1.6rem;
	}

	.mkg-article__meta {
		gap: 10px;
	}

	.mkg-footer__grid {
		grid-template-columns: 1fr;
		padding: 40px 0 24px;
		gap: 28px;
	}

	.mkg-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.mkg-section-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* -------------------------------------------------------------------------
   Phone: 480px and below
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.mkg-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.mkg-brand {
		font-size: 1.15rem;
	}

	.mkg-brand__tagline {
		display: none;
	}

	.mkg-card__body {
		padding: 16px;
	}

	.mkg-article__title {
		font-size: 1.4rem;
	}

	.mkg-404__code {
		font-size: 3.6rem;
	}

	.mkg-pagination a,
	.mkg-pagination span {
		min-width: 34px;
		height: 34px;
		padding: 0 8px;
		font-size: 0.85rem;
	}
}

/* Prevent any element from forcing horizontal scroll on narrow phones */
@media (max-width: 400px) {
	.mkg-share {
		gap: 8px;
	}

	.mkg-drawer__panel {
		width: 92vw;
	}
}