/* ==================================================================
   Long Crested Tours — scoped styles (prefixed .lctt- throughout to
   avoid colliding with theme or Destinations-plugin styles)
   ================================================================== */

@font-face {
	font-family: 'Wasted Vindey';
	src: url('/wp-content/uploads/2026/09/Wasted-Vindey.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'AvertaStd-Regular';
	src: url('https://longcrestedsafaris.com/wp-content/uploads/2026/09/AvertaStd-Regular-1.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--lctt-off-white: #F6F2EB;   /* page background */
	--lctt-cream-alt: #F4EEE6;   /* alt section band background (Itinerary) */
	--lctt-chocolate: #3B2418;   /* dark containers / forced brown for titles, links, arrows */
	--lctt-chocolate-soft: rgba(42, 27, 23, 0.75);
	--lctt-cream-text: #FDFBF7;  /* body copy on dark containers (Quick Facts, Inclusions) */
	--lctt-hairline: rgba(42, 27, 23, 0.12);
	--lctt-hairline-dark: rgba(253, 251, 247, 0.22);
	--lctt-serif: 'Wasted Vindey', serif;
	--lctt-sans: 'AvertaStd-Regular', sans-serif;
	--lctt-card-aspect: 4 / 5;

	/* Flat type scale (client spec): 32px titles / 16px body copy / 14px links.
	   Context-driven color: brown by default, swapped to cream inside dark
	   containers below, and forced white on photo-overlay cards further down. */
	--lctt-title-color: var(--lctt-chocolate);
	--lctt-desc-color: var(--lctt-chocolate-soft);
	--lctt-link-color: var(--lctt-chocolate);
}

.lctt-carousel-section,
.lctt-hub,
.lctt-single-content,
.lctt-destination,
.lctt-related {
	background: var(--lctt-off-white);
}

/* ==================================================================
   Flat typography utility classes — applied directly in the PHP
   templates alongside each element's BEM class, so sizing/coloring is
   explicit rather than relying on descendant-selector specificity.
   ================================================================== */
.lctt-title {
	font-family: var(--lctt-serif);
	font-size: 32px;
	line-height: 1.2;
	color: var(--lctt-title-color);
	margin: 0 0 16px;
}
.lctt-desc {
	font-family: var(--lctt-sans);
	font-size: 16px;
	line-height: 1.6;
/* 	color: #f6f2eb; */
	margin: 0 0 12px;
}
.lctt-desc:last-child { margin-bottom: 0; }
.lctt-link {
	font-family: var(--lctt-sans);
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--lctt-link-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lctt-link:hover { color: var(--lctt-link-color); }

/* Dark containers: swap the context color to cream so titles/copy/links
   stay legible against --lctt-chocolate — sizing (32/16/14) is unchanged. */
.lctt-quick-facts,
.lctt-inclusions {
	--lctt-title-color: var(--lctt-cream-text);
	--lctt-desc-color: var(--lctt-cream-text) !important;
	--lctt-link-color: var(--lctt-cream-text);
}

/* .lctt-quick-facts span {
	color: #F6F2EB !important;
} */

/* Card titles/CTAs that sit on a photo (dark gradient overlay behind them)
   always stay white, regardless of the page's light/dark context. */
.lctt-carousel__title,
.lctt-hub-grid__body .lctt-title,
.lctt-related__body .lctt-title {
	color: #FFFFFF;
}
.lctt-carousel__cta,
.lctt-hub-grid__cta,
.lctt-related__cta {
	color: #FFFFFF;
	text-decoration:underline !important;
}
.lctt-carousel__cta:hover,
.lctt-hub-grid__cta:hover,
.lctt-related__cta:hover {
	color: #FFFFFF;
	text-decoration: underline !important;
}

/* ==================================================================
   1. [tours_carousel] — nav + card track only; heading/write-up to
   its left is placed manually per-page in Elementor.
   ================================================================== */
.lctt-carousel-section {
	position: relative;
	padding: 8px 0 0;
	background-color: transparent !important;
}
.lctt-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 20px;
	margin-right: 10px;
	border-radius: 0px !important;
}
.lctt-carousel-nav__arrow {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
/* 	border-radius: 999px; */
	border-radius: 0px !important;
	border: 1px solid var(--lctt-chocolate) !important;
	background: transparent;
	color: var(--lctt-chocolate) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.lctt-carousel-nav__arrow svg { stroke: currentColor !important; }
.lctt-carousel-nav__arrow:hover,
.lctt-carousel-nav__arrow:focus-visible {
	background: var(--lctt-chocolate) !important;
	color: #FFFFFF !important;
	outline: none;
}
.lctt-carousel-nav__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.lctt-carousel {
	overflow: hidden;
}
.lctt-carousel .swiper-wrapper {
	align-items: stretch;
}
.lctt-carousel__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: var(--lctt-card-aspect);
	overflow: hidden;
	background: var(--lctt-chocolate);
}
.lctt-carousel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lctt-carousel__card:hover .lctt-carousel__image {
	transform: scale(1.045);
}
.lctt-carousel__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 12, 9, 0) 45%, rgba(20, 12, 9, 0.82) 100%);
}
.lctt-carousel__body {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 24px;
	z-index: 2;
}
.lctt-carousel__title { margin-bottom: 12px; }

