/* ===================================================================
   POKÉMON RELOAD - RESPONSIVE STYLESHEET (MOBILE & TABLET)
   =================================================================== */

@media (max-width: 1024px) {
	.main {
		width: 100%;
		padding: 0 16px 30px 16px;
	}

	.feedContainer {
		flex-direction: column !important;
		gap: 20px;
	}

	.leftPane, .rightPane {
		width: 100% !important;
	}

	.features-grid {
		grid-template-columns: 1fr;
	}

	.download-cards-container {
		grid-template-columns: 1fr;
	}

	nav .container {
		flex-wrap: wrap;
		gap: 12px;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 13.5px;
	}

	nav {
		margin-top: 10px;
		margin-bottom: 18px;
		padding: 10px 14px;
		position: static !important;
	}

	nav .container {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.nav-brand {
		justify-content: center;
	}

	nav ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px;
	}

	nav ul li a {
		padding: 8px 10px !important;
		font-size: 13px;
	}

	.nav-right-actions {
		justify-content: center;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 6px;
	}

	.hero-portal {
		padding: 28px 18px;
		border-radius: var(--radius-lg);
	}

	.hero-logo-img {
		max-width: 280px;
		width: 90%;
	}

	.hero-headline {
		font-size: 22px;
	}

	.hero-subheadline {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.hero-cta-group {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}

	.btn-cta-main, .btn-cta-secondary {
		width: 100%;
		justify-content: center;
		padding: 12px 20px;
		font-size: 14px;
	}

	.well {
		padding: 16px !important;
		border-radius: var(--radius-md) !important;
	}

	.download-card {
		padding: 20px 16px;
	}

	.dl-card-icon {
		font-size: 40px;
	}

	.dl-card-title {
		font-size: 19px;
	}

	.security-seal-banner {
		flex-direction: column;
		text-align: center;
		padding: 16px;
	}

	table {
		font-size: 12px;
	}

	th, td {
		padding: 8px 10px !important;
	}
}