:root {
	--lctd-brown: #3B2418;
	--lctd-cream: #F6F2EB;
	--lctd-white: #FFFFFF;
}

/* ============================================================
   1. Individual destination page — mid-content
   ============================================================ */
.lctd-content section {
/* 	max-width: 960px; */
	margin: 0 auto;
	padding: 50px 40px;
}
.lctd-overview h2,
.lctd-highlights h2,
.lctd-ways h2,
.lctd-explore-other h2 {
	font-family: 'Wasted Vindey', serif !important;
	color: var(--lctd-brown) !important;
	font-size:48px;
	margin-bottom: 16px;
}
.lctd-overview p,
.lctd-highlights p,
.lctd-ways p {
	font-family: 'AvertaStd-Regular', sans-serif;
	color: var(--lctd-brown) !important;
	line-height: 1.6;
}
.lctd-overview {
	text-align: center;
}
.lctd-overview p {
	max-width: 700px;
	margin: 0 auto;
}

.lctd-gallery {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr 1fr 0.9fr;
	gap: 12px;
	align-items: start;
	padding: 0px 40px 50px !important;
}
.lctd-gallery img {
	width: 100%;
/* 	aspect-ratio: 4 / 5; */
	object-fit: cover;
	border-radius: 0;
}

.lctd-highlights {
	background-color: #fff !important;
}

.lctd-highlights__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 24px;
}
.lctd-highlights__item {
	display: grid;
	grid-template-columns: 0.7fr 1.1fr 1fr;
	gap: 32px;
/* 	align-items: center; */
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(59, 36, 24, 0.1);
}
.lctd-highlights__item:last-child {
	border-bottom: none;
}
.lctd-highlights__item-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}
.lctd-highlights__item-title {
	font-family: 'Wasted Vindey', serif !important;
	color: var(--lctd-brown) !important;
	margin: 0;
}
.lctd-highlights__item-body {
	font-family: 'AvertaStd-Regular', sans-serif;
	color: var(--lctd-brown) !important;
	line-height: 1.6;
	margin: 0;
}
.lctd-highlights__more {
	font-family: 'AvertaStd-Semibold', sans-serif;
	color: var(--lctd-brown) !important;
	letter-spacing: 0.04em;
}

/* Shared card treatment — Ways of the Mara CTA and Explore Other
   Destinations use the exact same visual: full-bleed image, dark gradient
   overlay, white text overlaid on top. Requested explicitly so these two
   read as one consistent pattern rather than two different card styles. */
.lctd-feature-card {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none !important;
	color: #FFFFFF !important;
}
.lctd-feature-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.lctd-feature-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 9, 0.54);
}
.lctd-feature-card__text {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 0px;
	z-index: 2;
}
.lctd-feature-card__title {
	display: block;
	font-family: 'Wasted Vindey', serif;
	font-size: 24px;
	color: #FFFFFF !important;
	margin-bottom: 6px;
}
.lctd-feature-card__link {
	display: block;
	font-family: 'AvertaStd-Semibold', sans-serif;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-decoration: underline;
	color: #FFFFFF !important;
	font-weight:300 !important;
	margin-bottom: 20px;
}
/* Explicitly neutralized — nothing should change on hover */
.lctd-feature-card:hover,
.lctd-feature-card:hover .lctd-feature-card__title {
	color: #FFFFFF !important;
	text-decoration: none !important;
}
.lctd-feature-card:hover .lctd-feature-card__link {
	color: #FFFFFF !important;
	text-decoration: underline !important;
}

.lctd-ways__cta.lctd-feature-card {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 3 / 3;
	margin-top: 20px;
}

.lctd-explore-other {
	background-color: #fff;
}

.lctd-explore-other__list {
	display: flex;
	gap: 16px;
/* 	overflow-x: auto; */
	margin-top: 20px;
}
.lctd-explore-other__item.lctd-feature-card {
	flex: 0 0 220px;
	aspect-ratio: 4 / 3;
	max-height:110px;
	text-align: center !important;
}

/* Fallback CTA (no related tour yet) has no image — plain underlined text link */
.lctd-ways--fallback .lctd-ways__cta {
	display: inline-block;
	margin-top: 20px;
	text-decoration: underline;
	color: var(--lctd-brown) !important;
	font-family: 'AvertaStd-Semibold', sans-serif;
}

