/**
 * WP Tour Manager - tour page.
 *
 * Everything is namespaced under .wptm-. No element selector is styled, no
 * font is declared and nothing is loaded from a remote host: typography comes
 * from the theme, and the palette is derived from the text colour the theme
 * already set, so the page belongs to the site it sits on.
 *
 * Logical properties throughout (inline-start / inline-end), so an RTL site
 * mirrors without a second stylesheet.
 */

.wptm-tour {
	/* The only opinionated values. A theme or a child stylesheet can redeclare
	   any of them on .wptm-tour and the whole page follows. */
	--wptm-accent: #b8853a;
	--wptm-accent-dark: #94682a;
	--wptm-on-accent: #fff;
	--wptm-success: #1a7f4b;
	--wptm-danger: #b23b3b;

	/* Derived from the page itself. */
	--wptm-text: currentColor;
	--wptm-muted: color-mix(in srgb, currentColor 68%, transparent);
	--wptm-faint: color-mix(in srgb, currentColor 48%, transparent);
	--wptm-border: color-mix(in srgb, currentColor 16%, transparent);
	--wptm-hairline: color-mix(in srgb, currentColor 9%, transparent);
	--wptm-surface: color-mix(in srgb, currentColor 3%, transparent);
	--wptm-tint: color-mix(in srgb, var(--wptm-accent) 10%, transparent);

	--wptm-radius: 10px;
	--wptm-radius-sm: 8px;
	--wptm-gap: clamp(28px, 3.6vw, 46px);
	--wptm-offset: 0px;
	--wptm-bar: 0px;
	/* The height of the section navigation when it is on the page, set by
	   the script; anchors land under it rather than behind it. */
	--wptm-nav: 0px;

	/*
	 * The side gutter on a phone.
	 *
	 * The plugin used to rely entirely on the theme for this. That works while
	 * the theme provides one, and Jannah does not on a full width mobile
	 * layout, so every card sat flush against the glass with its border
	 * touching the edge of the screen.
	 *
	 * Declared as a variable so a theme that does pad its content can switch
	 * it off in one line:
	 *
	 *     .wptm-tour { --wptm-gutter: 0px; }
	 */
	--wptm-gutter: clamp(14px, 4vw, 20px);

	color: inherit;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: var(--wptm-bar);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wptm-tour {
		--wptm-muted: #5b6472;
		--wptm-faint: #8a929d;
		--wptm-border: rgba(20, 24, 31, .16);
		--wptm-hairline: rgba(20, 24, 31, .09);
		--wptm-surface: rgba(20, 24, 31, .03);
	}
}

.wptm-tour *,
.wptm-tour *::before,
.wptm-tour *::after {
	box-sizing: border-box;
}

.wptm-tour img {
	max-width: 100%;
	height: auto;
}

.wptm-tour :focus-visible {
	outline: 2px solid var(--wptm-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.wptm-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wptm-tour [id] {
	scroll-margin-top: calc(var(--wptm-offset) + var(--wptm-nav, 0px) + 24px);
}

.wptm-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ============================================================== BUTTONS === */

.wptm-tour .wptm-btn,
.wptm-tour a.wptm-btn,
.wptm-tour button.wptm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--wptm-radius-sm);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* The label colour is a variable, and the script re-checks it against the
   background that is actually painted. White is never assumed. */
.wptm-tour a.wptm-btn--primary,
.wptm-tour a.wptm-btn--primary:visited,
.wptm-tour button.wptm-btn--primary {
	background-color: var(--wptm-accent) !important;
	border-color: var(--wptm-accent) !important;
	color: var(--wptm-on-accent) !important;
}

.wptm-tour a.wptm-btn--primary:hover,
.wptm-tour a.wptm-btn--primary:focus,
.wptm-tour a.wptm-btn--primary:active,
.wptm-tour button.wptm-btn--primary:hover,
.wptm-tour button.wptm-btn--primary:focus,
.wptm-tour button.wptm-btn--primary:active {
	background-color: var(--wptm-accent-dark) !important;
	border-color: var(--wptm-accent-dark) !important;
	color: var(--wptm-on-accent) !important;
}

.wptm-tour a.wptm-btn--secondary,
.wptm-tour a.wptm-btn--secondary:visited,
.wptm-tour button.wptm-btn--secondary {
	background-color: transparent !important;
	border-color: var(--wptm-border) !important;
	color: inherit !important;
}

.wptm-tour a.wptm-btn--secondary:hover,
.wptm-tour a.wptm-btn--secondary:focus,
.wptm-tour button.wptm-btn--secondary:hover,
.wptm-tour button.wptm-btn--secondary:focus {
	background-color: var(--wptm-surface) !important;
	border-color: var(--wptm-accent) !important;
	color: inherit !important;
}

.wptm-tour a.wptm-btn--quiet,
.wptm-tour a.wptm-btn--quiet:visited {
	min-height: 0;
	padding: 10px 12px;
	background: transparent !important;
	border-color: transparent !important;
	color: var(--wptm-muted) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wptm-tour a.wptm-btn--quiet:hover {
	color: var(--wptm-accent) !important;
}

.wptm-tour .wptm-btn--block {
	width: 100%;
}

.wptm-tour .wptm-btn--sm {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14px;
}

.wptm-tour .wptm-btn--lg {
	min-height: 56px;
	padding: 15px 34px;
	font-size: 16px;
}

.wptm-tour .wptm-btn[disabled] {
	opacity: .65;
	cursor: progress;
}

.wptm-tour a.wptm-link,
.wptm-tour a.wptm-link:visited {
	color: var(--wptm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wptm-tour a.wptm-link:hover {
	color: var(--wptm-accent-dark);
}

/* =============================================================== HEADER === */

.wptm-head {
	padding-block: clamp(10px, 2vw, 18px) 0;
}

.wptm-crumbs {
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--wptm-faint);
}

.wptm-crumbs a {
	color: var(--wptm-muted);
	text-decoration: none;
}

.wptm-crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wptm-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-crumbs__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	list-style: none;
}

.wptm-crumbs__list li::marker {
	content: "";
}

.wptm-crumbs__list li + li::before {
	content: "\203A";
	color: var(--wptm-faint);
}

/*
 * The share control is anchored to the top corner rather than pushed there by
 * a flex row. A flex row with space-between opens a gap the width of whatever
 * is left over, which is what left a band of empty page beside the wording.
 */
.wptm-head__row {
	position: relative;
}

.wptm-head__text {
	min-width: 0;
}

.wptm-head__title {
	margin: 0;
	font-size: clamp(27px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	max-width: 30ch;
}

/*
 * The rating under the title: five small stars, the score, the count, one
 * link to the reviews. The stars are filled in the accent up to the score,
 * half-filled where the score sits between, and outlined past it.
 */
.wptm-head__rating {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1;
}

.wptm-tour .wptm-head__ratinglink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.wptm-tour .wptm-head__ratinglink:hover .wptm-head__count,
.wptm-tour .wptm-head__ratinglink:focus-visible .wptm-head__count {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wptm-head__stars {
	display: inline-flex;
	gap: 1px;
	line-height: 0;
	color: var(--wptm-accent);
}

.wptm-head__star svg {
	fill: transparent;
	opacity: .55;
}

.wptm-head__star.is-on svg {
	fill: currentColor;
	opacity: 1;
}

/* A half star: filled by a two-stop gradient the header defines once,
   in the star's own colour, so it turns with the reading direction. */
.wptm-head__star.is-half svg {
	fill: url(#wptm-half-star);
	opacity: 1;
}

.wptm-head__score {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wptm-head__count {
	color: var(--wptm-muted);
}

.wptm-head__lead {
	max-width: 88ch;
	margin: 14px 0 0;
	font-size: clamp(15.5px, 1.7vw, 17.5px);
	line-height: 1.6;
	color: var(--wptm-muted);
}

.wptm-head__place {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--wptm-muted);
}

.wptm-head__pin {
	color: var(--wptm-accent);
	line-height: 0;
}


/*
 * The category line, matching the place line above it.
 *
 * Two meta lines under a title, one saying where the tour goes and one saying
 * what kind of trip it is. They are given the same weight because neither is
 * more important than the other and a reader takes both in at a glance.
 *
 * The label is a real word rather than an icon alone. A pin is universally
 * read as a place; a tag is read as "something categorised", which is not the
 * same as knowing what it has been categorised as.
 */
.wptm-head__cats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--wptm-muted);
}

.wptm-head__tag {
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-head__catlabel {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wptm-muted);
}

.wptm-head__catlabel::after {
	content: ":";
}



/*
 * The header used to reserve 132px down its side for a share button, and the
 * badge line kept clear of it. With the button gone the reservation is an
 * empty strip, so it goes too and the title has the width back.
 */
.wptm-head__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* =============================================================== LAYOUT === */

/*
 * Three regions: the gallery, the written content, the sidebar.
 *
 * Desktop places the gallery and the content in one column with the sidebar
 * beside them. Mobile drops to a single column and reorders so the price card
 * follows the photographs instead of sinking to the bottom of the page, which
 * is why the sidebar is split into a booking half and an information half.
 */
.wptm-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
}

.wptm-layout__head,
.wptm-layout__media,
.wptm-layout__main,
.wptm-layout__side {
	min-width: 0;
}

.wptm-side {
	display: grid;
	gap: 10px;
}

/* --- Mobile order: gallery, price, content, information cards ------------ */

@media (max-width: 999px) {

	.wptm-layout {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	/* The sidebar stops being a box so its two halves can be placed
	   independently in the flow. */
	.wptm-layout__side,
	.wptm-side {
		display: contents;
	}

	.wptm-layout__head {
		order: 0;
	}

	.wptm-layout__media {
		order: 1;
	}

	.wptm-side__book {
		order: 2;
	}

	.wptm-layout__main {
		order: 3;
	}

	.wptm-side__info {
		order: 4;
		display: grid;
		gap: 10px;
	}

	/* Nothing sticks in a single column. */
	.wptm-layout__side,
	.wptm-side__book,
	.wptm-card--book {
		position: static;
	}
}

/* --- Desktop with the sidebar -------------------------------------------- */

@media (min-width: 1000px) {

	/* The sidebar starts level with the title, not level with the gallery:
	   an empty rectangle beside the heading is wasted space. */
	.wptm-layout--side {
		/*
		 * Proportional, not fixed. The plugin does not know how wide the
		 * theme's content column is, so the sidebar takes a share of whatever
		 * it is given, within sensible limits, and the reading column keeps
		 * the rest.
		 */
		grid-template-columns: minmax(0, 1fr) clamp(270px, 30%, 360px);
		grid-template-areas:
			"head  side"
			"media side"
			"main  side";
		align-items: start;
		row-gap: 0;
	}

	.wptm-layout--side .wptm-layout__head {
		grid-area: head;
		margin-block-end: clamp(16px, 2vw, 24px);
	}

	.wptm-layout--side .wptm-layout__media {
		grid-area: media;
	}

	.wptm-layout--side .wptm-layout__main {
		grid-area: main;
		margin-block-start: clamp(20px, 2.4vw, 32px);
	}

	/*
	 * The whole column travels, as one piece. The offset is set by the script
	 * from the real height: pinned under the header when the column fits on
	 * screen, pinned by its bottom edge when it is longer, so every card is
	 * reachable without a scrollbar of its own.
	 */
	.wptm-layout--side .wptm-layout__side {
		grid-area: side;
		align-self: start;
		position: sticky;
		top: var(--wptm-side-top, calc(var(--wptm-offset) + 24px));
	}

	.wptm-layout--side .wptm-side {
		align-content: start;
	}
}

/* One exception: the immersive preset opens on a full width photograph, so
   its header spans the whole grid and the sidebar starts under it. */
@media (min-width: 1000px) {

	.wptm-tour--immersive .wptm-layout--side {
		grid-template-areas:
			"head  head"
			"media side"
			"main  side";
	}

	.wptm-tour--immersive .wptm-layout--side .wptm-layout__head {
		margin-block-end: clamp(20px, 2.6vw, 32px);
	}
}

/*
 * A media query knows how wide the window is, not how wide the theme's content
 * column is. A theme that gives the plugin 700 pixels inside a 1400 pixel
 * window would still get the two column layout, and the reading column would
 * be squeezed to nothing.
 *
 * Where container queries exist, the layout falls back to one column when the
 * space it was actually given is too small, whatever the window is doing.
 * Where they do not, nothing changes.
 *
 * The containment is declared inside the desktop media query on purpose: an
 * inline-size container becomes the containing block for fixed position
 * children, and the mobile booking bar is fixed. Below this width there is no
 * containment, so the bar still anchors to the window.
 */
@supports (container-type: inline-size) {

	@media (min-width: 1000px) {

		.wptm-tour {
			container-type: inline-size;
			container-name: wptm;
		}

		@container wptm (max-width: 820px) {

			.wptm-layout--side {
				grid-template-columns: minmax(0, 1fr);
				grid-template-areas:
					"head"
					"media"
					"main"
					"side";
				row-gap: clamp(24px, 3vw, 40px);
			}

			.wptm-layout--side .wptm-layout__main {
				margin-block-start: 0;
			}

			.wptm-layout--side .wptm-layout__side {
				position: static;
				max-width: 460px;
			}
		}
	}
}

@media (min-width: 1280px) {

	.wptm-layout--side {
		grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 380px);
		column-gap: 48px;
	}
}

/* --- Sidebar off: the same cards become a row under the content ---------- */

@media (min-width: 1000px) {

	.wptm-layout--full .wptm-layout__head {
		margin-block-end: clamp(16px, 2vw, 24px);
	}

	.wptm-layout--full .wptm-side {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		gap: 12px;
		align-items: start;
	}

	.wptm-layout--full .wptm-side__book {
		grid-column: 1 / -1;
		max-width: 420px;
	}

	.wptm-layout--full .wptm-side__info {
		display: contents;
	}
}

/* =============================================================== BLOCKS === */

.wptm-block {
	padding-block: var(--wptm-gap);
	border-block-start: 1px solid var(--wptm-hairline);
}

/*
 * Section wrappers carry tabindex="-1" so an in page link can move focus to
 * them. A ring drawn around a whole section after a click is noise, so it is
 * suppressed, but only for the pointer case: a keyboard user who reaches one
 * still gets an indicator, because removing that outright is the difference
 * between a tidy page and an unusable one.
 */
.wptm-block:focus:not(:focus-visible) {
	outline: none;
}

.wptm-block--facts,
.wptm-block--summary,
.wptm-block--features {
	border-block-start: 0;
	padding-block: clamp(20px, 2.4vw, 28px);
}

.wptm-block--summary {
	padding-block-end: 6px;
}

.wptm-block--features {
	padding-block-start: 22px;
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-block__title {
	margin: 0 0 22px;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.wptm-summary {
	max-width: 68ch;
	margin: 0;
	font-size: clamp(16px, 1.7vw, 17.5px);
	line-height: 1.75;
	color: var(--wptm-muted);
}

.wptm-note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wptm-faint);
}

.wptm-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 26px 24px;
}

/* ============================================================== GALLERY === */

.wptm-gallery {
	margin: 0;
}

.wptm-gallery__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--wptm-radius);
	overflow: hidden;
	background: var(--wptm-surface);
}

@media (max-width: 700px) {
	.wptm-gallery__stage {
		aspect-ratio: 4 / 3;
	}
}

.wptm-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

.wptm-tour button.wptm-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #14181f;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(15, 20, 28, .18);
}

.wptm-tour button.wptm-gallery__nav:hover {
	background: #fff;
}

.wptm-gallery__nav--prev {
	inset-inline-start: 14px;
}

.wptm-gallery__nav--next {
	inset-inline-end: 14px;
}

