/*
 * Article layout: a sticky side list beside a reading column.
 *
 * Knowledge articles and Support details. The rail is 280 wide, the gap 96,
 * the column padded 96 above and 120 below, sections 104 apart. Each section
 * opens with an ink rule, then a marker (a number on Knowledge, an icon on
 * Support details, D16), then an article h2 at 36, a lead at 20 and body at
 * 17 in a 700 measure. The marker slot is one slot: numbers are generated
 * from position, never typed.
 *
 *   <div class="vdt-article">
 *     <aside class="vdt-article__rail">…vdt-side-list…</aside>
 *     <div class="vdt-article__body">
 *       <section class="vdt-article__section" id="…">
 *         <span class="vdt-article__marker">01</span>   (or an icon)
 *         <div class="vdt-blocks">
 *           <div class="vdt-section-heading"><h2 class="vdt-h2">…</h2></div>
 *           <p class="vdt-lead vdt-lead-in">…</p>
 *           <div class="vdt-text vdt-prose">…</div>
 *         </div>
 *       </section>
 *     </div>
 *   </div>
 *
 * A section is one named layout row (ADR-0015): the marker, then the row's
 * blocks. The section heading inside is the same block as anywhere else;
 * here its h2 takes the article size (36), and the lead sits 28 under it.
 *
 * Below 960 the rail moves above the body and collapses (side-list.css).
 */

@layer vdt.components {
	.vdt-article {
		display: grid;
		grid-template-columns: var(--vdt-rail-width) minmax(0, 1fr);
		gap: var(--vdt-space-48) var(--vdt-gap-columns);
		align-items: start;
	}

	.vdt-article__rail {
		position: sticky;
		top: var(--vdt-sticky-offset);
	}

	/* Under a sticky section bar the rail clears it. */
	.vdt-section-bar ~ * .vdt-article__rail {
		top: calc(4rem + var(--vdt-sticky-offset));
	}

	.vdt-article__body {
		display: flex;
		flex-direction: column;
		gap: var(--vdt-space-104);
		/* max-width: var(--vdt-measure); */
	}

	.vdt-article__section {
		padding-top: var(--vdt-space-20);
		border-top: var(--vdt-rule-width) solid var(--vdt-rule);
		scroll-margin-top: calc(4rem + var(--vdt-sticky-offset));
	}

	.vdt-article__marker {
		display: block;
		color: var(--vdt-text-brand);
		font-size: var(--vdt-size-13);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-label);
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.vdt-article__marker .vdt-icon {
		width: var(--vdt-icon-lg);
		height: var(--vdt-icon-lg);
	}

	.vdt-article__marker + * {
		margin-top: var(--vdt-space-24);
	}

	.vdt-article__section .vdt-h2 {
		font-size: var(--vdt-size-h2-article);
		line-height: var(--vdt-leading-h3-lg);
	}

	.vdt-article__section .vdt-h2 + .vdt-lead,
	.vdt-article__section .vdt-blocks > .vdt-section-heading + .vdt-lead-in {
		--flow-space: var(--vdt-space-28);
		margin-top: var(--vdt-space-28);
	}

	.vdt-article__section .vdt-lead + * {
		margin-top: var(--vdt-flow-body);
	}

	.vdt-article__section > * + .vdt-prose,
	.vdt-article__section > .vdt-prose + * {
		margin-top: var(--vdt-space-32);
	}

	@media (max-width: 60rem) {
		.vdt-article {
			grid-template-columns: minmax(0, 1fr);
		}

		.vdt-article__rail {
			position: static;
		}

		.vdt-article__body {
			gap: var(--vdt-space-64);
		}
	}
}