/**
 * The tour card, once.
 *
 * Drawn by includes/card.php and shared by the landing page, the destination
 * hub and the activity page. Its own grid comes with it, because a card that
 * relies on the surrounding module for its columns is a card that lays out
 * differently in each of the three places it appears.
 *
 * Scoped to .wptm-card and .wptm-cards throughout. Tokens come from
 * tokens.css, which every module already depends on.
 */

/*
 * min() inside the track, not a bare pixel minimum.
 *
 * repeat( auto-fill, minmax( 280px, 1fr ) ) lays a 280px track whatever the
 * container is, so at 320px with 20px of padding each side the grid is wider
 * than the page and the whole document scrolls sideways. Wrapping the minimum
 * in min( 280px, 100% ) says "280 unless that is more than I have", which
 * cannot overflow at any width and changes nothing above 280.
 */
.wptm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	/*
	 * The rows are as tall as the cards in them and no taller.
	 *
	 * A grid whose rows are auto sized still stretches them when the grid
	 * box itself is given more height than its content needs, which is what
	 * `align-content` defaults to. The list is rarely given a height by this
	 * plugin, but it is given one by the page around it on any theme that
	 * lays its content column out as a grid or a flex column with a minimum
	 * height -- the usual way of keeping a footer at the foot of a short
	 * page. The row then grew to fill it, every card in it grew with it, and
	 * the foot of each card was pushed to the bottom of that height: a band
	 * of white between the particulars and the price, on some themes and not
	 * on others. Starting the rows rather than stretching them costs nothing
	 * where there is no spare height and removes the band where there is.
	 */
	align-content: start;
	gap: clamp(16px, 2vw, 26px);
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/*
 * The list item is a bare slot.
 *
 * tour.css also has a .wptm-card: it is the sidebar card on a tour page,
 * with 22px of padding, a border and a shadow. A destination hub renders
 * inside the archive, so both stylesheets are on that page and the listing
 * item was being drawn as a sidebar card around a card — a second border and
 * a band of padding. Two classes rather than one specify the slot, so this
 * wins whichever file the browser read last — and nothing here reaches a
 * .wptm-card that is not inside a listing, so the sidebar card keeps its own.
 */
.wptm-cards .wptm-card {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	list-style: none;
	min-width: 0;
}

.wptm-cards .wptm-card::marker {
	content: "";
}

.wptm-card__inner {
	/*
	 * Positioned, because the strip of photographs below is absolute and
	 * this is the box it is placed against. Without it the strip fell back
	 * to whatever the theme happened to have positioned -- often nothing at
	 * all, which put it at the top of the document.
	 */
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--wptm-line);
	/*
	 * The card's own corner, a step in from the 16px the modules around it
	 * use for a panel. A listing is a row of small objects and a panel is
	 * one large one; drawn on the same radius the small ones read as soft
	 * rather than as printed. Declared locally so the modules keep theirs.
	 */
	border-radius: var(--wptm-card-corner, 14px);
	background: #fff;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}

/*
 * The lift: two pixels, and a shadow in two parts.
 *
 * One tight and almost opaque, which is the card's contact with the page, and
 * one wide and very faint, which is the light around it. A single large blur
 * is the shadow every framework ships and it reads as a sticker; a contact
 * line under a spread is how a printed card actually sits on a table.
 */
.wptm-card__inner:hover,
.wptm-card__inner:focus-within {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--wptm-gold) 42%, var(--wptm-line));
	box-shadow:
		0 1px 1px rgba(15, 20, 28, .05),
		0 14px 30px -20px rgba(15, 20, 28, .45);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wptm-card__inner:hover,
	.wptm-card__inner:focus-within {
		border-color: rgba(0, 30, 83, 0.18);
	}

	.wptm-card__foot {
		border-block-start-color: rgba(0, 30, 83, 0.08);
	}
}

