/**
 * Responsive Styles
 *
 * @package PatioTime
 * @since 1.0.0
 */

/* ==========================================================================
   Large Screens (below 1200px)
   ========================================================================== */
@media screen and (max-width: 1200px) {
	.hero-title {
		font-size: 3.5rem;
	}

	.footer-columns {
		gap: 2rem;
	}
}

/* ==========================================================================
   Tablet Styles (768px - 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
	:root {
		--spacing-xxl: 5rem;
	}

	.hero-title {
		font-size: 3rem;
	}

	.story-content,
	.experience-content,
	.menu-layout,
	.events-layout {
		grid-template-columns: 1fr;
	}

	.story-image,
	.menu-image,
	.events-image,
	.experience-image {
		min-height: 400px;
	}

	.story-text,
	.menu-text,
	.events-text,
	.experience-text {
		padding: var(--spacing-lg);
	}

	.footer-top {
		flex-direction: column;
		gap: 3rem;
	}

	.footer-brand {
		max-width: 100%;
		text-align: center;
	}

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

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

	.footer-columns {
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
	}

	.section-title,
	.philosophy-subtitle,
	.story-subtitle,
	.menu-subtitle,
	.events-subtitle,
	.experience-subtitle {
		font-size: 2.25rem;
	}
}

/* ==========================================================================
   Mobile Styles (below 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
	:root {
		--spacing-xxl: 4rem;
		--spacing-xl: 3rem;
		--spacing-lg: 2rem;
	}

	html {
		font-size: 15px;
	}

	/* Header */
	.header-container {
		padding: 0 15px;
	}

	.main-navigation {
		position: fixed;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100vh;
		background: var(--color-white);
		z-index: 9999;
		transition: left 0.3s ease;
		padding: 80px 20px 20px;
		overflow-y: auto;
	}

	.main-navigation.active {
		left: 0;
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
	}

	.nav-menu li {
		border-bottom: 1px solid var(--color-border);
	}

	.nav-menu a {
		color: var(--color-text);
		padding: 1rem 0;
		font-size: 1rem;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10000;
	}

	.site-header.scrolled .menu-toggle {
		color: var(--color-text);
	}

	.btn-reservation {
		padding: 0.75rem 1rem;
		font-size: 0.625rem;
	}

	/* Hero */
	.hero-section {
		min-height: 80vh;
	}

	.hero-title {
		font-size: 2.25rem;
		letter-spacing: 1px;
	}

	.hero-actions {
		flex-direction: column;
		gap: 1rem;
	}

	.hero-actions .btn {
		width: 100%;
		max-width: 280px;
	}

	/* Sections */
	.philosophy-features {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.feature-item {
		padding: 1.5rem;
	}

	.story-content,
	.experience-content {
		display: flex;
		flex-direction: column;
	}

	.story-image,
	.experience-image,
	.menu-image,
	.events-image {
		min-height: 300px;
	}

	.menu-layout,
	.events-layout {
		display: flex;
		flex-direction: column;
	}

	.menu-text,
	.story-text,
	.events-text,
	.experience-text {
		padding: var(--spacing-md);
	}

	.menu-recommendations {
		padding: var(--spacing-md);
	}

	.section-title,
	.philosophy-subtitle,
	.story-subtitle,
	.menu-subtitle,
	.events-subtitle,
	.experience-subtitle {
		font-size: 2rem;
	}

	/* Footer */
	.footer-columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 1.5rem;
	}

	.footer-menu {
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
	}

	/* Newsletter */
	.newsletter-field-group {
		flex-direction: column;
		border: none;
		background: transparent;
	}

	.newsletter-field-group input[type="email"] {
		border: 1px solid var(--color-border);
		margin-bottom: 1rem;
	}

	.newsletter-field-group button {
		width: 100%;
	}

	/* Reservation Modal */
	.reservation-modal-content {
		width: 95%;
		padding: 2rem 1.5rem;
		margin: 1rem;
	}
}

/* ==========================================================================
   Small Mobile (below 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
	.hero-title {
		font-size: 1.875rem;
	}

	.section-title,
	.philosophy-subtitle,
	.story-subtitle,
	.menu-subtitle,
	.events-subtitle,
	.experience-subtitle {
		font-size: 1.75rem;
	}

	.site-title {
		font-size: 1.5rem;
	}

	.btn {
		padding: 0.875rem 1.5rem;
		font-size: 0.6875rem;
	}

	.menu-item {
		flex-direction: column;
		gap: 0.5rem;
	}

	.menu-item-price {
		margin-left: 0;
	}

	.footer-menu {
		flex-direction: column;
		gap: 0.75rem;
	}
}