/*
 * Card / tile row alignment.
 *
 * Loaded directly rather than compiled into dist/main.css, the same way
 * fonts.css and editor.css are, so one file serves both the front end
 * (cckc_card_align_style) and the block-editor canvas (add_editor_style in
 * inc/block-previews.php) and the two can never drift apart.
 *
 * A card grid is laid out with grid-template-columns, so a row holding fewer
 * cards than it has columns leaves the empty tracks on the right and the cards
 * read as left-anchored. justify-content cannot move them: the 1fr tracks span
 * the full width whether or not anything sits in them.
 *
 * So the aligned modes switch the row to flex and give every child the width
 * its grid track would have had. Same card width, same gap, only the row moves.
 * The column count arrives per breakpoint as a data attribute, which keeps the
 * arithmetic in one rule instead of one rule per block.
 *
 * Nothing here applies to the default, so a row that has never been given an
 * alignment renders exactly as it did before this file existed.
 */

.cckc-card-row {
	--cckc-card-cols: 1;
}

.cckc-card-row[data-cols="1"] { --cckc-card-cols: 1; }
.cckc-card-row[data-cols="2"] { --cckc-card-cols: 2; }
.cckc-card-row[data-cols="3"] { --cckc-card-cols: 3; }
.cckc-card-row[data-cols="4"] { --cckc-card-cols: 4; }
.cckc-card-row[data-cols="5"] { --cckc-card-cols: 5; }
.cckc-card-row[data-cols="6"] { --cckc-card-cols: 6; }

/* Breakpoints mirror --breakpoint-* in assets/css/tailwind.css. */

@media (min-width: 551px) {
	.cckc-card-row[data-cols-sm="1"] { --cckc-card-cols: 1; }
	.cckc-card-row[data-cols-sm="2"] { --cckc-card-cols: 2; }
	.cckc-card-row[data-cols-sm="3"] { --cckc-card-cols: 3; }
	.cckc-card-row[data-cols-sm="4"] { --cckc-card-cols: 4; }
	.cckc-card-row[data-cols-sm="5"] { --cckc-card-cols: 5; }
	.cckc-card-row[data-cols-sm="6"] { --cckc-card-cols: 6; }
}

@media (min-width: 801px) {
	.cckc-card-row[data-cols-md="1"] { --cckc-card-cols: 1; }
	.cckc-card-row[data-cols-md="2"] { --cckc-card-cols: 2; }
	.cckc-card-row[data-cols-md="3"] { --cckc-card-cols: 3; }
	.cckc-card-row[data-cols-md="4"] { --cckc-card-cols: 4; }
	.cckc-card-row[data-cols-md="5"] { --cckc-card-cols: 5; }
	.cckc-card-row[data-cols-md="6"] { --cckc-card-cols: 6; }
}

@media (min-width: 1024px) {
	.cckc-card-row[data-cols-lg="1"] { --cckc-card-cols: 1; }
	.cckc-card-row[data-cols-lg="2"] { --cckc-card-cols: 2; }
	.cckc-card-row[data-cols-lg="3"] { --cckc-card-cols: 3; }
	.cckc-card-row[data-cols-lg="4"] { --cckc-card-cols: 4; }
	.cckc-card-row[data-cols-lg="5"] { --cckc-card-cols: 5; }
	.cckc-card-row[data-cols-lg="6"] { --cckc-card-cols: 6; }
}

@media (min-width: 1261px) {
	.cckc-card-row[data-cols-xl="1"] { --cckc-card-cols: 1; }
	.cckc-card-row[data-cols-xl="2"] { --cckc-card-cols: 2; }
	.cckc-card-row[data-cols-xl="3"] { --cckc-card-cols: 3; }
	.cckc-card-row[data-cols-xl="4"] { --cckc-card-cols: 4; }
	.cckc-card-row[data-cols-xl="5"] { --cckc-card-cols: 5; }
	.cckc-card-row[data-cols-xl="6"] { --cckc-card-cols: 6; }
}

.cckc-card-row[data-align="center"],
.cckc-card-row[data-align="right"] {
	display: flex;
	flex-wrap: wrap;
}

.cckc-card-row[data-align="center"] {
	justify-content: center;
}

.cckc-card-row[data-align="right"] {
	justify-content: flex-end;
}

/*
 * At one column this resolves to 100%, which is what the grid already gave the
 * cards, so mobile is untouched at every alignment.
 */
.cckc-card-row[data-align="center"] > *,
.cckc-card-row[data-align="right"] > * {
	flex: 0 0 auto;
	width: calc(
		(100% - (var(--cckc-card-cols) - 1) * var(--cckc-card-gap)) / var(--cckc-card-cols)
	);
}