/**
 * Responsive CSS
 *
 * Additional responsive overrides and mobile-specific styles
 *
 * @package AWE_EV_Classic
 */

/* ==========================================================================
   Mobile (up to 640px)
   ========================================================================== */

@media (max-width: 640px) {
	/* Typography */
	:root {
		--font-size-5xl: 2rem;
		--font-size-4xl: 1.75rem;
		--font-size-3xl: 1.5rem;
		--font-size-2xl: 1.25rem;
		--section-padding: var(--section-padding-mobile);
	}

	/* Container */
	.container {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	/* Buttons */
	.btn {
		width: 100%;
		text-align: center;
	}

	/* Card Grid */
	.card-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	/* Section Header */
	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	/* Hide specific elements on mobile */
	.hide-mobile {
		display: none !important;
	}
}

/* ==========================================================================
   Tablet (641px to 1024px)
   ========================================================================== */

@media (min-width: 641px) and (max-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Desktop (1025px and up)
   ========================================================================== */

@media (min-width: 1025px) {
	.hide-desktop {
		display: none !important;
	}

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

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

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.mobile-menu-panel,
	.back-to-top-button,
	.cookie-notice,
	.hero-controls,
	.hero-bullets,
	.btn {
		display: none !important;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
	}

	a {
		text-decoration: underline;
		color: #000;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}

	img {
		max-width: 100%;
		page-break-inside: avoid;
	}

	h1, h2, h3 {
		page-break-after: avoid;
	}
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@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;
	}
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
	:root {
		--color-primary: #8d564a;
		--color-text: #000000;
		--color-bg: #ffffff;
	}

	.btn-primary {
		border: 2px solid currentColor;
	}

	a:focus,
	button:focus {
		outline: 3px solid currentColor;
		outline-offset: 3px;
	}
}

/* ==========================================================================
   Dark Mode (Optional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #3d2e27;
		--color-surface: #4a3a32;
		--color-surface-dark: #57463d;
		--color-text: #f0ebe5;
		--color-text-muted: #b3a88e;
		--color-border: #6b584e;
		--color-border-dark: #7e6a5e;
	}

	.card,
	.hero-overlay {
		background-color: rgba(0, 0, 0, 0.8);
	}
}