/**
 * Layout: container, sections, grid utilities.
 */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.site-main {
	min-height: 50vh;
}

/* Section spacing */
.section {
	padding: 60px 0;
	border-bottom: 1px solid var(--border);
}

/* Basic grid utilities */
.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

/* Responsive grids */
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(3, 1fr); }
	.grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	:root {
		--container-padding: 16px;
	}

	.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.grid-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.grid-2 { grid-template-columns: 1fr; gap: 24px; }

	.section { padding: 40px 0; }
}

@media (max-width: 480px) {
	.grid-4 { grid-template-columns: 1fr; }
}

/* Skip to content */
.skip-link {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cyan);
	color: var(--bg-primary);
	padding: 8px 16px;
	border-radius: 0 0 8px 8px;
	font-weight: 600;
	z-index: 10000;
	transition: top 0.2s;
}

.skip-link:focus {
	top: 0;
}