/*
 * Ecommoda Child Theme - Responsive Styles
 * Breakpoint-specific overrides and responsive adjustments.
 *
 * Only container padding is adjusted here for now. Component-level
 * responsive behavior will be added alongside each component.
 */

@media (max-width: 1280px) {
	:root {
		--ecm-container-padding: 32px; /* tune during visual QA */
	}
}

@media (max-width: 1024px) {
	:root {
		--ecm-container-padding: 24px; /* tune during visual QA */
	}

	/* Header switches to the mobile shell: hamburger shown, nav hidden
	   until a mobile drawer is implemented (out of scope for this task). */
	.ecommoda-header__menu-toggle {
		display: inline-flex;
	}

	.ecommoda-header__nav {
		display: none;
	}

	.ecommoda-header__inner {
		min-height: 60px;
	}
}

@media (max-width: 768px) {
	:root {
		--ecm-container-padding: 20px; /* tune during visual QA */
	}

	/* Exact reference mobile ratio — do not inherit the desktop 2.4:1. */
	.ecommoda-hero__track {
		aspect-ratio: 1.4667 / 1;
	}

	.ecommoda-hero__content--bottom-left {
		padding-bottom: 24px;
	}

	.ecommoda-hero__heading {
		font-size: 27px;
	}

	.ecommoda-hero__description {
		font-size: 13px;
	}

	.ecommoda-hero__cta {
		height: 40px;
		min-width: 100px;
		padding: 0 20px;
		font-size: 13px;
	}

	.ecommoda-hero__arrow {
		width: 36px;
		height: 36px;
	}

	.ecommoda-hero__arrow--prev {
		left: 12px;
	}

	.ecommoda-hero__arrow--next {
		right: 12px;
	}

}

@media (max-width: 390px) {
	:root {
		--ecm-container-padding: 16px; /* tune during visual QA */
	}
}