/**
 * WP SOC Design System — Spacing
 * ============================================================
 * Utility classes generated from the 10-step spacing scale in
 * tokens.css. No section should ever write a raw px/rem margin or
 * padding — reach for one of these, or use the tokens directly in a
 * component file.
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Section container — the shared width system every section
 * template (Hero, Trusted By, and beyond) is built inside.
 * ------------------------------------------------------------ */

.wp-soc-container {
	width: var(--wp-soc-container-width);
	max-width: var(--wp-soc-container-max);
	margin-inline: auto;
	padding-inline: var(--wp-soc-space-6); /* 32px small screens up, refined below */
}

.wp-soc-container--narrow {
	max-width: var(--wp-soc-container-max-narrow);
}

.wp-soc-container--prose {
	max-width: var(--wp-soc-container-max-prose);
}

@media (min-width: 480px) {
	.wp-soc-container {
		padding-inline: var(--wp-soc-space-5); /* 24px */
	}
}

@media (min-width: 768px) {
	.wp-soc-container {
		padding-inline: var(--wp-soc-space-7); /* 48px */
	}
}

@media (min-width: 1200px) {
	.wp-soc-container {
		padding-inline: var(--wp-soc-space-7);
	}
}

/* Vertical rhythm between sections — every <section> should carry one */
.wp-soc-section-pad {
	padding-block: var(--wp-soc-space-9); /* 96px */
}

.wp-soc-section-pad--lg {
	padding-block: var(--wp-soc-space-10); /* 128px */
}

.wp-soc-section-pad--sm {
	padding-block: var(--wp-soc-space-7); /* 48px */
}

@media (max-width: 767px) {
	.wp-soc-section-pad,
	.wp-soc-section-pad--lg {
		padding-block: var(--wp-soc-space-8); /* 64px on small screens */
	}

	.wp-soc-section-pad--sm {
		padding-block: var(--wp-soc-space-6); /* 32px */
	}
}

/* ------------------------------------------------------------ *
 * Generic spacing utilities
 * Naming: {property}{side?}-{step}
 *   m  = margin      p  = padding
 *   t/r/b/l = side    x = inline    y = block
 *   step is the scale index (1–10), matching tokens.css
 * ------------------------------------------------------------ */

:root {
	--wp-soc-space-scale-1: var(--wp-soc-space-1);
	--wp-soc-space-scale-2: var(--wp-soc-space-2);
	--wp-soc-space-scale-3: var(--wp-soc-space-3);
	--wp-soc-space-scale-4: var(--wp-soc-space-4);
	--wp-soc-space-scale-5: var(--wp-soc-space-5);
	--wp-soc-space-scale-6: var(--wp-soc-space-6);
	--wp-soc-space-scale-7: var(--wp-soc-space-7);
	--wp-soc-space-scale-8: var(--wp-soc-space-8);
	--wp-soc-space-scale-9: var(--wp-soc-space-9);
	--wp-soc-space-scale-10: var(--wp-soc-space-10);
}

.wp-soc-m-1  { margin: var(--wp-soc-space-1); }
.wp-soc-m-2  { margin: var(--wp-soc-space-2); }
.wp-soc-m-3  { margin: var(--wp-soc-space-3); }
.wp-soc-m-4  { margin: var(--wp-soc-space-4); }
.wp-soc-m-5  { margin: var(--wp-soc-space-5); }
.wp-soc-m-6  { margin: var(--wp-soc-space-6); }
.wp-soc-m-7  { margin: var(--wp-soc-space-7); }
.wp-soc-m-8  { margin: var(--wp-soc-space-8); }
.wp-soc-m-9  { margin: var(--wp-soc-space-9); }
.wp-soc-m-10 { margin: var(--wp-soc-space-10); }

.wp-soc-mt-1  { margin-top: var(--wp-soc-space-1); }
.wp-soc-mt-2  { margin-top: var(--wp-soc-space-2); }
.wp-soc-mt-3  { margin-top: var(--wp-soc-space-3); }
.wp-soc-mt-4  { margin-top: var(--wp-soc-space-4); }
.wp-soc-mt-5  { margin-top: var(--wp-soc-space-5); }
.wp-soc-mt-6  { margin-top: var(--wp-soc-space-6); }
.wp-soc-mt-7  { margin-top: var(--wp-soc-space-7); }
.wp-soc-mt-8  { margin-top: var(--wp-soc-space-8); }
.wp-soc-mt-9  { margin-top: var(--wp-soc-space-9); }
.wp-soc-mt-10 { margin-top: var(--wp-soc-space-10); }

