/**
 * 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;
	/* 2.8.1: no font-family here. "inherit" set this one section title in
	   the body face while every other title on the page took the design's
	   heading face from the theme, so the route read as a different site. */
	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;
	overflow-wrap: anywhere;
}

/* 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;
	/* 2.8.1: never squeezed. Beside a long place name the label (which does
	   not wrap) was shrunk to nothing and its words ran out of the card and
	   widened the page on a phone; now the name gives way and wraps. */
	flex: none;
}

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

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

/* The number is the node of a journey line; the layouts that draw the sketch
   keep the chain as words and arrows and do not show it. */
.wptm-route__num {
	display: none;
}

/* ===================================== THE CHAIN AS A ROUTE (2.8.0) ==== */

/*
 * Atlas and Qamar set the route in a wide band of its own, where the plain
 * chain above read as a raw line of text: a wrapped line began with an
 * arrow, and the "Starting point" / "Ending point" words beside the two ends
 * pushed the names apart unevenly.
 *
 * In those two layouts the chain is a ruled row of stops. Every name sits on
 * one baseline; the two ends carry their label small above them; the arrow
 * trails the stop it leaves from, so a wrapped line always starts with a
 * place and ends pointing onward. It is still the same ordered list, and the
 * arrow is still a pseudo-element that is never read out or copied. Every
 * other layout keeps the chain above, unchanged.
 */
:is(.wptm-atlas, .wptm-qamar) .wptm-route__chain {
	align-items: flex-end;
	gap: 14px 0;
	max-width: min(100%, 68ch);
	padding-block-start: clamp(14px, 1.8vw, 18px);
	border-block-start: 1px solid var(--wptm-hairline, rgba(0, 0, 0, .1));
}

:is(.wptm-atlas, .wptm-qamar) .wptm-route__link {
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"label ."
		"place next";
	align-items: center;
	gap: 0;
	min-width: 0;
}

:is(.wptm-atlas, .wptm-qamar) .wptm-route__link + .wptm-route__link::before {
	content: none;
}

:is(.wptm-atlas, .wptm-qamar) .wptm-route__link:not(:last-child)::after {
	content: "";
	grid-area: next;
	display: block;
	width: 20px;
	height: 9px;
	margin-inline: 12px;
	background: currentColor;
	opacity: .32;
	clip-path: polygon(0 42%, 66% 42%, 66% 6%, 100% 50%, 66% 94%, 66% 58%, 0 58%);
}

[dir="rtl"] :is(.wptm-atlas, .wptm-qamar) .wptm-route__link:not(:last-child)::after,
:is(.wptm-atlas, .wptm-qamar)[dir="rtl"] .wptm-route__link:not(:last-child)::after,
:is(.wptm-atlas, .wptm-qamar) [dir="rtl"] .wptm-route__link:not(:last-child)::after {
	transform: scaleX(-1);
}

:is(.wptm-atlas, .wptm-qamar) .wptm-route__place {
	grid-area: place;
	font-size: 16.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

:is(.wptm-atlas, .wptm-qamar) .wptm-route__label {
	grid-area: label;
	margin-block-end: 3px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wptm-faint, var(--wptm-muted, #5b6472));
}

/* Arabic is never tracked or set in capitals: the letters join. */
:is(.wptm-atlas, .wptm-qamar):lang(ar) .wptm-route__label,
:is(.wptm-atlas, .wptm-qamar) [dir="rtl"] .wptm-route__label,
[dir="rtl"] :is(.wptm-atlas, .wptm-qamar) .wptm-route__label {
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 600px) {
	:is(.wptm-atlas, .wptm-qamar) .wptm-route__chain {
		gap: 12px 0;
	}

	:is(.wptm-atlas, .wptm-qamar) .wptm-route__place {
		font-size: 15.5px;
	}

	:is(.wptm-atlas, .wptm-qamar) .wptm-route__link:not(:last-child)::after {
		width: 16px;
		margin-inline: 9px;
	}
}