/*
 * Section: List Pair.
 *
 * Loaded only on pages carrying the `list_pair` layout.
 *
 * Two paper panels side by side, each opened by a mono label over a hairline
 * and holding one list. The two lists are drawn differently on purpose — that
 * asymmetry is the argument, and it is what separates this section from
 * `comparison`, where both sides must be identical. See the template header.
 *
 * The panel is named ink and paper rather than role tokens, matching `.card`
 * and `icon_box`: a box stays a light surface on a dark band, which is what
 * keeps it raised rather than reading as a hole in it. The roles are re-pointed
 * inside so nothing else has to know.
 */

.list-pair__statement {
	max-width: 62ch;
	margin: 0;
	padding-left: var(--sq-space-4);
	/* The accent bar. Not `heading_style: edge`, which is the same shape on a
	 * heading — this marks a sentence, and the section's H2 is above it. */
	border-left: 4px solid var(--sq-accent);
	font-size: var(--sq-text-lead);
	font-weight: var(--sq-weight-bold);
	line-height: 1.35;
	text-wrap: pretty;
}


/* ============================================================== PANELS == */

.list-pair__panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sq-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-pair__cell {
	/* base.css spaces li + li; the grid gap owns it here. */
	display: flex;
	margin: 0;
}

.list-panel {
	/* `flex: 1` on the panel is what makes a pair the same height without one
	 * being fixed — the shorter list simply carries more white space. */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sq-space-4);
	padding: var(--sq-space-5);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

/* Inside the panel the roles are the light set again, whatever band we are on.
 * Without this the mono label and the filled terminus would take the on-dark
 * accent, and #FF7A2F is only 2.6:1 against the paper it would sit on. */
.sq-on-dark .list-panel {
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-support);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-hairline);
	--sq-accent: var(--sq-color-orange-text);
}

/*
 * The label device. Mono rather than `.eyebrow` for the reason `timeline`
 * gives: an eyebrow names a band above a heading, and this names a block
 * inside one. The rule under it belongs to the label, so a panel with nothing
 * else in it still reads as labelled.
 */
.list-panel__label {
	margin: 0;
	padding-bottom: var(--sq-space-3);
	border-bottom: var(--sq-border-width-hair) solid var(--sq-rule);
	color: var(--sq-accent);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-label-sm);
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.list-panel__intro {
	/* base.css caps every paragraph at the measure, which is right for prose
	 * and wrong inside a panel that is already narrower than one. */
	max-width: none;
	margin: 0;
	line-height: 1.55;
	text-wrap: pretty;
}

.list-panel__items {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-panel__item {
	margin: 0; /* base.css spaces li + li; the flex gap owns it here */
	line-height: 1.5;
	text-wrap: pretty;
}


/* ---------------------------------------------------------------- DASH --
 *
 * A short rule before each line, drawn in CSS. A literal em dash in the markup
 * would be a character read out before every item, which is the same reason
 * `working-with-us` draws its square and `scope_of_work` its tick.
 */

.list-panel--dash .list-panel__item {
	display: grid;
	grid-template-columns: 0.875rem minmax(0, 1fr); /* 14 */
	gap: var(--sq-space-3);
	align-items: start;
}

.list-panel--dash .list-panel__item::before {
	width: 0.875rem; /* 14 */
	height: var(--sq-border-width-hair);
	/* Sits on the middle of the first line rather than its top edge. */
	margin-top: 0.7em;
	background-color: var(--sq-accent);
	content: '';
}


/* ------------------------------------------------------------ NUMBERED --
 *
 * `process`'s rail at panel scale: a numeral in a box, joined to the next by a
 * line. Smaller and outlined rather than the section-spine version, because
 * this one sits inside a panel and a 48px filled ink square would be the
 * loudest thing in it.
 *
 * The connector is drawn from the item rather than added to the markup, so the
 * list stays an <ol> of plain items. It reaches into the gap below so it meets
 * the next numeral, and `:not(:last-child)` stops it running off the end.
 */

.list-panel--numbered .list-panel__item {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr); /* 24 */
	gap: var(--sq-space-3);
	align-items: start;
}

.list-panel--numbered .list-panel__item:not(:last-child)::after {
	position: absolute;
	top: 1.5rem; /* below the numeral box */
	bottom: calc(var(--sq-space-3) * -1); /* into the gap, up to the next one */
	left: 0.75rem; /* the centre of the numeral column */
	width: var(--sq-border-width-hair);
	margin-left: calc(var(--sq-border-width-hair) / -2);
	background-color: var(--sq-border);
	content: '';
}

.list-panel__number {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.5rem; /* 24 */
	height: 1.5rem;
	border: var(--sq-border-width-hair) solid var(--sq-border);
	font-size: var(--sq-text-micro);
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/*
 * The rail terminates in a filled box rather than trailing off, the same call
 * `process` makes when its last phase ends in a square rather than an arrow
 * pointing at nothing.
 *
 * Paper on the accent, and that is arithmetic: --sq-accent is #A8420C here
 * (the re-point above keeps it there on a dark band too), where white is
 * 6.1:1 and passes at this 12px size. Safety Orange would be 3.87:1 and fail,
 * which is why the fill is the text orange rather than the fill orange —
 * the one place in the theme those two swap roles.
 */
.list-panel--numbered .list-panel__item:last-child .list-panel__number {
	border-color: var(--sq-accent);
	background-color: var(--sq-accent);
	color: var(--sq-color-paper);
}


/* ============================================================= CLOSING ==
 *
 * The resolution, under both panels and attached to neither. The rule is the
 * block's own top border, so it is exactly as wide as the copy under it — the
 * two are one object rather than a full-bleed line with a paragraph beneath.
 */

.list-pair__closing {
	max-width: 68ch;
	padding-top: var(--sq-space-5);
	border-top: var(--sq-border-width) solid var(--sq-border);
}

.list-pair__closing > * {
	margin: 0;
}

.list-pair__closing > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	/*
	 * Side by side only at two. A lone panel runs the full width rather than
	 * sitting in half a row with nothing to set it against — the same call
	 * `scope_of_work` makes about its divider and `factors` about its control lists.
	 */
	.list-pair--count-2 .list-pair__panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.list-panel {
		gap: var(--sq-space-5);
		padding: var(--sq-space-6);
	}
}