/**
 * VOSKA — Layout
 *
 * Containers, grid, spacing utilities, responsive helpers.
 * All values reference variables.css.
 */

/* ── Reset baseline ───────────────────────────────────────────────────── */

*, *::before, *::after {
	box-sizing: border-box;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ── Container ────────────────────────────────────────────────────────── */

.vsk-container {
	width: 100%;
	max-width: var(--vsk-container-width);
	margin-inline: auto;
	padding-inline: var(--vsk-container-padding);
}

.vsk-container--narrow {
	max-width: 768px;
}

.vsk-container--wide {
	max-width: 1440px;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */

.vsk-grid {
	display: grid;
	gap: var(--vsk-grid-gap);
}

.vsk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vsk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vsk-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.vsk-grid--2,
	.vsk-grid--3,
	.vsk-grid--4 {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.vsk-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.vsk-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Flex helpers ─────────────────────────────────────────────────────── */

.vsk-flex       { display: flex; }
.vsk-flex-col   { display: flex; flex-direction: column; }
.vsk-flex-wrap  { flex-wrap: wrap; }
.vsk-flex-center { display: flex; align-items: center; justify-content: center; }

.vsk-gap-sm  { gap: var(--vsk-space-sm); }
.vsk-gap-md  { gap: var(--vsk-space-md); }
.vsk-gap-lg  { gap: var(--vsk-space-lg); }
.vsk-gap-xl  { gap: var(--vsk-space-xl); }

/* ── Section spacing ──────────────────────────────────────────────────── */

.vsk-section {
	padding-block: var(--vsk-space-3xl);
}

.vsk-section--sm {
	padding-block: var(--vsk-space-2xl);
}

/* ── Visibility ───────────────────────────────────────────────────────── */

.vsk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 768px) {
	.vsk-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
	.vsk-hide-desktop { display: none !important; }
}