.block-number-list {
	counter-reset: number-list;
}

/* Two columns style (Number List > Styles > Two columns): short items side by side on tablet and
   up, e.g. "This cleanse is for you if…" on sales pages. Numbers in Fraunces; a brass line above
   every item and under the last row. Phones: one column, and no line under the last item (the
   section's edge closes it). */
.block-number-list.is-style-two-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 56px;
}

.block-number-list.is-style-two-column > :is(.block-number-list__item, .wp-block-cwp-number-list-item),
.block-number-list.is-style-two-column > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cwp-number-list-item {
	margin-top: 0;
	padding: 22px 0;
	border-top: 1px solid var(--wp--custom--color--divider);
}

.block-number-list.is-style-two-column:not(.numbers-disabled) .block-number-list__inner {
	padding-left: 78px;
}

.block-number-list.is-style-two-column:not(.numbers-disabled) .block-number-list__inner::before {
	line-height: 0.9; /* the Fraunces numeral itself comes from blocks/number-list-item/style.css */
}

.block-number-list.is-style-two-column .block-number-list__inner > *:not(:last-child) {
	margin-bottom: 4px;
}

/* Title: Fraunces in sentence case like the default list, a size down for the short two-column
   items, and in the accent colour (green on light bands, brass on dark) beside the numeral. */
.block-number-list.is-style-two-column .block-number-list__title {
	margin-top: 4px;
	font-size: 1.375rem;
	color: var(--wp--custom--color--accent-text);
}

.block-number-list.is-style-two-column .block-number-list__subtitle {
	font-style: normal;
	line-height: 1.4;
}

@media only screen and (min-width: 768px) {
	.block-number-list.is-style-two-column {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.block-number-list.is-style-two-column > .block-number-list__item:nth-last-child(-n+2):nth-child(odd),
	.block-number-list.is-style-two-column > .block-number-list__item:last-child {
		border-bottom: 1px solid var(--wp--custom--color--divider);
	}

	.editor-styles-wrapper .block-number-list.is-style-two-column .block-editor-block-list__layout {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 56px;
	}
}

/* "Checklist" style (Number List > Styles > Checklist): the "this is for you if…" list on a sales
   page. No numerals and no rules between items — a brass check beside each line, three across on a
   laptop — so a page can carry this list and a numbered list without the two reading as one slab.
   It assumes the block's "Disable numbering" toggle is on, so no numeral rule applies here. */
.block-number-list.is-style-checklist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px 44px;
}

/* An item is a photo beside its text from 768px up. A checklist item has no photo, so it stays
   one column. The selector is a descendant, not a child: in the editor the item sits inside the
   editor's own wrappers, which is where that two-column rule squeezed every line into a strip. */
.block-number-list.is-style-checklist .block-number-list__item,
.block-number-list.is-style-checklist .wp-block-cwp-number-list-item {
	display: block;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* The check is drawn, not typed: two borders on an empty box, turned on its corner, so it carries
   no text, needs no asset and takes the band's accent colour on light and dark alike. */
.block-number-list.is-style-checklist .block-number-list__inner {
	position: relative;
	padding-left: 36px;
}

.block-number-list.is-style-checklist .block-number-list__inner::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 10px;
	height: 17px;
	border-right: 2.5px solid var(--wp--custom--color--divider);
	border-bottom: 2.5px solid var(--wp--custom--color--divider);
	transform: rotate(45deg);
}

.block-number-list.is-style-checklist .block-number-list__inner > *:not(:last-child) {
	margin-bottom: 4px;
}

/* The title is set like a small section title, not a label: Fraunces, sentence case, Brass Dark.
   Six bold green caps at body size gave the label as much weight as the sentence under it, so
   the section read as twelve things to rank instead of six. Brass Dark, not the lighter brass,
   because this list sits on linen, where light brass is 2.1:1. */
.block-number-list.is-style-checklist .block-number-list__title {
	margin-top: 0;
	margin-bottom: 2px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem; /* the card title's size (Columns > Cards), a step above the body text */
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--brass-dark);
}

.block-number-list.is-style-checklist .block-number-list__subtitle {
	font-style: normal;
	font-size: 1.125rem; /* body size, the same as the text around the list */
	line-height: 1.5;
}

@media only screen and (min-width: 768px) {
	.block-number-list.is-style-checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (min-width: 1024px) {
	.block-number-list.is-style-checklist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* A checklist set in one column of a Columns block (beside a photo, as on the Free Soup Challenge
   page's "Here's what lands in your inbox") has half the width to work with, so it stays a
   single list at every width rather than splitting into strips. */
.wp-block-column .block-number-list.is-style-checklist {
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

/* In the editor the list is one item per row, full width, however wide the canvas is. The canvas
   is narrower than the screen it is laid out for - the block sidebar takes a third of it - so
   three across left each line a letter or two wide and impossible to edit. The columns are what
   the front end and the Style Book are for; the editor is for reading and changing the words. */
.editor-styles-wrapper .block-number-list.is-style-checklist {
	display: block;
}

.editor-styles-wrapper .block-number-list.is-style-checklist .block-editor-block-list__layout > .wp-block-cwp-number-list-item + .wp-block-cwp-number-list-item {
	margin-top: 20px;
}

/* Phones: the numeral's gutter was set for a desktop column. At 390px it took a fifth of the
   width and left the wording on a very narrow measure, so the numeral comes down a size and the
   gutter closes up with it. */
@media only screen and (max-width: 600px) {
	.block-number-list.is-style-two-column:not(.numbers-disabled) .block-number-list__inner {
		padding-left: 56px;
	}

	.block-number-list.is-style-two-column:not(.numbers-disabled) .block-number-list__inner::before {
		font-size: var(--wp--custom--step-number--small);
	}
}