/* ============================================
   BR Games - Responsive Design
   ============================================ */

/* Tablet (até 1200px) */
@media (max-width: 1200px) {
	.content-layout {
		grid-template-columns: 220px 1fr 280px;
		gap: var(--spacing-md);
	}
	
	.game-card {
		grid-template-columns: 250px 1fr;
	}
	
	.page-title {
		font-size: 2rem;
	}
	
	.related-games__grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: var(--spacing-sm);
	}
}

/* Tablet Pequeno (até 992px) */
@media (max-width: 992px) {
	.content-layout {
		grid-template-columns: 1fr;
	}
	
	.sidebar-left {
		order: 2;
	}
	
	.content-main {
		order: 1;
	}
	
	.sidebar-right {
		order: 3;
	}
	
	.sidebar {
		flex-direction: row;
		overflow-x: auto;
	}
	
	.sidebar-block {
		min-width: 300px;
		flex: 1;
	}
	
	.game-card {
		grid-template-columns: 200px 1fr;
	}
	
	.footer-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
	
	.search-input {
		width: 200px;
	}
	
	.search-input:focus {
		width: 250px;
	}
}

/* Mobile (até 768px) */
@media (max-width: 768px) {
	:root {
		--spacing-sm: 0.75rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
	}
	
	.header-bar {
		flex-wrap: wrap;
	}
	
	.menu-toggle {
		display: flex;
	}
	
	.main-nav {
		position: fixed;
		top: 0;
		left: -100%;
		width: 280px;
		height: 100vh;
		background: var(--bg-secondary);
		padding: var(--spacing-xl) var(--spacing-md);
		z-index: 2000;
		transition: left var(--transition-normal);
		box-shadow: var(--shadow-lg);
	}
	
	.main-nav.active {
		left: 0;
	}
	
	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
	
	.nav-link {
		width: 100%;
	}
	
	.menu-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 1500;
		opacity: 0;
		visibility: hidden;
		transition: all var(--transition-normal);
	}
	
	.menu-overlay.active {
		opacity: 1;
		visibility: visible;
	}
	
	.header-right {
		order: 3;
		flex-basis: 100%;
		justify-content: center;
	}
	
	.search-form {
		flex: 1;
		max-width: 100%;
	}
	
	.search-input {
		width: 100%;
	}
	
	.search-input:focus {
		width: 100%;
	}
	
	.game-card {
		grid-template-columns: 1fr;
	}
	
	.game-card__image {
		aspect-ratio: 16/9;
	}
	
	.page-title {
		font-size: 1.75rem;
	}
	
	.page-subtitle {
		font-size: 1rem;
	}
	
	.sidebar {
		flex-direction: column;
	}
	
	.sidebar-block {
		min-width: auto;
	}
	
	.game-card__footer {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.game-card__download-btn {
		width: 100%;
		justify-content: center;
	}
	
	.related-games__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-sm);
	}
}

/* Mobile Pequeno (até 480px) */
@media (max-width: 480px) {
	html {
		font-size: 14px;
	}
	
	.logo-text {
		display: none;
	}
	
	.page-header {
		padding: var(--spacing-md) 0;
	}
	
	.page-title {
		font-size: 1.5rem;
	}
	
	.game-card__content {
		padding: var(--spacing-sm);
	}
	
	.game-card__title {
		font-size: 1.2rem;
	}
	
	.game-card__meta {
		flex-wrap: wrap;
		font-size: 0.85rem;
	}
	
	.scroll-top {
		width: 40px;
		height: 40px;
		bottom: var(--spacing-md);
		right: var(--spacing-md);
	}
	
	.nav-link {
		padding: var(--spacing-sm) var(--spacing-md);
	}
	
	.footer {
		padding: var(--spacing-lg) 0 var(--spacing-sm);
	}
	
	.footer-content {
		gap: var(--spacing-md);
	}
	
	.related-games__grid {
		grid-template-columns: 1fr;
	}
	
	.related-game-thumb {
		aspect-ratio: 16/9;
	}
}

/* Landscape Mobile */
@media (max-width: 900px) and (orientation: landscape) {
	.game-card {
		grid-template-columns: 180px 1fr;
	}
	
	.game-card__image {
		aspect-ratio: 3/4;
	}
}

/* Print Styles */
@media print {
	.header,
	.footer,
	.sidebar,
	.scroll-top,
	.game-card__download-btn,
	.menu-overlay {
		display: none !important;
	}
	
	body {
		background: white;
		color: black;
	}
	
	.game-card {
		page-break-inside: avoid;
		border: 1px solid #ddd;
	}
}

/* Acessibilidade - Preferências de Movimento Reduzido */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Dark Mode Preference */
@media (prefers-color-scheme: light) {
	/* Se o usuário preferir modo claro, podemos adicionar overrides aqui */
	/* Por enquanto, mantemos o tema dark como padrão */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	:root {
		--border-color: #ffffff;
		--text-muted: #cccccc;
	}
	
	.game-card {
		border-width: 2px;
	}
}