.wptm-gallery__count {
	position: absolute;
	inset-block-end: 14px;
	inset-inline-end: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(15, 20, 28, .62);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The duration chip, top-start of the stage, the one the cards wear. */
.wptm-gallery__days {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 28px);
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--wptm-page, Canvas);
	color: var(--wptm-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 2px rgba(15, 20, 28, .14);
	pointer-events: none;
}

.wptm-gallery__days span {
	line-height: 0;
	color: var(--wptm-accent);
}

.wptm-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 10px;
	margin-block-start: 10px;
}

.wptm-gallery__thumb {
	display: block;
	border-radius: var(--wptm-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	opacity: .72;
	cursor: pointer;
	transition: opacity .16s ease, border-color .16s ease;
}

.wptm-gallery__thumb.is-active,
.wptm-gallery__thumb:hover {
	opacity: 1;
	border-color: var(--wptm-accent);
}

.wptm-gallery__thumb.is-hidden {
	display: none;
}

.wptm-gallery__thumbimg {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wptm-tour button.wptm-gallery__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 4 / 3;
	padding: 6px;
	border: 1px dashed var(--wptm-border);
	border-radius: var(--wptm-radius-sm);
	background: var(--wptm-surface);
	color: var(--wptm-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.wptm-tour button.wptm-gallery__more:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-gallery__moreicon {
	line-height: 0;
}

@media (max-width: 700px) {

	.wptm-gallery__thumbs {
		grid-auto-columns: 88px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.wptm-gallery__thumb {
		scroll-snap-align: start;
	}

	.wptm-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.wptm-gallery__thumb.is-hidden {
		display: block;
	}
}

/* ============================================================= FEATURES === */

/*
 * Tour highlights.
 *
 * One highlight per line, the whole width of the column.
 *
 * The previous version was a grid of four cards, which forced two compromises:
 * a highlight had to be short enough to fit a narrow card, and anything past
 * the fourth was silently dropped. A row per highlight removes both. It also
 * reads the way a list of reasons is meant to read: down, not across.
 *
 * Three columns on a wide screen: a small mark, the highlight, and its detail
 * behind a hairline. Below that the detail moves under the title, because a
 * two column row at phone width gives neither column enough room.
 */
/*
 * No top border here.
 *
 * The section wrapper already draws one, so the list drawing its own put two
 * hairlines a paragraph apart with nothing between them, which reads as a
 * rendering fault rather than as a separator. The wrapper's line is the one
 * that means something: it divides one section from the next.
 */
.wptm-features {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One highlight per row, the title across the full width and its detail
 * underneath.
 *
 * The previous version put the detail in a second column. That reads well when
 * every highlight has one, and badly when they do not: a highlight written as
 * a whole sentence took a third of the row and left the other two thirds
 * empty, which looks like something failed to load rather than like a design.
 *
 * Stacking removes the problem instead of special casing it. There is no empty
 * column because there is no column, a highlight with no detail is simply a
 * line, and the text has the whole width to wrap in at every screen size.
 */
.wptm-features__item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 4px;
	margin: 0;
	/* Space, not a rule, between highlights: five short lines with a hairline
	   under each read as a table, and the mark beside each is all the
	   separation five short lines need. */
	padding-block: clamp(8px, 1.1vw, 11px);
	list-style: none;
}

.wptm-features__item::marker {
	content: "";
}

.wptm-features__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: var(--wptm-accent);
	/* Aligned to the first line of the title rather than to the top of the
	   box, so a title that wraps still has its mark beside the words. */
	margin-block-start: 3px;
}

.wptm-features__title {
	font-size: clamp(16px, 1.6vw, 17.5px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.wptm-features__note {
	grid-column: 2;
	font-size: clamp(15px, 1.5vw, 15.5px);
	line-height: 1.65;
	color: var(--wptm-muted);
	overflow-wrap: anywhere;
}

/* ============================================================= TIMELINE === */

.wptm-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 18px;
	margin: 0;
	padding-block-end: clamp(26px, 3vw, 36px);
	list-style: none;
}

.wptm-timeline__step::marker {
	content: "";
}

/* The connector belongs to the step, which is why it stops cleanly at the
   last circle instead of running past it. */
.wptm-timeline__step::before {
	content: "";
	position: absolute;
	inset-block: 50px 4px;
	inset-inline-start: 21px;
	width: 1px;
	background: var(--wptm-border);
}

.wptm-timeline__step:last-child {
	padding-block-end: 0;
}

.wptm-timeline__step:last-child::before {
	display: none;
}

.wptm-timeline__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.wptm-timeline__content {
	padding-block-start: 7px;
	min-width: 0;
}

.wptm-timeline__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
}

.wptm-timeline__title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wptm-timeline__title {
	margin: 0 0 8px;
	font-size: clamp(16px, 1.8vw, 18px);
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Held on one line because a clock time split across two reads as two times.
 * It may still shrink, so a long range wraps rather than pushing the title
 * out of the column.
 */
.wptm-timeline__time {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--wptm-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow-wrap: normal;
}

@media (max-width: 600px) {

	/* Its own line on a phone, so it never competes with the title for width. */
	.wptm-timeline__time {
		white-space: normal;
	}
}

/*
 * A section heading with an action beside it.
 *
 * The action sits on the baseline of the heading on a wide screen and drops
 * under it on a narrow one, rather than shrinking: a link that wraps to two
 * words per line beside a heading is harder to read than the same link on its
 * own row.
 */
/*
 * The rating breakdown.
 *
 * A three-column grid rather than flex, so every bar starts and ends on the
 * same line however wide the label or the count is. With flex, "5 stars" and
 * "1 star" are different widths and the bars step raggedly down the block.
 */
.wptm-spread {
	margin-block-end: 22px;
	padding-block-end: 18px;
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-spread__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
}

.wptm-spread__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-spread__row {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr) 3em;
	align-items: center;
	gap: 12px;
	padding-block: 4px;
	font-size: 13px;
}

.wptm-spread__label {
	color: var(--wptm-muted);
	white-space: nowrap;
}

.wptm-spread__track {
	display: block;
	block-size: 8px;
	min-inline-size: 0;
	border-radius: 999px;
	background: var(--wptm-hairline);
	overflow: hidden;
}

/*
 * The fill is sized inline, because the width is the datum. A zero-count row
 * still draws its track, so the block reads as five rows of a scale rather
 * than as a list with gaps in it.
 */
.wptm-spread__fill {
	display: block;
	block-size: 100%;
	border-radius: 999px;
	background: var(--wptm-accent, #b8853a);
}

.wptm-spread__count {
	color: var(--wptm-muted);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

@media (max-width: 600px) {

	.wptm-spread__row {
		grid-template-columns: 4.5em minmax(0, 1fr) 2.5em;
		gap: 8px;
	}
}

/*
 * Arabic labels are longer than "5 stars" at the same size, so the label
 * column is given room rather than allowed to wrap mid-phrase.
 */
.wptm-spread:lang(ar) .wptm-spread__row,
[dir="rtl"] .wptm-spread__row {
	grid-template-columns: 7em minmax(0, 1fr) 3em;
	letter-spacing: normal;
}

.wptm-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 18px;
}

.wptm-block__head .wptm-block__title {
	margin-block-end: 0;
}

.wptm-block__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wptm-accent, #b8853a);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.wptm-block__action:hover,
.wptm-block__action:focus-visible {
	text-decoration: underline;
}

.wptm-block__actionicon {
	display: inline-flex;
	flex: 0 0 auto;
}

.wptm-block__actionicon svg {
	display: block;
}

/*
 * The action is a convenience, not the content. On a phone it goes under the
 * heading with the rest of the section, and the heading keeps its own spacing.
 */
@media (max-width: 600px) {

	.wptm-block__head {
		gap: 4px;
	}

	.wptm-block__action {
		font-size: 13px;
	}
}

.wptm-timeline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 12px 0 0;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--wptm-hairline);
	font-size: 13px;
}

/*
 * A flex item's minimum size is its content unless it is told otherwise, so a
 * long unbroken value here, a place name with no spaces or a pasted link, made
 * the row wider than the column that holds it. This is what pushed the
 * itinerary past the edge of the screen.
 */
.wptm-timeline__metaitem {
	display: flex;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

.wptm-timeline__metaitem dd,
.wptm-timeline__metaitem dt {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wptm-timeline__metaitem dt {
	font-weight: 700;
}

.wptm-timeline__metaitem dd {
	margin: 0;
	color: var(--wptm-muted);
}

/*
 * The icon.
 *
 * flex-shrink: 0 because a flex item with an SVG in it will otherwise give up
 * its width before the text does, and a squashed icon is worse than none.
 * The alignment is to the first line rather than centred, so a value that wraps
 * to two lines keeps its mark beside the label instead of floating between the
 * two lines.
 */
.wptm-timeline__metaicon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin-block-start: 1px;
	color: var(--wptm-accent, #b8853a);
}

.wptm-timeline__metaicon svg {
	display: block;
}

/*
 * Below 600px the row becomes a stack of chips.
 *
 * The desktop row is label and value side by side, separated by a wide gap. On
 * a phone that gap is most of the screen, and three pairs wrap into six ragged
 * lines with no visible relationship between a label and the value under it.
 * One chip per pair, full width, keeps each pair together and reads as a list.
 */
@media (max-width: 600px) {

	.wptm-timeline__meta {
		gap: 6px;
	}

	.wptm-timeline__metaitem {
		inline-size: 100%;
		align-items: baseline;
		padding-block: 6px;
		padding-inline: 10px;
		border-radius: 8px;
		background: color-mix(in srgb, var(--wptm-accent, #b8853a) 6%, transparent);
	}

	.wptm-timeline__metaitem dd {
		margin-inline-start: auto;
		text-align: end;
	}
}

/*
 * Arabic joins its letters, so any tracking on this row breaks the joins, and a
 * label like "الإقامة" needs more leading than a Latin one at the same size.
 */
.wptm-timeline__meta:lang(ar),
[dir="rtl"] .wptm-timeline__meta {
	letter-spacing: normal;
	line-height: 1.9;
}

@media (max-width: 600px) {

	.wptm-timeline__step {
		grid-template-columns: 36px minmax(0, 1fr);
		column-gap: 14px;
	}

	.wptm-timeline__step::before {
		inset-block-start: 42px;
		inset-inline-start: 17px;
	}

	.wptm-timeline__marker {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.wptm-timeline__head {
		flex-direction: column;
		gap: 2px;
	}

	.wptm-timeline__time {
		order: -1;
	}
}

/* =============================================== INCLUDED / NOT INCLUDED === */

.wptm-panel {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Two columns with one hairline standing between them, where there is room
   for two; a box around each column was a frame inside the section's frame. */
@media (min-width: 640px) {

	.wptm-two > .wptm-panel + .wptm-panel {
		padding-inline-start: 24px;
		border-inline-start: 1px solid var(--wptm-hairline);
	}
}

.wptm-panel__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
}

.wptm-panel__title--in {
	color: var(--wptm-success);
}

.wptm-panel__title--out {
	color: var(--wptm-muted);
}

.wptm-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	list-style: none;
}

.wptm-list li::marker {
	content: "";
}

.wptm-list__mark {
	flex: 0 0 auto;
	margin-block-start: 1px;
	line-height: 0;
}

.wptm-list--in .wptm-list__mark {
	color: var(--wptm-success);
}

.wptm-list--out .wptm-list__mark {
	color: var(--wptm-faint);
}

.wptm-list--out li {
	color: var(--wptm-muted);
}


/* ======================================================== WHAT TO BRING === */

.wptm-bring {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Each item is a soft chip on the surface tint rather than a bare line, so
 * four short phrases in a row read as a packing list and not as a sentence
 * that wrapped. The mark sits on the first line whatever the phrase wraps to.
 */
.wptm-bring__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 4px 0;
	font-size: 15.5px;
	line-height: 1.5;
	list-style: none;
}

.wptm-bring__item::marker {
	content: "";
}

.wptm-bring__icon {
	flex: 0 0 auto;
	margin-block-start: 2px;
	color: var(--wptm-accent);
	line-height: 0;
}

/* ================================================================ RATES === */

.wptm-tour {
	--wptm-table-head: #1f242b;
	--wptm-table-head-text: #fff;
	--wptm-table-zebra: color-mix(in srgb, currentColor 2.5%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wptm-tour {
		--wptm-table-zebra: rgba(20, 24, 31, .025);
	}
}

.wptm-ratecard {
	border: 1px solid var(--wptm-hairline);
	border-radius: var(--wptm-radius);
	overflow: hidden;
}

.wptm-rates {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.wptm-rates thead th {
	padding: 6px 18px 12px;
	background: transparent;
	color: var(--wptm-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: start;
	border: 0;
	/* A rule under the head, not a band behind it: the table is read for
	   its figures, and a black band above them is the heaviest thing on
	   the page for no reason. */
	border-block-end: 2px solid var(--wptm-border);
}

.wptm-rates thead th:last-child {
	text-align: end;
}

.wptm-rates tbody th,
.wptm-rates tbody td {
	padding: 13px 18px;
	border-block-end: 1px solid var(--wptm-hairline);
	vertical-align: middle;
	background: transparent;
}

.wptm-rates tbody tr:nth-child(even) th,
.wptm-rates tbody tr:nth-child(even) td {
	background: var(--wptm-table-zebra);
}

.wptm-rates tbody tr:last-child th,
.wptm-rates tbody tr:last-child td {
	border-block-end: 0;
}

.wptm-rates tbody th {
	font-weight: 600;
	text-align: start;
}

.wptm-rates__mark {
	display: inline-flex;
	margin-inline-end: 11px;
	color: var(--wptm-accent);
	line-height: 0;
	vertical-align: middle;
}

.wptm-rates__label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	vertical-align: middle;
	font-size: 15px;
}

.wptm-rates__badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 5px;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wptm-rates tbody td {
	text-align: end;
	white-space: nowrap;
}

.wptm-rates__amount {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.wptm-rates__price {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.wptm-rates__basis {
	font-size: 12px;
	font-weight: 400;
	color: var(--wptm-faint);
}

.wptm-rates .is-featured th,
.wptm-rates .is-featured td {
	background: var(--wptm-tint);
}

.wptm-rates .is-featured .wptm-rates__price {
	color: var(--wptm-accent);
}

.wptm-rates .is-featured th {
	font-weight: 600;
}

@media (max-width: 640px) {

	.wptm-ratecard {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.wptm-rates,
	.wptm-rates thead,
	.wptm-rates tbody,
	.wptm-rates tr,
	.wptm-rates th,
	.wptm-rates td {
		display: block;
	}

	.wptm-rates thead tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-block-end: 6px;
		border-block-end: 2px solid var(--wptm-border);
	}

	.wptm-rates thead th {
		padding: 4px 16px 10px;
		font-size: 12px;
		letter-spacing: .12em;
		border: 0;
	}

	.wptm-rates tbody tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin-block-end: 10px;
		padding: 14px 16px;
		border: 1px solid var(--wptm-hairline);
		border-radius: var(--wptm-radius-sm);
		background: var(--wptm-page, Canvas);
		box-shadow: 0 1px 2px rgba(15, 20, 28, .05);
	}

	.wptm-rates tbody tr:last-child {
		margin-block-end: 0;
	}

	.wptm-rates tbody th,
	.wptm-rates tbody td {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.wptm-rates tbody tr:nth-child(even) th,
	.wptm-rates tbody tr:nth-child(even) td {
		background: transparent;
	}

	.wptm-rates .is-featured {
		border-color: color-mix(in srgb, var(--wptm-accent) 45%, transparent);
		background: var(--wptm-tint);
	}

	.wptm-rates .is-featured th,
	.wptm-rates .is-featured td {
		background: transparent;
	}

	.wptm-rates__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		font-size: 15px;
	}

	.wptm-rates__mark {
		display: none;
	}

	.wptm-rates__amount {
		flex-direction: column;
		align-items: flex-end;
		gap: 1px;
	}

	.wptm-rates__price {
		font-size: 17px;
	}

	.wptm-rates__basis {
		font-size: 12px;
	}
}

@media (prefers-color-scheme: dark) {

	.wptm-tour {
		--wptm-table-head: color-mix(in srgb, currentColor 14%, transparent);
		--wptm-table-head-text: currentColor;
	}
}

/* ============================================================== SIDEBAR === */

.wptm-card {
	padding: 22px;
	border: 1px solid var(--wptm-hairline);
	border-radius: var(--wptm-radius);
	background: var(--wptm-page, Canvas);
	box-shadow: 0 1px 2px rgba(15, 20, 28, .04);
}










/* ========================================================= TICKET CARD === */

/*
 * The price panel is drawn as a ticket: a scalloped top, a tinted price stub,
 * a perforation, the details, the call to action, a second perforation and the
 * reassurance stub.
 *
 * The scallops and the notches are painted in the page colour on top of the
 * card, so they read as shapes cut out of the paper. No mask is used, which
 * keeps the effect identical in every browser that can draw a gradient.
 */
.wptm-card--book {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wptm-page, Canvas);
	overflow: visible;

	/*
	 * The teeth are cut out of the card, not painted on top of it.
	 *
	 * Painting half circles in the page colour only works while the card and
	 * the page are different tones; the moment they match, the teeth vanish
	 * and a plain rectangle is left. A mask removes the paper itself, so the
	 * shape is right whatever is behind it.
	 *
	 * Written as longhands, and tested for with longhands. The multi layer
	 * shorthand is where this broke on the phone: Safari implements the
	 * prefixed property only, so a support test naming the unprefixed
	 * shorthand answered no, the fallback branch ran, and the ticket lost its
	 * teeth on exactly the devices most people were holding.
	 */
	--tooth: 26px;
	--tooth-depth: 11px;
	--tooth-top: radial-gradient(circle 11px at 50% 0, transparent 11px, #000 11.5px);
	--tooth-foot: radial-gradient(circle 11px at 50% 100%, transparent 11px, #000 11.5px);
	--tooth-body: linear-gradient(#000 0 0);

	-webkit-mask-image: var(--tooth-top), var(--tooth-foot), var(--tooth-body);
	-webkit-mask-position: top center, bottom center, center;
	-webkit-mask-size:
		var(--tooth) var(--tooth-depth),
		var(--tooth) var(--tooth-depth),
		100% calc(100% - var(--tooth-depth) * 2);
	-webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
	mask-image: var(--tooth-top), var(--tooth-foot), var(--tooth-body);
	mask-position: top center, bottom center, center;
	mask-size:
		var(--tooth) var(--tooth-depth),
		var(--tooth) var(--tooth-depth),
		100% calc(100% - var(--tooth-depth) * 2);
	mask-repeat: repeat-x, repeat-x, no-repeat;

	filter:
		drop-shadow(0 1px 1px rgba(15, 20, 28, .06))
		drop-shadow(0 14px 22px rgba(15, 20, 28, .10));
}

/*
 * On a phone the ticket must read as a ticket, and for a while it did not.
 *
 * A mask cuts the paper. A cut is a hole, and a hole is visible only because
 * something reveals the silhouette. On a wide screen that something is the
 * drop shadow, which follows the masked shape exactly.
 *
 * An earlier version removed the drop shadow on a phone for scroll
 * performance and put an inset ring in its place. That does not work, and the
 * reason is worth writing down: a mask clips everything the element paints,
 * insets included. The ring was drawn as a rectangle and then trimmed to the
 * tooth silhouette, so at each tooth there was nothing at all. White card,
 * white page, no edge. The card read as a plain rectangle.
 *
 * The shadow comes back, as one layer rather than two. One drop-shadow on a
 * masked element is a cost a phone can carry; two was the part worth saving.
 */
@media (max-width: 782px) {

	.wptm-card--book {
		box-shadow: none;
		filter: drop-shadow(0 2px 10px rgba(15, 20, 28, .14));
	}

	/* The stubs keep their own separators so the three parts stay legible. */
	.wptm-tk__price {
		border-block-end: 1px solid color-mix(in srgb, var(--wptm-accent) 22%, transparent);
	}

	.wptm-tk__stub {
		border-block-start: 1px solid var(--wptm-hairline);
	}
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	@media (max-width: 782px) {

		.wptm-tk__price {
			border-block-end: 1px solid rgba(20, 24, 31, .12);
		}
	}
}

/* Nothing to mask with: fall back to an ordinary rounded card rather than a
   shape with its edges half removed. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {

	.wptm-card--book {
		border-radius: 14px;
		filter: none;
		box-shadow: 0 2px 6px rgba(15, 20, 28, .05), 0 18px 40px -26px rgba(15, 20, 28, .5);
	}
}

/*
 * The card's inset, as one value.
 *
 * Every part of the ticket pads by this, so tightening it on a narrow screen
 * is one change rather than five, and the parts can never drift apart.
 */
.wptm-card--book {
	--tk-pad: 22px;
}

@media (max-width: 400px) {

	.wptm-card--book {
		--tk-pad: 16px;
	}
}

/* --- Price stub ---------------------------------------------------------- */

/*
 * The head of the ticket is printed in the accent, the way the stub of a
 * boarding pass is the one coloured part of it: the price on the left, the
 * ticket number on the right, the two things a hand reaches for first.
 *
 * Over the colour a faint diagonal hatching, six per cent of white, which is
 * what security printing does to a ticket and is the difference between a
 * coloured box and a printed stub. It is drawn with a gradient, so it costs
 * nothing and follows the accent whatever colour the site chose.
 */
.wptm-tk__price {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 14px;
	padding: 30px var(--tk-pad) 22px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px),
		linear-gradient(160deg, var(--wptm-accent-dark), var(--wptm-accent));
	color: var(--wptm-on-accent);
	text-align: start;
}

.wptm-tk__pricemain {
	min-width: 0;
}

.wptm-tk__from,
.wptm-tk__basis {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wptm-on-accent) 78%, transparent);
}

.wptm-tk__basis {
	margin-block-start: 6px;
	letter-spacing: .14em;
}

.wptm-tk__amount {
	display: flex;
	align-items: baseline;
	margin: 4px 0 0;
}

.wptm-tk__value {
	font-size: clamp(36px, 4vw, 44px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--wptm-on-accent);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/*
 * The ticket number, boxed at the end of the head.
 *
 * A thin rule of the same white the hatching uses, the label small above
 * the reference, and the reference in tabular figures so two tickets line
 * up. It is aria-hidden because the same reference is read at the foot.
 */
.wptm-tk__no {
	display: grid;
	gap: 3px;
	padding: 8px 10px;
	border: 1px solid color-mix(in srgb, var(--wptm-on-accent) 35%, transparent);
	border-radius: 8px;
	text-align: center;
	white-space: nowrap;
}

.wptm-tk__nolabel {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wptm-on-accent) 70%, transparent);
}

.wptm-tk__novalue {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	font-variant-numeric: tabular-nums;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	.wptm-tk__from,
	.wptm-tk__basis,
	.wptm-tk__nolabel {
		color: rgba(255, 255, 255, .78);
	}

	.wptm-tk__no {
		border-color: rgba(255, 255, 255, .35);
	}
}

/* --- Perforation --------------------------------------------------------- */

.wptm-tk__perf {
	position: relative;
	display: block;
	height: 1px;
	border-block-start: 2px dashed color-mix(in srgb, var(--wptm-text) 18%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	.wptm-tk__perf {
		border-block-start-color: var(--wptm-border);
	}
}

/*
 * The two holes at the ends of the perforation.
 *
 * They hung nine pixels past each side of the card. On a desktop that is
 * invisible: the card sits in a column with room around it. On a phone the
 * card fills the width, so those nine pixels were nine pixels of document
 * wider than the screen, and everything on the page laid itself out to that
 * wider box. Text then wrapped at a width the screen could not show, which is
 * why lines looked cut rather than wrapped.
 *
 * The holes now sit inside the card and are pulled outward with a transform.
 * A transform paints outside the box without making the box bigger, so the
 * notch looks exactly as it did and the document stays the width of the
 * screen. The card clips them as a second guarantee.
 */
.wptm-tk__perf::before,
.wptm-tk__perf::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wptm-page, Canvas);
	/* The rim of a punched hole: a hair of shadow inside its top edge. */
	box-shadow: inset 0 1px 2px rgba(15, 20, 28, .14);
}

.wptm-tk__perf::before {
	inset-inline-start: 0;
	transform: translate(-50%, -50%);
}

.wptm-tk__perf::after {
	inset-inline-end: 0;
	transform: translate(50%, -50%);
}

/* --- Details ------------------------------------------------------------- */

.wptm-tk__body {
	padding: 20px var(--tk-pad) 22px;
}

.wptm-tk__rows {
	display: grid;
	margin: 0 0 20px;
}

/*
 * A row per fact: mark, label, value.
 *
 * Not a grid with a fixed label column. A value like "Morocco desert tours
 * from Marrakech" needs to take two lines and push the label nowhere, and a
 * fixed column would either starve it or leave a gap beside "3 days". Flex
 * with a shrinkable label does both without a breakpoint.
 */
/*
 * A row is a grid, not a flex line.
 *
 * As flex, both columns could shrink, and the label shrank first because it
 * was told to. Combined with the break-word the card inherits, a squeezed
 * label broke inside its own word: "Desti / nation". A label that breaks
 * mid-word reads as a rendering fault, and it was one.
 *
 * auto sizes the label column to its content and stops. minmax(0, 1fr) gives
 * the value everything left and lets it wrap, which is right: the value is a
 * sentence and the label is a word.
 */
.wptm-tk__row {
	display: grid;
	/*
	 * max-content, not auto.
	 *
	 * auto lets a column shrink to its min-content when the row is tight, and
	 * min-content for text is its longest word, so the column could still be
	 * squeezed to exactly the width where a word has to break. That is how
	 * "Destination" kept rendering as "Desti / nation" after the first fix.
	 *
	 * max-content sizes the column to the label laid out on one line and does
	 * not shrink. There is then no width at which a break is possible, rather
	 * than a rule asking the browser not to break.
	 */
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-tk__row:last-child {
	border-block-end: 0;
}

.wptm-tk__rows dt {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--wptm-muted);
	/*
	 * Two rules, and they do different jobs.
	 *
	 * keep-all and overflow-wrap: normal forbid a break inside a word,
	 * whatever the card inherits. That is the actual defect: the card sets
	 * break-word for long values, the label inherited it, and a squeezed
	 * label split as "Desti / nation", which reads as a rendering fault.
	 *
	 * The cap stops the label taking so much of the row that the value has
	 * nowhere to go. Within it the label wraps between its words if a
	 * translation needs two lines, which is ordinary typesetting rather than
	 * a broken word.
	 */
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;

	/*
	 * The cap is a maximum, not a promise. A single long word, and Spanish has
	 * several ("Disponibilidad"), can exceed it, and keep-all means it will
	 * not be cut to fit. min-content is what makes that safe: the column is
	 * never asked to be narrower than the longest word it contains, so the
	 * word is never in a position where breaking is the only way out.
	 *
	 * The value column is minmax(0, 1fr) and absorbs the difference by
	 * wrapping, which is what it should do.
	 */
	/*
	 * The column no longer shrinks, so the label cannot be forced to wrap and
	 * nowrap simply states what is already true. keep-all stays as the
	 * guarantee: if a theme ever overrides the column sizing, a word still
	 * cannot be split down the middle.
	 */
	white-space: nowrap;
}


.wptm-tk__icon {
	flex: 0 0 auto;
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-tk__rows dd {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: end;
	min-width: 0;
	/*
	 * break-word, not anywhere. anywhere breaks a word the moment the line is
	 * tight, so "Marrakech" could split across two lines while there was still
	 * a space to break at. break-word only splits a word that cannot fit on a
	 * line of its own, which is the case it is meant for.
	 */
	overflow-wrap: break-word;
}

.wptm-tk__actions {
	display: grid;
	gap: 8px;
	margin: 0;
}

/*
 * The two-step form inside the ticket.
 *
 * Its legend is the panel's heading, as on SalmaDesign; the fields take the
 * ticket's width and the button under them is the ticket's button. A
 * WhatsApp line after it is set apart by a little space, not another rule.
 */
.wptm-tk__form {
	margin-block: 0 22px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--wptm-hairline);
}

/* Landing on it from the bar or the band moves focus here; the ring is for
   a keyboard, not for a jump. */
.wptm-tk__form:focus {
	outline: none;
}

.wptm-tk__form:focus-visible {
	outline: 2px solid var(--wptm-accent);
	outline-offset: 8px;
	border-radius: 4px;
}

.wptm-tk__form .wptm-salma__legend {
	margin-block-end: 8px;
	font-size: 15px;
}

.wptm-tk__actions--after {
	margin-block-start: 12px;
}

/* The closing band when the form lives in the ticket: a heading, a sentence
   and one button, no taller than that. */
.wptm-cta--compact {
	padding-block: clamp(30px, 4vw, 44px);
}

/* Full width inside the card at every size, which is what the card is for.
   The existing button styles, states and behaviour are untouched. */
.wptm-tour .wptm-tk__actions .wptm-btn--primary {
	min-height: 54px;
	border-radius: 12px;
	font-size: 16px;
}

.wptm-tk__btnicon {
	line-height: 0;
}

/*
 * The checked date, under the rows and above the button.
 *
 * The quietest line on the card. It is a reassurance read once by somebody who
 * went looking for it, and a reassurance that shouts stops being one.
 */
.wptm-tk__checked {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--wptm-faint);
}

.wptm-tk__checkedicon {
	flex: 0 0 auto;
	line-height: 0;
	color: var(--wptm-accent);
	opacity: .75;
}

.wptm-tk__checked time {
	font-weight: 600;
	color: var(--wptm-muted);
	white-space: nowrap;
}

/*
 * A linked value in the ticket.
 *
 * Underlined on hover only. A row of permanently underlined values would read
 * as a list of links rather than as a list of facts, and the facts are the
 * point; the link is a way onward for the reader who wants one.
 */
.wptm-tour .wptm-tk__rows dd a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wptm-tour .wptm-tk__rows dd a:hover,
.wptm-tour .wptm-tk__rows dd a:focus-visible {
	color: var(--wptm-accent);
	border-block-end-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {

	.wptm-tour .wptm-tk__rows dd a {
		transition: none;
	}
}

/*
 * The places under the title. Underlined on hover only, for the same reason as
 * the ticket rows: this reads as a statement of where the tour goes, and a
 * permanently underlined line would read as navigation.
 */
.wptm-tour .wptm-head__place a,
.wptm-tour .wptm-head__cats a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wptm-tour .wptm-head__place a:hover,
.wptm-tour .wptm-head__place a:focus-visible,
.wptm-tour .wptm-head__cats a:hover,
.wptm-tour .wptm-head__cats a:focus-visible {
	color: var(--wptm-accent);
	border-block-end-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {

	.wptm-tour .wptm-head__place a,
	.wptm-tour .wptm-head__cats a {
		transition: none;
	}
}

/*
 * A very narrow card stacks the row instead of squeezing it.
 *
 * With the longest translated label, "Disponibilidad" or "Point de départ",
 * a 238px sidebar leaves the value under eighty pixels, which turns a two word
 * answer into four lines. Stacking gives both the full width and costs one
 * line of height, which is the better trade at that size.
 *
 * A container query, because what matters is how wide the CARD is, not the
 * screen: this same card is 340px in a sidebar on a wide monitor and 358px on
 * a phone, and a screen width media query cannot tell those apart.
 */
.wptm-card--book {
	container-type: inline-size;
}

@container (max-width: 300px) {

	.wptm-tk__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.wptm-tk__rows dd {
		text-align: start;
		padding-inline-start: 32px;
	}
}

@supports not (container-type: inline-size) {

	/* Older browsers keep the two column row; the label still cannot break. */
	.wptm-tk__row {
		grid-template-columns: max-content minmax(0, 1fr);
	}
}

/* --- Stub code ------------------------------------------------------------ */

/*
 * The bars and the reference at the foot of the ticket.
 *
 * The bars stretch to the card because preserveAspectRatio is none on the
 * svg, so one drawing fits a 270px sidebar and a 396px phone without a second
 * size. Their colour is the text colour at low opacity rather than the accent:
 * a green barcode reads as a control, and this is paper.
 */
/*
 * The stub code.
 *
 * justify-items: center rather than the default stretch. With stretch, a box
 * that ends up sized to its content sits at the start of its column and the
 * space left over appears on one side, which is what put the barcode against
 * the left edge with a gap beside it. Centring the items makes that
 * impossible whatever width the drawing resolves to.
 */
.wptm-tk__code {
	display: grid;
	justify-items: center;
	gap: 9px;
	margin-block-start: 6px;
	padding-block-start: 18px;
	text-align: center;
	border-block-start: 1px dashed var(--wptm-hairline);
}

/*
 * The svg carries width="100%", so this only decides how wide the box is and
 * how dark the bars are. No rule here has to defeat an intrinsic width.
 */
/*
 * The wrapper and the drawing are both centred and both sized.
 *
 * Two elements decide this width: the span and the svg inside it. Sizing only
 * one leaves the other free to fall back to its own intrinsic width, and the
 * svg's is the sum of its bars, which is narrower than the box. Both are given
 * the same rule so neither can be the odd one out.
 */
.wptm-tk__bars {
	display: block;
	width: min(100%, 220px);
	margin-inline: auto;
	line-height: 0;
	color: color-mix(in srgb, currentColor 70%, transparent);
}

.wptm-tk__bars svg,
.wptm-tour .wptm-tk__bars .wptm-bars {
	display: block;
	width: 100%;
	max-width: none;
	height: 38px;
	margin-inline: auto;
}

.wptm-tk__ref {
	font-size: 12px;
	font-weight: 700;
	/* Spaced the way a printed reference is, so it reads as something to quote
	   rather than as a caption. */
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wptm-muted);
	font-variant-numeric: tabular-nums;
	/* The last character's tracking would otherwise push it off centre. */
	text-indent: .16em;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	.wptm-tk__bars {
		color: rgba(20, 24, 31, .6);
	}
}

/* --- Reassurance stub ---------------------------------------------------- */

/*
 * The foot of the ticket.
 *
 * The panel is plain and the cards inside it carry the warmth, rather than a
 * tinted panel holding untinted rows. Two tones instead of three, and each
 * reassurance reads as its own object the way it does on a printed stub.
 */
.wptm-tk__stub {
	display: grid;
	gap: 10px;
	padding: 20px var(--tk-pad) 30px;
	background: var(--wptm-surface);
}

.wptm-assure__item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0;
	padding: 15px 16px;
	border-radius: 12px;
	/* A warm neutral rather than the accent tint: these are quiet notes, and
	   tinting them green competes with the price and the button, which are
	   the two things on this card that should be green. */
	background: color-mix(in srgb, var(--wptm-accent) 6%, color-mix(in srgb, currentColor 4%, transparent));
	font-size: 13px;
	line-height: 1.55;
	color: var(--wptm-muted);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	.wptm-assure__item {
		background: rgba(20, 24, 31, .045);
	}
}

.wptm-assure__item strong {
	display: block;
	margin-block-end: 3px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wptm-text);
}

.wptm-assure__icon {
	flex: 0 0 auto;
	/* Aligned to the first line of the title, not to the top of the box. */
	margin-block-start: 3px;
	color: var(--wptm-accent);
	line-height: 0;
}


/* ========================================================== INFO CARDS === */

/*
 * A badge, a hairline, and the wording. The rule between the two columns is
 * what turns a plain box into something that looks composed; the badge gives
 * the card its subject at a glance without an illustration that would impose
 * a style on the host site.
 */
.wptm-info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 18px;
	align-items: start;
	padding: 26px 26px 26px 22px;
	border: 0;
	border-radius: 16px;
	background: var(--wptm-page, Canvas);
	box-shadow: 0 1px 2px rgba(15, 20, 28, .04), 0 16px 34px -28px rgba(15, 20, 28, .55);
}

.wptm-info__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wptm-tint);
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-info--calm .wptm-info__badge {
	background: color-mix(in srgb, var(--wptm-success) 12%, transparent);
	color: var(--wptm-success);
}

.wptm-info__body {
	grid-column: 2;
	min-width: 0;
}

.wptm-info__title {
	margin: 0 0 16px;
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.wptm-info__lead {
	margin: -6px 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wptm-muted);
}

.wptm-info__rows {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-info__rows li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-block-end: 1px dotted var(--wptm-border);
	list-style: none;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wptm-muted);
}

.wptm-info__rows li:first-child {
	padding-block-start: 0;
}

.wptm-info__rows li:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.wptm-info__rows li::marker {
	content: "";
}

.wptm-info__rows strong {
	color: var(--wptm-text);
	font-weight: 700;
}

.wptm-info__icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-info--calm .wptm-info__icon {
	color: var(--wptm-success);
}

/* Free wording from the editor: a marker per line, drawn in CSS so it works
   whatever markup the editor produced. */
.wptm-info__prose {
	font-size: 15px;
	line-height: 1.6;
}

.wptm-info__prose ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-info__prose ul li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 26px;
	border-block-end: 1px dotted var(--wptm-border);
	list-style: none;
}