.wptm-card__link {
	display: flex;
	flex-direction: column;
	/*
	 * A flex child of the card rather than `height: 100%` of it. The
	 * percentage needs a definite height on every box above it, and one
	 * theme wrapper without one left the card either collapsed or stretched.
	 */
	flex: 1 1 auto;
	min-height: 0;
	text-decoration: none;
	color: inherit;
}

.wptm-card__link:focus-visible {
	outline: 2px solid var(--wptm-gold);
	outline-offset: 3px;
}

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

/*
 * One ratio, declared once and read twice: by the picture, and by the strip
 * of thumbnails that is laid over its foot from outside the link. The two
 * boxes must agree to the pixel, so neither carries a number of its own.
 *
 * Three by two, which is the archive card's ratio and the ratio a camera
 * hands the agency its photographs in. The card was on four by three, so the
 * same tour was one shape on a landing page and another on the listing, and
 * a photograph composed for a frame lost a strip off the top of one of them.
 */
.wptm-card__inner {
	--wptm-card-ratio: 3 / 2;
}

.wptm-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--wptm-card-ratio);
	background: rgba(0, 30, 83, 0.06);
}

.wptm-card__img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	display: block;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}

/* A photograph that moves as much as the card does is two movements; this
   one drifts, slowly enough to be noticed only after the lift. */
.wptm-card__inner:hover .wptm-card__img,
.wptm-card__inner:focus-within .wptm-card__img {
	transform: scale(1.035);
}

/* While the next photograph is fetched the current one dims a little, so
   the change reads as a change and not as a flicker. */
.wptm-card__img.is-switching {
	opacity: .55;
}

/*
 * 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-card__media--empty {
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 30, 83, 0.04), transparent 70%),
		rgba(0, 30, 83, 0.06);
}

.wptm-card__blank {
	position: relative;
	line-height: 0;
	color: rgba(0, 30, 83, 0.28);
}

/* The zellige ground behind the compass, in the navy at a fraction. */
.wptm-card__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	color: var(--wptm-navy);
	pointer-events: none;
}

/*
 * The one word the agency chose to put on the photograph.
 *
 * A small tag in the corner, square-cornered and set in the accent: a label
 * a person might have pinned there, not a pill. The duration used to sit at
 * the foot of the picture as a second chip; it now reads with the other
 * particulars under the title, and the picture is left alone.
 */
.wptm-card__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 24px);
	padding: 5px 10px 4px;
	/*
	 * Three pixels, not four and not a pill. A tag is a piece of card with
	 * its corners knocked off, and the difference between that and a lozenge
	 * is the difference between a label and a button.
	 */
	border-radius: 3px;
	background: var(--wptm-gold);
	color: var(--wptm-navy);
	/* It sits on a photograph, which may be pale sky or dark stone, so it
	   carries its own contact shadow rather than trusting the picture. */
	box-shadow: 0 1px 3px rgba(6, 12, 24, .28);
	font-size: 0.655rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- The other photographs ------------------------------------------------- */

/*
 * A strip of thumbnails along the foot of the picture.
 *
 * Buttons, laid over the photograph from beside the link rather than from
 * inside it: the strip's box is the picture's box, the same width and the
 * same ratio, pinned to the top of the card. Its own surface lets the
 * pointer through; only the thumbnails catch it. The current one is
 * outlined in white; the others sit back a little until the pointer is
 * over the card, where a strip that is always on would compete with the
 * picture it is meant to serve. On a touch screen there is no hover, so
 * the strip is simply there, small.
 */
.wptm-card__peek {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 6px;
	aspect-ratio: var(--wptm-card-ratio);
	padding: 12px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .28s ease, transform .28s ease;
}

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

.wptm-card__inner:hover .wptm-card__peek,
.wptm-card__inner:focus-within .wptm-card__peek,
.wptm-card__peek:focus-within {
	opacity: 1;
	transform: none;
}

/* A soft shade behind the strip so a white thumbnail edge reads on a pale
   sky; drawn on the picture through the strip, never over the text. */
