/*
 * Tour carousel: a scroll-snapping row of cards.
 *
 * Colours follow the site: #218035 green, #1c2011 ink, #5f656b muted.
 */

.leaf-carousel {
	--lc-green: #218035;
	--lc-ink: #1c2011;
	--lc-muted: #5f656b;
	--lc-line: #d9ded8;

	margin: 48px 0 56px;
	color: var(--lc-ink);
}

.leaf-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.leaf-carousel .leaf-carousel__title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.25;
	color: var(--lc-ink);
}

.leaf-carousel__nav {
	display: flex;
	flex: none;
	gap: 8px;
}

.leaf-carousel__nav[hidden] {
	display: none;
}

.leaf-carousel .leaf-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--lc-line);
	border-radius: 50%;
	background: #fff;
	color: var(--lc-ink);
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.leaf-carousel .leaf-carousel__btn:hover:not([disabled]) {
	border-color: var(--lc-green);
	background: var(--lc-green);
	color: #fff;
}

.leaf-carousel .leaf-carousel__btn[disabled] {
	opacity: .38;
	cursor: default;
}

.leaf-carousel .leaf-carousel__btn:focus-visible,
.leaf-carousel .leaf-carousel__track:focus-visible,
.leaf-carousel .leaf-card__link:focus-visible {
	outline: 3px solid var(--lc-green);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- track --- */

/*
 * Flex, not grid. With grid-auto-flow: column the columns were sized by
 * grid-auto-columns: minmax(0, ...), and the zero minimum let all eighteen
 * cards squeeze into the visible width instead of overflowing - eighteen
 * one-letter-wide columns. A flex row with flex-shrink: 0 on the items
 * cannot do that: they keep their width and the row scrolls.
 */
.leaf-carousel .leaf-carousel__track {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 4px 4px 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	list-style: none;
	scrollbar-width: thin;
}

.leaf-carousel .leaf-carousel__item {
	flex: 0 0 auto;
	width: 80%;
	max-width: 320px;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

/* Two across, then three, then four. */
@media (min-width: 560px) {
	.leaf-carousel .leaf-carousel__item {
		width: calc((100% - 18px) / 2);
		max-width: none;
	}
}

@media (min-width: 860px) {
	.leaf-carousel .leaf-carousel__item {
		width: calc((100% - 2 * 18px) / 3);
	}
}

@media (min-width: 1140px) {
	.leaf-carousel .leaf-carousel__item {
		width: calc((100% - 3 * 18px) / 4);
	}
}

/* ---------------------------------------------------------------- card --- */

.leaf-card {
	height: 100%;
	border: 1px solid var(--lc-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .18s, transform .18s;
}

.leaf-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(16, 42, 22, .14);
}

.leaf-carousel .leaf-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * A fixed 3:2 media box, so a card is the same height before its photograph
 * arrives as after - nothing in the row can shift as images load.
 */
.leaf-card__media {
	aspect-ratio: 3 / 2;
	background: #eef1ee;
	overflow: hidden;
}

.leaf-carousel .leaf-card__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

@supports not (aspect-ratio: 3 / 2) {
	.leaf-card__media {
		height: 180px;
	}
}

.leaf-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.leaf-carousel .leaf-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lc-ink);
}

.leaf-card__link:hover .leaf-card__title {
	color: var(--lc-green);
}

.leaf-carousel .leaf-card__meta {
	margin: 0;
	font-size: 14px;
	color: var(--lc-muted);
}

/* ----------------------------------------------------------- see all --- */

.leaf-carousel__all {
	margin: 18px 0 0;
	text-align: center;
}

.leaf-carousel .leaf-carousel__all-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 24px;
	border: 1px solid var(--lc-green);
	border-radius: 999px;
	color: var(--lc-green);
	font-weight: 600;
	text-decoration: none;
}

.leaf-carousel .leaf-carousel__all-link:hover {
	background: var(--lc-green);
	color: #fff;
}

/* -------------------------------------------------------- page header --- */

.leaf-tourpage__header {
	margin: 40px 0 0;
	text-align: center;
}

.leaf-tourpage__header .leaf-tourpage__title {
	margin: 0 0 8px;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.2;
}

.leaf-tourpage__desc {
	max-width: 720px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: #5f656b;
}

@media (prefers-reduced-motion: reduce) {
	.leaf-card,
	.leaf-carousel .leaf-carousel__btn {
		transition: none;
	}

	.leaf-card:hover {
		transform: none;
	}
}

/* ------------------------------------------------------- page banner --- */

/*
 * Full-bleed: this template renders inside the theme's centred container, so
 * the banner is pushed out to the window edges with a negative margin rather
 * than by restructuring the page. 100vw includes the scrollbar, which is what
 * the translate corrects.
 */
.leaf-tourpage__header.has-banner {
	position: relative;
	/* Negative margins rather than width:100vw plus a transform. Same
	   full-bleed result, but the element keeps its normal width, so it does
	   not become a containing block for anything inside it and there is no
	   half-a-scrollbar drift to correct. */
	margin: 0 calc(50% - 50vw) 8px;
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #16281a;
}