.wp-soc-mb-1  { margin-bottom: var(--wp-soc-space-1); }
.wp-soc-mb-2  { margin-bottom: var(--wp-soc-space-2); }
.wp-soc-mb-3  { margin-bottom: var(--wp-soc-space-3); }
.wp-soc-mb-4  { margin-bottom: var(--wp-soc-space-4); }
.wp-soc-mb-5  { margin-bottom: var(--wp-soc-space-5); }
.wp-soc-mb-6  { margin-bottom: var(--wp-soc-space-6); }
.wp-soc-mb-7  { margin-bottom: var(--wp-soc-space-7); }
.wp-soc-mb-8  { margin-bottom: var(--wp-soc-space-8); }
.wp-soc-mb-9  { margin-bottom: var(--wp-soc-space-9); }
.wp-soc-mb-10 { margin-bottom: var(--wp-soc-space-10); }

.wp-soc-my-1  { margin-block: var(--wp-soc-space-1); }
.wp-soc-my-2  { margin-block: var(--wp-soc-space-2); }
.wp-soc-my-3  { margin-block: var(--wp-soc-space-3); }
.wp-soc-my-4  { margin-block: var(--wp-soc-space-4); }
.wp-soc-my-5  { margin-block: var(--wp-soc-space-5); }
.wp-soc-my-6  { margin-block: var(--wp-soc-space-6); }
.wp-soc-my-7  { margin-block: var(--wp-soc-space-7); }
.wp-soc-my-8  { margin-block: var(--wp-soc-space-8); }
.wp-soc-my-9  { margin-block: var(--wp-soc-space-9); }
.wp-soc-my-10 { margin-block: var(--wp-soc-space-10); }

.wp-soc-p-1  { padding: var(--wp-soc-space-1); }
.wp-soc-p-2  { padding: var(--wp-soc-space-2); }
.wp-soc-p-3  { padding: var(--wp-soc-space-3); }
.wp-soc-p-4  { padding: var(--wp-soc-space-4); }
.wp-soc-p-5  { padding: var(--wp-soc-space-5); }
.wp-soc-p-6  { padding: var(--wp-soc-space-6); }
.wp-soc-p-7  { padding: var(--wp-soc-space-7); }
.wp-soc-p-8  { padding: var(--wp-soc-space-8); }
.wp-soc-p-9  { padding: var(--wp-soc-space-9); }
.wp-soc-p-10 { padding: var(--wp-soc-space-10); }

.wp-soc-px-1  { padding-inline: var(--wp-soc-space-1); }
.wp-soc-px-2  { padding-inline: var(--wp-soc-space-2); }
.wp-soc-px-3  { padding-inline: var(--wp-soc-space-3); }
.wp-soc-px-4  { padding-inline: var(--wp-soc-space-4); }
.wp-soc-px-5  { padding-inline: var(--wp-soc-space-5); }
.wp-soc-px-6  { padding-inline: var(--wp-soc-space-6); }

.wp-soc-py-1  { padding-block: var(--wp-soc-space-1); }
.wp-soc-py-2  { padding-block: var(--wp-soc-space-2); }
.wp-soc-py-3  { padding-block: var(--wp-soc-space-3); }
.wp-soc-py-4  { padding-block: var(--wp-soc-space-4); }
.wp-soc-py-5  { padding-block: var(--wp-soc-space-5); }
.wp-soc-py-6  { padding-block: var(--wp-soc-space-6); }

/* ------------------------------------------------------------ *
 * Gap utilities — for flex/grid layouts (component grids, button
 * groups, form rows)
 * ------------------------------------------------------------ */

.wp-soc-gap-1  { gap: var(--wp-soc-space-1); }
.wp-soc-gap-2  { gap: var(--wp-soc-space-2); }
.wp-soc-gap-3  { gap: var(--wp-soc-space-3); }
.wp-soc-gap-4  { gap: var(--wp-soc-space-4); }
.wp-soc-gap-5  { gap: var(--wp-soc-space-5); }
.wp-soc-gap-6  { gap: var(--wp-soc-space-6); }
.wp-soc-gap-7  { gap: var(--wp-soc-space-7); }
.wp-soc-gap-8  { gap: var(--wp-soc-space-8); }

/* ------------------------------------------------------------ *
 * Stack — vertical rhythm between direct children, the most common
 * spacing need inside a card or a text block.
 * ------------------------------------------------------------ */

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

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

.wp-soc-stack--loose > * + * {
	margin-top: var(--wp-soc-space-6);
}