.wptm-info__prose ul li:first-child {
	padding-block-start: 0;
}

.wptm-info__prose ul li:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.wptm-info__prose ul li::marker {
	content: "";
}

.wptm-info__prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 18px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wptm-success);
}

.wptm-info__prose ul li:first-child::before {
	inset-block-start: 7px;
}

.wptm-info__prose > p:first-child {
	margin-block-start: 0;
}

@media (max-width: 520px) {

	.wptm-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 22px;
	}

	.wptm-info__body {
		grid-column: 1;
	}

	.wptm-info__badge {
		width: 46px;
		height: 46px;
	}
}

/* ============================================================ TERM INDEX === */

/*
 * The two directory layouts: rows for tour types, cards for destinations.
 *
 * A section heading that is only larger than the text around it does not read
 * as a heading on a travel page, it reads as a paragraph somebody bolded. The
 * eyebrow, the rule and the measured lead below are what tell a reader they
 * have arrived somewhere, and they cost three elements.
 */
.wptm-types,
.wptm-places {
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	margin-block: clamp(24px, 4vw, 48px);
}

/*
 * Themes style list items, and Jannah in particular gives them bullets and an
 * indent. Every list in these two layouts is a layout device rather than a
 * list of prose, so the marker and the indent are removed at the top rather
 * than fought item by item further down.
 */
