/* Green Orbit: the trip page (03 §4.4, 04 §10.4). Loaded only on /itineraries/<trip>/ (functions.php).
   The markup is Core's templates/single-trip.php. White and pale green carry the page; the only teal on it is the site
   header and footer. Colours come from tokens.css. */

body.go-trip-page {
	--go-trip-pale: #F7F9F9; /* Pale green (04 §2.1) */
	--go-trip-ink: var(--go-forest-800);
	--go-trip-line: var(--go-border-light);
	background: var(--go-white);
}

html {
	scroll-padding-top: 96px;
}

body.go-trip-page .go-trip.site-main {
	/* Hello Elementor boxes .site-main at 1140 px; the enquire band runs edge to edge, so the wraps set the width. */
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	color: var(--go-text-muted);
	font-family: var(--go-font-body);
	font-size: 17px;
	line-height: 1.6;
	padding-bottom: var(--go-space-9);
}

.go-trip__wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--go-content-width) + 2 * var(--go-gutter));
	margin-inline: auto;
	padding-inline: var(--go-gutter);
}

.go-trip :is(h1, h2, h3) {
	margin: 0;
	color: var(--go-trip-ink);
	font-family: var(--go-font-display);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

.go-trip :is(p, ul, ol) {
	margin: 0;
}

.go-trip a:focus-visible,
.go-trip button:focus-visible,
.go-trip summary:focus-visible {
	outline: 3px solid var(--go-forest-800);
	outline-offset: 2px;
}

/* ---------- Breadcrumb ---------- */
.go-trip-crumbs {
	padding-block: var(--go-space-5) var(--go-space-4);
	font-size: 14px;
}

.go-trip-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	padding: 0;
	list-style: none;
}

.go-trip-crumbs li:not(:last-child)::after {
	content: "\203A";
	margin-left: 8px;
	color: var(--go-green-600);
}

.go-trip-crumbs a {
	color: var(--go-trip-ink);
	text-decoration: none;
}

.go-trip-crumbs a:hover {
	text-decoration: underline;
}

.go-trip-crumbs [aria-current] {
	color: var(--go-text-muted);
}

/* ---------- Gallery: the main photo tall on the left, two stacked, one tall on the right ---------- */
.go-trip-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--go-space-3);
	height: clamp(360px, 40vw, 520px);
}

.go-trip-gallery__tile {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--go-radius-md);
	background: var(--go-trip-pale);
	overflow: hidden;
	cursor: zoom-in;
}

.go-trip-gallery__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--go-ease-in);
}

.go-trip-gallery__tile:hover img {
	transform: scale(1.03);
}

.go-trip-gallery__tile--0 {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.go-trip-gallery__tile--1 {
	grid-column: 2;
	grid-row: 1;
}

.go-trip-gallery__tile--2 {
	grid-column: 2;
	grid-row: 2;
}

.go-trip-gallery__tile--3 {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.go-trip-gallery__tile:is(.go-trip-gallery__tile--4, .go-trip-gallery__tile--5, .go-trip-gallery__tile--6, .go-trip-gallery__tile--7, .go-trip-gallery__tile--8, .go-trip-gallery__tile--9) {
	display: none;
}

.go-trip-gallery--1 .go-trip-gallery__tile--0 {
	grid-column: 1 / -1;
}

.go-trip-gallery--2 .go-trip-gallery__tile--1 {
	grid-column: 2 / -1;
	grid-row: 1 / span 2;
}

.go-trip-gallery--2 .go-trip-gallery__tile--0 {
	grid-column: 1;
}

.go-trip-gallery--3 .go-trip-gallery__tile--1,
.go-trip-gallery--3 .go-trip-gallery__tile--2 {
	grid-column: 2 / -1;
}

.go-trip-gallery__more {
	position: absolute;
	right: var(--go-space-3);
	bottom: var(--go-space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--go-space-2);
	min-height: 40px;
	padding: 0 var(--go-space-4);
	border-radius: var(--go-radius-pill);
	background: var(--go-white);
	color: var(--go-trip-ink);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--go-shadow-md);
}

.go-trip-gallery__more .go-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Lightbox ---------- */
.go-trip-lightbox {
	box-sizing: border-box;
	width: min(96vw, 1200px);
	max-width: none;
	max-height: 92vh;
	padding: var(--go-space-4);
	border: 0;
	border-radius: var(--go-radius-lg);
	background: var(--go-white);
	overflow: visible;
}

.go-trip-lightbox[open] {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	align-items: center;
	gap: var(--go-space-3);
}

.go-trip-lightbox::backdrop {
	background: rgba(10, 59, 97, .72);
}

.go-trip-lightbox__figure {
	margin: 0;
	text-align: center;
}

.go-trip-lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 120px);
	margin-inline: auto;
	border-radius: var(--go-radius-sm);
	object-fit: contain;
}