/* Quick Facts — for manual placement inside your Hero */
.lctd-quick-facts__label {
	font-family: 'Wasted Vindey', serif;
	font-size: 24px;
	letter-spacing: 0.08em;
	color: var(--lctd-white);
	margin-bottom: 4px;
}
.lctd-quick-facts__value {
	font-family: 'AvertaStd-Regular', sans-serif;
	font-size: 16px;
	color: var(--lctd-cream);
	margin-bottom: 20px !important;
}
.lctd-short-description {
	font-family: 'AvertaStd-Regular', sans-serif;
	color: var(--lctd-cream);
}

/* ============================================================
   2. Destinations Hub grid
   ============================================================ */
.lctd-hub-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 0px;
}
.lctd-hub-grid__card img {
	width: 100%;
	object-fit: cover;
	border-radius: 0;
	margin-bottom: 12px;
	aspect-ratio: 4 / 3; /* default for any card beyond the first two, so a 3rd+ destination doesn't render at its raw image ratio */
}
.lctd-hub-grid__card:nth-child(1) img { aspect-ratio: 4 / 3; }
.lctd-hub-grid__card:nth-child(2) img { aspect-ratio: 4 / 3; }
.lctd-hub-grid__card h3 {
	font-family: 'Wasted Vindey', serif;
	color: var(--lctd-brown);
	margin-bottom: 6px;
}
.lctd-hub-grid__card p {
	font-family: 'AvertaStd-Regular', sans-serif;
	color: var(--lctd-brown);
	margin-bottom: 8px;
}
.lctd-hub-grid__card a {
	text-decoration: underline !important;
	color: var(--lctd-brown);
}
.lctd-hub-grid__card a:hover {
	color: var(--lctd-brown);
}

/* ============================================================
   3. Homepage carousel — edge-to-edge, arrow-driven
   ============================================================ */
/* Selectors below are anchored to #lctdCarousel / #lctdCarouselTrack (the
   shortcode's own element IDs) purely to win specificity fights — a theme or
   Elementor mobile "auto-height" reset targeting generic classes shouldn't be
   able to out-rank an ID-anchored rule the way it could a plain class rule. */
#lctdCarousel.lctd-carousel {
	position: relative !important;
	width: 100%;
	height: 100vh !important;
	height: 100dvh !important; /* accounts for mobile browser chrome (address bar) so the hero doesn't overshoot the real visible viewport */
	min-height: 100vh !important;
	min-height: 100dvh !important;
	overflow: hidden;
	touch-action: pan-y; /* let vertical page scroll pass through while we handle horizontal swipe ourselves */
}
#lctdCarouselTrack.lctd-carousel__track {
	display: flex !important;
	width: 100%;
	height: 100% !important;
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
#lctdCarousel .lctd-carousel__slide {
	position: relative !important;
	flex: 0 0 100%;
	width: 100%;
	height: 100% !important;
}
.lctd-carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 9, 0.35);  
  z-index: 1; /* sits above the image (z-index: 0), below the title/text (z-index: 2) */
  pointer-events: none; /* so it doesn't block clicks on the CTA link sitting above it */
}
#lctdCarousel .lctd-carousel__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	z-index: 0;
	display: block !important;
}
/* !important below is defensive: on some builds a theme's or Elementor's mobile
   "stack content" / "auto height" rules were overriding position and height on
   these elements, collapsing the image and dropping title/text/nav into normal
   document flow below it instead of over it. */
