/**
 * Meridian Sections — Checklist
 *
 * Figma 12:8188. A headed two-column list of short lines, each closed by a
 * light-blue rule. Drawn as "What We Expect From Each Other"; the section knows
 * nothing about expectations.
 *
 * The list is .md-checklist from sections.css, shared with the Photo Statement.
 * This file is the skin: ink markers, 15px lines, and a rule under each.
 */

.md-section.md-clist {
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
	background-color: var(--md-white, #fff);
}

.md-clist--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

.md-clist__list {
	margin-block-start: 2.5rem; /* 40px */

	/*
	 * The comp's skin. The rule replaces the primitive's row gap: spacing comes
	 * from each item's own padding, so the rules sit hard against the lines
	 * rather than floating in a gap.
	 */
	--md-checklist-gap: 0;
	--md-checklist-size: var(--md-text-small, 1rem); /* 16px, up from the 15px drawn */
	--md-checklist-leading: normal; /* the comp's "auto" leading */
	--md-checklist-marker: var(--md-color-text, #0a1628);
	--md-checklist-marker-top: 7px;
	--md-checklist-col-gap: 4rem; /* 64px */
}

.md-clist__list .md-checklist__item {
	padding-block: var(--md-space-xs, 0.75rem) 0.8125rem; /* 12 / 13 */
	color: var(--md-color-text-body, #364153);
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-light-blue, #8ac9ec);
}

/*
 * The last line in each column carries no rule — the column's own end, which
 * PHP marks because CSS cannot know where a grid column breaks.
 */
.md-clist__list .md-checklist__item--column-end {
	padding-block-end: var(--md-space-xs, 0.75rem); /* the comp evens it up */
	border-block-end: 0;
}

/*
 * Stacked, those marks fall mid-list and would punch a hole in the rules, so the
 * rule comes back for every line except the genuine last one.
 */
@media (max-width: 35.9375em) {
	.md-clist__list .md-checklist__item--column-end {
		padding-block-end: 0.8125rem;
		border-block-end: var(--md-border-width, 1px) solid
			var(--md-light-blue, #8ac9ec);
	}

	.md-clist__list .md-checklist__item:last-child {
		padding-block-end: var(--md-space-xs, 0.75rem);
		border-block-end: 0;
	}
}

.md-clist__empty {
	margin: 0;
	padding-block: var(--md-space-xl, 3rem);
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	text-align: center;
}