.go-trip-lightbox__figure figcaption {
	margin-top: var(--go-space-3);
	font-size: 14px;
	color: var(--go-text-muted);
}

.go-trip-lightbox :is(.go-trip-lightbox__nav, .go-trip-lightbox__close) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--go-radius-pill);
	background: var(--go-trip-pale);
	color: var(--go-trip-ink);
	cursor: pointer;
}

.go-trip-lightbox :is(.go-trip-lightbox__nav, .go-trip-lightbox__close):hover {
	background: var(--go-accent);
}

.go-trip-lightbox__close {
	position: absolute;
	top: -20px;
	right: -8px;
	box-shadow: var(--go-shadow-md);
}

/* ---------- Page layout ---------- */
.go-trip__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--go-space-10);
	align-items: start;
	margin-top: var(--go-space-9);
}

.go-trip__main {
	min-width: 0;
}

.go-trip__side {
	position: sticky;
	top: 96px;
}

/* ---------- Heading, badge, route, what's included ---------- */
.go-trip-head__title {
	font-size: clamp(32px, 4.2vw, 48px);
}

.go-trip-head__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--go-space-3);
	margin-top: var(--go-space-4);
	color: var(--go-trip-ink);
	font-weight: 600;
}

.go-trip-head__badge {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: var(--go-radius-pill);
	background: var(--go-accent);
	color: var(--go-forest-950);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.go-trip-includes {
	/* One row on desktop: each item is an icon over its label. Two by two on phones (below). */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--go-space-5) var(--go-space-4);
	margin-top: var(--go-space-6) !important;
	padding: var(--go-space-5) 0 0;
	border-top: 1px solid var(--go-trip-line);
	list-style: none;
}

.go-trip-includes li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--go-space-2);
	color: var(--go-trip-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.go-trip-includes__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--go-radius-pill);
	background: var(--go-trip-pale);
	color: var(--go-green-700);
}

/* ---------- Content blocks ---------- */
.go-trip-block {
	margin-top: var(--go-space-9);
}

.go-trip-block h2 {
	font-size: clamp(26px, 3vw, 32px);
}

.go-trip-block > h2 + * {
	margin-top: var(--go-space-5);
}

.go-trip-block__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--go-space-3);
}

.go-trip-block__bar + * {
	margin-top: var(--go-space-5);
}

.go-trip-prose {
	max-width: var(--go-measure);
}

.go-trip-prose p + p {
	margin-top: var(--go-space-4);
}

.go-trip-block h3 {
	margin-bottom: var(--go-space-4);
	font-size: 20px;
}

.go-trip-fine {
	margin-top: var(--go-space-3);
	font-size: 14px;
}

.go-trip-toggle {
	min-height: 40px;
	padding: 0 var(--go-space-4);
	border: 1.5px solid var(--go-forest-800);
	border-radius: var(--go-radius-pill);
	background: transparent;
	color: var(--go-forest-800);
	font: 600 14px/1 var(--go-font-body);
	cursor: pointer;
}

.go-trip-toggle:hover {
	background: var(--go-trip-pale);
}

/* Lists with a tick (or cross) in a pale green circle */
.go-trip-ticks {
	display: grid;
	gap: var(--go-space-3);
	padding: 0;
	list-style: none;
}

.go-trip-ticks li {
	display: flex;
	align-items: flex-start;
	gap: var(--go-space-3);
}

.go-trip-ticks .go-icon {
	flex: none;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	padding: 4px;
	border-radius: var(--go-radius-pill);
	background: var(--go-trip-pale);
	color: var(--go-green-700);
}

.go-trip-ticks--no .go-icon {
	background: var(--go-error-soft);
	color: var(--go-error);
}

.go-trip-split--two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--go-space-7);
}

.go-trip-bullets {
	display: grid;
	gap: var(--go-space-2);
	padding-left: 1.2em !important;
}

