/* S15 tiles: an icon above a label. Columns come from the nbt-cols-N class the builder writes (2 to 6). */

.wp-block-list.is-style-nbt-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6) var(--space-4);
	margin: var(--space-10) 0 0;
	padding: 0;
	list-style: none;
}

.is-style-nbt-tiles > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	font-weight: 600;
	text-align: center;
}

.is-style-nbt-tiles > li[class*="nbt-i-"]::before {
	content: "";
	width: 40px;
	height: 40px;
	background: var(--c-brand);
	mask: var(--nbt-icon) center / contain no-repeat;
}

.nbt-tiles .nbt-section-actions {
	justify-content: center;
}

@media (min-width: 48rem) {

	.wp-block-list.is-style-nbt-tiles:not(.nbt-cols-2) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* From lg: N columns, with a divider before every tile that does not start a row (so wrapping never breaks the rule). */
@media (min-width: 64rem) {

	.is-style-nbt-tiles > li {
		padding-inline: var(--space-3);
	}

	.wp-block-list.is-style-nbt-tiles.nbt-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.is-style-nbt-tiles.nbt-cols-2 > li:not(:nth-child(2n + 1)) {
		border-left: var(--border);
	}

	.wp-block-list.is-style-nbt-tiles.nbt-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.is-style-nbt-tiles.nbt-cols-3 > li:not(:nth-child(3n + 1)) {
		border-left: var(--border);
	}

	.wp-block-list.is-style-nbt-tiles.nbt-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.is-style-nbt-tiles.nbt-cols-4 > li:not(:nth-child(4n + 1)) {
		border-left: var(--border);
	}

	.wp-block-list.is-style-nbt-tiles.nbt-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.is-style-nbt-tiles.nbt-cols-5 > li:not(:nth-child(5n + 1)) {
		border-left: var(--border);
	}

	.wp-block-list.is-style-nbt-tiles.nbt-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.is-style-nbt-tiles.nbt-cols-6 > li:not(:nth-child(6n + 1)) {
		border-left: var(--border);
	}
}