/* ==================================================================
   2. [tours_grid] — Tours Hub grid (no built-in heading)
   ================================================================== */
.lctt-hub {
	padding: 0;
}
.lctt-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1240px;
	margin: 0 auto;
}
.lctt-hub-grid__image-wrap,
.lctt-related__image-wrap {
	position: relative;
	aspect-ratio: var(--lctt-card-aspect);
	overflow: hidden;
	background: var(--lctt-chocolate);
}
.lctt-related__image-wrap {
	/* This box has no in-flow content (image/overlay/title inside are all
	   position:absolute), so its height depends entirely on aspect-ratio
	   resolving correctly — and on mobile that's getting overridden/ignored
	   somewhere on the page, collapsing the card to almost nothing. Force
	   the height with the old height:0 + padding-top(%) technique instead,
	   which reserves real box-model height directly and can't be starved
	   the way aspect-ratio can. 125% = 5/4, matching the 4:5 card ratio. */
	width: 100% !important;
/* 	height: 0 !important; */
	padding-top: 125% !important;
	aspect-ratio: unset;
}
.lctt-hub-grid__image,
.lctt-related__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
.lctt-hub-grid__overlay,
.lctt-related__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 12, 9, 0) 45%, rgba(20, 12, 9, 0.82) 100%);
}
.lctt-hub-grid__body,
.lctt-related__body {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	z-index: 2;
}
.lctt-hub-grid__body .lctt-title,
.lctt-related__body .lctt-title {
	margin-bottom: 10px;
}

/* ==================================================================
   3. [tour_quick_facts] — light-on-dark, for the manual Hero
   ================================================================== */
.lctt-quick-facts {
	max-width: 260px;
}
.lctt-quick-facts__label {
	margin-bottom: 6px;
	font-size:24px;
}
.lctt-quick-facts__value {
 	margin-bottom: 20px !important;
	color: #F6F2EB;
	/*padding-bottom: 20px;
	border-bottom: 1px solid var(--lctt-hairline-dark); */
}
.lctt-quick-facts__value:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ==================================================================
   4. [tour_single_content]
   ================================================================== */

/* -- Overview -- centered narrative that opens the Content Page section */
.lctt-overview {
	max-width: 900px;
	margin: 0 auto;
	padding: 50px 40px;
	text-align: center;
}
.lctt-overview__narrative {
	font-family: var(--lctt-serif);
	font-size: 34px;
	line-height: 1.35;
	color: var(--lctt-title-color);
	margin: 0 0 20px;
}
.lctt-overview__intro {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* -- Itinerary Timeline --
   Base state (content fits within one viewport): unchanged from before —
   a plain 2-col grid with the image sticky within its own column.
   .lctt-itinerary__pin / .lctt-itinerary__scroll are neutral passthrough
   wrappers here (display:contents) so they don't affect this layout at all.
   Locked-scroll state kicks in only when JS (tours.js) measures that the
   day-list is taller than the viewport and adds .lctt-itinerary--pinned —
   see the block below. */
.lctt-itinerary {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 48px;
	align-items: start;
	background: var(--lctt-cream-alt);
	padding: 50px 40px;
	height: auto !important;
}
.lctt-itinerary__pin,
.lctt-itinerary__scroll {
	display: contents;
}
.lctt-itinerary__image-wrap {
	position: sticky;
	top: 32px;
}
.lctt-itinerary__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--lctt-hairline);
	display: block;
}
.lctt-itinerary__day {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--lctt-hairline);
}
.lctt-itinerary__day-text {
	color: #363636;
}
.lctt-itinerary__day:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.lctt-itinerary__day-title { margin-bottom: 10px; }

