/* ==========================================================================
   SitePulse Labs — Layout Utilities (Batch 3)
   Container/grid system and the reusable section-spacing scale that every
   later template (homepage, article, category) will build on.
   Depends on the custom properties defined in foundation.css.
   ========================================================================== */

/* --- Grid system: 4 columns mobile, 12 columns desktop (Phase 2 spec) --- */
.sp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-space-3);
}

@media (min-width: 1024px) {
	.sp-grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

.sp-grid--3-col {
	grid-column: span 4;
}

@media (min-width: 1024px) {
	.sp-grid--3-col {
		grid-column: span 4; /* three per row across the 12-column desktop grid */
	}
}

.sp-grid--2-col {
	grid-column: span 4;
}

@media (min-width: 768px) {
	.sp-grid--2-col {
		grid-column: span 6;
	}
}

/* --- Reusable section spacing: matches the Phase 2 "64px desktop / 48px
   mobile" section padding used consistently across every template --- */
.sp-section {
	padding-block: var(--sp-space-6); /* 48px mobile */
}

@media (min-width: 1024px) {
	.sp-section {
		padding-block: var(--sp-space-8); /* 64px desktop */
	}
}

.sp-section--tight {
	padding-block: var(--sp-space-4);
}

.sp-section--alt {
	background: var(--sp-color-mist-gray);
}

/* --- Vertical rhythm / stack utilities --- */
.sp-stack > * + * {
	margin-top: var(--sp-space-3);
}

.sp-stack--tight > * + * {
	margin-top: var(--sp-space-2);
}

.sp-stack--loose > * + * {
	margin-top: var(--sp-space-4);
}