/*
 * Prose and the rhythm of a section's copy.
 *
 * .vdt-prose is the reading scale: what an editor's text block renders as.
 * A section's copy is a section heading, a lead-in, text and buttons as
 * separate blocks; the audited rhythm between them (D13) is the adjacent-
 * sibling rules at the end of this file. All of them share the type roles
 * below, so a lead is a lead wherever it sits.
 *
 * Type roles (ADR-0002):
 *   .vdt-h1         68 / 0.95 / 125% / -0.02em      page heading
 *   .vdt-h1--hero   60 / 1.04 / 125% / -0.015em     home hero only (D1)
 *   .vdt-h2         44 / 1.08 / 125% / -0.015em     section heading
 *   .vdt-h2--article 36 / 1.1 / 125% / -0.015em     inside the article layout
 *   .vdt-h3--lg     32 / 1.1 / 112% / -0.01em       topic cards
 *   .vdt-h3         26 / 1.2 / 112%                 cards, rows, panels
 *   .vdt-h3--sm     20 / 1.25 / 112%                parts panels, video tiles, benefit columns
 *   .vdt-lead       20 / 1.5 / 500                  first paragraph under an h2
 *   .vdt-lead--lg   26 / 1.4 / 500 / -0.005em       home intro-continued, quotes (D3)
 *   .vdt-lead--header 26 / 1.3 / 500 / -0.005em     header lead (D2)
 *   body            17 / 1.65                       prose (D4)
 *   .vdt-text-sm    16 / 1.6                        inside cards, columns, tables (D4)
 */