.wptm-card__inner--peek .wptm-card__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 38%;
	background: linear-gradient(to top, rgba(6, 12, 24, .55), rgba(6, 12, 24, 0));
	opacity: 0;
	transition: opacity .28s ease;
	pointer-events: none;
}

.wptm-card__inner--peek:hover .wptm-card__media::after,
.wptm-card__inner--peek:focus-within .wptm-card__media::after {
	opacity: 1;
}

.wptm-card__thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 5px;
	background: rgba(255, 255, 255, .18);
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	transition: border-color .18s ease, transform .18s ease, opacity .18s ease;
	-webkit-appearance: none;
	appearance: none;
	line-height: 0;
}

.wptm-card__thumbimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.wptm-card__thumb:hover,
.wptm-card__thumb:focus-visible {
	border-color: #fff;
	transform: translateY(-2px);
}

.wptm-card__thumb.is-current {
	border-color: #fff;
	opacity: 1;
}

.wptm-card__thumb:focus-visible {
	outline: 2px solid var(--wptm-gold);
	outline-offset: 2px;
}

.wptm-card__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	min-width: 46px;
	padding: 0 8px;
	border-radius: 5px;
	background: rgba(6, 12, 24, .55);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.wptm-card__more {
		background: rgba(6, 12, 24, .4);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
}

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

/*
 * The body is not evenly padded.
 *
 * A little more air under the foot than over the eyebrow, because the card
 * ends there and a measure that is optically even is one that is slightly
 * heavier at the bottom. The same reason a page has a larger foot margin
 * than head margin, and the reason a row of boxes padded to one number all
 * round reads as a form rather than as a card.
 */
.wptm-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 7px;
	padding: 17px 19px 19px;
}

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

/* 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-card__place {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.695rem;
	font-weight: 700;
	line-height: 1.5;
	/* .14em is a lot of air for a line that must also fit two city names;
	   .1em still reads as an eyebrow and buys back a character or two. */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wptm-gold-text, var(--wptm-gold));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * A short rule before the place name.
 *
 * The mark a magazine puts before a standfirst: it says "this line is a
 * label, the heading is below" without a second colour, a second weight or
 * an icon that repeats what the words already say. Inline, so the ellipsis
 * on the line still works, and drawn in the bright accent while the words
 * beside it keep the darkened one they need to be legible.
 */
.wptm-card__place::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 2px;
	margin-inline-end: 8px;
	vertical-align: 0.22em;
	background: var(--wptm-gold);
}

.wptm-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: 0.79rem;
	font-weight: 700;
	color: var(--wptm-navy);
	font-variant-numeric: tabular-nums;
}

.wptm-card__rating-icon {
	line-height: 0;
	color: var(--wptm-gold);
}

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

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

/* The sentence a screen reader hears in place of the number. */
.wptm-card__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The title holds two lines whether it needs them or not, so the line
 * under it starts at the same height on every card of a row. Three would
 * be cut; a title that long is a title the tour page can carry.
 */
.wptm-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-block-size: 2.64em;
	margin: 0;
	overflow: hidden;
	font-family: inherit;
	/* It grows a little with the window, because the card does: a fixed
	   17px title in a 380px column and in a 460px one is the same title in
	   two different measures. */
	font-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.14rem);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.014em;
	color: var(--wptm-navy);
	text-wrap: balance;
	transition: color var(--wptm-transition, 0.25s ease);
	overflow-wrap: anywhere;
}

/*
 * Under the pointer the title takes the accent's dark shade rather than a
 * mix of navy and gold. The mix landed on an olive that belonged to neither
 * colour, and the archive card has always used the dark accent, so the two
 * now answer a hover the same way.
 */
.wptm-card__inner:hover .wptm-card__title,
.wptm-card__inner:focus-within .wptm-card__title {
	color: var(--wptm-gold-text, var(--wptm-gold));
}

