/**
 * StellarLink Media Spacing & Layout System
 * Defines spacing scale, layout containers, and grid systems
 */

/* ==============================================
   SPACING SCALE EXTENSIONS
   ============================================== */

:root {
	/* Extended spacing scale (building on brand-system.css) */

	/* Component-specific spacing */
	--section-padding-mobile: var(--space-16);
	--section-padding-desktop: var(--space-20);
	--hero-padding-mobile: var(--space-20);
	--hero-padding-desktop: var(--space-32);

	/* Content spacing */
	--content-max-width: var(--container-lg);
	--content-padding: var(--space-6);
	--content-section-gap: var(--space-12);

	/* Typography spacing */
	--heading-margin-bottom: var(--space-4);
	--paragraph-margin-bottom: var(--space-4);
	--section-header-margin-bottom: var(--space-8);
	--hero-text-margin-bottom: var(--space-6);

	/* List spacing */
	--list-margin-bottom: var(--space-4);
	--list-item-margin-bottom: var(--space-2);
	--list-padding-left: var(--space-6);
	--feature-list-item-margin: var(--space-3);
	--feature-list-item-padding: var(--space-8);

	/* Icon spacing */
	--icon-text-gap: var(--space-3);
	--section-icon-margin-bottom: var(--space-6);
	--service-icon-margin-bottom: var(--space-4);

	/* Grid spacing */
	--grid-gap-mobile: var(--space-6);
	--grid-gap-tablet: var(--space-8);
	--grid-gap-desktop: var(--space-8);
}

/* ==============================================
   LAYOUT CONTAINERS
   ============================================== */

/* Standard content container */
.container {
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

/* Container variations */
.container-sm {
	max-width: var(--container-sm);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.container-md {
	max-width: var(--container-md);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.container-lg {
	max-width: var(--container-lg);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.container-xl {
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.container-2xl {
	max-width: var(--container-2xl);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

/* Full-width container */
.container-full {
	width: 100%;
	padding: 0 var(--content-padding);
}

/* Content-focused container */
.container-content {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

/* ==============================================
   GRID SYSTEMS
   ============================================== */

/* Base grid */
.grid-base {
	display: grid;
	gap: var(--grid-gap-mobile);
}

/* Responsive grid patterns */
.grid-responsive {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
	.grid-responsive {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--grid-gap-tablet);
	}
}

@media (min-width: 1024px) {
	.grid-responsive {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--grid-gap-desktop);
	}
}

/* Service grid (commonly used pattern) */
.grid-services {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
	.grid-services {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--grid-gap-tablet);
	}
}

@media (min-width: 1024px) {
	.grid-services {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--grid-gap-desktop);
	}
}

/* Feature grid (3-column on desktop) */
.grid-features {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
	.grid-features {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--grid-gap-tablet);
	}
}

@media (min-width: 1024px) {
	.grid-features {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--grid-gap-desktop);
	}
}

/* Two-column grid */
.grid-two-col {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
	.grid-two-col {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--grid-gap-tablet);
	}
}

/* ==============================================
   SECTION SPACING
   ============================================== */

/* Standard section spacing */
.section-spacing {
	padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
	.section-spacing {
		padding: var(--section-padding-desktop) 0;
	}
}

/* Hero section spacing */
.hero-spacing {
	padding: var(--hero-padding-mobile) 0;
}

@media (min-width: 768px) {
	.hero-spacing {
		padding: var(--hero-padding-desktop) 0;
	}
}

/* Tight section spacing */
.section-spacing-tight {
	padding: var(--space-12) 0;
}

@media (min-width: 768px) {
	.section-spacing-tight {
		padding: var(--space-16) 0;
	}
}

/* Loose section spacing */
.section-spacing-loose {
	padding: var(--space-24) 0;
}

@media (min-width: 768px) {
	.section-spacing-loose {
		padding: var(--space-32) 0;
	}
}

/* ==============================================
   TYPOGRAPHY SPACING
   ============================================== */

/* Heading spacing */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: var(--heading-margin-bottom);
}

/* Paragraph spacing */
p {
	margin-bottom: var(--paragraph-margin-bottom);
}

/* Last child spacing reset */
p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
	margin-bottom: 0;
}

/* Section header spacing */
.section-header {
	margin-bottom: var(--section-header-margin-bottom);
}

/* Hero text spacing */
.hero-text {
	margin-bottom: var(--hero-text-margin-bottom);
}

/* Content spacing for blocks */
.content-block {
	margin-bottom: var(--content-section-gap);
}

.content-block:last-child {
	margin-bottom: 0;
}

/* ==============================================
   LIST SPACING
   ============================================== */

/* Standard lists */
ul,
ol {
	margin-bottom: var(--list-margin-bottom);
	padding-left: var(--list-padding-left);
}

li {
	margin-bottom: var(--list-item-margin-bottom);
}

/* Feature lists */
.feature-list {
	margin-bottom: var(--list-margin-bottom);
	padding-left: 0;
	list-style: none;
}

.feature-list li {
	margin-bottom: var(--feature-list-item-margin);
	padding-left: var(--feature-list-item-padding);
	position: relative;
}