@layer vdt.components {
	/* ————————————————————————— Headings ————————————————————————— */

	.vdt-h1,
	.vdt-h2,
	.vdt-h3 {
		color: var(--vdt-text-heading);
		font-weight: var(--vdt-weight-semibold);
		text-wrap: balance;
	}

	.vdt-h1 {
		font-size: var(--vdt-size-h1);
		font-stretch: var(--vdt-width-display);
		line-height: var(--vdt-leading-display);
		letter-spacing: var(--vdt-tracking-display);
	}

	.vdt-h1--stacked {
		line-height: var(--vdt-leading-stacked);
	}

	.vdt-h1--hero {
		font-size: var(--vdt-size-hero);
		line-height: var(--vdt-leading-stacked);
		letter-spacing: var(--vdt-tracking-hero);
	}

	/* The lighter second line of a stacked heading: white .52 on purple. */
	.vdt-h1__soft {
		display: block;
		color: var(--vdt-text-soft);
	}

	.vdt-h2 {
		font-size: var(--vdt-size-h2);
		font-stretch: var(--vdt-width-display);
		line-height: var(--vdt-leading-h2);
		letter-spacing: var(--vdt-tracking-hero);
	}

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

	.vdt-h3 {
		font-size: var(--vdt-size-h3);
		font-stretch: var(--vdt-width-sub);
		line-height: var(--vdt-leading-h3);
	}

	.vdt-h3--lg {
		font-size: var(--vdt-size-h3-lg);
		line-height: var(--vdt-leading-h3-lg);
		letter-spacing: var(--vdt-tracking-h3);
	}

	.vdt-h3--sm {
		font-size: var(--vdt-size-h3-sm);
		line-height: var(--vdt-leading-h3-sm);
	}

	/* ————————————————————————— Leads and body ————————————————————————— */

	.vdt-lead {
		color: var(--vdt-text-lead);
		font-size: var(--vdt-size-lead);
		font-weight: var(--vdt-weight-medium);
		line-height: var(--vdt-leading-lead);
	}

	.vdt-lead--lg {
		font-size: var(--vdt-size-quote);
		line-height: var(--vdt-leading-quote);
		letter-spacing: var(--vdt-tracking-lead);
	}

	.vdt-lead--header {
		font-size: var(--vdt-size-lead-lg);
		line-height: var(--vdt-leading-lead-lg);
		letter-spacing: var(--vdt-tracking-lead);
	}

	.vdt-text-sm {
		font-size: var(--vdt-size-body-sm);
		line-height: var(--vdt-leading-body-sm);
	}

	.vdt-text-muted {
		color: var(--vdt-text-muted);
	}

	/* ————————————————————————— Prose ————————————————————————— */

	.vdt-prose {
		max-width: var(--vdt-measure);
	}

	.vdt-prose > * + * {
		margin-top: var(--vdt-flow-para);
	}

	.vdt-prose h1 {
		font-size: var(--vdt-size-h1);
		font-stretch: var(--vdt-width-display);
		line-height: var(--vdt-leading-display);
		letter-spacing: var(--vdt-tracking-display);
	}

	.vdt-prose h2 {
		font-size: var(--vdt-size-h2-article);
		font-stretch: var(--vdt-width-display);
		line-height: var(--vdt-leading-h3-lg);
		letter-spacing: var(--vdt-tracking-hero);
	}

	.vdt-prose h3 {
		font-size: var(--vdt-size-h3);
		font-stretch: var(--vdt-width-sub);
		line-height: var(--vdt-leading-h3);
	}

	.vdt-prose h4 {
		font-size: var(--vdt-size-h3-sm);
		font-stretch: var(--vdt-width-sub);
		line-height: var(--vdt-leading-h3-sm);
	}

	.vdt-prose > * + h2 {
		margin-top: var(--vdt-space-48);
	}

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

	.vdt-prose h2 + *,
	.vdt-prose h3 + *,
	.vdt-prose h4 + * {
		margin-top: var(--vdt-space-16);
	}

	.vdt-prose ul,
	.vdt-prose ol {
		padding-left: 1.25em;
	}

	.vdt-prose li + li {
		margin-top: var(--vdt-space-6);
	}

	.vdt-prose a {
		color: var(--vdt-link);
		text-decoration-color: var(--vdt-link-underline);
	}

	.vdt-prose a:hover {
		color: var(--vdt-link-hover);
		text-decoration-color: currentColor;
	}

	.vdt-prose blockquote {
		padding-left: var(--vdt-space-24);
		border-left: var(--vdt-bar-width) solid var(--vdt-text-brand);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-lead);
		font-weight: var(--vdt-weight-medium);
		line-height: var(--vdt-leading-lead);
	}

	.vdt-prose hr {
		border: 0;
		border-top: var(--vdt-rule-width) solid var(--vdt-hairline);
		margin-block: var(--vdt-space-32);
	}

	/* ————————————————————————— Section copy: the rhythm between blocks ————————————————————————— */

	/*
	 * A section's copy is loose blocks in a layout column, in the order the
	 * editor placed them (ADR-0015):
	 *
	 *   <div class="vdt-blocks">
	 *     <div class="vdt-section-heading"><span class="vdt-eyebrow">HYKK Products</span><h2 class="vdt-h2">…</h2></div>
	 *     <p class="vdt-lead vdt-lead-in">…</p>
	 *     <div class="vdt-text vdt-prose"><p>…</p><p>…</p></div>
	 *     <div class="vdt-button-group vdt-buttons"><a class="vdt-button">…</a></div>
	 *   </div>
	 *
	 * Rhythm (D13): eyebrow → h2 16, h2 → lead 24, lead → body 20, body → body
	 * 14, body → button 40, h2 → grid or table 56. The wrapper's own gap
	 * (layout.css, `--flow-space`) is 24 between anything else.
	 */
	.vdt-section-heading,
	.vdt-lead-in {
		max-width: var(--vdt-measure);
	}

	.vdt-section-heading .vdt-eyebrow + * {
		margin-top: var(--vdt-flow-eyebrow);
	}

	.vdt-blocks > .vdt-section-heading + .vdt-lead-in {
		--flow-space: var(--vdt-flow-lead);
	}

	.vdt-blocks > .vdt-section-heading + .vdt-text,
	.vdt-blocks > .vdt-lead-in + .vdt-text {
		--flow-space: var(--vdt-flow-body);
	}

	.vdt-blocks > .vdt-text + .vdt-text {
		--flow-space: var(--vdt-flow-para);
	}

	/* Links after the copy are its calls to action, whether buttons or a link list (Home's Knowledge). */
	.vdt-blocks > * + .vdt-buttons,
	.vdt-blocks > .vdt-text + .vdt-link-list {
		--flow-space: var(--vdt-flow-button);
	}

	.vdt-blocks > .vdt-section-heading + .vdt-card-grid,
	.vdt-blocks > .vdt-section-heading + .vdt-table-wrap,
	.vdt-blocks > .vdt-section-heading + .vdt-link-list,
	.vdt-blocks > .vdt-lead-in + .vdt-card-grid,
	.vdt-blocks > .vdt-lead-in + .vdt-table-wrap,
	.vdt-blocks > .vdt-lead-in + .vdt-link-list,
	.vdt-blocks > .vdt-section-heading + .vdt-faq-list,
	.vdt-blocks > .vdt-lead-in + .vdt-faq-list {
		--flow-space: var(--vdt-flow-grid);
	}

	/* A rule label opens a strip with no heading; what it opens sits 32 under it. */
	.vdt-blocks > .vdt-rule-label + * {
		--flow-space: var(--vdt-space-32);
	}

	/* A specification table split in two stands off its heading as one table does. */
	.vdt-blocks > .vdt-section-heading + .vdt-table-pair,
	.vdt-blocks > .vdt-lead-in + .vdt-table-pair {
		--flow-space: var(--vdt-flow-grid);
	}
}