/*
	COMPOSITIONS INDEX
	1. cluster
	2. flow
	3. auto-grid
	4. repel
	5. center
*/

@layer compositions {
	/* --------------------------------------------------------------------------
	cluster (https://every-layout.dev/layouts/cluster/)
	A layout that distributes items with consistent spacing.

	CUSTOM PROPERTIES
	--gutter: Space between each item (defaults to global --gutter).
	--cluster-justify (flex-start): Horizontal alignment (justify-content).
	--cluster-align (center): Vertical alignment (align-items).
	-------------------------------------------------------------------------- */
	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter);
		justify-content: var(--cluster-justify, flex-start);
		align-items: var(--cluster-align, center);
	}

	/* --------------------------------------------------------------------------
	flow (https://every-layout.dev/layouts/stack/)
	Vertical spacing between siblings.
	Info: https://piccalil.li/blog/my-favourite-3-lines-of-css/
	-------------------------------------------------------------------------- */
	.flow > * + * {
		margin-block-start: var(--flow-space, 1em);
	}

	/* --------------------------------------------------------------------------
	auto-grid (https://every-layout.dev/layouts/grid/)
	A flexible layout that creates an auto-fill grid with configurable item sizes.

	CUSTOM PROPERTIES
	--gutter: Space between each item (defaults to global --gutter — 16–24px).
	--grid-min-size (16rem): Minimum item size.
	--grid-placement (auto-fill): auto-fill or auto-fit for empty track handling.

	DATA ATTRIBUTES
	[data-layout="50-50"]: Two-column 50/50 split.
	[data-layout="thirds"]: Three-column layout.
	-------------------------------------------------------------------------- */
	.auto-grid {
		display: grid;
		grid-template-columns: repeat(
				var(--grid-placement, auto-fill),
				minmax(var(--grid-min-size, 16rem), 1fr)
			);
		gap: var(--gutter);
	}

	.auto-grid[data-layout="50-50"] {
		--grid-placement: auto-fit;
		--grid-min-size: clamp(16rem, 50vw, 33rem);
	}

	.auto-grid[data-layout="thirds"] {
		--grid-placement: auto-fit;
		--grid-min-size: clamp(16rem, 33%, 20rem);
	}

	.auto-grid[data-layout="5-7"] {
		--grid-placement: auto-fit;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.auto-grid[data-layout="7-5"] {
		--grid-placement: auto-fit;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.auto-grid[data-layout="quarters"] {
		--grid-placement: auto-fit;
		--grid-min-size: clamp(12rem, 25%, 16rem);
	}

	@media (max-width: 49.999em) {
		.auto-grid[data-layout="5-7"],
		.auto-grid[data-layout="7-5"] {
			grid-template-columns: 1fr;
		}
	}

	/* --------------------------------------------------------------------------
	repel
	Pushes items apart where there is space, stacks on small viewports.

	CUSTOM PROPERTIES
	--gutter: Space between each item (defaults to global --gutter).
	--repel-align (center): Vertical alignment (align-items).
	-------------------------------------------------------------------------- */
	.repel {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: var(--repel-align, center);
		gap: var(--gutter);
	}

	/* --------------------------------------------------------------------------
	center (https://every-layout.dev/layouts/center/)
	Horizontally centers an element and caps its width to a reading measure.

	CUSTOM PROPERTIES
	--measure: Max inline size (defaults to global --measure — 64ch).
	-------------------------------------------------------------------------- */
	.center {
		box-sizing: content-box;
		margin-inline: auto;
		max-inline-size: var(--measure);
	}
}