.go-trip-bullets li::marker {
	color: var(--go-green-600);
}

/* Departure dates */
.go-trip-dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--go-space-3);
	padding: 0;
	list-style: none;
}

.go-trip-dates li {
	display: inline-flex;
	align-items: center;
	gap: var(--go-space-2);
	padding: 10px 16px;
	border-radius: var(--go-radius-pill);
	background: var(--go-trip-pale);
	color: var(--go-trip-ink);
	font-weight: 600;
}

.go-trip-dates .go-icon {
	width: 18px;
	height: 18px;
	color: var(--go-green-700);
}

.go-trip-dates__note {
	color: var(--go-warning);
	font-size: 14px;
}

/* Itinerary and questions: one open at a time is not forced, so people can compare */
.go-trip-plan {
	display: grid;
	gap: var(--go-space-3);
}

.go-trip-day {
	border: 1px solid var(--go-trip-line);
	border-radius: var(--go-radius-md);
	background: var(--go-white);
	transition: background-color var(--go-dur-ui) var(--go-ease-in), border-color var(--go-dur-ui) var(--go-ease-in);
}

.go-trip-day[open] {
	border-color: #E3E3E3;
	background: var(--go-trip-pale);
}

.go-trip-day summary {
	display: flex;
	align-items: center;
	gap: var(--go-space-4);
	min-height: 64px;
	padding: var(--go-space-3) var(--go-space-5);
	color: var(--go-trip-ink);
	cursor: pointer;
	list-style: none;
}

.go-trip-day summary::-webkit-details-marker {
	display: none;
}

.go-trip-day__mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: var(--go-radius-pill);
	background: var(--go-accent);
	color: var(--go-forest-950);
	font-size: 14px;
	font-weight: 700;
}

.go-trip-day__mark .go-icon {
	width: 20px;
	height: 20px;
}

.go-trip-day__title {
	flex: 1;
	font-family: var(--go-font-display);
	font-size: 21px;
	line-height: 1.25;
}

.go-trip-plan--faq .go-trip-day__title {
	font-size: 18px;
}

.go-trip-day summary > .go-icon:last-child {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--go-green-700);
	transition: transform var(--go-dur-ui) var(--go-ease-in);
}

.go-trip-day[open] summary > .go-icon:last-child {
	transform: rotate(180deg);
}

.go-trip-day__body {
	padding: 0 var(--go-space-5) var(--go-space-5) calc(var(--go-space-5) + 40px + var(--go-space-4));
}

.go-trip-plan--faq .go-trip-day__body {
	padding-left: var(--go-space-5);
}

.go-trip-day__body ul:not(.go-trip-meals) {
	display: grid;
	gap: var(--go-space-2);
	padding-left: 1.2em;
}

.go-trip-day__body ul:not(.go-trip-meals) li::marker {
	color: var(--go-green-600);
}

.go-trip-meals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--go-space-2);
	margin-top: var(--go-space-4) !important;
	padding: 0;
	list-style: none;
}

.go-trip-meals li {
	padding: 4px 12px;
	border: 1px solid var(--go-trip-line);
	border-radius: var(--go-radius-pill);
	background: var(--go-white);
	color: var(--go-trip-ink);
	font-size: 13px;
	font-weight: 600;
}

.go-trip-day__note {
	margin-top: var(--go-space-3) !important;
	font-size: 14px;
	font-style: italic;
}

/* Hotels */
.go-trip-table {
	overflow-x: auto;
	border: 1px solid var(--go-trip-line);
	border-radius: var(--go-radius-md);
}

.go-trip-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.go-trip-table :is(th, td) {
	padding: 14px var(--go-space-5);
	border: 0;
	border-bottom: 1px solid var(--go-trip-line);
	text-align: left;
}

.go-trip-table thead th {
	background: var(--go-trip-pale);
	color: var(--go-trip-ink);
	font-size: 14px;
}

.go-trip-table tbody tr:last-child td {
	border-bottom: 0;
}

.go-trip-pdf {
	margin-top: var(--go-space-8) !important;
}

/* ---------- Price box ---------- */
.go-trip-price {
	padding: var(--go-space-6);
	border: 1px solid var(--go-trip-line);
	border-radius: var(--go-radius-lg);
	background: var(--go-white);
	box-shadow: var(--go-shadow-md);
}

