/**
 * Route at a glance.
 *
 * A chain of places on one wrapping line rather than a column with a row per
 * stop. The column form gave a two-stop route a whole screen to say two words;
 * this gives six stops the space that gave to two, which is the right ratio
 * for a summary that sits above the itinerary rather than replacing it.
 *
 * The arrows are pseudo-elements, so they are never read out and never
 * selected when somebody copies the route. In Arabic the arrow turns with the
 * text, because a route points along the direction it is read in.
 *
 * No JavaScript, no image, no icon font. Colours come from the accent the tour
 * stylesheet already sets.
 */

.wptm-route {
	max-width: 46rem;
}

.wptm-route__head {
	margin-block-end: clamp(10px, 1.6vw, 16px);
}

.wptm-route__heading {
	margin: 0;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.012em;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.wptm-route__summary {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wptm-muted, #5b6472);
}

/* ============================================================= CHAIN ==== */

.wptm-route__chain {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-route__link {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The arrow belongs to the stop that follows, so the last one has none and no
 * rule is needed to take it away. Decorative and inert: never spoken, never
 * copied with the text.
 */
.wptm-route__link + .wptm-route__link::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1.6em;
	height: 0.62em;
	margin-inline: 8px;
	background: currentColor;
	opacity: 0.34;
	/* A shaft with a head, drawn rather than typed, so it keeps its weight at
	   any size and turns with the reading direction. */
	clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
}

.wptm-route__chain[dir="rtl"] .wptm-route__link + .wptm-route__link::before,
[dir="rtl"] .wptm-route__chain .wptm-route__link + .wptm-route__link::before {
	transform: scaleX(-1);
}

.wptm-route__place {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

/* The two ends carry the accent, and each also carries its own words, so
   nothing here is told by colour alone. */
.wptm-route__link.is-first .wptm-route__place,
.wptm-route__link.is-last .wptm-route__place {
	color: var(--wptm-accent-dark, #94682a);
}

/*
 * The label sits beside the place, not under it: a row per stop is what made
 * the old shape tall. Small, quiet, and skipped entirely when empty.
 */
.wptm-route__label {
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wptm-muted, #5b6472);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.wptm-route__place {
		font-size: 0.96rem;
	}

	.wptm-route__link + .wptm-route__link::before {
		margin-inline: 6px;
	}
}