/**
 * Cards Tiny (inc/blocks-layout/cards-tiny.php) — a titled row of small
 * image or color swatches. Typical 75rem/2rem active area.
 *
 * The grid's column count comes from six CSS custom properties set
 * inline per-block (--ct-cols-xs/sm/md/lg/xl/full), each already capped
 * in PHP at min(configured "Horizontal Items", that tier's max) — see
 * the block file's doc comment. Each media query below just switches
 * which one is active; none of the arithmetic happens in CSS. Items
 * auto-place left-to-right, top-to-bottom (plain CSS Grid, no explicit
 * row markup) — same "flush left, never stretched" technique as Cards
 * Image + Text (Rectangle), so a block with fewer items than the
 * configured column count just leaves the remaining cells in that row
 * blank instead of stretching to fill them.
 *
 * Color swatches are a fixed 4rem (64px) circle (border-radius: 999px)
 * regardless of column width — a color chip is a fixed-size color
 * reference, not something that should grow/shrink with the layout.
 * Image swatches instead fill their full column width (aspect-ratio: 1/1
 * keeps them square as that width changes across breakpoints), since a
 * photographic swatch needs to stay legible/large rather than pin to one
 * fixed size.
 */

.cards-tiny-block {
	max-width: 75rem;
	margin: 0 auto;
	padding: 4rem 2rem;
}

.ct-title {
	margin: 0 0 2rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--room-ink);
}

.ct-grid {
	display: grid;
	grid-template-columns: repeat(var(--ct-cols-xs, 2), 1fr);
	gap: 2rem 1.5rem;
}

@media (min-width: 480px) {
	.ct-grid {
		grid-template-columns: repeat(var(--ct-cols-sm, 3), 1fr);
	}
}

@media (min-width: 640px) {
	.ct-grid {
		grid-template-columns: repeat(var(--ct-cols-md, 5), 1fr);
	}
}

@media (min-width: 860px) {
	.ct-grid {
		grid-template-columns: repeat(var(--ct-cols-lg, 6), 1fr);
	}
}

@media (min-width: 1080px) {
	.ct-grid {
		grid-template-columns: repeat(var(--ct-cols-xl, 8), 1fr);
	}
}

@media (min-width: 1220px) {
	.ct-grid {
		grid-template-columns: repeat(var(--ct-cols-full, 10), 1fr);
	}
}

.ct-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ct-swatch {
	display: block;
}

.ct-swatch-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ct-swatch-color {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
}

.ct-item-label {
	margin-top: 0.75rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 0.85rem;
	color: var(--room-ink);
}