.go-trip-price__from {
	font-size: 14px;
}

.go-trip-price__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px var(--go-space-3);
	margin-top: 2px !important;
}

.go-trip-price__amount {
	color: var(--go-trip-ink);
	font-family: var(--go-font-body);
	font-size: 36px;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.go-trip-price__basis {
	font-size: 15px;
}

.go-trip-price .go-trip-price__amount--request {
	font-size: 26px;
}

.go-trip-price__note {
	margin-top: var(--go-space-2) !important;
	padding: 8px 12px;
	border-radius: var(--go-radius-sm);
	background: var(--go-trip-pale);
	color: var(--go-trip-ink);
	font-size: 14px;
	font-weight: 600;
}

.go-trip-price__offer {
	margin-top: var(--go-space-3) !important;
	font-size: 14px;
}

.go-trip-price__status {
	margin-top: var(--go-space-3) !important;
	font-size: 14px;
	font-weight: 600;
}

.go-trip-price__status--few {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--go-radius-pill);
	background: var(--go-warning-soft);
	color: var(--go-warning);
}

.go-trip-price__actions {
	display: grid;
	gap: var(--go-space-3);
	margin-top: var(--go-space-5);
}

.go-trip-price__actions a,
.go-trip-bar a,
.go-trip-pdf a {
	width: 100%;
	box-sizing: border-box;
}

.go-trip-pdf a {
	width: auto;
}

a.go-btn-whatsapp .go-icon {
	width: 20px;
	height: 20px;
}

.go-trip-price__call {
	margin-top: var(--go-space-4) !important;
	text-align: center;
}