.wptm-types ul,
.wptm-types ol,
.wptm-places ul,
.wptm-places ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-types li,
.wptm-places li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.wptm-types li::before,
.wptm-places li::before {
	content: none;
}

/* --- The section header --------------------------------------------------- */

.wptm-types__head {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-block-end: clamp(6px, 1.6vw, 16px);
	text-align: center;
}

.wptm-types__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wptm-tint);
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-types__title {
	position: relative;
	margin: 0;
	padding-block-end: 16px;
	font-size: clamp(28px, 4.2vw, 46px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
}

/* A short rule with a diamond at its centre: a full width underline would cut
   the page in half, and nothing under the heading at all leaves it floating. */
.wptm-types__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	background: var(--wptm-accent);
	opacity: .55;
}

.wptm-types__title::before {
	content: "";
	position: absolute;
	inset-block-end: 3px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: min(180px, 60%);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wptm-border) 22%, var(--wptm-border) 78%, transparent);
}

.wptm-types__lead {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(15px, 1.8vw, 17.5px);
	line-height: 1.6;
	color: var(--wptm-muted);
}

/* ------------------------------------------------------------------ ROWS -- */

.wptm-type {
	display: grid;
	gap: clamp(16px, 2vw, 22px);
	padding: clamp(16px, 2.2vw, 24px);
	border: 1px solid var(--wptm-hairline);
	border-radius: 16px;
	background: var(--wptm-page, Canvas);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wptm-type:hover {
	border-color: color-mix(in srgb, var(--wptm-accent) 40%, transparent);
	box-shadow: 0 10px 30px -22px rgba(15, 20, 28, .5);
}

/*
 * The header sits above the tours, not beside them.
 *
 * Three columns on one line meant the cards got whatever was left after a
 * heading and a button, which on a normal screen was about two hundred pixels
 * each: photographs too small to show a place and titles wrapping over them.
 * Stacked, the same row gives every card three times the width.
 */
.wptm-type__intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 16px;
}

.wptm-type__icon {
	grid-row: 1 / span 2;
	margin-block-end: 0;
}

.wptm-type__more {
	grid-column: 3;
	grid-row: 1 / span 2;
	margin: 0;
}

.wptm-type__lead {
	grid-column: 2;
	max-width: 62ch;
}

@media (min-width: 700px) {

	.wptm-type__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	/* Room for a fourth once there is room for a fourth. */
	.wptm-type__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wptm-type__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-block-end: 14px;
	border-radius: 16px;
	background: var(--wptm-tint);
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-type__name {
	margin: 0;
	font-size: clamp(20px, 2.3vw, 25px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
}

.wptm-tour .wptm-type__name a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wptm-accent), var(--wptm-accent));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease, color .2s ease;
}

.wptm-tour .wptm-type__name a:hover,
.wptm-tour .wptm-type__name a:focus-visible {
	color: var(--wptm-accent);
	background-size: 100% 2px;
}

.wptm-type__lead {
	margin: 7px 0 0;
	max-width: 32ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wptm-muted);
}

.wptm-type__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-type__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-type__item::marker,
.wptm-places__item::marker {
	content: "";
}

.wptm-tour .wptm-type__card {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: var(--wptm-surface);
	aspect-ratio: 3 / 4;
	isolation: isolate;
}

@media (min-width: 700px) {

	.wptm-tour .wptm-type__card {
		aspect-ratio: 4 / 5;
	}
}

/* A tour with no photograph gets a tinted panel with its name on it, rather
   than an empty grey rectangle that reads as a broken image. */
.wptm-tour .wptm-type__card--plain {
	background:
		radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--wptm-accent) 82%, #fff) 0%, var(--wptm-accent) 65%);
	color: var(--wptm-on-accent);
}

.wptm-tour .wptm-type__card--plain::after {
	background: none;
}

.wptm-type__media,
.wptm-type__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wptm-type__img {
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.wptm-tour .wptm-type__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 38%, rgba(10, 14, 20, .82) 100%);
}

.wptm-tour .wptm-type__card:hover .wptm-type__img,
.wptm-tour .wptm-type__card:focus-visible .wptm-type__img {
	transform: scale(1.05);
}

.wptm-type__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: grid;
	gap: 7px;
	padding: 15px 16px;
}

.wptm-type__tour {
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 700;
	line-height: 1.32;
	color: inherit;
	overflow-wrap: anywhere;
	/* Three lines is a title; beyond that it is a paragraph on a photograph. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wptm-tour .wptm-type__card {
	color: #fff;
}

.wptm-type__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

.wptm-type__meta span {
	line-height: 0;
}

.wptm-type__more {
	margin: 0;
}

/*
 * Held on one line where there is room for it. A section name can be long,
 * so below the wide layout it is allowed to wrap rather than widen the row.
 */
.wptm-tour .wptm-type__more .wptm-btn {
	width: 100%;
	white-space: nowrap;
}

@media (max-width: 999px) {

	.wptm-tour .wptm-type__more .wptm-btn {
		white-space: normal;
		text-align: center;
	}
}

/* ----------------------------------------------------------------- CARDS -- */

.wptm-places__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-places__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-place {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	background: var(--wptm-surface);
	color: #fff;
	transition: box-shadow .25s ease;
}

.wptm-place:hover {
	box-shadow: 0 18px 40px -26px rgba(15, 20, 28, .75);
}

@media (min-width: 641px) {

	.wptm-place {
		aspect-ratio: 3 / 2;
	}
}

.wptm-place__media,
.wptm-place__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.wptm-place__img {
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

.wptm-place:hover .wptm-place__img {
	transform: scale(1.05);
}

.wptm-place::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 14, 20, 0) 32%, rgba(10, 14, 20, .55) 62%, rgba(10, 14, 20, .88) 100%);
}

.wptm-place--plain {
	background:
		radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--wptm-accent) 88%, #fff) 0%, var(--wptm-accent) 60%);
	color: var(--wptm-on-accent);
}

.wptm-place--plain::after {
	background: none;
}

.wptm-place--more {
	background: var(--wptm-tint);
	color: var(--wptm-text);
	box-shadow: inset 0 0 0 1px var(--wptm-border);
}

.wptm-place--more::after {
	background: none;
}

.wptm-place__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(18px, 2.4vw, 26px);
}

.wptm-place__name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(21px, 2.7vw, 28px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.03em;
	color: inherit;
	overflow-wrap: anywhere;
	text-shadow: 0 1px 12px rgba(8, 12, 18, .35);
}

.wptm-place--more .wptm-place__name,
.wptm-place--plain .wptm-place__name {
	text-shadow: none;
}

.wptm-place__pin {
	flex: 0 0 auto;
	line-height: 0;
	opacity: .92;
}

.wptm-place__lead {
	margin: 9px 0 0;
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.55;
	color: inherit;
	opacity: .93;
}

.wptm-place__go {
	margin: 18px 0 0;
}

.wptm-tour a.wptm-btn--light {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #14181f;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(8, 12, 18, .18);
	transition: transform .18s ease, color .18s ease, gap .18s ease;
}

.wptm-tour a.wptm-btn--light:hover,
.wptm-tour a.wptm-btn--light:focus-visible {
	background: #fff;
	color: var(--wptm-accent);
	transform: translateY(-2px);
	gap: 14px;
}

.wptm-place--more .wptm-btn--light {
	box-shadow: inset 0 0 0 1px var(--wptm-border);
}

/* -------------------------------------------------------------- NARROWER -- */

@media (max-width: 999px) {

	/* The button drops under the heading rather than squeezing it. */
	.wptm-type__intro {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.wptm-type__more {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-block-start: 4px;
	}

	.wptm-tour .wptm-type__more .wptm-btn {
		width: auto;
	}

	.wptm-type__icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}

	.wptm-type__lead {
		max-width: none;
		margin: 0;
	}
}

/*
 * Below the three column breakpoint, not overlapping it: 700 to 720 used to
 * match both rules and the outcome depended on which came last in the file.
 */
@media (max-width: 699px) {

	/* The examples become a row the thumb pushes. The row scrolls; the page
	   never does. */
	.wptm-type__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 68%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(clamp(16px, 2.2vw, 24px) * -1);
		padding-inline: clamp(16px, 2.2vw, 24px);
	}

	.wptm-type__list::-webkit-scrollbar {
		display: none;
	}

	.wptm-type__item {
		scroll-snap-align: start;
	}
}

