/* ==========================================================================
   Responsive — Global breakpoint overrides
   Mobile-first: base styles are mobile, progressively enhanced upward
   Breakpoints: 480px / 768px / 1024px / 1280px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER PADDING — Wider on larger screens
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	:root {
		--container-padding: 2rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--container-padding: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   2. HEADER HEIGHT — For scroll offset calculations
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	:root {
		--header-height: 130px;
	}
}

/* --------------------------------------------------------------------------
   3. SECTION SPACING — Tighter on mobile
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
	.section {
		padding: var(--space-2xl) 0;
	}
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY — Fine-tune at small screens
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
	body {
		font-size: 1rem; /* 16px on very small screens for readability */
	}

	h1 {
		font-size: var(--text-3xl);
	}

	h2 {
		font-size: var(--text-2xl);
	}

	h3 {
		font-size: var(--text-xl);
	}
}

/* --------------------------------------------------------------------------
   5. BUTTONS — Full width on very small screens
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
	.btn--responsive-full {
		width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   6. PAGE LAYOUT — Manage two-column layouts
   -------------------------------------------------------------------------- */

.layout-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 768px) {
	.layout-two-col {
		grid-template-columns: 2fr 1fr;
		gap: var(--space-2xl);
	}
}

.layout-two-col--reversed {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 768px) {
	.layout-two-col--reversed {
		grid-template-columns: 1fr 2fr;
		gap: var(--space-2xl);
	}
}

/* Sidebar sticky on desktop */
@media (min-width: 768px) {
	.layout-sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-lg));
		align-self: start;
	}
}

/* --------------------------------------------------------------------------
   7. VISIBILITY — Show/hide at breakpoints
   -------------------------------------------------------------------------- */

.hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.hide-mobile {
		display: initial;
	}
}

@media (min-width: 768px) {
	.hide-desktop {
		display: none;
	}
}

.show-mobile-only {
	display: initial;
}

@media (min-width: 768px) {
	.show-mobile-only {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   8. TOUCH TARGETS — Ensure minimum 44x44px on touch devices
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
	.primary-nav__link,
	.social-links__link,
	.mobile-menu-toggle,
	.header-basket__link {
		min-height: 44px;
		min-width: 44px;
	}
}