/* S08 detailed steps: a ruled list, a mono number and a title with its description. */

.wp-block-list.is-style-nbt-steps-detailed {
	margin: var(--space-10) 0 0;
	padding: 0;
	counter-reset: nbt-detail;
	border-top: var(--border);
	list-style: none;
}

.is-style-nbt-steps-detailed > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
	padding: var(--space-6) 0;
	border-bottom: var(--border);
	color: var(--c-ink-2);
	counter-increment: nbt-detail;
}

.is-style-nbt-steps-detailed > li::before {
	content: counter(nbt-detail, decimal-leading-zero);
	color: var(--c-brand);
	font: 500 var(--text-3xl) / 1 var(--font-mono);
}

.is-style-nbt-steps-detailed > li > strong {
	color: var(--c-ink);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.25;
}

.is-style-nbt-steps-detailed > li > br {
	display: none;
}

@media (min-width: 48rem) {

	.is-style-nbt-steps-detailed > li {
		grid-template-columns: 6rem minmax(0, 68ch);
		column-gap: var(--space-6);
	}

	.is-style-nbt-steps-detailed > li::before {
		grid-row: 1 / span 2;
	}

	.is-style-nbt-steps-detailed > li > strong {
		grid-column: 2;
	}
}