@media (max-width: 420px) {

	.wptm-type__list {
		grid-auto-columns: 80%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wptm-type,
	.wptm-place,
	.wptm-type__img,
	.wptm-place__img,
	.wptm-tour a.wptm-btn--light,
	.wptm-tour .wptm-type__name a {
		transition: none;
	}

	.wptm-type:hover .wptm-type__img,
	.wptm-place:hover .wptm-place__img,
	.wptm-tour a.wptm-btn--light:hover {
		transform: none;
	}
}

/* ============================================================== ARCHIVE === */

/*
 * The section pages. Quiet on purpose: a listing is scanned, not read, and
 * anything decorative competes with the photographs it sits between.
 */
.wptm-archive {
	display: grid;
	gap: clamp(20px, 3vw, 34px);
	--wptm-gutter: clamp(14px, 4vw, 20px);
	/* Same boundary as a tour page. There is no fixed bar here, so it can sit
	   on the wrapper itself. */
	overflow-x: clip;
}

.wptm-types,
.wptm-places {
	overflow-x: clip;
}

@supports not (overflow: clip) {

	.wptm-archive,
	.wptm-types,
	.wptm-places {
		overflow-x: hidden;
	}
}

/* --- Hero ----------------------------------------------------------------- */

.wptm-arc__hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(18px, 3vw, 34px);
}

.wptm-arc__hero--image {
	min-height: clamp(240px, 34vw, 380px);
	display: flex;
	align-items: flex-end;
	padding: clamp(24px, 4vw, 52px);
	border-radius: 18px;
	overflow: hidden;
	color: #fff;
}

.wptm-arc__heroimg,
.wptm-arc__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

/*
 * Two layers over the photograph: a scrim rising from the foot, where the
 * words are, and a faint darkening across the whole so a pale sky does not
 * swallow the breadcrumb. Neither is opaque enough to flatten the picture.
 */
.wptm-arc__hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 14, 20, .22) 0%, rgba(10, 14, 20, .08) 30%, rgba(10, 14, 20, .82) 100%);
}

.wptm-arc__herotext {
	max-width: 62ch;
}

/*
 * The kind of page, over its name.
 *
 * "Marrakech" alone could head a destination page or a departure page. A
 * small word above says which, and it is set in the accent so it is read as
 * a label rather than as the first line of the title.
 */
.wptm-arc__kind {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wptm-accent);
}

.wptm-arc__hero--image .wptm-arc__kind {
	color: rgba(255, 255, 255, .82);
}

.wptm-arc__title {
	margin: 0;
	font-size: clamp(29px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: inherit;
	text-wrap: balance;
}

.wptm-arc__hero--image .wptm-arc__title {
	text-shadow: 0 1px 14px rgba(8, 12, 18, .4);
}

.wptm-arc__lead {
	margin-block-start: 12px;
	font-size: clamp(15px, 1.8vw, 17.5px);
	line-height: 1.65;
	color: var(--wptm-muted);
	text-wrap: pretty;
}

.wptm-arc__hero--image .wptm-arc__lead {
	color: rgba(255, 255, 255, .92);
}

.wptm-arc__lead p:first-child {
	margin-block-start: 0;
}

.wptm-arc__lead p:last-child {
	margin-block-end: 0;
}

/* --- Filters -------------------------------------------------------------- */

/*
 * The drawer.
 *
 * A details element, open in the markup. On a wide screen the summary is not
 * drawn and the rows sit where they always did; on a phone the script closes
 * it and the summary is the one line that opens it. The marker the browser
 * draws is replaced by a chevron that turns, so the state is visible without
 * a triangle that no other control on the page uses.
 */
.wptm-arc__drawer {
	display: grid;
	gap: 14px;
}

.wptm-arc__toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 8px 14px;
	border: 1px solid var(--wptm-border);
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.wptm-arc__toggle::-webkit-details-marker {
	display: none;
}

.wptm-arc__toggle::marker {
	content: "";
}

.wptm-arc__toggleicon {
	line-height: 0;
	color: var(--wptm-accent);
}

.wptm-arc__togglelabel {
	flex: 0 0 auto;
}

.wptm-arc__togglecount {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: 999px;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.wptm-arc__togglechev {
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
	color: var(--wptm-faint);
}

.wptm-arc__drawer[open] .wptm-arc__togglechev {
	transform: translateY(2px) rotate(225deg);
}

.wptm-arc__filters {
	display: grid;
	gap: 12px;
}

.wptm-arc__filter {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.wptm-arc__filterlabel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-faint);
	white-space: nowrap;
}

.wptm-arc__options {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-arc__options li {
	margin: 0;
	list-style: none;
}

.wptm-arc__options li::marker {
	content: "";
}

.wptm-tour .wptm-arc__option {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 7px 14px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 999px;
	background: var(--wptm-surface);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wptm-muted);
	white-space: nowrap;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.wptm-tour .wptm-arc__option:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
	background: var(--wptm-tint);
}

.wptm-tour .wptm-arc__option.is-on {
	background: var(--wptm-accent);
	border-color: var(--wptm-accent);
	color: var(--wptm-on-accent);
}

/*
 * "Any" is the default, not a choice, and it should not look like one.
 *
 * Filled in the accent it competed with the filter actually applied in the
 * row beneath, so two rows read as two choices when one had been made. When
 * it is current it is outlined in the text colour instead: still plainly
 * the state of the row, no longer a highlight.
 */
.wptm-tour .wptm-arc__option--any.is-on {
	background: transparent;
	border-color: var(--wptm-text);
	color: var(--wptm-text);
}

@media (max-width: 782px) {

	.wptm-arc__toggle {
		display: flex;
	}
}

@media (max-width: 640px) {

	.wptm-arc__filter {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	/* The chips become a row the thumb pushes, so eight of them do not become
	   four lines of wrapping. */
	.wptm-arc__options {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		/* Pulled out by exactly the padding put back, so the row can scroll
		   without the gutter widening its parent. */
		--chip-gutter: 4px;
		margin-inline: calc(var(--chip-gutter) * -1);
		padding: 2px var(--chip-gutter);
	}

	.wptm-arc__options::-webkit-scrollbar {
		display: none;
	}

	.wptm-arc__options li {
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wptm-tour .wptm-arc__option,
	.wptm-arc__togglechev {
		transition: none;
	}
}

/* --- The bar -------------------------------------------------------------- */

.wptm-arc__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-block-end: 10px;
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-arc__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	min-width: 0;
}

.wptm-arc__count {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/*
 * The applied filters, beside the count they produced.
 *
 * Each is a chip with a cross, and the whole chip is the link that removes
 * it: a cross eleven pixels wide is not a target. The axis is printed small
 * before the term so "Day trips" and "Marrakech" say what they are.
 */
.wptm-arc__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__active li {
	margin: 0;
	list-style: none;
}

/* In the empty state the chips sit under the sentence, centred with it. */
.wptm-arc__active--centred {
	justify-content: center;
	margin-block-end: 20px;
}

.wptm-arc__active li::marker {
	content: "";
}

.wptm-tour .wptm-arc__chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 8px 4px 11px;
	border: 1px solid color-mix(in srgb, var(--wptm-accent) 40%, transparent);
	border-radius: 999px;
	background: var(--wptm-tint);
	font-size: 13px;
	font-weight: 600;
	color: var(--wptm-accent-dark);
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease;
}

.wptm-tour .wptm-arc__chip > span[aria-hidden] {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wptm-tour .wptm-arc__chip:hover,
.wptm-tour .wptm-arc__chip:focus-visible {
	border-color: var(--wptm-accent);
	background: color-mix(in srgb, var(--wptm-accent) 18%, transparent);
}

.wptm-arc__chipkind {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wptm-muted);
}

.wptm-arc__chipkind::after {
	content: ":";
}

.wptm-arc__chipx {
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-inline-start: 2px;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: var(--wptm-accent);
}

.wptm-tour .wptm-arc__chip:hover .wptm-arc__chipx {
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
}

.wptm-tour .wptm-arc__chipclear {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wptm-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wptm-faint);
}

.wptm-tour .wptm-arc__chipclear:hover,
.wptm-tour .wptm-arc__chipclear:focus-visible {
	color: var(--wptm-accent);
	text-decoration-color: currentColor;
}

.wptm-arc__sort {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
}

.wptm-arc__sort label {
	color: var(--wptm-muted);
}

.wptm-tour .wptm-arc__sort select {
	padding: 8px 12px;
	border: 1px solid var(--wptm-border);
	border-radius: 8px;
	background: var(--wptm-page, Canvas);
	color: inherit;
	font: inherit;
	font-size: 14px;
	min-height: 40px;
}

/* The script hides the button; without a script it is how the form is sent. */
.wptm-arc__sort.is-live button {
	display: none;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	.wptm-tour .wptm-arc__chip {
		border-color: var(--wptm-accent);
	}

	.wptm-tour .wptm-arc__chip:hover,
	.wptm-tour .wptm-arc__chip:focus-visible {
		background: var(--wptm-tint);
	}
}

/* --- The grid ------------------------------------------------------------- */

.wptm-arc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-arc__item::marker {
	content: "";
}

.wptm-card2 {
	height: 100%;
}

/*
 * One card, one link.
 *
 * A column: the photograph, then the body, with the body free to grow so a
 * short card and a long card in the same row end on the same line. It used
 * to be a grid of three fixed rows, which put the price row in the middle of
 * any card that had no excerpt.
 */
.wptm-tour .wptm-card2__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wptm-hairline);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wptm-page, Canvas);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}

.wptm-tour .wptm-card2__link:hover,
.wptm-tour .wptm-card2__link:focus-visible {
	border-color: color-mix(in srgb, var(--wptm-accent) 45%, transparent);
	box-shadow: 0 18px 38px -24px rgba(15, 20, 28, .55);
	transform: translateY(-3px);
}

/* --- The photograph ------------------------------------------------------- */

.wptm-card2__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wptm-surface);
	aspect-ratio: 3 / 2;
}

.wptm-card2__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.wptm-tour .wptm-card2__link:hover .wptm-card2__img,
.wptm-tour .wptm-card2__link:focus-visible .wptm-card2__img {
	transform: scale(1.04);
}

/*
 * A tour with no photograph yet.
 *
 * A blank rectangle reads as an image that failed to load. A faint compass in
 * the middle of it reads as a place a photograph will go, which is what it is.
 */
.wptm-card2__media--empty {
	display: grid;
	place-items: center;
}

.wptm-card2__blank {
	line-height: 0;
	color: var(--wptm-faint);
}

/*
 * The two chips over the picture.
 *
 * The duration sits at the foot, where a caption goes, on the page colour so
 * it reads as a label rather than a button. It used to sit beside the title,
 * where a long title and "8 days / 7 nights" fought for the same line. The
 * badge sits at the head in the accent, because it is the one thing on the
 * card the agency chose to shout, and it is absent unless one was written.
 */
.wptm-card2__days,
.wptm-card2__badge {
	position: absolute;
	inset-inline-start: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 24px);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wptm-card2__days {
	inset-block-end: 12px;
	background: var(--wptm-page, Canvas);
	color: var(--wptm-text);
	box-shadow: 0 1px 2px rgba(15, 20, 28, .12);
}

.wptm-card2__days span {
	line-height: 0;
	color: var(--wptm-accent);
}

.wptm-card2__badge {
	inset-block-start: 12px;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --- The body ------------------------------------------------------------- */

.wptm-card2__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
	padding: 15px 17px 17px;
}

/*
 * The line above the title: where the tour goes, and what guests thought.
 *
 * Both small, both quiet, so the title underneath stays the heaviest thing on
 * the card. They sit at the two ends of the line; when only one is present it
 * keeps its end.
 */
.wptm-card2__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-width: 0;
}

/* The place gives way before the rating does: a name can be cut short
   with an ellipsis and still be read, a number cannot. */
/* A block rather than a flex row: the ellipsis only works on inline
   content, and a flex item is not that. */
.wptm-card2__place {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wptm-accent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wptm-card2__place span {
	display: inline-block;
	margin-inline-end: 4px;
	line-height: 0;
	vertical-align: -2px;
}

.wptm-card2__rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wptm-card2__rating-icon {
	line-height: 0;
	color: var(--wptm-accent);
}

.wptm-card2__rating-icon svg {
	fill: currentColor;
}

.wptm-card2__rating-count {
	font-weight: 500;
	color: var(--wptm-faint);
}

.wptm-card2__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
	transition: color .2s ease;
}

.wptm-tour .wptm-card2__link:hover .wptm-card2__title,
.wptm-tour .wptm-card2__link:focus-visible .wptm-card2__title {
	color: var(--wptm-accent-dark);
}

/*
 * The excerpt is held to two lines.
 *
 * A grid of cards is read across as much as down, and the foot of each one
 * should sit on the same line as its neighbours'. An excerpt of one line
 * beside an excerpt of four is what breaks that, so the text is cut at two
 * and the foot is pushed to the bottom regardless.
 */
.wptm-card2__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wptm-muted);
}

.wptm-card2__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 12px;
	margin-block-start: auto;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--wptm-hairline);
}

/*
 * The price is three words stacked into one figure: the small "from" over
 * the amount, and the basis beside it. The amount is the largest type on the
 * card below the title, because it is the second thing a reader looks for.
 */
.wptm-card2__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 5px;
	min-width: 0;
	line-height: 1.15;
}

.wptm-card2__from {
	flex: 0 0 100%;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-card2__price strong {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.wptm-card2__basis {
	font-size: 12px;
	color: var(--wptm-muted);
}

/* No price listed: said in words, in the muted weight, so the slot is not
   simply empty. Nothing is invented — the tour is booked on request. */
.wptm-card2__price--quote {
	font-size: 13px;
	font-weight: 600;
	color: var(--wptm-muted);
}

.wptm-card2__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wptm-accent);
	white-space: nowrap;
	transition: gap .18s ease;
}

.wptm-tour .wptm-card2__link:hover .wptm-card2__cta,
.wptm-tour .wptm-card2__link:focus-visible .wptm-card2__cta {
	gap: 11px;
}

/*
 * An arrow points along the reading direction, so it turns with it.
 *
 * Shared by the archive card, the "view all" buttons on the term index and
 * the destination cards, which all print the same character.
 */
.wptm-arrow {
	display: inline-block;
}

[dir="rtl"] .wptm-arrow {
	transform: scaleX(-1);
}

/*
 * Cards arrive as they are scrolled to.
 *
 * A scroll-driven animation rather than a script: the card fades and lifts
 * over the first third of its entry into the viewport and is fully drawn
 * before a reader could focus on it. A card already in view when the page
 * paints is past the range and shows at once, so there is nothing to wait
 * for on the first screen. A browser without the timeline draws every card
 * as before, and a reader who asked for less motion gets none.
 */
