/**
 * Responsive Design System
 * 
 * Comprehensive responsive styles for all devices
 * Fully customizable via Customizer
 * 
 * @package CafeHospitality
 */

/* ============================================
   RESPONSIVE BREAKPOINTS (Customizable)
   ============================================ */
:root {
	--cafe-breakpoint-xs: 480px;
	--cafe-breakpoint-sm: 640px;
	--cafe-breakpoint-md: 768px;
	--cafe-breakpoint-lg: 1024px;
	--cafe-breakpoint-xl: 1280px;
	--cafe-breakpoint-2xl: 1536px;
}

/* ============================================
   MOBILE FIRST - BASE STYLES (Mobile)
   ============================================ */

/* Container - Mobile */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Typography - Mobile */
h1, .cafe-hero-title {
	font-size: clamp(1.75rem, 5vw, 3rem) !important;
}

h2, .cafe-features-title, .cafe-menu-title, .cafe-about-title, .cafe-cta-title {
	font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}

h3 {
	font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
}

/* Spacing - Mobile */
.py-20 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.mb-16 {
	margin-bottom: 2rem;
}

/* Grid - Mobile (Single Column) */
.grid {
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Buttons - Mobile */
.wp-block-button__link,
.cafe-btn {
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
	width: 100%;
	text-align: center;
}

/* Hero Section - Mobile */
.cafe-hero {
	min-height: 70vh;
	padding: 2rem 1rem;
}

.cafe-hero-title {
	margin-bottom: 1rem;
	line-height: 1.2;
}

.cafe-hero-subtitle {
	font-size: clamp(1rem, 3vw, 1.25rem) !important;
	margin-bottom: 1.5rem;
}

/* Menu Cards - Mobile */
.cafe-menu-card {
	margin-bottom: 1.5rem;
}

/* ============================================
   TABLET STYLES (640px+)
   ============================================ */
@media (min-width: 640px) {
	.container {
		max-width: 640px;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Typography - Tablet */
	h1, .cafe-hero-title {
		font-size: clamp(2rem, 5vw, 3.5rem) !important;
	}

	h2, .cafe-features-title, .cafe-menu-title, .cafe-about-title, .cafe-cta-title {
		font-size: clamp(1.75rem, 4vw, 3rem) !important;
	}

	/* Spacing - Tablet */
	.py-20 {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}

	/* Grid - Tablet (2 Columns) */
	.grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

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

	.md\:grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Buttons - Tablet */
	.wp-block-button__link,
	.cafe-btn {
		width: auto;
		padding: 0.875rem 1.5rem;
		font-size: 1rem;
	}

	/* Hero - Tablet */
	.cafe-hero {
		min-height: 80vh;
		padding: 3rem 1.5rem;
	}

	.cafe-hero-subtitle {
		font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
	}
}

/* ============================================
   DESKTOP STYLES (768px+)
   ============================================ */
@media (min-width: 768px) {
	.container {
		max-width: 768px;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	/* Typography - Desktop */
	h1, .cafe-hero-title {
		font-size: clamp(2.5rem, 5vw, 4rem) !important;
	}

	h2, .cafe-features-title, .cafe-menu-title, .cafe-about-title, .cafe-cta-title {
		font-size: clamp(2rem, 4vw, 3rem) !important;
	}

	/* Spacing - Desktop */
	.py-20 {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	.mb-16 {
		margin-bottom: 4rem;
	}

	/* Grid - Desktop (3-4 Columns) */
	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	/* Hero - Desktop */
	.cafe-hero {
		min-height: 100vh;
		padding: 4rem 2rem;
	}

	.cafe-hero-subtitle {
		font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
	}

	/* Buttons - Desktop */
	.wp-block-button__link,
	.cafe-btn {
		padding: 1rem 2rem;
		font-size: 1.125rem;
	}

	/* Navigation - Desktop */
	.cafe-mobile-menu {
		display: none;
	}

	.cafe-desktop-menu {
		display: flex;
	}
}

/* ============================================
   LARGE DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
	.container {
		max-width: 1024px;
	}

	/* Grid - Large Desktop */
	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}

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

	/* Spacing - Large Desktop */
	.py-20 {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

/* ============================================
   EXTRA LARGE DESKTOP (1280px+)
   ============================================ */
@media (min-width: 1280px) {
	.container {
		max-width: 1280px;
	}

	/* Max content width */
	.max-w-4xl {
		max-width: 56rem;
	}

	.max-w-6xl {
		max-width: 72rem;
	}
}

/* ============================================
   MOBILE SPECIFIC FIXES
   ============================================ */
@media (max-width: 767px) {
	/* Hide desktop menu on mobile */
	.cafe-desktop-menu {
		display: none !important;
	}

	/* Show mobile menu toggle */
	.cafe-mobile-menu-toggle {
		display: block !important;
	}

	/* Mobile menu styles */
	.cafe-mobile-menu {
		box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3);
	}

	.cafe-mobile-menu.translate-x-0 {
		transform: translateX(0);
	}

	.cafe-mobile-menu.translate-x-full {
		transform: translateX(100%);
	}

	body.mobile-menu-open {
		overflow: hidden;
	}

	body.mobile-menu-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 40;
	}

	/* Stack buttons on mobile */
	.wp-block-buttons {
		flex-direction: column;
	}

	.wp-block-buttons .wp-block-button {
		width: 100%;
		margin-bottom: 0.75rem;
	}

	/* Adjust hero on mobile */
	.cafe-hero .wp-block-group {
		padding: 1.5rem 1rem;
	}

	/* Reduce padding on sections */
	.py-20 {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	/* Stack columns on mobile */
	.wp-block-columns {
		flex-direction: column;
	}

	.wp-block-column {
		margin-bottom: 1.5rem;
	}

	/* Menu cards - full width on mobile */
	.cafe-menu-card {
		width: 100%;
		margin-bottom: 2rem;
	}

	/* Stats section - 2 columns on mobile */
	.cafe-stats-section .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	/* Testimonials - single column on mobile */
	.cafe-testimonials-section .wp-block-columns {
		grid-template-columns: 1fr;
	}

	/* Footer - stack on mobile */
	.site-footer .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Image optimization for mobile */
	img {
		max-width: 100%;
		height: auto;
	}

	/* Touch-friendly buttons */
	button, .wp-block-button__link, a.button {
		min-height: 44px;
		min-width: 44px;
		padding: 0.75rem 1.25rem;
	}
}

/* ============================================
   TABLET SPECIFIC (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
	/* 2 column layouts */
	.md\:grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.md\:grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Stats - 2x2 grid */
	.cafe-stats-section .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================
   LANDSCAPE MOBILE (480px - 767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
	.cafe-hero {
		min-height: 60vh;
	}

	.py-20 {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
	.cafe-hero,
	.cafe-mobile-menu,
	.site-footer,
	.wp-block-buttons {
		display: none;
	}

	body {
		background: white;
		color: black;
	}

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

/* ============================================
   ACCESSIBILITY - REDUCE MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================
   HIGH DPI DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}