.go-trip-price__call a {
	display: inline-flex;
	align-items: center;
	gap: var(--go-space-2);
	color: var(--go-green-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.go-trip-price__call .go-icon {
	width: 18px;
	height: 18px;
}

/* ---------- You may also like ---------- */
.go-trip-related {
	padding-top: var(--go-space-10);
}

.go-trip-related h2 {
	font-size: clamp(26px, 3vw, 32px);
}

.go-trip-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
	justify-content: start;
	gap: var(--go-space-5);
	margin-top: var(--go-space-6);
}

/* ---------- Phone booking bar: white, so no teal strip sits on the page ---------- */
.go-trip-bar {
	display: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.go-trip__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--go-space-8);
	}

	/* One column: title and what's included, then the price box, then the rest. */
	.go-trip__main {
		display: contents;
	}

	.go-trip-head {
		order: -2;
	}

	.go-trip__side {
		position: static;
		order: -1;
	}

	.go-trip__layout .go-trip-block,
	.go-trip__layout .go-trip-pdf {
		margin-top: 0 !important;
	}


	
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
	/* Medium sizes on phones: body 15 px, titles 26-28 px, buttons 44 px tall with 15 px labels. */
	body.go-trip-page .go-trip.site-main {
		font-size: 15px;
		padding-bottom: 80px;
	}

	body.go-trip-page .go-trip .go-trip-head__title {
		font-size: 28px;
	}

	body.go-trip-page .go-trip :is(.go-trip-block h2, .go-trip-related h2) {
		font-size: 24px;
	}



	body.go-trip-page .go-trip .go-trip-block h3 {
		font-size: 18px;
	}

	.go-trip-head__badge {
		padding: 8px 12px;
		font-size: 14px;
	}

	.go-trip-includes li {
		flex-direction: row;
		align-items: center;
		gap: var(--go-space-2);
		font-size: 14px;
	}

	.go-trip-includes__icon {
		width: 38px;
		height: 38px;
	}

	.go-trip-price {
		padding: var(--go-space-5);
	}

	.go-trip-price__amount {
		font-size: 32px;
	}

	.go-trip-price__basis,
	.go-trip-price__note {
		font-size: 14px;
	}

	.go-trip .go-trip-price__actions a,
	.go-trip a.go-btn-whatsapp,
	.go-trip a.go-btn-secondary,
	.go-trip .go-enquiry__send {
		min-height: 44px;
		padding-inline: var(--go-space-5);
		font-size: 15px;
	}

	.go-trip-day summary {
		min-height: 56px;
	}

	.go-trip-day__mark {
		min-width: 34px;
		height: 34px;
	}

	.go-trip-day__title,
	.go-trip-plan--faq .go-trip-day__title {
		font-size: 17px;
	}

	.go-trip-table {
		font-size: 14px;
	}

	/* The photos become a swipe strip. */
	.go-trip-gallery {
		display: flex;
		gap: var(--go-space-2);
		height: auto;
		margin-inline: calc(-1 * var(--go-gutter));
		padding-inline: var(--go-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.go-trip-gallery::-webkit-scrollbar {
		display: none;
	}

	.go-trip-gallery .go-trip-gallery__tile,
	.go-trip-gallery .go-trip-gallery__tile:is(.go-trip-gallery__tile--4, .go-trip-gallery__tile--5, .go-trip-gallery__tile--6, .go-trip-gallery__tile--7, .go-trip-gallery__tile--8, .go-trip-gallery__tile--9) {
		display: block;
		flex: 0 0 82%;
		height: 300px;
		scroll-snap-align: center;
	}

	.go-trip-gallery__more {
		display: none;
	}

	.go-trip__layout {
		margin-top: var(--go-space-7);
	}

	.go-trip-block {
		margin-top: var(--go-space-8);
	}

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

	.go-trip-includes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--go-space-3) var(--go-space-3);
	}

	.go-trip-day summary {
		padding-inline: var(--go-space-4);
	}

	.go-trip-day__body,
	.go-trip-plan--faq .go-trip-day__body {
		padding: 0 var(--go-space-4) var(--go-space-4);
	}

	.go-trip-lightbox[open] {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--go-space-3);
	}

	.go-trip-lightbox__nav {
		display: none !important;
	}

	.go-trip-lightbox__close {
		top: -16px;
		right: -4px;
	}



	.go-trip-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--go-space-3);
	}

	.go-trip-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 950;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--go-space-2) var(--go-space-3);
		padding: var(--go-space-3) var(--go-gutter) calc(var(--go-space-3) + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--go-trip-line);
		background: var(--go-white);
		box-shadow: 0 -8px 24px rgba(10, 59, 97, .10);
	}

	.go-trip-bar[hidden] {
		display: none;
	}

	.go-trip-bar__price {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		gap: 6px;
		font-size: 13px;
		line-height: 1.2;
	}

	.go-trip-bar__price strong {
		color: var(--go-trip-ink);
		font-size: 18px;
	}

	.go-trip .go-trip-bar a.go-btn-whatsapp,
	.go-trip .go-trip-bar a.go-btn-secondary {
		min-height: 42px;
		padding-inline: var(--go-space-3);
		font-size: 14px;
	}

	/* The page has its own Book now, in the price box and in the bar. */
	body.go-trip-page a.go-float-wa[href] {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.go-trip-gallery__tile img,
	.go-trip-day,
	.go-trip-day summary > .go-icon:last-child {
		transition: none;
	}

	.go-trip-gallery__tile:hover img {
		transform: none;
	}
}

/* ---------- Elementor's kit styles every <button> (padding, fill, pill corners, dark hover and focus), so the trip page's
   buttons set their own look again, with three classes and the same values for hover, focus and pressed. ---------- */
body.go-trip-page .go-trip .go-trip-gallery__tile,
body.go-trip-page .go-trip .go-trip-gallery__tile:is(:hover, :focus, :active) {
	padding: 0;
	border: 0;
	border-radius: var(--go-radius-md);
	background: var(--go-trip-pale);
	color: var(--go-trip-ink);
	box-shadow: none;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
}

body.go-trip-page .go-trip .go-trip-gallery__tile:focus-visible {
	outline: 3px solid var(--go-forest-800);
	outline-offset: 2px;
}

body.go-trip-page .go-trip .go-trip-toggle,
body.go-trip-page .go-trip .go-trip-toggle:is(:focus, :active) {
	min-height: 40px;
	padding: 0 var(--go-space-4);
	border: 1.5px solid var(--go-forest-800);
	border-radius: var(--go-radius-pill);
	background: transparent;
	color: var(--go-forest-800);
	box-shadow: none;
	font: 600 14px/1 var(--go-font-body);
	text-transform: none;
	letter-spacing: normal;
}

body.go-trip-page .go-trip .go-trip-toggle:hover {
	background: var(--go-trip-pale);
	color: var(--go-forest-800);
}

