/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

/* Tablets (768px and up) */
@media (max-width: 1024px) {
	.header-wrap {
		padding: 1rem 1.5rem;
	}

	.main-menu ul {
		gap: 1.5rem;
	}

	.section h2 {
		font-size: 2rem;
	}

	.section-title h1 {
		font-size: 2.5rem;
	}

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

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

/* Mobile (768px and down) */
@media (max-width: 768px) {
	.header-wrap {
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
	}

	.logo h1,
	.logo a {
		font-size: 1.4rem;
	}

	.main-menu ul {
		flex-direction: column;
		gap: 0.5rem;
		width: 100%;
		text-align: center;
	}

	.main-menu a {
		display: block;
		padding: 0.5rem 0;
	}

	.section {
		padding: 2rem 0;
	}

	.container {
		padding: 0 1.5rem;
	}

	.section h2 {
		font-size: 1.75rem;
	}

	.section-title {
		padding: 4rem 0;
	}

	.section-title h1 {
		font-size: 2rem;
	}

	.section-title .lead {
		font-size: 1.1rem;
	}

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

	.footer-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.btn {
		padding: 0.6rem 1.5rem;
		font-size: 0.95rem;
	}

	.btn-large {
		padding: 0.8rem 2rem;
		font-size: 1rem;
	}

	.posts-list {
		padding: 0 1rem;
	}
}

/* Small Mobile (480px and down) */
@media (max-width: 480px) {
	.header-wrap {
		padding: 0.75rem 0.5rem;
	}

	.logo h1,
	.logo a {
		font-size: 1.2rem;
	}

	.site-header {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	}

	.section {
		padding: 1.5rem 0;
	}

	.container {
		padding: 0 1rem;
	}

	.section h2 {
		font-size: 1.5rem;
		margin-bottom: 0.75rem;
	}

	.section > .container > p {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}

	.section-title {
		padding: 2.5rem 0;
	}

	.section-title h1 {
		font-size: 1.5rem;
	}

	.section-title .lead {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}

	.feature-card {
		padding: 1.5rem;
	}

	.feature-card h3 {
		font-size: 1.1rem;
	}

	.post-item {
		padding: 1.5rem;
	}

	.btn {
		padding: 0.6rem 1.2rem;
		font-size: 0.9rem;
	}

	.btn-large {
		padding: 0.8rem 1.5rem;
		font-size: 0.95rem;
	}

	.footer-section h4 {
		font-size: 1rem;
	}

	.social-links {
		justify-content: center;
	}
}

/* Landscape Mobile */
@media (max-height: 600px) and (orientation: landscape) {
	.section {
		padding: 2rem 0;
	}

	.section-title {
		padding: 3rem 0;
	}

	.section-title h1 {
		font-size: 1.8rem;
	}

	.section-subscribe {
		padding: 2rem 0;
	}
}

/* High Resolution Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	/* Subtle improvements for retina displays */
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/* Accessibility - Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #e0e0e0;
		--light-bg: #1e1e1e;
		--border-color: #404040;
	}

	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	.site-header {
		background-color: #1a1a1a;
	}

	.post-item {
		background-color: #1e1e1e;
	}

	.feature-card {
		background-color: #1e1e1e;
		color: #e0e0e0;
	}

	.feature-card h3 {
		color: #e0e0e0;
	}

	.feature-card p {
		color: #b0b0b0;
	}
}

/* ================================================
   ENHANCED RESPONSIVE - Garden & Forms
   ================================================ */

/* Tablet - Garden Section */
@media (max-width: 1024px) {
	.garden-features-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
	
	.section-garden {
		padding: var(--space-5) var(--space-3);
	}
	
	.hero-visual {
		min-height: 400px;
	}
}

/* Mobile - Garden & Navigation */
@media (max-width: 768px) {
	.garden-features-grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
	
	.section-garden {
		padding: var(--space-4) var(--space-2);
	}
	
	.garden-feature-card {
		padding: var(--space-3);
	}
	
	.hero-visual {
		min-height: 300px;
	}
	
	/* Better Button Sizing on Mobile */
	.btn-lg,
	.btn-large {
		padding: 0.875rem 2rem;
		font-size: 1rem;
	}
	
	.btn-xl {
		padding: 1rem 2.5rem;
		font-size: 1.1rem;
	}
	
	/* Form Inputs */
	input[type="text"],
	input[type="email"],
	input[type="number"],
	textarea {
		font-size: 16px; /* Prevents iOS zoom */
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	.section-garden h2 {
		font-size: 1.8rem;
	}
	
	.garden-feature-card h3 {
		font-size: 1.1rem;
	}
	
	.btn {
		padding: 0.65rem 1.5rem;
		font-size: 0.95rem;
	}
	
	.hero-visual {
		min-height: 250px;
	}
}

/* Landscape Mobile - Optimize Height */
@media (max-width: 768px) and (orientation: landscape) {
	.hero-visual {
		min-height: 300px;
	}
	
	.section {
		padding: var(--space-3) 0;
	}
}