.leaf-tourpage__media {
	position: absolute;
	inset: 0;
}

.leaf-tourpage__header .leaf-tourpage__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	/* The per-page focus is set inline on the image; this is the fallback. */
	object-position: center 55%;
}

/*
 * A scrim, so white text is legible whatever the photograph does. The first
 * version was too light: over the bright sky in the Nagarkot picture the
 * heading had barely any contrast. This darkens the middle, where the words
 * are, and stays lighter at the edges so the photograph still reads.
 */
.leaf-tourpage__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 80% at 50% 50%, rgba(8, 18, 11, .52) 0%, rgba(8, 18, 11, .18) 100%),
		linear-gradient(180deg, rgba(8, 18, 11, .30) 0%, rgba(8, 18, 11, .54) 100%);
}

/*
 * The words line up with the page content rather than floating anywhere in a
 * 1,900px-wide picture: the same max width as the theme's container, so the
 * heading sits over the same column as the cards below it.
 */
.leaf-tourpage__header.has-banner .leaf-tourpage__copy {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1320px;
	padding: 60px 20px;
	text-align: center;
}

.leaf-tourpage__header.has-banner .leaf-tourpage__desc {
	max-width: 760px;
	margin-inline: auto;
}

.leaf-tourpage__header.has-banner .leaf-tourpage__title,
.leaf-tourpage__header.has-banner .leaf-tourpage__desc {
	color: #fff;
}

.leaf-tourpage__header.has-banner .leaf-tourpage__desc {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

@media (max-width: 600px) {
	.leaf-tourpage__header.has-banner {
		min-height: 230px;
	}

	.leaf-tourpage__header.has-banner .leaf-tourpage__copy {
		padding: 40px 18px;
	}
}

/* The theme's archive header repeats the term name and description that the
   banner above already shows. The breadcrumb, which sits outside it, stays. */
body.leaf-tourpage .page-header-wrap {
	display: none;
}

/* Without that band the container's top padding is all that is left, and it
   leaves the banner floating. */
body.leaf-tourpage .site-content > .container {
	padding-top: 0;
}

/* WP Travel Engine's breadcrumb holder renders nothing here - the theme
   already prints a breadcrumb above - but it still occupies a band above the
   banner. It is not :empty (it holds whitespace), so hide it outright. */
body.leaf-tourpage #wte-crumbs {
	display: none;
}

/* Close the space the hidden archive header used to occupy, so the banner
   starts straight under the breadcrumb. */
body.leaf-tourpage .site-content,
body.leaf-tourpage .site-content > .container,
body.leaf-tourpage .main-content-wrapper {
	padding-top: 0;
	margin-top: 0;
}

/* ------------------------------------- breadcrumb, on the banner --- */

/*
 * On the Inbound and Outbound pages the breadcrumb is moved out of the
 * theme's white band and printed inside the banner, so the photograph runs
 * all the way up to the site header. Everything in it goes white, with a
 * shadow, because it now sits on a picture rather than on paper.
 */
.leaf-tourpage__crumbs {
	margin: 0 0 18px;
}

.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap {
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
}

.leaf-tourpage__crumbs .travel-monster-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/*
 * The theme colours these links from .travel-monster-breadcrumb-main-wrap
 * span a, and its hover state carries !important. Those rules assume a white
 * band; here the trail is on a photograph, so they have to be beaten outright
 * rather than by a shorter selector that only happens to win on order. The
 * link itself is coloured, not just the <span> inside it, so nothing shows
 * through in a state this file has not thought of.
 */
.leaf-tourpage__crumbs,
.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span a,
.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span.current a,
.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span a:hover,
.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span a:focus,
.leaf-tourpage__crumbs span {
	color: #fff !important;
}

.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span a {
	text-decoration: none;
	opacity: .9;
}

.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span a:hover,
.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span a:focus {
	opacity: 1;
	text-decoration: underline;
}

/* The current page is the one crumb that is not a link, so it carries the
   weight instead of a colour difference. */
.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap span.current a {
	opacity: 1;
	font-weight: 600;
	cursor: default;
}

.leaf-tourpage__crumbs .separator {
	display: inline-flex;
	align-items: center;
	margin: 0 6px;
}

.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap .separator svg {
	width: 11px;
	height: 11px;
	margin: 0;
	fill: #fff;
}

.leaf-tourpage__crumbs .travel-monster-breadcrumb-main-wrap .separator svg path {
	fill: #fff;
	opacity: .75;
}

/* The banner now carries the breadcrumb as well as the heading, so it needs
   the height the white band used to take up. */
body.leaf-tourpage .leaf-tourpage__header.has-banner {
	min-height: 390px;
}

@media (max-width: 600px) {
	body.leaf-tourpage .leaf-tourpage__header.has-banner {
		min-height: 270px;
	}

	.leaf-tourpage__crumbs {
		margin-bottom: 12px;
	}

	.leaf-tourpage__crumbs .travel-monster-breadcrumbs {
		font-size: 13px;
	}
}