body.go-trip-page .go-trip .go-trip-lightbox :is(.go-trip-lightbox__nav, .go-trip-lightbox__close),
body.go-trip-page .go-trip .go-trip-lightbox :is(.go-trip-lightbox__nav, .go-trip-lightbox__close):is(:focus, :active) {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--go-radius-pill);
	background: var(--go-trip-pale);
	color: var(--go-trip-ink);
	box-shadow: none;
}

body.go-trip-page .go-trip .go-trip-lightbox :is(.go-trip-lightbox__nav, .go-trip-lightbox__close):hover {
	background: var(--go-accent);
	color: var(--go-forest-950);
}

/* Highlights: the short paragraph, then the tick list when the trip has one. */
.go-trip-prose + .go-trip-highlights-list {
	margin-top: var(--go-space-5);
}

/* ---------- Gallery arrows: move the photos along one at a time ---------- */
.go-trip-gallery-wrap {
	position: relative;
}

body.go-trip-page .go-trip .go-trip-gallery__arrow,
body.go-trip-page .go-trip .go-trip-gallery__arrow:is(:focus, :active) {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--go-radius-pill);
	background: var(--go-white);
	color: var(--go-trip-ink);
	box-shadow: var(--go-shadow-md);
	transform: translateY(-50%);
	cursor: pointer;
}

body.go-trip-page .go-trip .go-trip-gallery__arrow:hover {
	background: var(--go-accent);
	color: var(--go-forest-950);
}

.go-trip-gallery__arrow--prev {
	left: var(--go-space-3);
}

.go-trip-gallery__arrow--next {
	right: var(--go-space-3);
}

@media (max-width: 767px) {
	body.go-trip-page .go-trip .go-trip-gallery__arrow,
	body.go-trip-page .go-trip .go-trip-gallery__arrow:is(:focus, :active) {
		width: 38px;
		height: 38px;
	}

	.go-trip-gallery__arrow--prev {
		left: var(--go-space-2);
	}

	.go-trip-gallery__arrow--next {
		right: var(--go-space-2);
	}
}

/* The Enquire Now pop-up is the Customize My Trip dialog from enquiry.css; it sits above the photo viewer's z-order by being modal. */
body.go-trip-page .go-trip .go-trip-enquire-modal .go-trip-modal__close,
body.go-trip-page .go-trip .go-trip-enquire-modal .go-trip-modal__close:is(:focus, :active) {
	background: transparent;
	color: var(--go-forest-800);
	box-shadow: none;
	border: 0;
}

