/*
 * Why buy here (issue #71, docs/design/why-buy-here.md): every why/* part shares this file
 * (inc/assets.php bundles the area), the page (parts/why/body.php, under about.css's white top)
 * and the order trail it shares with the homepage section (parts/why/trail.php,
 * parts/home-b/why.php, home-b-why.css).
 *
 * The trail: stops hung on one steel rail by yellow nodes with a screw. Each stop is a square
 * white box: its picture, who does the work, a solid black icon with the title, one line. The
 * page has six stops, across the top from 80rem; the homepage three, across from 48rem.
 * Narrower, the rail runs down the left edge and each node hangs its box to the right.
 *
 * The page: each section its own square white box on the grey ground. The key numbers (solid
 * black icons, big condensed numbers in real units), the trail, and Your part beside Our part,
 * the second on the menu's dark anodized plate with its engraved border and a screw in each
 * corner, because the longer list is the hard part we carry.
 *
 * Square corners, no shadows; yellow is the nodes and the Our part ticks only.
 * Breakpoints 40rem, 48rem, 64rem, 80rem. Trail rules under .hdc-home-b (both pages carry it),
 * page rules under body.hdc-why.
 */

@layer tokens {
	body.hdc-home-b {
		/* The rail: brushed steel, across or down, edged in dark steel. */
		--wt-steel: #b9c3cc;
		--wt-edge: #4d5862;
		--wt-mute: #56616c;
		--wt-rail-across: linear-gradient(180deg, #eef2f5 0%, #b9c3cc 40%, #8a96a2 62%, #d3dae0 100%);
		--wt-rail-down: linear-gradient(90deg, #eef2f5 0%, #b9c3cc 40%, #8a96a2 62%, #d3dae0 100%);
		/* A countersunk Phillips screw, as on the menu's plates. */
		--wt-screw: radial-gradient(circle at 34% 30%, #d5dbe1 0, #949ca5 42%, #4d545c 100%);
		--wt-screw-slot: #22272d;
		/* Our part: the menu's dark anodized plate (home-b-header-main.css --hm-metal). */
		--wt-plate:
			repeating-linear-gradient(0deg, rgb(255 255 255 / 0.022) 0 1px, transparent 1px 3px),
			linear-gradient(100deg, #262b31 0%, #313840 34%, #282e34 58%, #2e353c 82%, #292f35 100%);
	}
}

@layer components {
	.hdc-home-b .hdc-wt {
		--wt-node: 1.75rem;
		--wt-gap: 1.25rem;
		--wt-hang: 1rem;
		--wt-rail: 0.625rem;
		display: grid;
		gap: var(--wt-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ---------------------------------------------------------------- Rail, nodes (down the left edge) */
	.hdc-home-b .hdc-wt__stop {
		display: grid;
		position: relative;
		grid-template-columns: var(--wt-node) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--wt-hang);
		min-width: 0;
	}

	/* The rail: from this node's center to the next one's. */
	.hdc-home-b .hdc-wt__stop:not(:last-child)::before {
		content: "";
		position: absolute;
		top: calc(1.25rem + var(--wt-node) / 2);
		left: calc(var(--wt-node) / 2 - var(--wt-rail) / 2);
		width: var(--wt-rail);
		height: calc(100% + var(--wt-gap));
		border-inline: 1px solid var(--wt-edge);
		background: var(--wt-rail-down);
	}

	.hdc-home-b .hdc-wt__node {
		display: grid;
		position: relative;
		z-index: 1;
		place-items: center;
		width: var(--wt-node);
		height: var(--wt-node);
		margin-top: 1.25rem;
		border: 2px solid var(--ink);
		background: var(--accent);
	}

	/* The hanger: a short steel bar from the node to its box. */
	.hdc-home-b .hdc-wt__node::after {
		content: "";
		position: absolute;
		top: calc(50% - 1px);
		left: 100%;
		width: calc(var(--wt-hang) + 2px);
		height: 2px;
		background: var(--wt-edge);
	}

	/* A countersunk Phillips screw, as on the menu's plates. */
	.hdc-home-b .hdc-wt__screw,
	.hdc-home-b .hdc-wy-screw {
		position: relative;
		width: 0.625rem;
		height: 0.625rem;
		border-radius: 50%;
		background: var(--wt-screw);
		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55);
	}

	.hdc-home-b .hdc-wt__screw::before,
	.hdc-home-b .hdc-wt__screw::after,
	.hdc-home-b .hdc-wy-screw::before,
	.hdc-home-b .hdc-wy-screw::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.375rem;
		height: 1.5px;
		background: var(--wt-screw-slot);
		transform: translate(-50%, -50%) rotate(14deg);
	}

	.hdc-home-b .hdc-wt__screw::after,
	.hdc-home-b .hdc-wy-screw::after {
		transform: translate(-50%, -50%) rotate(104deg);
	}

	/* ---------------------------------------------------------------- The box */
	.hdc-home-b .hdc-wt__box {
		display: flex;
		flex-direction: column;
		min-width: 0;
		height: 100%;
		overflow: hidden;
		border: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-home-b .hdc-wt__pic {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		background: var(--panel);
	}

	/* The photo fills the frame the layout sets, so a portrait photo never sets a stop's height. */
	.hdc-home-b .hdc-wt__pic img {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* A product cut-out on the panel grey: whole, never cropped; its white ground melts into the grey. */
	.hdc-home-b .hdc-wt__pic--cut img {
		padding: 0.75rem;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	/* The quote sheet sits on a faint steel grid, like the route plate. */
	.hdc-home-b .hdc-wt__pic--draw {
		display: grid;
		place-items: center;
		background-color: var(--panel);
		background-image:
			linear-gradient(rgb(103 128 154 / 0.12) 1px, transparent 1px),
			linear-gradient(90deg, rgb(103 128 154 / 0.12) 1px, transparent 1px);
		background-size: 16px 16px;
	}

	.hdc-home-b .hdc-wt__body {
		display: grid;
		align-content: start;
		gap: 0.5rem;
		padding: 1rem 1.25rem 1.25rem;
	}

	/* Who does the work: You on ink, We in steel. */
	.hdc-home-b .hdc-wt__who {
		justify-self: start;
		margin: 0;
		padding: 0.1875rem 0.5rem;
		border: 1px solid var(--wt-mute);
		color: var(--wt-mute);
		font-size: 0.6875rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-wt__who--you {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	.hdc-home-b .hdc-wt__title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		color: var(--ink);
		font-size: 1.25rem;
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-wt__icon {
		flex: none;
		width: 1.5rem;
		height: 1.5rem;
		color: var(--ink);
		fill: currentColor;
	}

	.hdc-home-b .hdc-wt__icon .d {
		fill: none;
		stroke: var(--white);
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.hdc-home-b .hdc-wt__icon .f {
		fill: var(--white);
	}

	.hdc-home-b .hdc-wt__icon .r {
		stroke: var(--white);
		stroke-width: 1.5;
	}

	.hdc-home-b .hdc-wt__text {
		margin: 0;
		color: var(--body);
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	/* ---------------------------------------------------------------- The quote sheet, set in type */
	.hdc-home-b .hdc-wt-sheet {
		display: grid;
		gap: 0.3125rem;
		width: min(82%, 15rem);
		max-height: calc(100% - 1rem);
		overflow: hidden;
		padding: 0.625rem 0.75rem 0.75rem;
		border: 1px solid var(--line);
		border-top: 4px solid var(--ink);
		background: var(--white);
		color: var(--ink);
		font-size: 0.625rem;
		line-height: 1.2;
	}

	.hdc-home-b .hdc-wt-sheet p {
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;
		margin: 0;
	}

	.hdc-home-b .hdc-wt-sheet__head {
		margin-bottom: 0.125rem;
		font-size: 0.9375rem;
		font-stretch: 75%;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-wt-sheet__no {
		color: var(--control);
	}

	.hdc-home-b .hdc-wt-sheet__row {
		padding-bottom: 0.3125rem;
		white-space: nowrap;
		border-bottom: 1px solid var(--line);
		font-weight: 600;
	}

	.hdc-home-b .hdc-wt-sheet__mask {
		flex: none;
		padding: 0.0625rem 0.3125rem;
		background: var(--panel);
		color: var(--steel);
		font-weight: 600;
	}

	.hdc-home-b .hdc-wt-sheet__row--total {
		padding-top: 0.25rem;
		border-top: 2px solid var(--ink);
		border-bottom: 0;
		font-weight: 800;
	}

	.hdc-home-b .hdc-wt-sheet__sign {
		justify-self: end;
		width: 45%;
		height: 0.75rem;
		border-bottom: 1px solid var(--ink);
	}

	/* ---------------------------------------------------------------- 48rem: the picture beside the words (page) */
	@media (min-width: 48rem) {
		.hdc-home-b .hdc-wt--page .hdc-wt__box {
			display: grid;
			grid-template-columns: 16rem minmax(0, 1fr);
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__pic {
			aspect-ratio: auto;
			min-height: 11rem;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__body {
			align-content: center;
			padding: 1.25rem 1.5rem;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__title {
			font-size: 1.5rem;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__text {
			font-size: 1rem;
		}
	}

	/*
	 * Across: the rail runs over the stops from node to node, each node hangs its box below.
	 * The homepage's three stops from 48rem, the page's six from 80rem.
	 */
	@media (min-width: 48rem) {
		.hdc-home-b .hdc-wt--home {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.hdc-home-b .hdc-wt--home .hdc-wt__stop {
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto 1fr;
			row-gap: var(--wt-hang);
		}

		.hdc-home-b .hdc-wt--home .hdc-wt__stop:not(:last-child)::before {
			top: calc(var(--wt-node) / 2 - var(--wt-rail) / 2);
			left: 50%;
			width: calc(100% + var(--wt-gap));
			height: var(--wt-rail);
			border-inline: 0;
			border-block: 1px solid var(--wt-edge);
			background: var(--wt-rail-across);
		}

		.hdc-home-b .hdc-wt--home .hdc-wt__node {
			justify-self: center;
			margin-top: 0;
		}

		.hdc-home-b .hdc-wt--home .hdc-wt__node::after {
			top: 100%;
			left: calc(50% - 1px);
			width: 2px;
			height: calc(var(--wt-hang) + 2px);
		}
	}

	@media (min-width: 80rem) {
		.hdc-home-b .hdc-wt--page {
			grid-template-columns: repeat(6, minmax(0, 1fr));
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__stop {
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto 1fr;
			row-gap: var(--wt-hang);
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__stop:not(:last-child)::before {
			top: calc(var(--wt-node) / 2 - var(--wt-rail) / 2);
			left: 50%;
			width: calc(100% + var(--wt-gap));
			height: var(--wt-rail);
			border-inline: 0;
			border-block: 1px solid var(--wt-edge);
			background: var(--wt-rail-across);
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__node {
			justify-self: center;
			margin-top: 0;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__node::after {
			top: 100%;
			left: calc(50% - 1px);
			width: 2px;
			height: calc(var(--wt-hang) + 2px);
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__box {
			display: flex;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__pic {
			aspect-ratio: 4 / 3;
			min-height: 0;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__body {
			align-content: start;
			padding: 1rem 1.125rem 1.25rem;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__title {
			align-items: flex-start;
			font-size: 1.1875rem;
		}

		.hdc-home-b .hdc-wt--page .hdc-wt__text {
			font-size: 0.9375rem;
		}
	}
}

@layer components {
	.hdc-why .hdc-wy-sec {
		padding-top: var(--ab-space);
	}

	/* The numbers sit closer to the white top than the sections below them. */
	.hdc-why .hdc-wy-sec--numbers {
		padding-top: calc(var(--ab-space) * 0.5);
	}

	.hdc-why .hdc-wy-box {
		position: relative;
		min-width: 0;
		padding: var(--ab-pad);
		background: var(--white);
	}

	/* ---------------------------------------------------------------- Key numbers */
	.hdc-why .hdc-wy-numbers {
		display: grid;
		margin: 0;
		padding: 0;
		border: 1px solid var(--line);
		background: var(--white);
		list-style: none;
	}

	.hdc-why .hdc-wy-num {
		display: grid;
		grid-template-columns: 2.25rem minmax(0, 1fr);
		grid-template-areas:
			"icon big"
			"icon text";
		align-content: start;
		column-gap: 1rem;
		row-gap: 0.25rem;
		padding: 1.25rem var(--ab-pad);
	}

	.hdc-why .hdc-wy-num + .hdc-wy-num {
		border-top: 1px solid var(--line);
	}

	.hdc-why .hdc-wy-num__icon {
		grid-area: icon;
		width: 2.25rem;
		height: 2.25rem;
		color: var(--ink);
		fill: currentColor;
	}

	.hdc-why .hdc-wy-num__icon .d {
		fill: none;
		stroke: var(--white);
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.hdc-why .hdc-wy-num__icon .f {
		fill: var(--white);
	}

	.hdc-why .hdc-wy-num__icon .r {
		stroke: var(--white);
		stroke-width: 1.5;
	}

	.hdc-why .hdc-wy-num__big {
		grid-area: big;
		margin: 0;
		color: var(--ink);
		font-size: clamp(2rem, 1.5rem + 1.6vw, 3.25rem);
		font-stretch: 75%;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.hdc-why .hdc-wy-num__unit {
		color: var(--steel);
		font-size: 0.55em;
		font-weight: 700;
	}

	.hdc-why .hdc-wy-num__text {
		grid-area: text;
		max-width: 26ch;
		margin: 0;
		color: var(--ab-mute);
		font-size: 0.9375rem;
		line-height: 1.4;
	}

	/* ---------------------------------------------------------------- The trail */
	.hdc-why .hdc-wy-trail .hdc-ab-h2 {
		margin-bottom: 1.5rem;
	}

	/* ---------------------------------------------------------------- Your part, our part */
	.hdc-why .hdc-wy-split {
		display: grid;
		gap: 1.25rem;
	}

	.hdc-why .hdc-wy-part .hdc-ab-h2 {
		margin-bottom: 1rem;
	}

	.hdc-why .hdc-wy-list {
		display: grid;
		gap: 0.875rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-why .hdc-wy-list li {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr);
		align-items: center;
		gap: 0.75rem;
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.hdc-why .hdc-wy-list__icon {
		width: 2rem;
		height: 2rem;
		color: var(--ink);
		stroke-width: 1.5;
	}

	/* Call and the quote side by side while they fit, else one under the other (over about.css's grid, which prints later). */
	.hdc-why .hdc-ab-act.hdc-wy-act {
		display: flex;
		flex-wrap: wrap;
		margin-top: 1.75rem;
	}

	/* Our part: the dark anodized plate of the menu, engraved border, a screw in each corner. */
	.hdc-why .hdc-wy-part--ours {
		border: 1px solid rgb(255 255 255 / 0.2);
		background: var(--wt-plate);
		color: var(--white);
	}

	.hdc-why .hdc-wy-part--ours::before,
	.hdc-why .hdc-wy-part--ours::after {
		content: "";
		position: absolute;
		inset: 3px;
		border: 1px solid rgb(0 0 0 / 0.5);
		pointer-events: none;
	}

	.hdc-why .hdc-wy-part--ours::after {
		inset: 4px;
		border-color: rgb(255 255 255 / 0.07);
	}

	.hdc-why .hdc-wy-part--ours .hdc-wy-screw {
		position: absolute;
	}

	.hdc-why .hdc-wy-part--ours .hdc-wy-screw:nth-child(1) { top: 0.625rem; left: 0.625rem; }
	.hdc-why .hdc-wy-part--ours .hdc-wy-screw:nth-child(2) { top: 0.625rem; right: 0.625rem; }
	.hdc-why .hdc-wy-part--ours .hdc-wy-screw:nth-child(3) { bottom: 0.625rem; left: 0.625rem; }
	.hdc-why .hdc-wy-part--ours .hdc-wy-screw:nth-child(4) { right: 0.625rem; bottom: 0.625rem; }

	.hdc-why .hdc-wy-part--ours .hdc-ab-h2 {
		color: var(--white);
	}

	.hdc-why .hdc-wy-list--ours li {
		color: var(--white);
		font-weight: 500;
	}

	/* On the dark plate a yellow spot under a white line reads as a blur, so each item hangs
	   from a small yellow node with an ink check, like the stops on the rail. */
	.hdc-why .hdc-wy-list--ours .hdc-wy-list__tick {
		box-sizing: border-box;
		width: 1.75rem;
		height: 1.75rem;
		padding: 0.25rem;
		border: 2px solid var(--ink);
		background: var(--accent);
		box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
		color: var(--ink);
		stroke-width: 3;
	}

	/* ---------------------------------------------------------------- 40rem */
	@media (min-width: 40rem) {
		.hdc-why .hdc-wy-numbers {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hdc-why .hdc-wy-num {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas:
				"icon"
				"big"
				"text";
			row-gap: 0.75rem;
			padding: 1.75rem var(--ab-pad);
		}

		.hdc-why .hdc-wy-num + .hdc-wy-num {
			border-top: 0;
		}

		.hdc-why .hdc-wy-num:nth-child(n + 3) {
			border-top: 1px solid var(--line);
		}

		.hdc-why .hdc-wy-num:nth-child(even) {
			border-left: 1px solid var(--line);
		}
	}

	@media (min-width: 40rem) and (max-width: 63.99rem) {
		/* An odd last number takes the whole row, so the band never shows an empty half. */
		.hdc-why .hdc-wy-num:last-child:nth-child(odd) {
			grid-column: 1 / -1;
		}
	}

	/* ---------------------------------------------------------------- 48rem */
	@media (min-width: 48rem) {
		.hdc-why .hdc-wy-list--ours {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 2rem;
		}
	}

	/* ---------------------------------------------------------------- 64rem: the numbers in one row */
	@media (min-width: 64rem) {
		/* However many numbers have data, they share the row; the towing range, the longest, gets more. */
		.hdc-why .hdc-wy-numbers {
			display: flex;
		}

		.hdc-why .hdc-wy-num {
			flex: 1 1 0;
			min-width: 0;
		}

		.hdc-why .hdc-wy-num--tow {
			flex-grow: 1.6;
		}

		.hdc-why .hdc-wy-num:nth-child(n + 3) {
			border-top: 0;
		}

		.hdc-why .hdc-wy-num:nth-child(even) {
			border-left: 0;
		}

		.hdc-why .hdc-wy-num + .hdc-wy-num {
			border-left: 1px solid var(--line);
		}
	}

	/* ---------------------------------------------------------------- 80rem: your part beside ours */
	@media (min-width: 80rem) {
		.hdc-why .hdc-wy-split {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			align-items: stretch;
		}
	}
}