/**
 * Layout — Nova Academy
 *
 * Container, grid, section spacing, and responsive utilities.
 */

/* ── Containers ──────────────────────────────────────────── */

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

.nova-container--wide {
	max-width: var(--container-wide);
}

.nova-container--narrow {
	max-width: var(--container-narrow);
}

/* ── Sections ────────────────────────────────────────────── */

.nova-section {
	padding-top: var(--space-4xl);
	padding-bottom: var(--space-4xl);
}

.nova-section--sm {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

.nova-section--lg {
	padding-top: var(--space-5xl);
	padding-bottom: var(--space-5xl);
}

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

.nova-section--dark {
	background-color: var(--color-primary);
	color: #FFFFFF;
}

.nova-section--dark h2,
.nova-section--dark h3,
.nova-section--dark h4 {
	color: #FFFFFF;
}

.nova-section--dark p {
	color: rgba(255, 255, 255, 0.8);
}

.nova-section--dark .nova-section-label {
	color: var(--color-accent);
}

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

/* ── Inner Page Hero (Loaded globally for all pages) ─────── */
.nova-hero--page,
.nova-hero--inner {
	position: relative;
	min-height: 260px;
	padding: var(--space-3xl) 0;
	background-color: #0E1016;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	text-align: center;
}

/*
 * The separator is drawn inside the box rather than as a border-bottom:
 * an absolutely positioned overlay with `inset: 0` fills only the padding
 * box, so a real border would leave a 1px strip of un-dimmed background
 * image below the overlay.
 */
.nova-hero--page::after,
.nova-hero--inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-border);
	pointer-events: none;
}

.nova-hero--page .nova-hero__overlay,
.nova-hero--inner .nova-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 11, 14, 0.75) 0%, rgba(10, 11, 14, 0.95) 100%);
	pointer-events: none;
}

.nova-hero--page .nova-container,
.nova-hero--inner .nova-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.nova-hero--page .nova-hero__content,
.nova-hero--inner .nova-hero__content {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.nova-hero--page .nova-hero__breadcrumbs {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin-bottom: var(--space-md);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.nova-hero--page .nova-hero__breadcrumbs a {
	color: var(--color-accent);
	text-decoration: none;
}

.nova-hero--page .nova-hero__breadcrumbs a:hover {
	text-decoration: underline;
}

.nova-hero--page .nova-hero__breadcrumbs-sep {
	color: rgba(255, 255, 255, 0.3);
}

.nova-hero--page .nova-hero__title,
.nova-hero--inner .nova-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-sm);
}

.nova-hero--page .nova-hero__subtitle,
.nova-hero--inner .nova-hero__subtitle {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: #B2B7C4;
	line-height: var(--leading-normal);
	margin: 0 auto;
	max-width: 620px;
}

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

.nova-grid {
	display: grid;
	gap: var(--space-xl);
}

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

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

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

/* ── Flex Utilities ──────────────────────────────────────── */

.nova-flex {
	display: flex;
}

.nova-flex--center {
	align-items: center;
	justify-content: center;
}

.nova-flex--between {
	align-items: center;
	justify-content: space-between;
}

.nova-flex--col {
	flex-direction: column;
}

.nova-flex--wrap {
	flex-wrap: wrap;
}

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

/* ── Text Alignment ──────────────────────────────────────── */

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

/* ── Responsive Grid Breakpoints ─────────────────────────── */

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

@media (max-width: 768px) {
	.nova-section {
		padding-top: var(--space-3xl);
		padding-bottom: var(--space-3xl);
	}

	.nova-section--lg {
		padding-top: var(--space-4xl);
		padding-bottom: var(--space-4xl);
	}

	.nova-grid--4,
	.nova-grid--3,
	.nova-grid--2 {
		grid-template-columns: 1fr;
	}

	.nova-section-title {
		font-size: var(--text-3xl);
	}
}

@media (max-width: 480px) {
	.nova-section {
		padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
	}
}

/* ── Two-column split layout ─────────────────────────────── */

.nova-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3xl);
	align-items: center;
}

.nova-split--reverse {
	direction: rtl;
}

.nova-split--reverse > * {
	direction: ltr;
}

@media (max-width: 768px) {
	.nova-split,
	.nova-split--reverse {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		direction: ltr;
	}
}