/*
 * Responsive layer — mobile-first: base styles in main.css target small
 * screens; rules here progressively enhance for larger viewports.
 */

/* Tablet and up */
@media (min-width: 600px) {
	.apk-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

/* Desktop and up */
@media (min-width: 900px) {
	.site-nav__list {
		display: flex;
	}

	.header-search {
		display: flex;
	}

	.menu-toggle {
		display: none;
	}

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

	.category-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.site-footer__inner {
		grid-template-columns: 1fr 1fr 1fr;
		align-items: start;
	}

	.page-layout {
		display: grid;
		grid-template-columns: 2.5fr 1fr;
		gap: var(--spacing-lg);
	}
}

/* Large screens */
@media (min-width: 1200px) {
	.apk-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* -------------------------------------------------- New component layouts -------------------------------------------------- */

/* Sidebars stack below content on mobile, sit alongside it from tablet up */
@media (min-width: 900px) {
	.home-layout,
	.archive-layout {
		grid-template-columns: 2.4fr 1fr;
		align-items: start;
	}

	.single-apk-layout {
		grid-template-columns: 1fr 300px;
		align-items: start;
	}

	.discover-grid {
		grid-template-columns: repeat(6, 1fr);
	}

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

	.ranked-list {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

	.app-header {
		flex: 1;
	}

	.apk-single__top {
		display: flex;
		gap: var(--spacing-lg);
		align-items: flex-start;
	}
}

@media (max-width: 899px) {
	.discover-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.info-panel {
		width: 100%;
		margin-top: var(--spacing-md);
	}
}

@media (max-width: 599px) {
	.discover-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.app-header {
		flex-direction: column;
	}
}

/* Mobile navigation drawer (progressive enhancement — JS adds `.is-open`,
   but the menu remains reachable and functional via server-rendered HTML
   even if JavaScript fails to load). */
@media (max-width: 899px) {
	.site-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--color-background);
		border-bottom: 1px solid var(--color-border);
		display: none;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		display: flex;
		flex-direction: column;
		padding: var(--spacing-md);
	}

	.site-header {
		position: relative;
	}
}