/* Trip card, grid, carousel and empty state (04 §10.3, §4, §9). Tokens come from the child theme; fallbacks keep it readable without it. */

/* ---------- Widget box ----------
   Elementor containers can wrap their children (flex-wrap: wrap). Then the browser measures a widget's height
   before its width is known, and a trip list overflows into the next section on phones. A definite width
   fixes the measurement; Elementor's own "Width" setting on the widget still wins (more specific). */
.elementor-widget-go-trip-grid,
.elementor-widget-go-trip-carousel {
	width: 100%;
}

/* ---------- Grid ---------- */
.go-trip-grid {
	--go-cols: 4;
	--go-gap: 24px;
	display: grid;
	grid-template-columns: repeat(var(--go-cols), minmax(0, 1fr));
	gap: var(--go-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-trip-grid__item,
.go-carousel__item {
	display: flex;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.go-trip-grid {
		--go-cols: 2;
		--go-gap: 20px;
	}
}

@media (max-width: 767px) {
	.go-trip-grid {
		--go-cols: 1;
		--go-gap: 16px;
	}
}

/* ---------- Card ---------- */
.go-card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 6px;
	border-radius: 20px;
	background: var(--go-cream-50, #F3F3F3);
	box-shadow: var(--go-shadow-md, 0 1px 2px rgba(10, 59, 97, .06), 0 8px 24px rgba(10, 59, 97, .10));
	color: var(--go-text-muted, #656565);
	text-decoration: none;
	transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms cubic-bezier(.2, .8, .2, 1);
}

.go-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--go-shadow-lg, 0 2px 6px rgba(10, 59, 97, .08), 0 20px 48px rgba(10, 59, 97, .18));
	color: var(--go-text-muted, #656565);
}

.go-card:focus-visible {
	outline: 3px solid var(--go-forest-800, #084066);
	outline-offset: 3px;
}

.go-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 15px;
	background: var(--go-mint-50, #F7F9F9);
}

/* Two classes, so Elementor's ".elementor img { height: auto }" can't shrink the photo inside its 4:3 frame.
   The frame was 4:5 until the agency's review of 22 Oct 2026 ("trip cards are too big"). */
.go-card .go-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 450ms cubic-bezier(.2, .8, .2, 1);
}

.go-card:hover .go-card__img {
	transform: scale(1.04);
}

/* The days badge and the flags (offer, few seats, sold out) are one row at the photo's top left, so an offer sits
   right beside the days (user's request, 26 Oct 2026); on a card too narrow for both the flag wraps under the badge. */
.go-card__tags {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 6px;
}

.go-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 7px 10px;
	border-radius: var(--go-radius-pill, 999px);
	background: var(--go-accent, #F4C542);
	color: var(--go-forest-950, #0A3B61);
	font: 700 13px/1 var(--go-font-body, sans-serif);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.go-card__flag {
	display: inline-flex;
	align-items: center;
	padding: 6px 9px;
	border-radius: var(--go-radius-pill, 999px);
	background: var(--go-cream-50, #F3F3F3);
	color: var(--go-forest-800, #084066);
	font: 600 12px/1 var(--go-font-body, sans-serif);
	white-space: nowrap;
}

/* An offer (the trip's "Offer label": Free Travel Bag on the Shimla trip) is a red pill with white text, so it stands
   out from the cream flags. The red is YouTube's #ff0000, the same as the hero's YouTube button (user's choice,
   26 Oct 2026: a brighter red than the first #C8102E); white on it is 4:1, fine for 12 px bold. */
.go-card__flag--offer {
	background: #ff0000;
	color: #fff;
	font-weight: 700;
}

.go-card__flag--few {
	background: var(--go-warning-soft, #FDF1DC);
	color: var(--go-warning, #9A5B00);
}

.go-card__flag--sold {
	background: var(--go-border-light, #E3E3E3);
	color: var(--go-text-muted, #656565);
}

.go-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	padding: 10px 6px 6px;
}

/* Two classes: on a dark section (go-on-dark), the theme paints headings white, and the card stays cream. */
.go-card .go-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--go-forest-800, #084066);
	font: 400 17px/1.25 var(--go-font-display, serif);
	letter-spacing: 0;
}

.go-card__route {
	margin: 0;
	overflow: hidden;
	color: var(--go-text-muted, #656565);
	font: 400 13px/1.5 var(--go-font-body, sans-serif);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.go-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

.go-card__pricing {
	margin: 0;
}

.go-card__from {
	display: block;
	margin-bottom: 3px;
	color: var(--go-green-700, #2741AA);
	font: 600 11px/1.2 var(--go-font-body, sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.go-card__price {
	display: block;
	color: var(--go-forest-800, #084066);
	font: 700 19px/1.05 var(--go-font-body, sans-serif);
	font-variant-numeric: tabular-nums;
}

.go-card__price--request {
	font-size: 15px;
	line-height: 1.25;
}

.go-card__basis {
	display: block;
	color: var(--go-text-muted, #656565);
	font: 400 12px/1.45 var(--go-font-body, sans-serif);
}

.go-card__btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--go-radius-pill, 999px);
	background: var(--go-cta, #FF4A21);
	color: var(--go-on-cta, #111111);
	font: 600 14px/1 var(--go-font-body, sans-serif);
	transition: background-color 120ms ease, transform 120ms ease;
}

.go-card:hover .go-card__btn {
	background: var(--go-forest-950, #0A3B61);
	color: var(--go-accent, #F4C542);
}

.go-card:active .go-card__btn {
	transform: scale(.97);
}

/* 44 px tap target on touch screens (04 §11). */
@media (pointer: coarse) {
	.go-card__btn {
		min-height: 44px;
	}
}

/* Cards under 230 px: the days badge and the offer flag are a size smaller, so the two fit side by side on a desktop
   card (about 212 px of photo). */
@container (max-width: 230px) {
	.go-card__tags {
		top: 8px;
		right: 8px;
		left: 8px;
		gap: 4px;
	}

	.go-card__badge {
		padding: 6px 9px;
		font-size: 12px;
	}

	.go-card__flag {
		padding: 5px 8px;
		font-size: 11px;
	}
}

/* Tablet cards (about 187 px of photo) need one more step to keep the two on one line. */
@container (max-width: 200px) {
	.go-card__badge {
		padding: 6px 8px;
		font-size: 11.5px;
	}

	.go-card__flag {
		padding: 5px 7px;
		font-size: 10.5px;
	}
}

/* Narrow cards (the carousels show about 220 px cards): the button drops below the price instead of squeezing (04 §10.3). */
@container (max-width: 250px) {
	.go-card__footer {
		flex-direction: column;
		align-items: stretch;
	}

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

/* The smallest cards (the mosaic's lower row) drop the route line. */
@container (max-width: 190px) {
	.go-card__route {
		display: none;
	}
}

@media (max-width: 767px) {
	.go-card .go-card__title {
		font-size: 17px;
	}

	.go-card__price {
		font-size: 18px;
	}
}

/* Two cards across on a phone (about 165 px each): everything one step smaller. After the 767 px rule, which it beats.
   Phones only: tablets have 199 px cards that already read well. */
@media (max-width: 767px) {
	@container (max-width: 190px) {
		.go-card .go-card__title {
			font-size: 14.5px;
		}

		.go-card__from {
			font-size: 10px;
			letter-spacing: .1em;
		}

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

		.go-card__basis {
			font-size: 11px;
		}

		/* Smaller still (user's request, 26 Oct 2026: "reduce the days label on the phone, fit both"): the days badge and
		   the offer flag share one line in a card about 150 px wide. */
		/* The type scales with the card (cqw is 1% of its width): both labels together need about 12 x the font size
		   plus 19 px, and the photo has about the card's width minus 12 px, so 8cqw - 3px fits from 8.5 px (a 138 px
		   card, a 360 px phone) up to 11 px. */
		.go-card__badge,
		.go-card__flag {
			padding: 4px;
			font-size: clamp(8.5px, calc(8cqw - 3px), 11px);
		}

		.go-card__tags {
			top: 6px;
			right: 6px;
			left: 6px;
			gap: 3px;
		}

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

.go-card .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Carousel (05 D14) ----------
   How many cards are in view follows the carousel's own width, not the screen's, so the same widget shows five
   across a full-width row and about two and a half in Home's Domestic | International half columns. */
.go-carousel {
	position: relative;
	container-type: inline-size;
}

.go-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
}

.go-carousel--static .go-carousel__nav {
	display: none;
}

/* Three classes: the Elementor kit styles every <button> (fill, padding, square corners on :hover and :focus)
   with .elementor-kit-N button:focus, and these arrows must keep their own look in every state. */
.go-carousel .go-carousel__nav .go-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 1.5px solid var(--go-forest-800, #084066);
	border-radius: var(--go-radius-pill, 999px);
	background: transparent;
	box-shadow: none;
	color: var(--go-forest-800, #084066);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.go-carousel .go-carousel__nav .go-carousel__arrow .go-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

.go-carousel .go-carousel__nav .go-carousel__arrow:hover:not([aria-disabled="true"]) {
	background: var(--go-forest-800, #084066);
	color: var(--go-cream-50, #F3F3F3);
}

.go-carousel .go-carousel__nav .go-carousel__arrow:active:not([aria-disabled="true"]) {
	transform: scale(.94);
}

.go-carousel .go-carousel__nav .go-carousel__arrow[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

.go-carousel .go-carousel__nav .go-carousel__arrow:focus-visible,
.go-carousel__track:focus-visible {
	outline: 3px solid var(--go-forest-800, #084066);
	outline-offset: 2px;
}

.go-on-dark .go-carousel .go-carousel__nav .go-carousel__arrow {
	border-color: rgba(255, 255, 255, .35);
	color: var(--go-white, #fff);
}

.go-on-dark .go-carousel .go-carousel__nav .go-carousel__arrow:hover:not([aria-disabled="true"]) {
	border-color: var(--go-accent, #F4C542);
	background: var(--go-accent, #F4C542);
	color: var(--go-forest-950, #0A3B61);
}

.go-on-dark .go-carousel .go-carousel__nav .go-carousel__arrow:focus-visible,
.go-on-dark .go-carousel__track:focus-visible {
	outline-color: var(--go-lime-300, #F4C542);
}

.go-carousel__track {
	display: grid;
	grid-auto-columns: calc((100% - 4 * 20px) / 5);
	grid-auto-flow: column;
	gap: 20px;
	margin: 0 -8px;
	padding: 4px 8px 20px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 8px;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.go-carousel__track::-webkit-scrollbar {
	display: none;
}

.go-carousel__item {
	scroll-snap-align: start;
}

/* Narrower carousels: part of the next card peeks in, so it's clear the row scrolls (04 §4). */
@container (max-width: 1000px) {
	.go-carousel__track {
		grid-auto-columns: calc((100% - 3 * 16px) / 3.3);
		gap: 16px;
	}
}

@container (max-width: 640px) {
	.go-carousel__track {
		grid-auto-columns: calc((100% - 2 * 16px) / 2.3);
	}
}

/* Phones: a card is about three quarters of the row (it was 1.55 across, 198 px, so titles ran to the ellipsis), and
   the next one peeks in by the remaining quarter. */
@container (max-width: 440px) {
	.go-carousel__track {
		grid-auto-columns: calc((100% - 14px) / 1.3);
		gap: 14px;
	}
}

/* ---------- Mosaic (Home's Domestic and International rows, reviews of 22 and 25 Oct 2026) ----------
   Add go-trips-mosaic to a Trip Carousel's CSS Classes: white cards straight on the section's cream, four in view,
   two above two, and the arrows move a whole set of four. Phones get it too since 26 Oct 2026 (it was the plain row
   below 480 px): two cards of about 165 px across, two rows. */
.go-trips-mosaic .go-card {
	background: var(--go-white, #fff);
	box-shadow: 0 1px 2px rgba(10, 59, 97, .05), 0 6px 16px rgba(10, 59, 97, .08);
}

@container (min-width: 300px) {
	.go-trips-mosaic .go-carousel__track {
		grid-template-rows: auto auto;
		grid-auto-columns: calc((100% - 16px) / 2);
		grid-auto-flow: column dense;
		gap: 16px;
	}

	.go-trips-mosaic .go-carousel__item {
		scroll-snap-align: none;
	}

	.go-trips-mosaic .go-carousel__item:nth-child(4n + 1),
	.go-trips-mosaic .go-carousel__item:nth-child(4n + 2) {
		grid-row: 1;
	}

	.go-trips-mosaic .go-carousel__item:nth-child(4n + 3),
	.go-trips-mosaic .go-carousel__item:nth-child(4n + 4) {
		grid-row: 2;
	}

	.go-trips-mosaic .go-carousel__item:nth-child(4n + 1) {
		scroll-snap-align: start;
	}
}

/* Its own block, still 480 px: inside the card this query is measured against the card (the nearest container),
   not the carousel, so it has never matched; moved under the 300 px one above it would suddenly match. */
@container (min-width: 480px) {
	.go-trips-mosaic .go-carousel__item .go-card__media {
		aspect-ratio: 16 / 10;
	}
}

/* ---------- Empty state (03 §4.3) ---------- */
.go-trips-empty {
	padding: 32px 24px;
	border-radius: var(--go-radius-lg, 24px);
	background: var(--go-mint-50, #F7F9F9);
	text-align: center;
}

.go-trips-empty__text {
	margin: 0 0 16px;
	color: var(--go-forest-800, #084066);
	font: 400 22px/1.25 var(--go-font-display, serif);
}

.go-trips-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

/* ---------- Motion only when allowed (04 §9) ---------- */
@media (prefers-reduced-motion: reduce) {
	.go-card,
	.go-card__img,
	.go-card__btn,
	.go-carousel .go-carousel__nav .go-carousel__arrow {
		transition: none;
	}

	.go-card:hover,
	.go-card:hover .go-card__img {
		transform: none;
	}
}