/* The photo count chip stays in the corner while the photos move under it. */
body.go-trip-page .go-trip .go-trip-gallery__more,
body.go-trip-page .go-trip .go-trip-gallery__more:is(:hover, :focus, :active) {
	position: absolute;
	right: var(--go-space-3);
	bottom: var(--go-space-3);
	z-index: 2;
	min-height: 40px;
	padding: 0 var(--go-space-4);
	border: 0;
	border-radius: var(--go-radius-pill);
	background: var(--go-white);
	color: var(--go-trip-ink);
	box-shadow: var(--go-shadow-md);
	font: 600 14px/1 var(--go-font-body);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

@media (max-width: 767px) {
	body.go-trip-page .go-trip .go-trip-gallery__more {
		display: none;
	}
}

/* The small line under Book Now and Enquire Now. */
.go-trip-price__booking-note {
	margin-top: var(--go-space-3) !important;
	color: var(--go-text-muted);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

/* ---------- Photo collage + slideshow (1.0.50) ----------
   trip.js groups the photos into slides; each slide is a grid sized by the photos' own proportions (portrait, landscape,
   square fitted with one gap). The rail swipes by scroll-snap; the timer and arrows scroll it. Same height with or
   without the script, so nothing jumps when it loads. */
.go-trip-gallery-wrap {
	--go-gal-h: clamp(300px, 36vw, 460px);
	--go-gal-gap: var(--go-space-3);
}

@media (max-width: 1023px) {
	.go-trip-gallery-wrap {
		--go-gal-h: clamp(300px, 52vw, 420px);
	}
}

@media (max-width: 767px) {
	.go-trip-gallery-wrap {
		--go-gal-h: min(78vw, 340px);
		--go-gal-gap: var(--go-space-2);
	}
}

body.go-trip-page .go-trip .go-trip-gallery {
	box-sizing: border-box;
	width: 100%;
	height: var(--go-gal-h);
	margin-inline: 0;
	padding-inline: 0;
	gap: var(--go-gal-gap);
	border-radius: var(--go-radius-md);
}

body.go-trip-page .go-trip .go-trip-gallery.go-trip-gallery--show {
	display: block;
	overflow: hidden;
}

.go-trip-gallery__rail {
	display: flex;
	gap: var(--go-gal-gap);
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.go-trip-gallery__rail::-webkit-scrollbar {
	display: none;
}

.go-trip-gallery__slide {
	flex: 0 0 100%;
	display: grid;
	gap: var(--go-gal-gap);
	height: 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

body.go-trip-page .go-trip .go-trip-gallery--show .go-trip-gallery__slide .go-trip-gallery__tile {
	display: block;
	flex: none;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.go-trip-gallery--show .go-trip-gallery__tile img {
	position: absolute;
	inset: 0;
}

.go-trip-gallery-wrap--single .go-trip-gallery__arrow {
	display: none !important;
}

@media (min-width: 768px) {
	.go-trip-gallery--show .go-trip-gallery__tile img {
		object-position: 50% 35%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.go-trip-gallery__rail {
		scroll-behavior: smooth;
	}
}

body.go-trip-page .go-trip .go-trip-gallery__arrow,
body.go-trip-page .go-trip .go-trip-gallery__arrow:is(:focus, :active) {
	width: 44px;
	height: 44px;
}

/* Pause / Play for the slideshow (two bars that turn into a triangle when pressed). */
body.go-trip-page .go-trip .go-trip-gallery__pause,
body.go-trip-page .go-trip .go-trip-gallery__pause:is(:hover, :focus, :active) {
	position: absolute;
	left: var(--go-space-3);
	bottom: var(--go-space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--go-radius-pill);
	background: var(--go-white);
	color: var(--go-trip-ink);
	box-shadow: var(--go-shadow-md);
	cursor: pointer;
}

.go-trip-gallery__pause span {
	width: 12px;
	height: 14px;
	border-inline: 4px solid currentColor;
}

.go-trip-gallery__pause[aria-pressed="true"] span {
	width: 0;
	height: 0;
	border-inline: 0;
	border-block: 7px solid transparent;
	border-left: 12px solid currentColor;
}

body.go-trip-page .go-trip .go-trip-gallery__pause:focus-visible {
	outline: 3px solid var(--go-forest-800);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	body.go-trip-page .go-trip .go-trip-gallery__pause,
	body.go-trip-page .go-trip .go-trip-gallery__pause:is(:hover, :focus, :active) {
		left: var(--go-space-2);
		bottom: var(--go-space-2);
	}
}

/* ---------- Smaller "You May Also Like", compact phone price card and booking bar (1.0.50) ---------- */
.go-trip-related {
	padding-top: var(--go-space-8);
	padding-bottom: var(--go-space-8);
}

.go-trip-related h2 {
	font-size: clamp(22px, 2.4vw, 26px);
}

.go-trip-related__grid {
	grid-template-columns: repeat(auto-fill, minmax(170px, 200px));
	gap: var(--go-space-4);
	margin-top: var(--go-space-4);
}

.go-trip-related .go-card {
	padding: 5px;
	border-radius: 16px;
}

.go-trip-related .go-card__media {
	aspect-ratio: 16 / 10;
	border-radius: 12px;
}

.go-trip-related .go-card__body {
	padding: 8px 5px 5px;
}

.go-trip-related .go-card .go-card__title {
	font-size: 15px;
}

.go-trip-related .go-card__route {
	font-size: 12px;
}

.go-trip-related .go-card__price {
	font-size: 16px;
}

.go-trip-related .go-card__btn {
	min-height: 34px;
	padding: 0 12px;
	font-size: 13px;
}

@media (pointer: coarse) {
	.go-trip-related .go-card__btn {
		min-height: 44px;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.go-trip__side .go-trip-price__actions {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.go-trip-related {
		padding-top: var(--go-space-6);
		padding-bottom: var(--go-space-6);
	}

	body.go-trip-page .go-trip .go-trip-related h2 {
		font-size: 20px;
	}

	/* One swipe row of small cards instead of a two-column stack (was ~600 px tall at 375 px). */
	.go-trip-related__grid {
		display: flex;
		gap: var(--go-space-2);
		margin: var(--go-space-3) calc(-1 * var(--go-gutter)) 0;
		padding: 2px var(--go-gutter) 6px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--go-gutter);
		scrollbar-width: none;
	}

	.go-trip-related__grid::-webkit-scrollbar {
		display: none;
	}

	.go-trip-related__grid > * {
		flex: 0 0 56%;
		min-width: 0;
		scroll-snap-align: start;
	}

	.go-trip-related .go-card .go-card__title {
		-webkit-line-clamp: 3;
		font-size: 14px;
	}

	.go-trip-related .go-card__media {
		aspect-ratio: 16 / 9;
	}

	.go-trip-related .go-card__basis {
		display: none;
	}

	.go-trip-related .go-card__btn {
		min-height: 36px;
	}

	.go-trip-related .go-card__footer {
		flex-wrap: wrap;
		gap: 6px;
	}

	.go-trip-related .go-card__btn {
		width: 100%;
	}

	.go-trip-related .go-card__tags {
		display: none;
	}

	/* Price card: tighter. */
	.go-trip-price {
		padding: var(--go-space-4);
		border-radius: var(--go-radius-md);
	}

	.go-trip-price__amount {
		font-size: 26px;
	}

	.go-trip-price__basis,
	.go-trip-price__note,
	.go-trip-price__booking-note {
		font-size: 13px;
	}

	.go-trip-price__actions {
		gap: var(--go-space-2);
		margin-top: var(--go-space-3);
	}

	.go-trip .go-trip-price__actions a {
		font-size: 14px;
	}

	.go-trip-price__call {
		margin-top: var(--go-space-2);
		font-size: 14px;
	}

	/* Booking bar: one row, price left, two buttons right. */
	.go-trip-bar {
		grid-template-columns: auto 1fr 1fr;
		align-items: center;
		padding-block: var(--go-space-2) calc(var(--go-space-2) + env(safe-area-inset-bottom, 0px));
	}

	.go-trip-bar__price {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		font-size: 12px;
	}

	.go-trip-bar__price strong {
		font-size: 17px;
	}

	.go-trip-bar__price span:last-child:not(:first-child) {
		display: none;
	}

	.go-trip .go-trip-bar a.go-btn-whatsapp,
	.go-trip .go-trip-bar a.go-btn-secondary {
		min-height: 44px;
		padding-inline: var(--go-space-2);
		font-size: 14px;
	}

	body.go-trip-page .go-trip.site-main {
		padding-bottom: 68px;
	}
}

/* ---------- Tern in the destination's outfit (Core 0.20.1, field "Tern picture") ----------
   Tern stands to the left of the trip title and its badge row, facing the title. He is a grid cell of the trip header, so he adds no height of his own
   (his top pokes up into the gap above the header). The "what's included" row stays full width below. Trips without a picture are untouched. */
.go-trip-head--tern {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--go-space-4);
	align-items: start;
}

.go-trip-head--tern > * {
	grid-column: 2;
}

.go-trip-head--tern > .go-trip-includes {
	grid-column: 1 / -1;
}

.go-trip-tern {
	position: relative;
	z-index: 0;
	margin: 0;
}

.go-trip-head--tern > .go-trip-tern {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: end;
	justify-self: start;
	width: 130px;
	margin-top: -46px;
}

.go-trip-tern img {
	display: block;
	width: 100%;
	height: auto;
}

.go-trip-tern::after {
	content: "";
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 1.5%;
	z-index: -1;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(10, 59, 97, .28), rgba(10, 59, 97, 0));
}

/* Desktop only: a little larger (130 to 150 px). */
@media (min-width: 1024px) {
	.go-trip-head--tern > .go-trip-tern {
		width: 150px;
		margin-top: -50px;
	}
}

@media (max-width: 767px) {
	.go-trip-head--tern {
		column-gap: var(--go-space-3);
	}

	.go-trip-head--tern > .go-trip-tern {
		width: 84px;
		margin-top: -18px;
	}
}

/* Photo captions: the Caption typed on the photo in the Media Library (or in the trip form's gallery panel). The extra
   class beats the file-name caption rules that staging's Additional CSS still holds; a photo with no caption keeps the
   old behaviour (the alt text). */
body.go-trip-page .go-trip .go-trip-gallery .go-trip-gallery__tile[data-caption]::after {
	content: attr(data-caption);
}