@supports (animation-timeline: view()) {

	@media screen and (prefers-reduced-motion: no-preference) {

		.wptm-arc__item {
			animation: wptm-arc-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}

@keyframes wptm-arc-rise {

	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Pagination ----------------------------------------------------------- */

.wptm-arc__pages ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__pages li {
	margin: 0;
	list-style: none;
}

.wptm-arc__pages li::marker {
	content: "";
}

.wptm-tour .wptm-arc__pages a,
.wptm-tour .wptm-arc__pages span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.wptm-tour .wptm-arc__pages a:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-tour .wptm-arc__pages .current {
	background: var(--wptm-accent);
	border-color: var(--wptm-accent);
	color: var(--wptm-on-accent);
}

.wptm-tour .wptm-arc__pages .dots {
	border-color: transparent;
	min-width: 24px;
}

/* --- Empty ---------------------------------------------------------------- */

.wptm-arc__empty {
	padding: clamp(34px, 6vw, 64px) clamp(20px, 4vw, 40px);
	border: 1px dashed var(--wptm-border);
	border-radius: 16px;
	text-align: center;
}

.wptm-arc__emptytitle {
	margin: 0 0 8px;
	font-size: clamp(18px, 2.4vw, 23px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.wptm-arc__emptylead {
	max-width: 46ch;
	margin: 0 auto 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wptm-muted);
}

/* --- Onward --------------------------------------------------------------- */

.wptm-arc__more {
	padding-block-start: clamp(18px, 2.6vw, 28px);
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-arc__moretitle {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-arc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__chips li {
	margin: 0;
	list-style: none;
}

.wptm-arc__chips li::marker {
	content: "";
}

.wptm-tour .wptm-arc__chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 15px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, color .18s ease;
}

.wptm-tour .wptm-arc__chips a:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-arc__chipcount {
	font-size: 12px;
	color: var(--wptm-faint);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {

	.wptm-arc__bar {
		align-items: stretch;
		flex-direction: column;
	}

	.wptm-arc__summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.wptm-arc__sort {
		justify-content: space-between;
	}

	.wptm-tour .wptm-arc__sort select {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wptm-tour .wptm-card2__link,
	.wptm-card2__img,
	.wptm-card2__title,
	.wptm-card2__cta,
	.wptm-tour .wptm-arc__chips a {
		transition: none;
	}

	.wptm-tour .wptm-card2__link:hover,
	.wptm-tour .wptm-card2__link:focus-visible,
	.wptm-tour .wptm-card2__link:hover .wptm-card2__img,
	.wptm-tour .wptm-card2__link:focus-visible .wptm-card2__img {
		transform: none;
	}
}

/* ================================================================ PROSE === */

.wptm-prose {
	font-size: 17px;
	line-height: 1.8;
	max-width: 70ch;
}

.wptm-prose > * + * {
	margin-block-start: 1.1em;
}

.wptm-prose > :first-child {
	margin-block-start: 0;
}

.wptm-prose h2 {
	margin-block-start: 1.8em;
	font-size: clamp(18px, 2.1vw, 23px);
	font-weight: 800;
	line-height: 1.25;
}

.wptm-prose h3 {
	margin-block-start: 1.5em;
	font-size: clamp(17px, 1.9vw, 18px);
	font-weight: 700;
	line-height: 1.35;
}

.wptm-prose ul,
.wptm-prose ol {
	padding-inline-start: 1.3em;
}

.wptm-prose ul {
	list-style: disc;
}

.wptm-prose ol {
	list-style: decimal;
}

.wptm-prose li {
	list-style: inherit;
	margin-block-end: .45em;
}

.wptm-prose li::marker {
	color: var(--wptm-accent);
}

.wptm-prose blockquote {
	margin-inline-start: 0;
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--wptm-accent);
	color: var(--wptm-muted);
	font-style: normal;
}

.wptm-prose img {
	border-radius: var(--wptm-radius-sm);
}

.wptm-prose--tight {
	font-size: 15.5px;
	line-height: 1.7;
	max-width: none;
	color: inherit;
}

.wptm-prose--tight ul {
	padding-inline-start: 1.1em;
}


/* ================================================================== FAQ === */

.wptm-faq__item {
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-faq__item:first-child {
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
}

.wptm-faq__summary::-webkit-details-marker {
	display: none;
}

.wptm-faq__question {
	display: inline;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.wptm-faq__sign {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}

.wptm-faq__sign::before,
.wptm-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--wptm-accent);
	transition: opacity .2s ease;
}

.wptm-faq__sign::before {
	inset-inline-start: 0;
	inset-block-start: 6px;
	width: 14px;
	height: 2px;
}

.wptm-faq__sign::after {
	inset-inline-start: 6px;
	inset-block-start: 0;
	width: 2px;
	height: 14px;
}

.wptm-faq__item[open] .wptm-faq__sign::after {
	opacity: 0;
}

.wptm-faq__answer {
	padding-block-end: 20px;
}

/* ============================================================== RELATED === */

.wptm-related {
	display: grid;
	/* 190 rather than 230: in a reading column beside a sidebar, three cards
	   of 190 fit where three of 230 did not, and two plus an orphan is the
	   one arrangement that looks wrong. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-related__item {
	margin: 0;
	list-style: none;
}

.wptm-related__item::marker {
	content: "";
}

.wptm-tour a.wptm-related__link,
.wptm-tour a.wptm-related__link:visited {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.wptm-related__media {
	display: block;
	border-radius: var(--wptm-radius);
	overflow: hidden;
}

.wptm-related__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wptm-tour a.wptm-related__link:hover .wptm-related__img {
		transform: scale(1.04);
	}
}

.wptm-related__place {
	display: block;
	padding-block-start: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-accent);
}

.wptm-related__title {
	display: block;
	padding-block-start: 5px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.wptm-related__meta {
	color: var(--wptm-muted);
}

.wptm-related__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-block-start: auto;
	padding-block-start: 10px;
	font-size: 13px;
	color: var(--wptm-muted);
}

.wptm-related__price strong {
	font-size: 15px;
	font-weight: 700;
	color: inherit;
}

.wptm-related__cta {
	display: block;
	padding-block-start: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wptm-accent);
}

.wptm-guides {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.wptm-guides li {
	margin: 0;
	list-style: none;
}

.wptm-guides li::marker {
	content: "";
}

.wptm-subhead {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-muted);
}

.wptm-subhead--spaced {
	margin-block-start: 36px;
}

/* ================================================================== CTA === */

.wptm-cta {
	margin-block-start: var(--wptm-gap);
	padding: clamp(40px, 5vw, 68px) clamp(20px, 5vw, 60px);
	border-radius: var(--wptm-radius);
	background: var(--wptm-tint);
	text-align: center;
}

.wptm-cta__title {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.2;
}

.wptm-cta__lead {
	max-width: 50ch;
	margin: 0 auto 28px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--wptm-muted);
}

.wptm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	margin: 0;
}

.wptm-cta__form {
	max-width: 620px;
	margin-inline: auto;
	text-align: start;
}

/*
 * The form's first legend is the band's heading said again.
 *
 * The booking part opens its first step with "Ready to book this tour?",
 * which is the right heading for the panel in a sidebar and the wrong one
 * directly under an h2 that already says it. It stays in the markup for a
 * screen reader, which announces the fieldset by it, and leaves the page.
 */
.wptm-cta__form .wptm-salma__step[data-wptm-salma-step="1"] > .wptm-salma__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wptm-cta__note {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--wptm-faint);
}

/* =========================================================== MOBILE BAR === */

/*
 * Most travel sites carry a floating chat button in one bottom corner. It is
 * not ours to move, so the bar keeps clear of it: the reserved corner is a
 * variable, set to nothing by default and to the width of a chat bubble the
 * moment one is likely to be there.
 *
 *   .wptm-tour { --wptm-bar-clear: 76px; }
 *
 * is all a site with a chat widget on the other side needs.
 */
/*
 * The floating booking bar.
 *
 * A card that sits above the page rather than a strip drawn across the bottom
 * of it. Two differences, and both are the reason it reads as part of a
 * designed page instead of a plugin:
 *
 *   - it stands away from all three edges, so the page continues visibly
 *     underneath and the bar looks placed rather than stuck on
 *   - it is a rounded card with its own shadow, which is the same object the
 *     rest of the page is built from
 *
 * Nothing here is fixed width. The facts shrink, the button does not, because
 * a bar whose button has been squeezed to "Check av..." has failed at the one
 * thing it exists for.
 */
/*
 * The bar exists for a phone and only for a phone.
 *
 * On a desktop the booking panel is already in the sidebar, in view, for the
 * whole page. A second permanent copy of the same button across the bottom is
 * one more thing between the reader and the words, and it earns nothing: the
 * action it offers was never more than a scroll away.
 *
 * Hidden in CSS rather than by not rendering it, so a theme that wants it back
 * can say so in one line, and so the script does not have to know.
 */
@media (min-width: 783px) {

	.wptm-bar {
		display: none;
	}
}

.wptm-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90;
	/* The bar is the width of the screen; the card inside it is inset. This
	   separation is what keeps a fixed element from ever being wider than the
	   viewport whatever is inside it. */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
	padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
	padding-inline-start: calc(max(10px, env(safe-area-inset-left)) + var(--wptm-bar-clear, 0px));
	pointer-events: none;
}

.wptm-bar__card {
	display: flex;
	align-items: center;
	gap: 12px;
	/* More room on the price side than the button side: the button has its own
	   padding and a background, the price has neither. */
	padding-block: 9px;
	padding-inline: 16px 9px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 16px;
	background: var(--wptm-page, Canvas);
	box-shadow:
		0 1px 2px rgba(15, 20, 28, .06),
		0 12px 28px -12px rgba(15, 20, 28, .28);
	pointer-events: auto;
	min-width: 0;
}

/* --- The price ------------------------------------------------------------ */

.wptm-bar__price {
	display: grid;
	gap: 1px;
	flex: 1 1 auto;
	min-width: 0;
	padding-inline-start: 4px;
}

.wptm-bar__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wptm-faint);
	white-space: nowrap;
}

.wptm-bar__value {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The struck through price belongs on the tour page, not in a bar five
   centimetres wide. */
.wptm-bar__value del {
	display: none;
}

/* --- The action ----------------------------------------------------------- */

.wptm-tour .wptm-bar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Does not shrink: the button is the point of the bar. */
	flex: 0 0 auto;
	min-height: 48px;
	padding-inline: 20px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* No price to sit beside: the button takes the card. */
.wptm-tour .wptm-bar__cta--wide {
	flex: 1 1 auto;
}

.wptm-bar__ctaicon {
	line-height: 0;
}

/* --- Narrow --------------------------------------------------------------- */

@media (max-width: 380px) {

	.wptm-tour .wptm-bar__cta {
		padding-inline: 16px;
	}

	.wptm-bar__value {
		font-size: 17px;
	}
}

@media (max-width: 340px) {

	/* The icon inside the button goes before the words do. */
	.wptm-bar__ctaicon {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.wptm-bar__card {
		transition: box-shadow .2s ease;
	}
}

/* ============================================================= LIGHTBOX === */

.wptm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(12, 15, 20, .95);
}

.wptm-lightbox[hidden] {
	display: none;
}

.wptm-lightbox__img {
	max-width: 100%;
	max-height: 84vh;
	object-fit: contain;
	border-radius: var(--wptm-radius-sm);
}

.wptm-lightbox__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 20px;
	padding-inline: 70px;
	text-align: center;
	font-size: 14px;
	color: #eef1f4;
}

.wptm-lightbox__btn {
	position: absolute;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.wptm-lightbox__btn:hover {
	background: rgba(255, 255, 255, .26);
}

.wptm-lightbox__btn--close {
	inset-block-start: 20px;
	inset-inline-end: 20px;
}

.wptm-lightbox__btn--prev {
	inset-inline-start: 16px;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.wptm-lightbox__btn--next {
	inset-inline-end: 16px;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.wptm-lock {
	overflow: hidden;
}

/* ================================================================ PRINT === */

@media print {

	.wptm-bar,
	.wptm-layout__side,
	.wptm-cta__actions,
	.wptm-gallery__nav,
	.wptm-gallery__thumbs,
	.wptm-gallery--empty {
		display: none !important;
	}

	/*
	 * The booking ticket is a thing to use, not a thing to read, and on
	 * paper its button does nothing. The classic layouts hide the whole
	 * sidebar above; the designs keep their own asides, so the ticket part
	 * is hidden here and the meeting point and the notes, which a reader
	 * wants on paper, stay.
	 */
	.wptm-side__book,
	.wptm-tk__no {
		display: none !important;
	}

	/*
	 * Where a ticket head does print — a design that keeps its card — it
	 * prints as ink on paper: no accent fill, no hatching, no shadow behind
	 * the figure, a rule under it. The Salma ticket has its own print rules
	 * in salma.css.
	 */
	.wptm-tk__price {
		background: none !important;
		color: inherit !important;
		border-block-end: 1px solid #000;
		text-shadow: none;
	}

	.wptm-tk__value,
	.wptm-tk__from,
	.wptm-tk__basis {
		color: inherit !important;
		text-shadow: none !important;
	}

	.wptm-tk__stub {
		background: none !important;
	}

	.wptm-tour {
		padding-block-end: 0;
	}

	.wptm-block {
		break-inside: avoid;
	}
}

/* ========================================================== PATTERN ==== */

/*
 * The zellige ground, wherever a picture is missing.
 *
 * The svg fills its box and sits behind whatever the box holds — the
 * compass on a card, nothing on a gallery stage. It is in the current
 * colour at a fraction of its strength, so on a light page it is a faint
 * grey lattice and on a dark one a faint light one, with the accent at the
 * centre of each star either way.
 */
.wptm-pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.wptm-gallery__stage--empty {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wptm-radius);
	background: var(--wptm-surface);
	color: var(--wptm-text);
}

.wptm-gallery__blank {
	position: relative;
	line-height: 0;
	color: var(--wptm-faint);
}

.wptm-related__media--empty {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--wptm-surface);
	color: var(--wptm-text);
}

.wptm-card2__media--empty {
	color: var(--wptm-text);
}

.wptm-card2__blank {
	position: relative;
}

/* ======================================================== SECTION NAV === */

/*
 * One line of the page's headings, stuck under the theme's header.
 *
 * It sits on the page colour with a hairline under it, and takes a shadow
 * only once it is actually stuck — the script marks that — so at rest it is
 * a row of links and in motion it is a bar. The links are pills; the one for
 * the section in view is filled with the tint. On a phone the row scrolls
 * sideways under the thumb with the scrollbar hidden, and the script keeps
 * the current pill in view.
 */
.wptm-nav {
	position: sticky;
	top: var(--wptm-offset, 0px);
	z-index: 30;
	margin: 0 0 var(--wptm-gap);
	background: var(--wptm-page, Canvas);
	border-block-end: 1px solid var(--wptm-hairline);
	transition: box-shadow .2s ease;
}

.wptm-nav.is-stuck {
	box-shadow: 0 10px 24px -20px rgba(15, 20, 28, .45);
}

.wptm-nav__list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	/* A little room at the ends so the first and last pills are not cut by
	   the fade below. */
	mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

.wptm-nav__list::-webkit-scrollbar {
	display: none;
}

.wptm-nav__item {
	flex: 0 0 auto;
	margin: 0;
	list-style: none;
	scroll-snap-align: start;
}

.wptm-nav__item::marker {
	content: "";
}

.wptm-tour .wptm-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wptm-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s ease, background-color .16s ease;
}

.wptm-tour .wptm-nav__link:hover {
	color: var(--wptm-text);
	background: var(--wptm-surface);
}

.wptm-tour .wptm-nav__link:focus-visible {
	outline: 2px solid var(--wptm-accent);
	outline-offset: 2px;
}

.wptm-tour .wptm-nav__link.is-current {
	color: var(--wptm-accent-dark);
	background: var(--wptm-tint);
}

/* The first and last pills sit flush with the text edge, not fourteen
   pixels in, on a screen wide enough that nothing needs to scroll. */
@media (min-width: 783px) {

	.wptm-nav__list {
		mask-image: none;
		-webkit-mask-image: none;
	}
}

@media (max-width: 782px) {

	.wptm-nav:not(.wptm-nav--band) {
		/* Out to the glass on a phone, so the row scrolls under the thumb
		   from edge to edge, with the same gutter put back inside. */
		margin-inline: calc(var(--wptm-gutter) * -1);
		padding-inline: var(--wptm-gutter);
	}
}

/* The band form sits at the top level of a design, full width, with the
   row inside the design's own wrapper; the wrapper brings the gutters. */
.wptm-nav--band {
	margin: 0;
}

.wptm-nav--band .wptm-nav__list {
	padding-block: 8px;
}

@media (prefers-reduced-motion: reduce) {

	.wptm-nav,
	.wptm-tour .wptm-nav__link {
		transition: none;
	}
}

@media print {

	.wptm-nav {
		display: none !important;
	}
}

/* ========================================================== BADGE / HERO === */

.wptm-badge-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wptm-badge-tag span {
	line-height: 0;
}

/* ============================================================== PRESETS === */

/* Each preset carries the colour it was designed with. The site setting, when
   filled, is printed after this and wins. */

/* --- Classic: gallery first, quiet neutral accent ------------------------- */
.wptm-tour--classic {
	--wptm-accent: #14532d;
	--wptm-accent-dark: #0f3d21;
}

/* The count belongs to the mosaic tile; in the strip the words carry it. */
.wptm-gallery__morecount {
	display: none;
}

/* --- Mosaic: one large photograph beside a column of smaller ones --------- */

/*
 * The arrangement a traveller expects from a booking site: the lead picture
 * takes most of the width and three more sit beside it, the last carrying the
 * count of everything not shown.
 *
 * Built entirely from the existing gallery markup. The stage and the thumbnail
 * strip are already there, already keyboard operable, already lazy loaded
 * below the first image; this only rearranges them, so nothing about how the
 * gallery behaves changes and there is no second gallery to maintain.
 */
@media (min-width: 860px) {

	.wptm-tour--mosaic .wptm-gallery {
		position: relative;
		display: grid;
		/* Two thirds to the lead picture, which is the proportion at which it
		   still reads as the subject rather than as one of four. */
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 10px;
		align-items: stretch;
	}

	.wptm-tour--mosaic .wptm-gallery__stage {
		height: 100%;
		border-radius: 14px;
		overflow: hidden;
	}

	.wptm-tour--mosaic .wptm-gallery__img {
		height: 100%;
		object-fit: cover;
	}

	/* A column, not a row: three tiles stacked against the lead picture. */
	.wptm-tour--mosaic .wptm-gallery__thumbs {
		display: grid;
		grid-auto-flow: row;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		gap: 10px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	/* Only three are drawn here. The rest stay in the document for the
	   lightbox and the keyboard rather than being removed. */
	.wptm-tour--mosaic .wptm-gallery__thumb:nth-child(n + 4) {
		display: none;
	}

	.wptm-tour--mosaic .wptm-gallery__thumb {
		width: auto;
		height: 100%;
		border-radius: 12px;
	}

	.wptm-tour--mosaic .wptm-gallery__thumbimg {
		height: 100%;
		object-fit: cover;
	}

	/*
	 * The count sits over the last tile rather than beside the strip: it is
	 * where a reader looks for it and it costs no row of its own.
	 */
	.wptm-tour--mosaic .wptm-gallery__more {
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: calc(33.333% - 7px);
		height: calc(33.333% - 7px);
		margin: 0;
		border: 0;
		border-radius: 12px;
		background: rgba(12, 16, 22, .58);
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
	}

	.wptm-tour--mosaic .wptm-gallery__more:hover,
	.wptm-tour--mosaic .wptm-gallery__more:focus-visible {
		background: rgba(12, 16, 22, .72);
	}

	/*
	 * On the tile the number leads and the icon goes: "+12 Photos" is what the
	 * reader is looking for, and an icon beside it in a space this size is
	 * clutter.
	 */
	.wptm-tour--mosaic .wptm-gallery__morecount {
		display: block;
		font-size: 22px;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: -.02em;
	}

	.wptm-tour--mosaic .wptm-gallery__moreicon {
		display: none;
	}

	.wptm-tour--mosaic .wptm-gallery__morelabel {
		font-size: 13px;
		font-weight: 600;
		opacity: .9;
	}
}

/*
 * Below that width the mosaic is the ordinary gallery: a lead picture with a
 * strip under it. Three tiles beside a photograph on a phone would give each
 * of them about seventy pixels, which is not a photograph.
 */

/* --- Immersive: photograph first, confident green ------------------------- */
.wptm-tour--immersive {
	--wptm-accent: #1f7a4d;
	--wptm-accent-dark: #17603c;
}

/* --- Editorial: magazine cover, terracotta on warm paper ------------------ */
.wptm-tour--editorial {
	--wptm-accent: #a8481f;
	--wptm-accent-dark: #8a3a17;
	--wptm-tint: color-mix(in srgb, var(--wptm-accent) 8%, transparent);
}

/* --- Immersive hero ------------------------------------------------------- */

.wptm-head--immersive {
	position: relative;
	margin-inline: calc(var(--wptm-bleed, 0px) * -1);
	padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px) clamp(26px, 4vw, 48px);
	border-radius: var(--wptm-radius);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

.wptm-hero {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.wptm-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wptm-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 16, 22, .58) 0%, rgba(12, 16, 22, .34) 42%, rgba(12, 16, 22, .78) 100%);
}

