/* ============================================
   RENASIA PROFESSIONAL - Responsive Styles
   Premium Digital Product Catalog
    ============================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
	.catalog-spread__content {
		padding: var(--space-xl) var(--space-2xl);
	}

	.product-info-grid {
		grid-template-columns: 1fr;
	}
}

/* Tablet Portrait & Large Mobile: ≤768px */
@media (max-width: 768px) {
	/* Header */
	.header__nav-list {
		display: none;
	}

	.header__menu-toggle {
		display: flex;
	}

	/* Mobile Menu */
	.mobile-menu {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--color-ivory-bg);
		z-index: calc(var(--z-header) - 1);
		padding: var(--space-xl);
		transform: translateX(100%);
		transition: transform var(--transition-normal);
		overflow-y: auto;
	}

	[dir="rtl"] .mobile-menu {
		transform: translateX(-100%);
	}

	.mobile-menu.is-open {
		transform: translateX(0);
	}

	.mobile-menu__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	.mobile-menu__link {
		display: block;
		padding: var(--space-md) 0;
		font-size: var(--font-size-body);
		color: var(--color-text-charcoal);
		border-bottom: 1px solid var(--color-border-soft);
		transition: color var(--transition-fast);
	}

	.mobile-menu__link:hover {
		color: var(--color-primary-gold);
	}

	/* Hero */
	.hero {
		padding-top: calc(var(--header-height) + var(--space-2xl));
		padding-bottom: var(--space-2xl);
	}

	.hero__logo img {
		height: 48px;
	}

	.hero__actions {
		flex-direction: column;
		align-items: center;
	}

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

	/* Catalog Spread */
	.catalog-spread {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.catalog-spread--reverse .catalog-spread__visual,
	.catalog-spread--reverse .catalog-spread__content {
		order: unset;
	}

	.catalog-spread__visual {
		min-height: 300px;
	}

	.catalog-spread__content {
		padding: var(--space-xl);
	}

	/* Product Grid */
	.product-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: var(--space-lg);
	}

	/* Footer */
	.footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		text-align: center;
	}

	.footer__logo img {
		margin: 0 auto var(--space-md);
	}

	/* Filter Section */
	.filter-section__categories {
		gap: var(--space-xs);
	}

	.filter-btn {
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--font-size-caption);
	}

	/* Modal */
	.modal-overlay {
		padding: var(--space-md);
	}

	.modal {
		padding: var(--space-xl);
		max-height: 95vh;
	}
}

/* Mobile: ≤480px */
@media (max-width: 480px) {
	.container {
		padding: 0 var(--space-md);
	}

	.section {
		padding: var(--space-2xl) 0;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.catalog-spread__visual {
		min-height: 240px;
	}

	.catalog-spread__content {
		padding: var(--space-lg);
	}

	.catalog-spread__name {
		font-size: var(--font-size-h2);
	}

	.hero__title {
		letter-spacing: 0.08em;
	}

	.filter-section__categories {
		flex-wrap: wrap;
		gap: var(--space-xs);
	}

	.search-box {
		max-width: 100%;
	}
}

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

	html {
		scroll-behavior: auto;
	}

	.fade-in {
		opacity: 1;
		transform: none;
	}

	.product-card:hover {
		transform: none;
	}

	.product-card:hover .product-card__image img {
		transform: none;
	}
}

/* Print Styles */
@media print {
	.header,
	.filter-section,
	.scroll-top,
	.modal-overlay,
	.translate-loading {
		display: none !important;
	}

	body {
		background: white;
		color: black;
	}

	.catalog-spread {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.hero {
		padding-top: var(--space-xl);
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	:root {
		--color-border-soft: #999;
		--color-muted-text: #444;
	}

	.product-card {
		border-width: 2px;
	}
}

/* Dark Mode (optional future support) */
@media (prefers-color-scheme: dark) {
	/* Catalog maintains premium light theme by default
	   as it represents a luxury brand catalog feel */
}