/* =============================================================
   710 GVNG — responsive.css
   Intentional recomposition per breakpoint (VISUAL-REFERENCE §10)
   — not shrunken desktop. Breakpoints: 1439 / 1023 / 767 / 359.
   ============================================================= */

/* ------------------------------------------------ laptop ≤ 1439 -- */

@media (max-width: 1439px) {
	.sg-menu__panel {
		width: min(34vw, 460px);
	}
}

/* ------------------------------------------------ tablet ≤ 1023 -- */

@media (max-width: 1023px) {
	.sg-product-grid {
		--sg-cols: 3;
	}

	.sg-hero__nav {
		max-width: 300px;
	}

	.sg-hero__link {
		font-size: 21px;
	}

	.sg-campaign {
		min-height: 76vh;
	}

	.sg-menu__inner {
		padding-left: 28px;
		padding-right: 28px;
	}
}

/* ------------------------------------------------ mobile ≤ 767 -- */

@media (max-width: 767px) {
	:root {
		--sg-header-offset: 12px;
	}

	.sg-product-grid {
		--sg-cols: 2;
	}

	.sg-section {
		padding: 48px 16px;
	}

	.sg-section--footer {
		padding: 56px 20px 20px;
	}

	/* Hero recomposition: list moves to the lower left, CTA to the
	   lower right — the center stays clear for the photograph. */
	.sg-hero {
		min-height: 480px;
	}

	.sg-hero__nav {
		left: 20px;
		top: auto;
		bottom: 24px;
		transform: none;
		max-width: 72vw;
	}

	.sg-hero__link {
		font-size: 18px;
		padding: 2px 0;
	}

	.sg-hero__cta {
		top: auto;
		bottom: 24px;
		right: 20px;
		transform: none;
		padding: 15px 16px; /* ≥44px touch target */
	}

	/* Menu: reference is the mobile screenshot — list breathes more. */
	.sg-menu__inner {
		padding: 84px 22px 16px;
	}

	.sg-menu__link {
		font-size: 27px;
		line-height: 1.5;
		padding: 0;
	}

	.sg-menu__foot {
		grid-template-columns: 1fr auto;
		gap: 14px;
	}

	.sg-menu__card {
		max-width: none;
	}

	.sg-campaign {
		min-height: 68vh;
		padding: 24px 20px 28px;
	}

	.sg-campaign__title {
		font-size: clamp(38px, 11vw, 56px);
	}

	.sg-product-grid {
		gap: 28px 12px;
	}

	.sg-footer__cols {
		gap: 32px;
	}

	.sg-footer__col,
	.sg-footer__col--newsletter {
		width: 100%;
	}

	.sg-lookbook__grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.sg-look--03 {
		display: none; /* two-up composition on mobile */
	}
}

/* ------------------------------------------------ small ≤ 359 -- */

@media (max-width: 359px) {
	.sg-hero__link {
		font-size: 16px;
	}

	.sg-menu__link {
		font-size: 24px;
	}
}

/* ------------------------------------------- reduced motion (CSS) -- */
/* JS removes GSAP choreography; CSS removes its own transitions. */

@media (prefers-reduced-motion: reduce) {
	.sg-hero__slide,
	.sg-menu__media-img,
	.sg-product-card__img--hover {
		transition-duration: 0.01ms;
	}
}