.wptm-head--immersive .wptm-head__title,
.wptm-head--immersive .wptm-head__lead,
.wptm-head--immersive .wptm-head__cats,
.wptm-head--immersive .wptm-head__catlabel,
.wptm-head--immersive .wptm-head__place,
.wptm-head--immersive .wptm-crumbs,
.wptm-head--immersive .wptm-crumbs a {
	color: #fff;
}

.wptm-head--immersive .wptm-crumbs a,
.wptm-head--immersive .wptm-head__lead,
.wptm-head--immersive .wptm-head__place {
	color: rgba(255, 255, 255, .86);
}

.wptm-head--immersive .wptm-head__pin {
	color: #fff;
}



/* The immersive preset already showed the lead photograph in the hero. */
.wptm-tour--immersive .wptm-gallery__stage {
	display: none;
}

.wptm-tour--immersive .wptm-gallery__thumbs {
	grid-auto-columns: minmax(0, 1fr);
	margin-block-start: 0;
}

/* --- Editorial: the title sits beside the photograph ---------------------- */

@media (min-width: 1000px) {
	.wptm-tour--editorial .wptm-head__title {
		font-size: clamp(32px, 3.6vw, 46px);
		max-width: 22ch;
	}

	.wptm-tour--editorial .wptm-gallery__stage {
		aspect-ratio: 21 / 9;
	}

	/* Facts read as a warm band rather than a plain row. */
	.wptm-tour--editorial .wptm-strip {
		padding: 18px 22px;
		border-radius: var(--wptm-radius);
		background: var(--wptm-tint);
		border: 0;
	}
}

/* ================================================================ STRIP === */

.wptm-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 18px 26px;
	margin: 0;
	padding: 18px 0;
	border-block: 1px solid var(--wptm-hairline);
}

