/* =========================================================================
   5 · UTILITIES — tiny composition helpers
   Reference: V4-BUILD-SPEC §3
   ========================================================================= */

/* Flow utility — vertical rhythm between siblings */
.jj-flow    > * + * { margin-top: var(--sp-4); }
.jj-flow-lg > * + * { margin-top: var(--sp-8); }

/* Stack — vertical flex column */
.jj-stack    { display: flex; flex-direction: column; gap: var(--sp-4); }
.jj-stack-lg { display: flex; flex-direction: column; gap: var(--sp-8); }

/* Row — horizontal flex, wraps */
.jj-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* Text alignment */
.jj-center { text-align: center; }
.jj-left   { text-align: left; }
.jj-right  { text-align: right; }

/* Hide */
.jj-hide { display: none !important; }

@media (max-width: 47.99em) {
	.jj-hide-mobile { display: none !important; }
}
@media (min-width: 48em) {
	.jj-hide-desktop { display: none !important; }
}

/* Aspect ratio helpers — Baseline 2022 */
.jj-aspect-square    { aspect-ratio: 1 / 1; }
.jj-aspect-16-9      { aspect-ratio: 16 / 9; }
.jj-aspect-4-5       { aspect-ratio: 4 / 5; }
.jj-aspect-4-3       { aspect-ratio: 4 / 3; }

/* Decorative SVG / image */
.jj-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cluster — group of related interactives (e.g. social icons) */
.jj-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}