/**
 * Nzele Spacing & Layout System
 * Decoupled from parent Gesso/Elementor grid patterns.
 */

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* Outer layout wrapper */
#nzle-page-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--nzle-bg-primary);
}

/* Inner content area (Offset for fixed header) */
#nzle-page-content {
	flex: 1 0 auto;
	/* Offset content for fixed header on general pages */
	padding-top: 48px;
}

/* Homepage Hero overlays behind transparent header initially */
.home #nzle-page-content {
	padding-top: 0 !important;
}

/* Clean, responsive page container wrapping content segments */
.nzle-section-container {
	max-width: var(--nzle-container-width);
	margin: 0 auto;
	padding: 0 var(--nzle-space-xl);
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.nzle-section-container {
		padding: 0 var(--nzle-space-md);
	}
}

@media (max-width: 768px) {
	#nzle-page-content {
		padding-top: 35px;
	}
}

/* ==========================================================================
   Editorial Layout & Asymmetric Helpers
   ========================================================================== */

/* Generous section spacers */
.nzle-section-spacer {
	margin-bottom: var(--nzle-space-display);
}
@media (max-width: 768px) {
	.nzle-section-spacer {
		margin-bottom: var(--nzle-space-xxl);
	}
}

/* Editorial column layouts (Asymmetry utils) */
.nzle-editorial-row {
	display: flex;
	flex-direction: row;
	gap: var(--nzle-space-xl);
	align-items: flex-start;
}

.nzle-col-left-asym {
	flex: 1.2;
}

.nzle-col-right-asym {
	flex: 0.8;
	margin-top: var(--nzle-space-xxl); /* Displace right column vertically */
}

@media (max-width: 768px) {
	.nzle-editorial-row {
		flex-direction: column;
		gap: var(--nzle-space-lg);
	}
	.nzle-col-right-asym {
		margin-top: 0;
	}
}

/* Page Header & CTA Button styling */
.nzle-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--nzle-border);
	padding-bottom: var(--nzle-space-md);
	margin-bottom: var(--nzle-space-xl);
}

.nzle-btn-become-artist {
	display: inline-block;
	font-family: var(--nzle-font-body), sans-serif;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: #111;
	color: #fff !important;
	padding: 10px 20px;
	text-decoration: none !important;
	border-radius: 4px;
	transition: background 0.3s ease, transform 0.2s ease;
}

.nzle-btn-become-artist:hover {
	background: var(--nzle-accent-gold-dark, #b08d57);
}

@media (max-width: 768px) {
	.nzle-page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--nzle-space-sm);
	}
}