/*
 * Split section: heading in the left column, lead and body in the right.
 *
 * Two column recipes, chosen per section (D11): a fixed 400px heading column
 * (the default: Home intro, Talk to HYKK, Support, Contact, the footer) or two
 * equal halves (Products intro, the Distribution bands, About's consultancy
 * section). The text column caps at 620 so lines stay readable when the
 * heading column is the narrow one. Both stack below 960. The mirrored
 * split (Contact) stacks earlier, below 1280, so the embedded HubSpot form
 * keeps a full-width column on laptop screens.
 *
 *   <div class="vdt-split [vdt-split--halves] [vdt-split--mirror]">
 *     <div class="vdt-split__heading"><span class="vdt-eyebrow">…</span><h2 class="vdt-h2">…</h2></div>
 *     <div class="vdt-split__body"><p class="vdt-lead">…</p><p>…</p><div class="vdt-split__actions">…</div></div>
 *   </div>
 *
 * The purple closing band is this layout inside a purple section theme.
 */

@layer vdt.components {
	.vdt-split {
		display: grid;
		grid-template-columns: var(--vdt-heading-col) minmax(0, 1fr);
		gap: var(--vdt-space-32) var(--vdt-gap-columns);
		align-items: start;
	}

	.vdt-split--halves {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Contact mirrors it: the sticky details column on the right. */
	.vdt-split--mirror {
		grid-template-columns: minmax(0, 1fr) var(--vdt-heading-col);
	}

	.vdt-split--mirror .vdt-split__heading {
		order: 2;
	}

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

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

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

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

	.vdt-split__actions {
		margin-top: var(--vdt-flow-button);
	}

	/* A grid or a list under the split takes the h2 → grid distance. */
	.vdt-split + .vdt-card-grid,
	.vdt-split + .vdt-table,
	.vdt-split + .vdt-link-list {
		margin-top: var(--vdt-flow-grid);
	}

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

	/* Contact only: the form needs the width before the split does. */
	@media (max-width: 80rem) {
		.vdt-split--mirror {
			grid-template-columns: minmax(0, 1fr);
		}

		.vdt-split--mirror .vdt-split__heading {
			order: 0;
		}
	}
}