/* Responsive styles will go here */

/* Base responsive container */
.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Responsive images and videos */
img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Utility: hide on small / show on large */
.hide-sm { display: none; }
.show-sm { display: block; }

/* Layout grid: defaults to single column */
.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Breakpoints */
@media (min-width: 600px) {
	.grid--2up { grid-template-columns: repeat(2, 1fr); }
	.show-sm { display: none; }
	.hide-sm { display: block; }
}

@media (min-width: 900px) {
	.grid--3up { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
	.grid--4up { grid-template-columns: repeat(4, 1fr); }
}

/* Responsive typography (scale headings slightly) */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

@media (min-width: 900px) {
	h1 { font-size: 2.25rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
}

/* Responsive nav: simple collapse */
.nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nav__item { flex: 0 0 auto; }

/* Small-screen adjustments */
@media (max-width: 599px) {
	.container { padding-left: 0.75rem; padding-right: 0.75rem; }
	.nav { justify-content: space-between; }
}

/* Helpers */
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }