/*
 * Home B Your route (parts/home-b/route.php), the selling point section. A
 * cool light gray ground; one white plate on a faint steel grid. Across its
 * top the route, a yellow line cased in ink with the tugger train at the
 * start; from 80rem a station on the line over each stop. The stops' drawings
 * in steel, their key part in yellow (the clear width, the way up, the swept
 * band, the open car). The plate ends in a steel title block with the action.
 * Yellow is the route, the highlights, the factory question and Send, nothing
 * else. Phones list the stops as rows, from 48rem two by two, from 80rem four
 * across. Breakpoints as home-b.css. Contrast: mute 5.5 on the ground,
 * steel-3 7.1 on steel-9.
 */

@layer components {
	.hdc-home-b .hdc-route {
		--r-ground: #eceff3;
		--r-rule: #cfd7df;
		--r-edge: #bcc7d2;
		--r-text: #2e343b;
		--r-mute: #56616c;
		--steel-9: #233344;
		--steel-7: #3c5165;
		--steel-5: #67809a;
		--steel-3: #a9b9c9;
		--steel-2: #cfdae5;
		--steel-1: #e4ebf2;
		--amber-7: #8a6500;
		--amber-1: #fff0c2;
		padding-block: var(--space-section);
		background: var(--r-ground);
		color: var(--ink);
	}

	.hdc-home-b .hdc-route__head {
		display: grid;
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.hdc-home-b .hdc-route__lead {
		max-width: 38ch;
		color: var(--r-text);
		font-size: 1.1875rem;
		line-height: 1.4;
	}

	/* The plate: a white sheet on a faint steel grid. */
	.hdc-home-b .hdc-route__plate {
		position: relative;
		border: 1px solid var(--r-edge);
		background-color: var(--white);
		background-image:
			linear-gradient(rgb(60 81 101 / 0.08) 1px, transparent 1px),
			linear-gradient(90deg, rgb(60 81 101 / 0.08) 1px, transparent 1px);
		background-size: 24px 24px;
		background-position: -1px -1px;
	}

	.hdc-home-b .hdc-route__defs {
		position: absolute;
		width: 0;
		height: 0;
	}

	.hdc-home-b #hdc-route-h rect {
		fill: var(--steel-1);
	}

	.hdc-home-b #hdc-route-h path {
		stroke: var(--steel-3);
		stroke-width: 1;
	}

	.hdc-home-b #hdc-route-w rect {
		fill: var(--amber-1);
	}

	.hdc-home-b #hdc-route-w path {
		stroke: var(--accent);
		stroke-width: 1;
	}

	/* The route: a yellow line cased in ink, the train at the start heading in. */
	.hdc-home-b .hdc-route__line {
		position: relative;
		height: 3.25rem;
	}

	.hdc-home-b .hdc-route__line::before {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 6px;
		border-block: 1px solid var(--ink);
		background: var(--accent);
		content: "";
	}

	.hdc-home-b .hdc-route__train {
		position: absolute;
		bottom: 6px;
		left: 1rem;
		width: 6.5rem;
		height: auto;
		overflow: visible;
	}

	.hdc-home-b .hdc-route__train .s {
		fill: var(--white);
	}

	/* Phones: the stops as rows, drawing beside the words. */
	.hdc-home-b .hdc-route__stops {
		display: grid;
	}

	.hdc-home-b .hdc-route__stop {
		display: grid;
		position: relative;
		grid-template-columns: 7rem minmax(0, 1fr);
		grid-template-areas:
			"head head"
			"draw facts";
		gap: 0.625rem 1rem;
		padding: 1rem;
		border-bottom: 1px solid var(--r-rule);
	}

	.hdc-home-b .hdc-route__stop-head {
		display: flex;
		grid-area: head;
		align-items: center;
		gap: 0.75rem;
		min-height: 2.75rem;
	}

	.hdc-home-b .hdc-route__num {
		display: grid;
		flex: none;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		background: var(--steel-9);
		color: var(--white);
		font-size: 0.75rem;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
	}

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

	/* The drawings: one stroke weight, steel, the key part in yellow. */
	.hdc-home-b .hdc-route__draw {
		display: block;
		grid-area: draw;
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.hdc-home-b .hdc-route__draw path,
	.hdc-home-b .hdc-route__draw circle,
	.hdc-home-b .hdc-route__train path,
	.hdc-home-b .hdc-route__train circle {
		vector-effect: non-scaling-stroke;
	}

	.hdc-home-b .hdc-route .s {
		fill: none;
		stroke: var(--steel-9);
		stroke-width: 1.5;
	}

	.hdc-home-b .hdc-route .a {
		fill: none;
		stroke: var(--amber-7);
		stroke-width: 2;
	}

	.hdc-home-b .hdc-route .t {
		fill: none;
		stroke: var(--steel-5);
		stroke-width: 1;
	}

	.hdc-home-b .hdc-route .d {
		fill: none;
		stroke: var(--amber-7);
		stroke-width: 1.5;
	}

	.hdc-home-b .hdc-route .f {
		fill: var(--steel-2);
		stroke: var(--steel-9);
		stroke-width: 1.5;
	}

	.hdc-home-b .hdc-route .h {
		fill: url(#hdc-route-h);
	}

	.hdc-home-b .hdc-route .w {
		fill: url(#hdc-route-w);
		stroke: var(--amber-7);
		stroke-dasharray: 3 2;
		stroke-width: 1;
	}

	.hdc-home-b .hdc-route .k {
		fill: var(--amber-1);
	}

	.hdc-home-b .hdc-route .dot {
		fill: var(--steel-9);
	}

	.hdc-home-b .hdc-route .tug {
		fill: var(--accent);
		stroke: var(--ink);
		stroke-width: 1.5;
	}

	/* What we check, and what we ask the factory. */
	.hdc-home-b .hdc-route__facts {
		display: grid;
		grid-area: facts;
		align-content: start;
		gap: 0.875rem;
	}

	.hdc-home-b .hdc-route__fact dt {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--r-mute);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.hdc-home-b .hdc-route__fact dd {
		margin: 0.25rem 0 0;
		color: var(--r-text);
		font-size: 0.9375rem;
		line-height: 1.4;
	}

	.hdc-home-b .hdc-route__fact--ask dt {
		color: var(--ink);
	}

	.hdc-home-b .hdc-route__fact-icon {
		box-sizing: content-box;
		flex: none;
		width: 0.875rem;
		height: 0.875rem;
		padding: 0.1875rem;
		border-radius: 50%;
		background: var(--steel-1);
		color: var(--steel-9);
	}

	.hdc-home-b .hdc-route__fact--ask .hdc-route__fact-icon {
		background: var(--accent);
		color: var(--ink);
	}

	/* The title block: steel, the notes and the action. */
	.hdc-home-b .hdc-route__block {
		display: grid;
		gap: 1.5rem;
		padding: 1.5rem 1rem;
		background: var(--steel-9);
		color: var(--white);
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-route__notes {
		display: grid;
		gap: 0.875rem;
	}

	.hdc-home-b .hdc-route__note,
	.hdc-home-b .hdc-route__rush {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		line-height: 1.35;
	}

	.hdc-home-b .hdc-route__note {
		font-size: 1.125rem;
		font-weight: 700;
	}

	.hdc-home-b .hdc-route__rush {
		color: var(--steel-3);
		font-size: 1rem;
	}

	.hdc-home-b .hdc-route__note-icon,
	.hdc-home-b .hdc-route__rush-icon {
		box-sizing: content-box;
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
		padding: 0.5rem;
	}

	.hdc-home-b .hdc-route__note-icon {
		background: var(--accent);
		color: var(--ink);
	}

	.hdc-home-b .hdc-route__rush-icon {
		box-shadow: inset 0 0 0 1px var(--steel-5);
		color: var(--white);
	}

	.hdc-home-b .hdc-route__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem 1.5rem;
	}

	.hdc-home-b .hdc-route__send,
	.hdc-home-b .hdc-route__call {
		width: 100%;
	}

	.hdc-home-b .hdc-route__call {
		justify-content: center;
		border-color: var(--white);
		color: var(--white);
	}

	.hdc-home-b .hdc-route__call:hover {
		background: rgb(255 255 255 / 0.1);
	}

	.hdc-home-b .hdc-route__call .hdc-icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.hdc-home-b .hdc-route__form {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		--link: var(--white);
		--link-hover: var(--white);
		color: var(--white);
		font-weight: 700;
		text-decoration-line: underline;
		text-decoration-color: var(--accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}

	.hdc-home-b .hdc-route__form-arrow {
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
		transition: transform 0.15s;
	}

	.hdc-home-b .hdc-route__form:hover .hdc-route__form-arrow {
		transform: translateX(3px);
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-route__lead {
			font-size: 1.3125rem;
		}

		/* Two by two, each stop a column. */
		.hdc-home-b .hdc-route__stops {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hdc-home-b .hdc-route__stop {
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto auto 1fr;
			grid-template-areas:
				"head"
				"draw"
				"facts";
			gap: 1.25rem;
			padding: 1rem 1.25rem 1.75rem;
			border-bottom: 0;
		}

		.hdc-home-b .hdc-route__stop:nth-child(even) {
			border-left: 1px solid var(--r-rule);
		}

		.hdc-home-b .hdc-route__stop:nth-child(n + 3) {
			border-top: 1px solid var(--r-rule);
		}

		.hdc-home-b .hdc-route__draw {
			max-width: 15rem;
		}

		.hdc-home-b .hdc-route__block {
			padding: 1.5rem 1.25rem;
		}

		.hdc-home-b .hdc-route__send,
		.hdc-home-b .hdc-route__call {
			width: auto;
		}
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-route__head {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			align-items: end;
			gap: 3rem;
			margin-bottom: 2.5rem;
		}

		.hdc-home-b .hdc-route__lead {
			justify-self: end;
			width: 38ch;
			font-size: 1.375rem;
		}

		.hdc-home-b .hdc-route__block {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: 2rem;
			padding: 1.75rem;
		}
	}

	/* From 80rem: four across, a station on the line over each stop. */
	@media (min-width: 80rem) {
		.hdc-home-b .hdc-route__stops {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		/* The train between the first two stations, heading on. */
		.hdc-home-b .hdc-route__train {
			left: calc(25% - 8rem);
		}

		.hdc-home-b .hdc-route__stop {
			padding-top: 1.25rem;
		}

		.hdc-home-b .hdc-route__stop:nth-child(n + 3) {
			border-top: 0;
		}

		.hdc-home-b .hdc-route__stop + .hdc-route__stop {
			border-left: 1px solid var(--r-rule);
		}

		.hdc-home-b .hdc-route__stop::before,
		.hdc-home-b .hdc-route__stop::after {
			position: absolute;
			left: calc(1.25rem + 0.875rem);
			content: "";
			transform: translateX(-50%);
		}

		/* The station on the line. */
		.hdc-home-b .hdc-route__stop::before {
			top: -9px;
			width: 12px;
			height: 12px;
			border: 2px solid var(--ink);
			border-radius: 50%;
			background: var(--white);
		}

		/* Its drop to the stop's number. */
		.hdc-home-b .hdc-route__stop::after {
			top: 3px;
			width: 2px;
			height: calc(1.25rem - 3px);
			background: var(--steel-9);
		}

		.hdc-home-b .hdc-route__fact dd {
			font-size: 1rem;
		}

		.hdc-home-b .hdc-route__note {
			font-size: 1.25rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-home-b .hdc-route__form-arrow {
			transition: none;
		}
	}
}