/* ============================================================
   LAYOUTS — NoisyPixel.com
   Section containers, page wrappers, grid patterns.
   ============================================================ */

/* ===== Section Container ===== */
/* Max-width centered container with responsive horizontal padding */
.section-container {
	max-width: var(--space-container-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
	.section-container {
		padding-inline: 2rem;
	}
}
@media (min-width: 1280px) {
	.section-container {
		padding-inline: 4rem;
	}
}

/* ===== Section Padding ===== */
/* Standard section vertical spacing */
.section-padding {
	padding-block: 5rem;
}
@media (min-width: 1024px) {
	.section-padding {
		padding-block: 7rem;
	}
}

/* Compact section vertical spacing */
.section-padding-sm {
	padding-block: 3rem;
}
@media (min-width: 1024px) {
	.section-padding-sm {
		padding-block: 4rem;
	}
}

/* ===== Section Header ===== */
/* Bottom margin for eyebrow + headline + subheadline groups */
.section-header {
	margin-bottom: 3rem;
}
@media (min-width: 1024px) {
	.section-header {
		margin-bottom: 4rem;
	}
}

/* ===== Page Hero ===== */
/* Dark navy + pixel-dots hero section for all non-homepage page headers */
.page-hero {
	padding-block: var(--space-section);
	background-color: var(--np-navy);
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 28px 28px;
	position: relative;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.page-hero {
		padding-block: 7rem;
	}
}