/*
 * 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-card__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.62;
	color: var(--wptm-muted);
	/* Two lines that are cut anyway; `pretty` keeps the first from ending
	   on a single short word before the cut. */
	text-wrap: pretty;
}

/*
 * The particulars: how long, and when it next leaves. One quiet line of
 * small type with a hairline mark before each, read in a glance and never
 * competing with the price.
 */
.wptm-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 15px;
	margin-block-start: 1px;
	font-size: 0.795rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wptm-muted);
}

.wptm-card__fact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/*
 * The marks on the particulars line are grey, not gold.
 *
 * A card that paints its accent on the eyebrow, the star, the clock, the
 * calendar and the price has no accent: five things in the brand colour are
 * five things of equal importance, which is the look of a page assembled by
 * a machine that was told the colour and not told what it was for. The gold
 * is kept for the eyebrow's rule and the star; a clock is a unit mark and
 * belongs in the weight of the words it stands beside.
 */
.wptm-card__facticon {
	flex: 0 0 auto;
	line-height: 0;
	color: var(--wptm-faint);
}

/*
 * The foot: the price on the left, the way in on the right, on one
 * baseline, above a hairline. The amount is the largest type on the card
 * below the title, because it is the second thing a reader looks for; the
 * "from" beside it is lowercase and small, a qualifier and not a label.
 */
.wptm-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: auto;
	padding-block-start: 13px;
	/* Lighter than the card's own edge: a rule inside an object should not
	   weigh as much as the edge of it. */
	border-block-start: 1px solid color-mix(in srgb, var(--wptm-line) 65%, transparent);
}

.wptm-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
	color: var(--wptm-navy);
}

/*
 * The price is a small label over a figure, not a word beside it.
 *
 * "from" set on the same line as the amount makes the reader parse two
 * sizes of type before reaching the number they came for. Above it, in the
 * eyebrow's own uppercase, it is read once and then ignored — and it is how
 * the archive card has always drawn it, so the two agree.
 */
.wptm-card__amount {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1px 5px;
	white-space: nowrap;
}

.wptm-card__amount strong {
	font-size: 1.28rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
	font-variant-numeric: tabular-nums;
}

.wptm-card__from {
	flex: 0 0 100%;
	font-size: 0.655rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-card__basis {
	font-size: 0.74rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wptm-muted);
}

.wptm-card__price > .wptm-group-note {
	margin-block-start: 2px;
	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-card__price--quote {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wptm-muted);
}

/*
 * The way in, as a word with a rule under it that the pointer draws out
 * — a link's own gesture, rather than an arrow that jumps.
 */
.wptm-card__cta {
	position: relative;
	flex: 0 0 auto;
	padding-block-end: 4px;
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--wptm-navy);
	white-space: nowrap;
}

/*
 * One crisp pixel, in the accent.
 *
 * A 1.5px rule resolves at 1x as one solid pixel and one half-lit one, which
 * is a rule that looks smudged on exactly the screens most people read on —
 * the same thing the homepage's ghost button was fixed for. And the rule is
 * the accent rather than the word's own ink, so the gesture is the brand
 * drawing itself under the label instead of the label thickening.
 */
.wptm-card__cta::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: var(--wptm-gold);
	transform: scaleX(.3);
	transform-origin: 0 50%;
	transition: transform .34s cubic-bezier(.2, .7, .2, 1);
}

[dir="rtl"] .wptm-card__cta::after {
	transform-origin: 100% 50%;
}

.wptm-card__inner:hover .wptm-card__cta::after,
.wptm-card__inner:focus-within .wptm-card__cta::after {
	transform: scaleX(1);
}

/* Kept for anything still printing the old arrow. */
.wptm-arrow {
	display: inline-block;
}

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