#lctdCarousel .lctd-carousel__title {
	position: absolute !important;
	top: 64px;
	left: 64px;
	color: #FFFFFF;
	font-family: 'Wasted Vindey', serif;
	font-size: 56px;
	z-index: 2;
	max-width: 70%;
}
#lctdCarousel .lctd-carousel__text {
	position: absolute !important;
	bottom: 80px;
	right: 64px;
	color: #FFFFFF;
	max-width: 360px;
	z-index: 2;
}
.lctd-carousel__text p {
	font-family: 'AvertaStd-Regular', sans-serif;
	font-size: 16px;
	margin-bottom: 12px;
}
.lctd-carousel__cta {
	font-family: 'AvertaStd-Semibold', sans-serif;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-decoration: underline !important;
	color: #FFFFFF;
}
.lctd-carousel__cta:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
#lctdCarousel .lctd-carousel__nav {
	position: absolute !important;
	bottom: 64px;
	left: 64px;
	display: flex !important;
	align-items: center;
	gap: 16px;
	z-index: 3;
}
.lctd-carousel__arrow {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	width: 40px;
	height: 40px;
	border-radius: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	background: transparent !important;
	color: #FFFFFF !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.lctd-carousel__arrow:hover,
.lctd-carousel__arrow:focus {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #FFFFFF !important;
}
.lctd-carousel__count {
	font-family: 'AvertaStd-Regular', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 0.04em;
}

/* ============================================================
   Mobile responsiveness — was entirely missing before
   ============================================================ */
@media (max-width: 767px) {
	/* Carousel */
	#lctdCarousel .lctd-carousel__title {
		font-size: 32px;
		top: 32px !important;
		left: 24px !important;
		max-width: 85%;
	}
	#lctdCarousel .lctd-carousel__text {
		bottom: 90px !important;
		right: 24px !important;
		left: 24px !important;
		max-width: none;
	}
	#lctdCarousel .lctd-carousel__nav {
		bottom: 24px !important;
		left: 24px !important;
	}
	.lctd-carousel__arrow {
		width: 44px;  /* 40px is under the ~44px minimum comfortable touch target on mobile */
		height: 44px;
	}

	/* Individual page content */
	.lctd-gallery {
		grid-template-columns: repeat(1, 1fr);
	}
	.lctd-highlights__item {
		grid-template-columns: 1fr;
		gap:12;
	}
	.lctd-highlights__item-image {
		order: -1; /* image above text on mobile, reads better stacked this way */
	}

	.lctd-ways__cta.lctd-feature-card {
		max-width: none;
	}

	/* Hub grid */
	.lctd-hub-grid {
		grid-template-columns: 1fr;
	}
	.lctd-hub-grid__card:nth-child(1) img,
	.lctd-hub-grid__card:nth-child(2) img {
		aspect-ratio: 4 / 3; /* one consistent ratio once it's a single column, not two competing ones */
	}

	/* ------------------------------------------------------------
	   overview_gallery / Mara Experience / Ways of the Mara /
	   Explore Other Destinations — each is meant to be its own
	   full-width section on mobile, not a card floating inside
	   whatever padded container the page builder wraps it in. Break
	   each one out to the true viewport edge, then apply the site's
	   20px mobile section padding on top of that.
	   ------------------------------------------------------------ */
	.lctd-content {
		overflow-x: hidden; /* safety net for the 100vw break-out below */
	}
	.lctd-overview,
	.lctd-gallery,
	.lctd-highlights,
	.lctd-ways,
	.lctd-explore-other {
		box-sizing: border-box;
		width: 100vw !important;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		padding: 20px !important;
	}

	/* Heading title — e.g. "The Mara Experience" */
	.lctd-overview h2,
	.lctd-highlights h2,
	.lctd-ways h2,
	.lctd-explore-other h2 {
		font-size: 32px !important;
	}

	/* Sub-heading — e.g. "Predators & Big Five" */
	.lctd-highlights__item-title {
		font-size: 26px !important;
	}

	/* Explore Other Destinations — this was a fixed 220px-wide flex row
	   with overflow-x commented out and a max-height fighting its own
	   aspect-ratio, so on mobile it either spilled past the viewport or
	   squashed the cards. Turn it into an actual swipeable carousel. */
	.lctd-explore-other__list {
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.lctd-explore-other__list::-webkit-scrollbar {
		display: none;
	}
	.lctd-explore-other__item.lctd-feature-card {
		flex: 0 0 78%;
		max-width: 320px;
		max-height: none;
		aspect-ratio: 4 / 3;
		scroll-snap-align: start;
	}
}

/* Extra-small phones — the 767px breakpoint alone still leaves things tight below ~380px */
@media (max-width: 380px) {
	#lctdCarousel .lctd-carousel__title {
		font-size: 26px;
	}
	#lctdCarousel .lctd-carousel__text {
		bottom: 100px !important;
	}
	.lctd-carousel__text p {
		font-size: 14px;
	}
}