/*
 * Home B, the Heavy Duty Mobility link (parts/home-b/hdm.php and hdm-1, -2,
 * -3; agent-handoff/2026-10-09-hdc-hdm-link/placement.md). Printed by the part
 * before the first variation that renders. Scoped to body.hdc-home-b and its
 * palette A tokens (home-b.css). Heavy Duty Mobility's blue and green appear
 * only inside its own logo, never in a rule here. Square corners, hairlines,
 * no shadows. Breakpoints 48rem and 64rem, as in home-b.css.
 */

@layer components {
	/*
	 * The lockup "A [logo] brand", one link. The logo is set so its wordmark caps
	 * stand a little taller than the words and its baseline (30.65 of the 52.01
	 * unit box) sits on the text baseline: shifted down by 21.36 / 52.01 of its
	 * height.
	 */
	.hdc-home-b .hdc-b-hdm {
		display: inline-block;
		padding-block: 0.625rem;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 1.5;
		text-decoration: none;
		white-space: nowrap;
		--link-line: none;
		--link-hover-line: none;
		--logo: 1.75em;
	}

	.hdc-home-b .hdc-b-hdm__logo {
		display: inline-block;
		width: auto;
		height: var(--logo);
		aspect-ratio: 304 / 52.01;
		margin-inline: 0.0625em 0;
		vertical-align: calc(var(--logo) * -0.4107);
	}

	.hdc-home-b .hdc-b-hdm__word {
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	.hdc-home-b .hdc-b-hdm:hover {
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-hdm:hover .hdc-b-hdm__word {
		text-decoration-line: underline;
	}

	.hdc-home-b .hdc-b-hdm--dark {
		color: var(--mist);
	}

	.hdc-home-b .hdc-b-hdm--dark:hover {
		color: var(--white);
	}

	/* Variation 1, the signature: closes the name and line, before the number. */
	.hdc-home-b .hdc-b-hdm-sig {
		margin-block: -0.75rem 0.5rem;
	}

	/* Variation 2, the band after Why us: a hairline, the logo, the words. */
	.hdc-home-b .hdc-b-hdm-band {
		padding-bottom: 3rem;
		background: var(--white);
	}

	.hdc-home-b .hdc-b-hdm-band__grid {
		display: grid;
		gap: 1.25rem;
		padding-top: 3rem;
		border-top: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-hdm-band__mark .hdc-b-hdm__logo {
		display: block;
		width: 12.5rem;
		height: auto;
		margin: 0;
		vertical-align: top;
	}

	.hdc-home-b .hdc-b-hdm-band__title {
		color: var(--ink);
		font-size: 1.5rem;
		font-weight: 750;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-b-hdm-band__text {
		max-width: 36rem;
		margin-top: 0.5rem;
		color: var(--body);
		text-wrap: pretty;
	}

	.hdc-home-b .hdc-b-hdm-band__link {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		min-height: 2.75rem;
		margin-top: 0.25rem;
		color: var(--ink);
		font-weight: 700;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25em;
	}

	.hdc-home-b .hdc-b-hdm-band__link .hdc-icon {
		flex: none;
		width: 1.125rem;
		height: 1.125rem;
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-b-hdm-band__grid {
			grid-template-columns: auto minmax(0, 36rem);
			justify-content: start;
			align-items: start;
			column-gap: 3rem;
		}

		.hdc-home-b .hdc-b-hdm-band__mark {
			padding-top: 0.125rem;
		}
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-b-hdm-band {
			padding-bottom: 4rem;
		}

		.hdc-home-b .hdc-b-hdm-band__grid {
			column-gap: 4rem;
			padding-top: 4rem;
		}

		.hdc-home-b .hdc-b-hdm-band__mark .hdc-b-hdm__logo {
			width: 15rem;
		}

		.hdc-home-b .hdc-b-hdm-band__title {
			font-size: 1.75rem;
		}
	}

	/* Variation 3, the family bar above the header: panel ground, a hairline, the lockup on the header's left edge. */
	.hdc-home-b .hdc-b-hdm-bar {
		background: var(--panel);
		border-bottom: 1px solid var(--line);
	}

	.hdc-home-b .hdc-b-hdm-bar__inner {
		display: flex;
		align-items: center;
		min-height: 2.5rem;
	}

	.hdc-home-b .hdc-b-hdm-bar .hdc-b-hdm {
		padding-block: 0.25rem;
		color: var(--graphite);
	}

	.hdc-home-b .hdc-b-hdm-bar .hdc-b-hdm:hover {
		color: var(--ink);
	}
}