/* ================================================== THE CARD STANDS ALONE ===
 *
 * A listing card is drawn inside whatever the theme puts around it, and a
 * theme is entitled to style an <article>, a <ul> or an <a> however it
 * likes. The few rules below are the ones that decide the card's height and
 * the picture's box; each is written so that a theme's own rule cannot make
 * the card taller than the tour inside it.
 */

/* The picture keeps its box. Some themes set `img { height: auto }` on
   every image on the site, which leaves the photograph at its natural
   height inside a box sized by a ratio. */
.wptm-cards .wptm-card__media {
	flex: 0 0 auto;
	min-height: 0;
}

.wptm-cards .wptm-card__media .wptm-card__img {
	height: 100%;
}

.wptm-cards .wptm-card__body {
	min-height: 0;
}

/* Clearfixes and decorations a theme hangs on an article, a list item or a
   link in a loop. The card draws none of its own on these four elements, so
   nothing of the plugin's is lost here. */
.wptm-cards .wptm-card::before,
.wptm-cards .wptm-card::after,
.wptm-cards .wptm-card__inner::before,
.wptm-cards .wptm-card__inner::after,
.wptm-cards .wptm-card__link::before,
.wptm-cards .wptm-card__link::after,
.wptm-cards .wptm-card__body::before,
.wptm-cards .wptm-card__body::after {
	content: none;
}

/* A grid that asked for a column count gets it where there is room, and
   the automatic fit where there is not. */