/* -- Itinerary Timeline: locked-scroll state --
   Added by tours.js only when the day-list's natural height exceeds the
   viewport. The outer <section> becomes a tall spacer (JS sets its height
   inline); .lctt-itinerary__pin sticks at 100vh for the duration of that
   spacer, and .lctt-itinerary__scroll is translated upward via JS as the
   page scrolls, so the user is "locked" on the section and scrolls through
   its content, then the section releases and normal scrolling continues. */
.lctt-itinerary--pinned {
	display: block;
	position: relative;
	padding: 0;
	overflow: hidden;
}
.lctt-itinerary--pinned .lctt-itinerary__pin {
	display: flex;
	align-items: stretch;
	gap: 48px;
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 50px 40px;
	box-sizing: border-box;
	overflow: hidden;
}
.lctt-itinerary--pinned .lctt-itinerary__image-wrap {
	position: static;
	flex: 0 0 400px;
}
.lctt-itinerary--pinned .lctt-itinerary__image {
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
}
.lctt-itinerary--pinned .lctt-itinerary__body {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.lctt-itinerary--pinned .lctt-itinerary__scroll {
	display: block;
	will-change: transform;
}

/* -- Inclusions & Key Details -- */
.lctt-inclusions {
	background: var(--lctt-chocolate);
	padding: 50px 40px;
	text-align: center;
}
.lctt-inclusions__title,
.lctt-inclusions__subheading {
	margin-left: auto;
	margin-right: auto;
}
.lctt-inclusions__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 48px;
}
.lctt-inclusions__row:last-child { margin-bottom: 0; }
.lctt-inclusions__item {
	flex: 1 1 180px;
	max-width: 220px;
/* 	padding: 0 24px; */
	margin-bottom: 0;
	border-left: 1px solid var(--lctt-hairline-dark);
	color: #F6F2EB !important;
}
.lctt-inclusions__item:first-child { border-left: none; }

/* ==================================================================
   5. Linked Destination (rendered inside [tour_single_content])
   ================================================================== */
.lctt-destination {
	max-width: 100%;
	margin: 0 auto;
	padding: 50px 40px;
	background-color: #fff;
	max-width: auto;
}
.lctt-destination__card {
	max-width: 400px;
	margin-top: 20px;
}
.lctt-destination__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	margin-bottom: 16px;
}
.lctt-destination__cta {
	text-decoration: underline !important;
}

/* ==================================================================
   6. [tours_related_journeys] — no built-in heading
   ================================================================== */
.lctt-related {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
}
.lctt-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* ==================================================================
   Responsive — tablet (<=1024px) and mobile (<=768px)
   ================================================================== */
@media (max-width: 1024px) {
	.lctt-hub-grid,
	.lctt-related__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.lctt-carousel__card {
		max-width: 400px;
	}
	.lctt-itinerary {
		grid-template-columns: 300px 1fr;
		gap: 36px;
		padding: 44px 32px;
	}
	.lctt-itinerary--pinned .lctt-itinerary__pin {
		padding: 44px 32px;
	}
	.lctt-overview,
	.lctt-destination,
	.lctt-inclusions {
		padding: 44px 32px;
	}
	.lctt-overview__narrative {
		font-size: 28px;
	}
}

@media (max-width: 768px) {
	.lctt-hub-grid,
	.lctt-related__grid {
/* 		grid-template-columns: 1fr; */
	}
	/* Safety net only: tours.js sets the real pixel height on
	   .lctt-related__image-wrap on load; this just stops the card from
	   ever rendering at 0 height (and overlapping the footer) in the
	   brief instant before that JS runs, or if JS is blocked. */
	.lctt-related__image-wrap {
/* 		min-height: 34vh !important; */
	}
	.lctt-carousel-nav {
		justify-content: start;
		margin-bottom: 16px;
	}
	.lctt-carousel__card {
		max-width: none;
	}
	.lctt-itinerary {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 40px 20px;
	}
	.lctt-itinerary__image-wrap {
		position: static;
	}
	.lctt-inclusions {
		padding: 40px 20px;
	}
	.lctt-inclusions__row {
		margin-bottom: 32px;
	}
	.lctt-inclusions__item {
		flex: 1 1 45%;
		max-width: none;
		border-left: none;
		padding: 8px 8px;
		margin-bottom: 12px;
	}
	.lctt-overview,
	.lctt-destination {
		padding: 40px 20px;
	}
	.lctt-overview__narrative {
		font-size: 24px;
	}
	.lctt-title { font-size: 26px; }
}

@media (max-width: 480px) {
	.lctt-inclusions__item {
		flex: 1 1 100%;
	}
	.lctt-quick-facts {
		max-width: none;
	}
}