/*
 * Page header: the purple band under the nav.
 *
 * One ground, three shapes:
 *
 *   .vdt-header            compact: h1, then a two-column row of lead and
 *                          intro paragraphs. About, Products, Knowledge,
 *                          Support, Contact. With a breadcrumb on the article
 *                          page; stacked two-line h1 and no intro row on
 *                          Support details.
 *   .vdt-header--home      tall: three-line hero h1 (D1), one intro paragraph,
 *                          two buttons, the reader across the bottom with a
 *                          caption rule.
 *   .vdt-header--product   tall: breadcrumb, eyebrow, product name at 112,
 *                          sub-name, proposition; intro and buttons right;
 *                          reader full width; the section bar at the bottom.
 *
 * The ground is the header gradient with a top vignette and 10% grain. The
 * gradient stops are fractions of the band (N12); the tall headers override
 * them. Heights are min-heights (N12): 900 for the tall ones, and the compact
 * band is only as tall as its copy plus 64 below.
 */

@layer vdt.components {
	.vdt-header {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		background: var(--vdt-gradient-header);
		color: var(--vdt-on-dark-intro);
    min-height: 22rem;
	}

	/*
	 * The nav sits inside the same ground, so the gradient runs from the page
	 * top. The ground does not clip: the mobile menu hangs out of it, over the
	 * page, as long as it needs to be. The hero clips its own overflow.
	 */
	.vdt-header-wrap {
		position: relative;
		background: var(--vdt-gradient-header);
	}

	.vdt-header--home,
	.vdt-header--product {
		--vdt-header-stop-1: 29%;
		--vdt-header-stop-2: 49%;
		--vdt-header-stop-3: 62%;
	}

	.vdt-header-wrap:has(.vdt-header--home),
	.vdt-header-wrap:has(.vdt-header--product) {
		--vdt-header-stop-1: 29%;
		--vdt-header-stop-2: 49%;
		--vdt-header-stop-3: 62%;
	}

	/* ————————————————————————— Compact ————————————————————————— */

	.vdt-header__inner {
		padding-top: var(--vdt-space-72);
		padding-bottom: var(--vdt-space-64);
	}

	.vdt-header__inner > .vdt-breadcrumb {
		padding-top: 0;
		margin-top: calc(var(--vdt-space-72) * -1 + var(--vdt-space-24));
		margin-bottom: var(--vdt-space-56);
	}

	.vdt-header .vdt-h1,
	.vdt-header .vdt-h1--hero {
		color: var(--vdt-on-dark-heading);
	}

	.vdt-header .vdt-h1__soft {
		color: var(--vdt-on-dark-soft);
	}

	.vdt-header .vdt-eyebrow {
		color: var(--vdt-on-dark-faint);
	}

	.vdt-header .vdt-eyebrow + .vdt-h1 {
		margin-top: var(--vdt-flow-eyebrow);
	}

	/* h1, then lead left and intro paragraphs right. */
	.vdt-header__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vdt-space-32) var(--vdt-gap-columns);
		align-items: start;
		margin-top: var(--vdt-space-40);
	}

	.vdt-header .vdt-lead--header {
		color: var(--vdt-on-dark-lead);
	}

	.vdt-header__intro {
		max-width: var(--vdt-measure-lead);
		color: var(--vdt-on-dark-intro);
	}

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

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

	@media (max-width: 60rem) {
		.vdt-header__inner {
			padding-top: var(--vdt-space-40);
			padding-bottom: var(--vdt-space-48);
		}

		.vdt-header__inner > .vdt-breadcrumb {
			margin-top: calc(var(--vdt-space-40) * -1 + var(--vdt-space-16));
			margin-bottom: var(--vdt-space-36);
		}

		.vdt-header__row {
			grid-template-columns: minmax(0, 1fr);
			margin-top: var(--vdt-space-24);
		}
	}

	/* ————————————————————————— Home ————————————————————————— */

	.vdt-header--home .vdt-header__inner {
		display: flex;
		flex-direction: column;
		padding-top: var(--vdt-space-88);
	}

	/* Each line of the hero h1 holds on one line at 60; only the intro is capped (540). */
	.vdt-header--home .vdt-header__intro {
		max-width: 33.75rem;
		margin-top: var(--vdt-space-28);
		font-size: var(--vdt-size-intro);
		line-height: var(--vdt-leading-body-sm);
	}

	/* The reader across the bottom, with its caption rule and a link. */
	.vdt-header__figure {
		position: relative;
		margin-top: auto;
		padding-top: var(--vdt-space-48);
	}

	.vdt-header__figure::before {
		content: "";
		position: absolute;
		inset: 0 10% 0;
		z-index: -1;
		background: var(--vdt-glow-reader);
	}

	.vdt-header__render {
		width: 100%;
		filter: var(--vdt-shadow-render-dark);
	}

	.vdt-header__caption {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--vdt-space-24);
		padding-block: var(--vdt-space-16) var(--vdt-space-24);
		border-top: var(--vdt-rule-width) solid var(--vdt-on-dark-hairline);
		color: var(--vdt-on-dark-muted);
		font-size: var(--vdt-size-meta);
		font-weight: var(--vdt-weight-medium);
	}

	.vdt-header__caption .vdt-link {
		color: var(--vdt-white);
		text-decoration-color: var(--vdt-on-dark-underline);
	}

	.vdt-header__caption .vdt-link:hover {
		color: var(--vdt-on-dark-hover);
	}

	/*
	 * On Home the reader is wider than the container and runs off the right
	 * edge (header 6 draws it 1580 wide from the left margin); the header
	 * ground's overflow cuts it.
	 */
	.vdt-header--home .vdt-header__render {
		width: 120%;
		max-width: none;
	}

	/* ————————————————————————— Product ————————————————————————— */

	/*
	 * The design's 900 is the first screen: the nav and the section bar (64)
	 * are inside it, so the band itself is what is left.
	 */
	.vdt-header--product .vdt-header__inner {
		display: flex;
		flex-direction: column;
	}

	.vdt-header--product .vdt-header__row {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		margin-top: 0;
	}

	.vdt-header--product .vdt-eyebrow + .vdt-header__title {
		margin-top: var(--vdt-flow-eyebrow);
	}

	/* One h1: the name, then the sub-name on a line of its own. */
	.vdt-header__name,
	.vdt-header__sub-name {
		display: block;
	}

	/* The intro and the buttons share a column, so a phone can put the buttons first. */
	.vdt-header__side {
		display: flex;
		flex-direction: column;
	}

	.vdt-header__name {
		color: var(--vdt-on-dark-heading);
		font-size: var(--vdt-size-product-name);
		font-stretch: var(--vdt-width-display);
		font-weight: var(--vdt-weight-semibold);
		line-height: var(--vdt-leading-display);
		letter-spacing: var(--vdt-tracking-display);
	}

	.vdt-header__sub-name {
		margin-top: var(--vdt-space-16);
		color: var(--vdt-on-dark-heading);
		font-size: var(--vdt-size-sub-name);
		font-stretch: var(--vdt-width-sub);
		font-weight: var(--vdt-weight-medium);
		line-height: var(--vdt-leading-h3);
	}

	/* "One reader. Two frequencies." with the second line at white .56 → .52 (N1 family). */
	.vdt-header__proposition {
		margin-top: var(--vdt-space-24);
		color: var(--vdt-on-dark-heading);
		font-size: var(--vdt-size-lead-lg);
		font-weight: var(--vdt-weight-medium);
		line-height: var(--vdt-leading-lead-lg);
		letter-spacing: var(--vdt-tracking-lead);
	}

	.vdt-header__proposition .vdt-h1__soft {
		color: var(--vdt-on-dark-soft);
	}

	/* The measure line under the reader: "69.5 cm" between two hairlines. */
	.vdt-header__measure {
		display: flex;
		align-items: center;
		gap: var(--vdt-space-12);
		margin-top: var(--vdt-space-16);
		color: var(--vdt-on-dark-muted);
		font-size: var(--vdt-size-13);
		font-weight: var(--vdt-weight-medium);
		letter-spacing: var(--vdt-tracking-cite);
		text-transform: uppercase;
	}

	.vdt-header__measure::before,
	.vdt-header__measure::after {
		content: "";
		flex: 1;
		height: var(--vdt-rule-width);
		background: var(--vdt-on-dark-separator);
	}

	@media (max-width: 60rem) {
		.vdt-header--home .vdt-header__inner,
		.vdt-header--product .vdt-header__inner {
			min-height: 0;
		}

		.vdt-header--product .vdt-header__row {
			grid-template-columns: minmax(0, 1fr);
		}

		/* On mobile the buttons come before the intro and the reader runs off the edge. */
		.vdt-header--product .vdt-header__actions {
			order: -1;
			margin-top: 0;
		}

		.vdt-header--product .vdt-header__actions + .vdt-header__intro,
		.vdt-header--product .vdt-header__intro:has(+ .vdt-header__actions) {
			margin-top: var(--vdt-space-32);
		}

		.vdt-header--product .vdt-header__figure {
			margin-inline: calc(var(--vdt-gutter) * -1) -30%;
		}

		/* The reader runs off the edge here, so its length would measure nothing. */
		.vdt-header__measure {
			display: none;
		}
	}
}