/* NE Design System — layout.css — Phase 2 (#65) */
/* Grid system, containers, wrappers, section spacing */

/* === Containers === */
.ne-container {
	max-width: var(--ne-max-width);
	margin: 0 auto;
	padding: 0 var(--ne-space-6);
}

.ne-container--wide {
	max-width: 1300px;
}

.ne-container--narrow {
	max-width: 720px;
}

/* === Sections === */
.ne-section {
	padding: var(--ne-section-pad);
}

.ne-section--flush {
	padding: 0;
}

/* === Grid === */
.ne-grid {
	display: grid;
	gap: var(--ne-card-gap);
}

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

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

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

.ne-grid--sidebar {
	grid-template-columns: 1fr 300px;
	gap: var(--ne-space-6);
}

.ne-grid__full {
	grid-column: 1 / -1;
}

/* === Flex helpers === */
.ne-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ne-card-gap);
}

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

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

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

/* === Stack (vertical spacing) === */
.ne-stack > * + * {
	margin-top: var(--ne-space-5);
}

.ne-stack--sm > * + * {
	margin-top: var(--ne-space-3);
}

.ne-stack--lg > * + * {
	margin-top: var(--ne-space-7);
}

/* === Section variants === */
.ne-section--alt {
	background: var(--ne-surface);
}

/* === Hero (global — used on many pages) === */
.ne-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 500px;
	padding: var(--ne-space-8) var(--ne-space-6);
	background:
		radial-gradient(ellipse at 50% 0%, var(--ne-accent-glow) 0%, transparent 60%),
		linear-gradient(180deg, var(--ne-bg) 0%, var(--ne-surface) 100%);
	text-align: center;
	overflow: hidden;
}

.ne-hero__content {
	max-width: 640px;
	position: relative;
	z-index: 1;
}

.ne-hero__title {
	font-family: var(--ne-font-display);
	font-size: 3.2rem;
	font-weight: 400;
	color: var(--ne-text);
	margin: 0 0 var(--ne-space-4);
	letter-spacing: -1px;
	line-height: 1.1;
}

.ne-hero__subtitle {
	font-family: var(--ne-font-body);
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--ne-text-subtle);
	line-height: 1.6;
	margin: 0 0 var(--ne-space-6);
}

.ne-hero__actions {
	display: flex;
	gap: var(--ne-space-3);
	justify-content: center;
	flex-wrap: wrap;
}

.ne-hero--sm {
	min-height: 200px;
	padding: var(--ne-space-7) var(--ne-space-6);
}

.ne-hero--sm .ne-hero__title {
	font-size: 2.4rem;
	margin-bottom: 0;
}

/* === Legacy aliases === */
.ctt-wrapper {
	max-width: 1300px;
	margin: auto;
}