/* Icon lists */
.icon-list {
	list-style: none;
	padding-left: 0;
}

.icon-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--icon-text-gap);
	margin-bottom: var(--feature-list-item-margin);
}

/* ==============================================
   ICON SPACING
   ============================================== */

/* Icon with text combinations */
.icon-text {
	display: flex;
	align-items: center;
	gap: var(--icon-text-gap);
}

.icon-text-vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--icon-text-gap);
}

/* Large section icons */
.section-icon {
	margin-bottom: var(--section-icon-margin-bottom);
	font-size: 4rem;
}

/* Service icons */
.service-icon {
	margin-bottom: var(--service-icon-margin-bottom);
	font-size: 3rem;
}

/* Reason/feature icons */
.reason-icon,
.feature-icon {
	margin-bottom: var(--service-icon-margin-bottom);
	font-size: 3rem;
}

/* ==============================================
   CARD SPACING
   ============================================== */

/* Card containers */
.card {
	padding: var(--card-padding);
	border-radius: var(--card-radius);
	margin-bottom: var(--space-6);
}

.card:last-child {
	margin-bottom: 0;
}

/* Card grid spacing */
.card-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}
}

/* ==============================================
   SPACING UTILITIES
   ============================================== */

/* Padding utilities */
.p-0 {
	padding: var(--space-0);
}

.p-1 {
	padding: var(--space-1);
}

.p-2 {
	padding: var(--space-2);
}

.p-3 {
	padding: var(--space-3);
}

.p-4 {
	padding: var(--space-4);
}

.p-5 {
	padding: var(--space-5);
}

.p-6 {
	padding: var(--space-6);
}

.p-8 {
	padding: var(--space-8);
}

.p-10 {
	padding: var(--space-10);
}

.p-12 {
	padding: var(--space-12);
}

.p-16 {
	padding: var(--space-16);
}

.p-20 {
	padding: var(--space-20);
}

.p-24 {
	padding: var(--space-24);
}

/* Margin utilities */
.m-0 {
	margin: var(--space-0);
}

.m-1 {
	margin: var(--space-1);
}

.m-2 {
	margin: var(--space-2);
}

.m-3 {
	margin: var(--space-3);
}

.m-4 {
	margin: var(--space-4);
}

.m-5 {
	margin: var(--space-5);
}

.m-6 {
	margin: var(--space-6);
}

.m-8 {
	margin: var(--space-8);
}

.m-10 {
	margin: var(--space-10);
}

.m-12 {
	margin: var(--space-12);
}

.m-16 {
	margin: var(--space-16);
}

.m-20 {
	margin: var(--space-20);
}

.m-24 {
	margin: var(--space-24);
}

/* Directional spacing utilities */
.pt-4 {
	padding-top: var(--space-4);
}

.pb-4 {
	padding-bottom: var(--space-4);
}

.pl-4 {
	padding-left: var(--space-4);
}

.pr-4 {
	padding-right: var(--space-4);
}

.px-4 {
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

.py-4 {
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.mt-4 {
	margin-top: var(--space-4);
}

.mb-4 {
	margin-bottom: var(--space-4);
}

.ml-4 {
	margin-left: var(--space-4);
}

.mr-4 {
	margin-right: var(--space-4);
}

.mx-4 {
	margin-left: var(--space-4);
	margin-right: var(--space-4);
}

.my-4 {
	margin-top: var(--space-4);
	margin-bottom: var(--space-4);
}

/* Gap utilities */
.gap-2 {
	gap: var(--space-2);
}

.gap-3 {
	gap: var(--space-3);
}

.gap-4 {
	gap: var(--space-4);
}

.gap-6 {
	gap: var(--space-6);
}

.gap-8 {
	gap: var(--space-8);
}

/* ==============================================
   ACCESSIBILITY SPACING
   ============================================== */

/* Focus spacing */
.focus-spacing:focus {
	outline: 2px solid var(--border-focus);
	outline-offset: var(--space-1);
}

/* Touch target spacing */
.touch-target {
	min-height: 44px;
	min-width: 44px;
	padding: var(--space-2) var(--space-3);
}

/* Screen reader spacing */
.sr-only-spacing {
	margin: var(--space-1);
	padding: var(--space-1);
}

/* ==============================================
   PRINT SPACING ADJUSTMENTS
   ============================================== */

@media print {

	/* Reduce spacing for print */
	.section-spacing {
		padding: var(--space-8) 0;
	}

	.hero-spacing {
		padding: var(--space-12) 0;
	}

	.card {
		margin-bottom: var(--space-4);
		padding: var(--space-4);
	}

	/* Remove excessive spacing */
	.section-spacing-loose {
		padding: var(--space-12) 0;
	}
}

/* ==============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================== */

/* Container query support (future) */
@container (min-width: 768px) {
	.container-query-spacing {
		padding: var(--space-8);
	}
}

/* Reduced motion spacing */
@media (prefers-reduced-motion: reduce) {

	/* Maintain spacing but remove any motion-based adjustments */
	* {
		scroll-margin-top: var(--space-16);
	}
}