/* ==========================================================================
   Layout — Reset, Container, Grid, Sections
   ========================================================================== */

/* --- Modern Reset -------------------------------------------------------- */

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

* {
	margin: 0;
}

html, body {
	height: 100%;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	min-height: 100vh;
	overflow-x: hidden;
}

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

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

#root, #__next {
	isolation: isolate;
}

/* --- Skip Link ----------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	background: var(--color-accent);
	color: var(--color-bg);
	padding: var(--sp-3) var(--sp-5);
	z-index: var(--z-toast);
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--radius);
}

.skip-link:focus {
	top: var(--sp-4);
}

/* --- Container ----------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: none; }

/* --- Section ------------------------------------------------------------- */

.section {
	padding-block: var(--section-py);
	position: relative;
}

.section--alt {
	background: var(--color-bg-alt);
}

.section--surface {
	background: var(--color-surface);
}

.section--no-pt { padding-top: 0; }
.section--no-pb { padding-bottom: 0; }

.section__header {
	margin-bottom: var(--sp-7);
	max-width: 720px;
}

.section__header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section__title {
	font-size: var(--fs-3xl);
	margin-bottom: var(--sp-3);
}

.section__lead {
	font-size: var(--fs-md);
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.section__footer {
	margin-top: var(--sp-7);
	display: flex;
	justify-content: center;
}

/* --- Grid ---------------------------------------------------------------- */

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

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

.grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid--auto-lg {
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.grid--gap-sm  { gap: var(--sp-4); }
.grid--gap-lg  { gap: var(--sp-7); }

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

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

/* --- Flex Helpers -------------------------------------------------------- */

.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-5  { gap: var(--sp-5); }
.gap-6  { gap: var(--sp-6); }

/* --- Two-Column (Sidebar) Layout ----------------------------------------- */

.layout-with-sidebar {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--sp-7);
}

@media (max-width: 1024px) {
	.layout-with-sidebar {
		grid-template-columns: 1fr;
	}
}

/* --- Spacing Utilities --------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* --- Visibility ---------------------------------------------------------- */

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

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

/* --- Aspect Ratios ------------------------------------------------------- */

.aspect-16-9  { aspect-ratio: 16 / 9; }
.aspect-4-3   { aspect-ratio: 4 / 3; }
.aspect-1-1   { aspect-ratio: 1 / 1; }
.aspect-3-4   { aspect-ratio: 3 / 4; }
.aspect-21-9  { aspect-ratio: 21 / 9; }

/* --- Site shell ---------------------------------------------------------- */

.site-content {
	min-height: calc(100vh - var(--header-h) - 480px);
}