/* ============================================================
   RESPONSIVE — Mobile-First 320px → 1920px
   ============================================================ */

/* --- SMALL MOBILE (<=480px) --- */
@media screen and (max-width: 480px) {
	.main {
		margin: 0.5rem;
		max-width: calc(100% - 1rem);
		border-radius: 10px;
	}
	.banner {
		height: 100px;
		margin-top: 0;
	}
	nav .container {
		padding: 0.25rem 0.5rem;
	}
	nav .container > div > ul > li > a {
		padding: 8px 8px;
		font-size: 0.7rem;
	}
	nav .container > div > ul > li > a i.fa {
		font-size: 0.75rem;
		margin-right: 2px;
	}
	nav .container > div > ul > li > ul {
		min-width: 150px;
	}
	nav .container > div > ul > li > ul > li > a {
		padding: 8px 14px;
		font-size: 0.75rem;
	}
	.feedContainer {
		padding: 0.5rem;
		gap: 0.5rem;
	}
	.leftPane, .rightPane {
		width: 100%;
		float: none;
	}
	.rightPane {
		grid-template-columns: 1fr;
		display: grid;
		gap: 0.75rem;
	}
	table {
		font-size: 0.75rem;
	}
	table th, table td {
		padding: 6px 8px;
	}
	.header {
		font-size: 0.95rem;
		padding: 0.5rem 0.75rem;
	}
	h1, h2, h3 {
		font-size: 1.1rem;
	}
	.postHolder .well .body {
		padding: 0.75rem;
	}
	ul.linkbuttons li {
		width: 100%;
		margin-right: 0 !important;
	}
	.smedia {
		font-size: 1.2rem;
	}
	footer {
		font-size: 0.7rem;
		padding: 0.75rem 1rem;
	}
	.topPane {
		padding: 0.75rem;
	}
	.widget {
		margin-bottom: 0.75rem;
	}
	.alert-box {
		max-width: 100%;
		font-size: 0.8rem;
	}
	input, select, textarea {
		font-size: 16px; /* Evita zoom automático no iOS */
	}
	/* Esconde decorações de Pokémon em mobile */
	.pokemon-decorations { display: none; }
}

/* --- MOBILE (481px-768px) --- */
@media screen and (min-width: 481px) and (max-width: 768px) {
	.pokemon-decorations { display: none; }
	.main {
		margin: 0.75rem auto;
		border-radius: 12px;
	}
	nav .container {
		flex-direction: column;
		padding: 0.5rem;
	}
	nav .container > div > ul {
		flex-wrap: wrap;
		justify-content: center;
	}
	nav .container > div > ul > li > a {
		padding: 10px 14px;
		font-size: 0.8rem;
	}
	nav .container > div > ul > li > ul {
		left: 50%;
		transform: translateX(-50%);
		min-width: 180px;
	}
	.banner {
		height: 140px;
	}
	.feedContainer {
		padding: 1rem;
		flex-direction: column;
	}
	.leftPane, .rightPane {
		width: 100%;
		float: none;
	}
	.rightPane {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.topPane {
		flex-direction: column;
		align-items: flex-start;
	}
	.searchForm {
		width: 100%;
	}
	footer {
		flex-direction: column;
		text-align: center;
	}
	.postHolder .well .header {
		font-size: 0.85rem;
		padding: 0.75rem 1rem;
	}
	.postHolder .well .body {
		padding: 1rem;
	}
}

/* --- TABLET (769px-1024px) --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.pokemon-decorations { display: none; }
	.main {
		width: calc(100% - 2rem);
	}
	.leftPane {
		width: 100%;
		float: none;
	}
	.rightPane {
		width: 100%;
		float: none;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1rem;
	}
	.banner {
		height: 180px;
	}
	nav .container > div > ul > li > a {
		padding: 14px 14px;
		font-size: 0.85rem;
	}
}

/* --- SMALL DESKTOP (1025px-1300px) --- */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.main {
		width: calc(100% - 3rem);
		max-width: 1100px;
	}
	.banner {
		height: 214px;
	}
}

/* --- LARGE DESKTOP (1920px+) --- */
@media screen and (min-width: 1921px) {
	.main {
		width: 1400px;
	}
	.banner {
		height: 320px;
	}
	nav .container > div > ul > li > a {
		padding: 20px 24px;
		font-size: 1rem;
	}
}

/* --- PRINT --- */
@media print {
	nav, .banner, .rightPane, footer, .searchForm {
		display: none !important;
	}
	.main {
		box-shadow: none !important;
		border: none !important;
		background: transparent !important;
	}
	.leftPane {
		width: 100% !important;
	}
	body {
		background: #fff !important;
		color: #000 !important;
	}
	a {
		color: #000 !important;
	}
}