.wptm-strip__item {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.wptm-strip__icon {
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-strip__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wptm-strip__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-strip__value {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* ============================================================ GALLERY + === */

.wptm-gallery__label {
	margin-block-end: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

/* ====================================================== ITINERARY PHOTOS === */

/* The photograph is a column of the step, not a block inside the paragraph:
   that is what keeps the text from stopping short of an empty gap. */
.wptm-timeline__step--photo {
	grid-template-columns: 44px minmax(0, 1fr) minmax(200px, 260px);
	column-gap: 18px;
	align-items: start;
}

.wptm-timeline__photo {
	display: block;
	margin: 0;
	border-radius: var(--wptm-radius-sm);
	overflow: hidden;
}

.wptm-timeline__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Narrow enough that a 200px column would squeeze the text: the photograph
   moves under the paragraph instead, still inside the text column. */
@media (max-width: 900px) {

	.wptm-timeline__step--photo {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.wptm-timeline__photo {
		grid-column: 2;
		margin-block-start: 14px;
	}

	.wptm-timeline__img {
		aspect-ratio: 16 / 9;
	}
}

/* ================================================================ VIDEO === */

.wptm-video {
	padding: 0;
	overflow: hidden;
}

.wptm-tour button.wptm-video__poster {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.wptm-video__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wptm-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--wptm-accent);
	font-size: 18px;
	padding-inline-start: 4px;
}

.wptm-video__label {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(12, 16, 22, .66);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.wptm-video__frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ================================================================ TRUST === */

.wptm-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 20px 30px;
	margin-block-start: var(--wptm-gap);
	padding: clamp(22px, 3vw, 30px);
	border-radius: var(--wptm-radius);
	background: var(--wptm-surface);
}

.wptm-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.wptm-trust__icon {
	color: var(--wptm-accent);
	line-height: 0;
	margin-block-start: 1px;
}

.wptm-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wptm-trust__text strong {
	font-size: 15px;
	font-weight: 700;
}

.wptm-trust__text span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wptm-muted);
}

/* ============================================================== REVIEWS === */

.wptm-score {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-score__value {
	font-size: clamp(34px, 4vw, 44px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wptm-accent);
}

.wptm-score__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wptm-score__out {
	font-size: 15px;
	font-weight: 700;
}

.wptm-score__count {
	font-size: 13px;
	color: var(--wptm-muted);
}

.wptm-reviews {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-reviews__item {
	margin: 0;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--wptm-hairline);
	list-style: none;
}

.wptm-reviews__item::marker {
	content: "";
}

.wptm-reviews__item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.wptm-reviews__rating {
	margin: 0 0 8px;
	color: var(--wptm-accent);
	letter-spacing: .12em;
	font-size: 15px;
}

.wptm-reviews__text {
	font-size: 15px;
	line-height: 1.7;
}

.wptm-reviews__text p {
	margin: 0 0 .7em;
}

.wptm-reviews__by {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--wptm-faint);
}

.wptm-reviews__by time::before {
	content: " \00b7 ";
}

.wptm-reviews__form {
	margin-block-start: 28px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--wptm-hairline);
}

/* ======================================================== MOBILE REVIEW === */

/* Everything below is a pass over the small screen: no element may overlap
   another, nothing may push the page sideways, and every tap target stays
   large enough to hit. */

.wptm-tour {
	overflow-wrap: break-word;
}

/*
 * The plugin as a good citizen of whatever theme it lands in.
 *
 * Everything above this comment fixes a specific element that was too wide.
 * This is different: it makes the plugin structurally incapable of widening
 * the page, whatever a theme, a translation, a long word, an embed or a future
 * component does inside it.
 *
 * Three rules, and each one is deliberately narrow in scope.
 */

/*
 * 1. The wrapper takes the width the theme gives it and asks for nothing else.
 *
 *    min-width matters as much as max-width: an element that is a flex or grid
 *    item of the theme's own layout has a minimum size of its content unless
 *    told otherwise, and Jannah lays its columns out with flex. Without this,
 *    one long word inside the plugin can widen the theme's column, and the
 *    theme's column widens the page.
 */
.wptm-tour {
	max-width: 100%;
	min-width: 0;
}

/*
 * 2. Nothing inside may be wider than what contains it.
 *
 *    Scoped under .wptm-tour, so it is the plugin's own subtree and no rule of
 *    the theme's is touched. This is the line that turns "I found the element
 *    that was too wide" into "an element cannot be too wide".
 */
.wptm-tour *,
.wptm-tour *::before,
.wptm-tour *::after {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

/*
 * 2a. Media, sized the way WordPress and every theme expect.
 *
 *     WordPress emits width and height attributes on every image, which is
 *     what stops the page jumping while they load. Those attributes are also
 *     a fixed pixel size, so without this pair an image wider than its column
 *     pushes the column out; with only max-width and no height, it squashes.
 *
 *     Themes state this for their own content and Jannah is no exception, but
 *     the plugin cannot assume its markup is reached by those rules, and one
 *     line is cheaper than finding out on somebody's site.
 */
.wptm-tour img,
.wptm-tour svg,
.wptm-tour video,
.wptm-tour iframe {
	max-width: 100%;
}

.wptm-tour img,
.wptm-tour video {
	height: auto;
}

/*
 * An image told to fill a shaped box keeps that instruction.
 *
 * height: auto above would undo the aspect ratios the gallery and the cards
 * rely on to hold their place before the picture arrives. object-fit is the
 * reliable signal that a box is doing the shaping, and it is the property
 * these images already carry, so the rule follows the existing markup rather
 * than a naming convention that a future class could break.
 */
.wptm-tour img[class*="__img"],
.wptm-tour img[class*="__thumbimg"],
.wptm-tour img[class*="__preview"] {
	height: 100%;
	object-fit: cover;
}

/*
 * 2b. The few places that legitimately manage their own width.
 *
 *     A scoped universal rule is a blunt instrument, so the exceptions are
 *     listed rather than left to be discovered. Each of these scrolls inside
 *     its own box on purpose, and a max-width of 100% on their children would
 *     stop the scrolling working.
 */
.wptm-type__list > *,
.wptm-arc__options > *,
.wptm-gallery__thumbs > * {
	max-width: none;
}

/*
 * 2c. The gutter, applied where the theme leaves none.
 *
 *     Above the breakpoint the theme's own container is doing the work and
 *     this adds nothing, so it only exists at the width where the problem
 *     exists. Padding rather than margin, so the containment above still
 *     holds and nothing can reach past it.
 */
@media (max-width: 782px) {

	.wptm-tour__article,
	.wptm-archive,
	.wptm-types,
	.wptm-places {
		padding-inline: var(--wptm-gutter);
	}

	/*
	 * The gallery lines up with the words.
	 *
	 * It used to cancel the gutter so the picture reached the glass, which
	 * looks deliberate in a mock-up and wrong on a real page: the title, the
	 * facts and the booking card all sit inside the gutter, so a picture
	 * flush to the screen reads as misaligned rather than as full bleed. On a
	 * phone the gutter is only fourteen to twenty pixels, so almost nothing is
	 * lost, and every edge on the page now agrees.
	 *
	 * The archive hero keeps its bleed: it is a banner behind a heading, not a
	 * picture in a column, and it has nothing beside it to line up with.
	 */
	.wptm-layout__media {
		margin-inline: 0;
	}

	.wptm-arc__hero--image {
		margin-inline: calc(var(--wptm-gutter) * -1);
	}
}

/*
 * 3. The content is clipped horizontally, and only horizontally.
 *
 *    Applied to the article rather than to the wrapper, because the wrapper
 *    also holds the fixed booking bar and clipping its ancestor would be a way
 *    to lose it. overflow-x: clip rather than hidden: clip does not create a
 *    scroll container, so it cannot swallow a sticky sidebar or turn a
 *    keyboard focus into a jump.
 *
 *    This is not the fix for the overflow. The fixes are above, each at its
 *    source. This is the guarantee that if one is ever missed again, the page
 *    around the plugin does not pay for it.
 */
.wptm-tour__article {
	overflow-x: clip;
}

@supports not (overflow: clip) {

	.wptm-tour__article {
		overflow-x: hidden;
	}
}

.wptm-tour a,
.wptm-tour p,
.wptm-tour dd,
.wptm-tour dt,
.wptm-tour li,
.wptm-tour h1,
.wptm-tour h2,
.wptm-tour h3 {
	overflow-wrap: anywhere;
}

@media (max-width: 782px) {


	.wptm-head__title {
		font-size: clamp(24px, 7vw, 32px);
	}

	/* The immersive hero needs its own padding on a phone, and a stronger
	   scrim, otherwise white text lands on a bright sky. */
	.wptm-head--immersive {
		padding: 22px 18px 26px;
		border-radius: var(--wptm-radius);
	}

	.wptm-hero__scrim {
		background: linear-gradient(180deg, rgba(12, 16, 22, .62) 0%, rgba(12, 16, 22, .5) 45%, rgba(12, 16, 22, .86) 100%);
	}

	.wptm-head--immersive .wptm-head__lead {
		font-size: 15px;
	}

	/* Facts: two per row instead of five squeezed into one. */
	.wptm-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 14px;
		padding: 16px 0;
	}

	.wptm-strip__value {
		font-size: 14px;
	}

	/* Gallery arrows shrink and move in so they never cover the counter. */
	.wptm-tour button.wptm-gallery__nav {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}

	.wptm-gallery__nav--prev {
		inset-inline-start: 10px;
	}

	.wptm-gallery__nav--next {
		inset-inline-end: 10px;
	}

	.wptm-gallery__count {
		inset-block-end: 10px;
		inset-inline-end: 10px;
		font-size: 12px;
	}

	/* What to bring reads better as one column than as two half-width columns
	   with broken words. Highlights are already one per line. */
	.wptm-bring {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.wptm-features__item {
		break-inside: avoid;
	}

	.wptm-two {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Rates: the price stays on the same line as its label. */
	.wptm-rates {
		font-size: 14px;
	}

	.wptm-rates th,
	.wptm-rates td {
		padding: 11px 0;
	}

	/* Trust strip: one promise per row. */
	.wptm-trust {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px 18px;
	}

	/* The closing call to action does not need desktop padding. */
	.wptm-cta {
		padding: 34px 20px;
	}

	.wptm-cta__actions .wptm-btn {
		width: 100%;
	}

	/* Reviews. */
	.wptm-score {
		gap: 12px;
	}

	/* The fixed bar covers the end of the page: give it room. */
	.wptm-tour {
		padding-block-end: calc(var(--wptm-bar) + 12px);
	}
}

@media (max-width: 600px) {

	/* Timeline: the photograph moves under the text rather than beside it. */
	.wptm-timeline__step--photo {
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.wptm-timeline__photo {
		grid-column: 2;
		margin-block-start: 12px;
	}

	/* Sidebar cards: comfortable padding, no cramped edges. */
	.wptm-card {
		padding: 18px;
	}

	/* Related tours become a single readable column. */
	.wptm-related {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.wptm-block {
		padding-block: 28px;
	}

	.wptm-block__title {
		margin-block-end: 18px;
	}
}

@media (max-width: 380px) {

	/* The narrowest phones: facts go to one column so nothing is truncated. */
	.wptm-strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.wptm-gallery__thumbs {
		grid-auto-columns: 74px;
	}

	.wptm-bar {
		gap: 10px;
	}



}

/*
 * Values that arrive from a customer or from a currency: a reference with no
 * spaces, an address, a price in a long currency. They wrap rather than push
 * the card wider than the screen.
 */
.wptm-tk__rows dd,
.wptm-strip__value,
.wptm-info__rows li,
.wptm-rates tbody th,
.wptm-bar__price {
	overflow-wrap: anywhere;
	word-break: normal;
}

.wptm-rates tbody td,
.wptm-tk__price .wptm-tk__value {
	/* Numbers should not be split mid-figure; the cell may wrap, the amount
	   may not. */
	overflow-wrap: normal;
	white-space: nowrap;
}

/* Nothing inside the plugin may make the page itself scroll sideways. */
.wptm-tour img,
.wptm-tour table,
.wptm-tour iframe {
	max-width: 100%;
}

/* Every control keeps a finger sized target, whatever the screen. */
.wptm-tour button,
.wptm-tour .wptm-btn,
.wptm-tour .wptm-gallery__thumb,
.wptm-tour .wptm-faq__summary {
	min-height: 44px;
}

.wptm-tour .wptm-gallery__thumb {
	min-height: 0;
}

/* ==========================================================================
 * Touch targets on the archive controls.
 *
 * Everything else in this file was already drawn to the right size: the
 * buttons are 44, 52 and 56 pixels tall and have been from the start. Three
 * controls were not, and all three are on the archive, which is the screen
 * most likely to be used with a thumb while standing up:
 *
 *   the filter options   38px
 *   the sort select      40px
 *   the destination chips 40px
 *
 * Appended rather than edited into the rules above, so the desktop rendering
 * of every one of them is provably unchanged: with a cursor this block does
 * not apply at all.
 *
 * Keyed on pointer as well as width, because they are different questions. A
 * tablet is wide and touched; a desktop window dragged narrow is neither.
 * ======================================================================== */

@media (max-width: 700px), (pointer: coarse) {
	.wptm-tour .wptm-arc__option {
		min-height: 44px;
		padding: 10px 16px;
	}

	.wptm-tour .wptm-arc__sort select {
		min-height: 44px;
		padding: 10px 14px;
	}

	.wptm-tour .wptm-arc__chips a {
		min-height: 44px;
		padding: 10px 16px;
	}

	.wptm-tour .wptm-arc__chip,
	.wptm-tour .wptm-arc__chipclear {
		min-height: 40px;
	}

	.wptm-tour .wptm-arc__chip {
		padding: 6px 10px 6px 14px;
	}
}

/*
 * More contrast, where it was asked for.
 *
 * The hairlines that separate a card from the page are nine per cent of the
 * text colour, which is right on a bright screen and too faint for a reader
 * who has turned contrast up. They step up to the full border weight.
 */
@media (prefers-contrast: more) {

	.wptm-tour .wptm-card2__link,
	.wptm-tour .wptm-arc__option,
	.wptm-tour .wptm-arc__chips a,
	.wptm-tour .wptm-arc__pages a,
	.wptm-tour .wptm-arc__pages span {
		border-color: var(--wptm-border);
	}

	.wptm-card2__lead,
	.wptm-arc__count {
		color: var(--wptm-text);
	}
}

/* ==========================================================================
 * A time inside an itinerary paragraph.
 *
 * The time reads as the opening of the sentence, not as a column beside it.
 *
 * It was a flex row: time in one track, sentence in another. That gives the
 * sentence its own narrower column, so its second and third lines wrap under
 * where the first line began rather than under the paragraph's own edge — and
 * the next paragraph, which has no time on it, starts further left. Two
 * paragraphs in the same step with two different left edges is the thing that
 * looks wrong before anybody can say why.
 *
 * So the paragraph is a paragraph. The time is inline, the sentence flows
 * after it, and every line after the first returns to the same margin as every
 * other paragraph in the step.
 *
 * The clock and the hour stay welded together with nowrap, so a narrow column
 * can break the line after the time but never between the mark and the number.
 * ======================================================================== */

.wptm-timeline__moment {
	/* No flex: the sentence has to wrap back to the paragraph edge. */
	display: block;
}

.wptm-timeline__at {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-end: 8px;
	vertical-align: baseline;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--wptm-accent);
	white-space: nowrap;
}

.wptm-timeline__at-icon {
	display: inline-flex;
	line-height: 0;
}

.wptm-timeline__moment-text {
	/* Inline, so it is part of the paragraph rather than a box inside it. */
	display: inline;
}

/* ==========================================================================
 * Justified prose.
 *
 * Both edges flush, which is what the itinerary and the long descriptions were
 * asked for, and what Arabic typesetting expects as its normal case.
 *
 * hyphens: auto is not optional here. Justification works by stretching the
 * spaces in a line, so without hyphenation a long word pushed to the next line
 * leaves the one above it stretched into rivers of white — the effect that
 * makes justified text on the web look broken. With hyphenation the browser
 * breaks the word instead and the spacing stays even.
 *
 * text-align: justify on its own also stretches the last line of a paragraph
 * in some engines; text-align-last keeps it set to the reading margin, which
 * is where a last line belongs in both directions.
 *
 * Applied to prose only. A heading, a label, a price, a button and a table
 * cell are not paragraphs, and justifying a two-word cell spreads two words
 * across a column.
 * ======================================================================== */

.wptm-tour .wptm-prose p,
.wptm-tour .wptm-prose li,
.wptm-tour .wptm-timeline__moment {
	text-align: justify;
	text-align-last: start;
	hyphens: auto;
	-webkit-hyphens: auto;
	text-wrap: pretty;
}

/*
 * A narrow column cannot be justified well.
 *
 * Below about forty characters a line holds too few word breaks for the
 * browser to distribute the slack, and every line ends up either very tight or
 * very loose. A phone is that column, so the text goes back to a ragged edge
 * there, which reads better than badly justified text at any width.
 */
@media (max-width: 600px) {
	.wptm-tour .wptm-prose p,
	.wptm-tour .wptm-prose li,
	.wptm-tour .wptm-timeline__moment {
		text-align: start;
		hyphens: manual;
		-webkit-hyphens: manual;
	}
}

/* ==========================================================================
 * The gallery heading.
 *
 * A grid of photographs of the tour does not need the word Photos above it:
 * the pictures say what they are, and a label over them is a caption for
 * something already obvious.
 *
 * Hidden rather than removed. It is the section's only heading, so deleting it
 * would leave a landmark with no name and put a hole in the outline a screen
 * reader reads the page by; clipped, it is announced and not drawn. The
 * navigation label is untouched, because a link in a bar does need words.
 * ======================================================================== */

.wptm-tour .wptm-gallery > .wptm-gallery__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
	border: 0;
}

/* ==========================================================================
 * Filter pills that do not collapse.
 *
 * The pills sit in a flex row that wraps. The pill itself already carried
 * white-space: nowrap, so its text refused to break — but the list item around
 * it is a flex child with the default flex-shrink of 1, so on a narrow screen
 * the browser squeezed the item well below the width of the word inside it.
 * The border rounded what was left into an ellipse and the text ran straight
 * out of both sides of it. That is the overlap in the screenshot: eleven
 * destination names printed across each other.
 *
 * flex-shrink: 0 on the item is the whole fix. The row already wraps, so a
 * pill that will not shrink simply moves to the next line, which is what the
 * layout was always meant to do.
 *
 * Applied to every filter group in the plugin rather than the one that was
 * reported: they are built the same way and would fail the same way, and three
 * of them had never been looked at on a phone.
 * ======================================================================== */

.wptm-arc__options > li,
.wptm-arc__chips > li,
.wptm-arc__pages li,
.wptm-tour .wptm-arc__options > li,
.wptm-tour .wptm-arc__chips > li {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
}

/*
 * And a pill longer than the screen has to give way somewhere.
 *
 * "Desert tours from Ouarzazate" on a 320px phone is wider than the page even
 * with no padding. nowrap plus no-shrink would push the document sideways, so
 * at that width the text is allowed to wrap inside the pill and the pill grows
 * taller instead. A two-line pill is ugly; a page that scrolls sideways is
 * broken.
 */
@media (max-width: 480px) {
	.wptm-tour .wptm-arc__option,
	.wptm-tour .wptm-arc__chips a,
	.wptm-tour .wptm-arc__pages a {
		white-space: normal;
		text-align: center;
		line-height: 1.35;
	}
}

/* ======================================================== ROUTE MAP === */

/*
 * The route figure.
 *
 * Sized by aspect-ratio rather than a fixed height, so it scales with the
 * column it is given and reserves its space before it paints — a figure that
 * appears and pushes the itinerary down is worse than one that arrives a
 * moment later.
 *
 * Every colour comes from the same currentColor-derived tokens as the rest of
 * the page, so the drawing follows a dark theme without a second rule.
 */
.wptm-routemap {
	margin-block: 18px 20px;
}

/*
 * Wide rather than tall. Three pins in a 3:2 box left most of it empty, and
 * in a reading column the box was as tall as the paragraph beside it; 16:9
 * holds the same journey in two thirds of the height. Capped at 560px so
 * it never grows past the figure it is: a sketch of the shape, not a map.
 */
.wptm-routemap__figure {
	display: block;
	inline-size: 100%;
	max-inline-size: 560px;
	margin-inline: auto;
	aspect-ratio: 640 / 360;
	overflow: visible;
}

/*
 * The line is drawn, not filled, and dashed: a route between two towns is a
 * road with bends in it, and a solid straight line claims a directness the
 * journey does not have. A dashed line reads as "this way" rather than as a
 * measurement.
 */
.wptm-routemap__path {
	fill: none;
	stroke: var(--wptm-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 7 7;
	opacity: .75;
}

.wptm-routemap__pin {
	fill: var(--wptm-page, Canvas);
	stroke: var(--wptm-accent);
	stroke-width: 2;
}

.wptm-routemap__number {
	fill: var(--wptm-text);
	font-size: 13px;
	font-weight: 600;
}

/* First and last carry the weight: a route is a departure and an arrival. */
.wptm-routemap__stop.is-first .wptm-routemap__pin,
.wptm-routemap__stop.is-last .wptm-routemap__pin {
	fill: var(--wptm-accent);
	stroke: var(--wptm-accent);
}

.wptm-routemap__stop.is-first .wptm-routemap__number,
.wptm-routemap__stop.is-last .wptm-routemap__number {
	fill: var(--wptm-on-accent);
}

@media (max-width: 600px) {

	.wptm-routemap__number {
		font-size: 12px;
	}
}

/*
 * The figure follows the room it is given.
 *
 * A route section can have half a column, as on SaraDesign where the
 * highlights sit beside it, or the width of a phone. The drawing scales with
 * its box, which is right for the line and wrong for the pins: at a third of
 * the width a thirteen-unit pin is a dot and its number a speck. The section
 * is the container, so the pins are sized by the space the section has and
 * not by the screen, and below the width where even that fails the sketch is
 * withdrawn and the chain of names beneath it says the same thing legibly.
 */
.wptm-block--route {
	container-type: inline-size;
}

@container (max-width: 480px) {

	.wptm-routemap__pin {
		r: 22;
		stroke-width: 2.5;
	}

	.wptm-routemap__number {
		font-size: 20px;
	}

	.wptm-routemap__path {
		stroke-width: 3;
	}
}

@container (max-width: 240px) {

	.wptm-routemap {
		display: none;
	}
}

/*
 * On paper the dashes survive but the tint does not: backgrounds are not
 * printed, so a pin filled with the page colour would print hollow with the
 * line running through the number. An explicit white fill keeps it legible.
 */
@media print {

	.wptm-routemap__pin {
		fill: #fff;
	}
}


/* ================================================ DEFERRED RENDERING === */

/*
 * The long sections are laid out when they are needed, not before.
 *
 * A twelve-day tour page is a heavy first paint: an itinerary of twelve day
 * entries, a set of FAQ panels and a run of reviews all get laid out before
 * anything appears, and almost none of it is on the first screen.
 * `content-visibility: auto` lets the browser skip layout and paint for a
 * section until it comes near the viewport.
 *
 * Four rules were followed in choosing what to apply it to.
 *
 * **Only sections that are long and never first.** The itinerary, the FAQ, the
 * reviews and the related row. Not the facts strip, the gallery or the header,
 * which are on the first screen on every design and would be deferred for
 * nothing. Not the booking form, whose height is read by the script that opens
 * it.
 *
 * **`contain-intrinsic-size: auto <estimate>`.** Without a size the browser
 * treats a skipped section as zero-height, the scrollbar lurches as each one
 * renders, and an anchor link lands in the wrong place. The `auto` keyword
 * makes the browser remember each section's real height once it has been
 * measured, so the estimate is only ever used before the first sight of it.
 *
 * **Not when printing.** A printed page has no viewport to be near, and a
 * browser that honoured this on paper would print blank space where the
 * itinerary should be.
 *
 * **Behind @supports.** A browser without it renders everything as it always
 * did, which is correct and merely slower.
 */
@supports (content-visibility: auto) {

	@media screen {

		#wptm-itinerary,
		#wptm-faq,
		#wptm-reviews,
		#wptm-related {
			content-visibility: auto;
		}

		/*
		 * The estimates are per section rather than one number, because they
		 * are wrong in different directions: an itinerary is the tallest thing
		 * on the page and a related row is one card deep.
		 */
		#wptm-itinerary {
			contain-intrinsic-size: auto 1800px;
		}

		#wptm-faq {
			contain-intrinsic-size: auto 900px;
		}

		#wptm-reviews {
			contain-intrinsic-size: auto 700px;
		}

		#wptm-related {
			contain-intrinsic-size: auto 500px;
		}
	}
}