/* ==========================================================================
   responsive.css — global breakpoint overrides (768 / 1024 / 1280).
   Individual components already have their own media queries; this file
   handles cross-component layout shifts.
   ========================================================================== */

/* --- Medium: tablet up (768px+) --- */
@media (min-width: 768px) {
	.container {
		padding: 0 var(--s-32);
	}
}

/* --- Large: laptop up (1024px+) --- */
@media (min-width: 1024px) {
	.section {
		padding: var(--s-80) 0;
	}
	.section--sm {
		padding: var(--s-64) 0;
	}
	.section--lg {
		padding: var(--s-120) 0 var(--s-96);
	}
}

/* --- XL: 1280+ --- */
@media (min-width: 1280px) {
	.container {
		padding: 0 var(--s-40);
	}
}

/* --- Mobile only: stack two-col layouts to one --- */
@media (max-width: 767px) {
	.grid--two-col-60-40,
	.grid--two-col-50,
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
		gap: var(--s-24);
	}
	.section {
		padding: var(--s-48) 0;
	}
	.section--lg {
		padding: var(--s-64) 0 var(--s-48);
	}
	.container {
		padding: 0 var(--s-16);
	}
	h1 {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}
	h2 {
		font-size: clamp(1.375rem, 5vw, 1.75rem);
	}
}

/* Tablet range adjustments */
@media (max-width: 1023px) and (min-width: 768px) {
	.grid--5 {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}