/*
 * The random pool.
 *
 * Three rules do the real work and the middle one is the important one: the unpicked
 * items are hidden **from the first frame**, by CSS, not by the script. A script that
 * hid them after paint would show the whole pool for one frame — on a twelve-item pool
 * that is a visible flash, and it is how the plugin this replaces behaves.
 *
 * Without JavaScript the server's `is-shown` stays where it is, so a reader sees the
 * first few rather than nothing. That is the deliberate fallback: no-JS loses the
 * variation, never the content.
 *
 * The column count arrives as `--mf-rnd-columns` from the block, because the suite
 * passes values in and keeps the rules here.
 */

.mf-rnd__grid {
	display: grid;
	grid-template-columns: repeat(var(--mf-rnd-columns, 3), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-rnd__item {
	display: none;
}

.mf-rnd__item.is-shown {
	display: block;
}

/*
 * One column on a narrow screen, whatever the block asked for. A three-column grid of
 * minibuttons at 380px is three unreadable slivers, and `minmax(0, 1fr)` above will
 * happily produce them rather than overflow.
 */
@media (max-width: 37.5rem) {

	.mf-rnd__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}