@media (min-width: 900px) {
	.wptm-cards--1 { grid-template-columns: minmax(0, 1fr); }
	.wptm-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wptm-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wptm-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wptm-cards-empty {
	padding: 14px 16px;
	border: 1px dashed var(--wptm-line, rgba(0, 0, 0, .15));
	border-radius: var(--wptm-radius-md, 10px);
	color: var(--wptm-muted, #5b6472);
}

@media (max-width: 600px) {
	.wptm-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.wptm-card__body {
		padding: 15px 16px 17px;
	}

	/* One card across the screen is a wide card; a wide picture suits it,
	   and 3:2 at full width is a lot of height before any words. */
	.wptm-card__inner {
		--wptm-card-ratio: 16 / 10;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wptm-card__inner,
	.wptm-card__img,
	.wptm-card__title,
	.wptm-card__cta::after,
	.wptm-card__peek,
	.wptm-card__thumb {
		transition-duration: 0.01ms !important;
	}

	.wptm-card__peek {
		transform: none;
	}

	.wptm-card__inner:hover,
	.wptm-card__inner:focus-within,
	.wptm-card__inner:hover .wptm-card__img,
	.wptm-card__inner:focus-within .wptm-card__img {
		transform: none;
	}
}

/*
 * Touch.
 *
 * Anything a finger lands on gets forty-four pixels, which is the WCAG target
 * size and the figure every platform's own guidance sits within a pixel of. On
 * a cursor these keep the tighter proportions they were drawn with.
 *
 * Keyed on pointer as well as width: a tablet is wide and touched, and a
 * desktop window dragged narrow is neither, so the width test alone answers
 * the wrong half of the question.
 */
@media (max-width: 600px), (pointer: coarse) {
	/* The whole card is the target, so it is already far larger than any
	   minimum; what needs the room is the line of text at the foot of it. */
	.wptm-card__foot {
		min-height: 44px;
		align-items: center;
	}

	.wptm-card__inner:hover,
	.wptm-card__inner:focus-within,
	.wptm-card__inner:hover .wptm-card__img,
	.wptm-card__inner:focus-within .wptm-card__img {
		transform: none;
	}

	/* No hover to reveal it: the strip is simply there, and the shade
	   behind it too, so its edges read on any photograph. */
	.wptm-card__peek {
		opacity: 1;
		transform: none;
		padding: 10px;
		gap: 5px;
	}

	.wptm-card__inner--peek .wptm-card__media::after {
		opacity: 1;
	}

	.wptm-card__thumb,
	.wptm-card__more {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	/* A finger needs the full target; a cursor did not. */
	.wptm-card__ask {
		width: 44px;
		height: 44px;
	}

	.wptm-card__ask svg {
		width: 18px;
		height: 18px;
	}
}

[dir="rtl"] .wptm-card__place,
[dir="rtl"] .wptm-card__badge,
[dir="rtl"] .wptm-card__more {
	letter-spacing: normal;
}

@media (forced-colors: active) {
	.wptm-card__inner,
	.wptm-card__ask,
	.wptm-card__thumb {
		border: 1px solid CanvasText;
	}
}

/* --- Ask on WhatsApp, from the card ------------------------------------- */

/*
 * A sibling of the card link, laid over the corner of the photograph
 * opposite the badge. The card keeps its whole-surface link; this is one
 * more thing on it, not a second copy of it. See the archive card for the
 * same control in the same place.
 */
.wptm-card__inner {
	position: relative;
}

/*
 * Under a cursor it is 38 pixels, not 44.
 *
 * Forty-four is the touch target, and it is right where a finger is the
 * pointer. On a desktop the same circle is a white disc a fifth the height
 * of the photograph, parked on the corner of every picture in the grid; the
 * page reads as a row of buttons with photographs behind them. The coarse
 * pointer query below puts the 44 back where it is needed.
 */
.wptm-card__ask {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: #1f9d55;
	box-shadow: 0 1px 2px rgba(6, 12, 24, .18), 0 4px 10px -6px rgba(6, 12, 24, .4);
	text-decoration: none;
	line-height: 0;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.wptm-card__ask svg {
	width: 17px;
	height: 17px;
}

.wptm-card__ask:hover,
.wptm-card__ask:focus-visible {
	background: #25d366;
	color: #fff;
	transform: scale(1.06);
}

.wptm-card__ask:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.wptm-card__ask,
	.wptm-card__ask:hover {
		transform: none;
	}
}

/* A long badge stops short of the ask button instead of running under it. */
.wptm-card:has(.wptm-card__ask) .wptm-card__badge,
.wptm-card__inner:has(.wptm-card__ask) .wptm-card__badge {
	max-width: calc(100% - 62px);
}

/* ------------------------------------------------------------------------
 * An activity's card.
 *
 * The same card. Two additions: the price it was before a promotion, struck
 * through beside the price, and a "Book" strip along the foot of a card
 * whose activity takes requests — a sibling of the card link, below it, so
 * the whole-surface link and the booking link are two links and not one
 * inside the other.
 * --------------------------------------------------------------------- */

.wptm-card__was {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--wptm-faint);
	text-decoration-color: rgba(0, 0, 0, 0.35);
}

/* No price and no booking: the slot keeps its place so the arrow stays put
   and the row does not collapse, but says nothing. */
.wptm-card__price--none {
	flex: 1 1 auto;
	min-height: 1em;
}

.wptm-card--activity .wptm-card__inner {
	display: flex;
	flex-direction: column;
}

.wptm-card--activity .wptm-card__link {
	flex: 1 1 auto;
	height: auto;
}

.wptm-card__book {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 19px 19px;
	min-height: 42px;
	padding: 9px 16px;
	/* The card's own corner rather than a lozenge: one object should not
	   carry two corner languages. */
	border-radius: var(--wptm-radius-sm, 8px);
	background: var(--wptm-navy);
	color: #fff;
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--wptm-transition), color var(--wptm-transition);
}

.wptm-card__book svg {
	width: 14px;
	height: 14px;
}

.wptm-card__book:hover,
.wptm-card__book:focus-visible {
	background: var(--wptm-gold);
	color: var(--wptm-navy);
}

.wptm-card__book:focus-visible {
	outline: 2px solid var(--wptm-navy);
	outline-offset: 2px;
}

@media (max-width: 600px), (pointer: coarse) {
	.wptm-card__book {
		min-height: 46px;
	}
}

@media (forced-colors: active) {
	.wptm-card__book {
		border: 1px solid CanvasText;
	}
}