/**
 * Group Tours Slider — "Better together travel in good company" section.
 * Reuses this site's --shc-orange / --shc-navy design tokens (defined in
 * generatepress/assets/css/western-style.css :root) instead of redefining
 * its own palette, so it stays visually consistent with the rest of the
 * homepage without depending on that file loading first (each variable
 * has its own fallback below).
 */

.western-gts-section {
	padding: 80px 0;
	background-color: #ffffff;
}

/*
 * Deliberately NOT ".container.grid-container": every other section on
 * this page centers an 80%-wide box, but this one's card row is meant to
 * bleed to the true right edge of the viewport (see the reference design
 * — the last card is cut off by the browser edge, not padded away from
 * it). padding-left reproduces that same container's left gutter
 * (western-style.css: width 80%/90%/92% centered => 10%/5%/4% gutter at
 * these same breakpoints) so the eyebrow/heading/button still line up
 * with the rest of the page; padding-right stays 0 so the slider isn't
 * boxed in on that side.
 */
.western-gts-inner {
	display: flex;
	align-items: center;
	gap: 56px;
	padding-left: 10%;
}

@media (max-width: 768px) {
	.western-gts-inner {
		padding-left: 5%;
	}
}

@media (max-width: 480px) {
	.western-gts-inner {
		padding-left: 4%;
	}
}

.western-gts-intro {
	flex: 0 0 320px;
	max-width: 320px;
}

.western-gts-eyebrow {
	margin: 0 0 12px;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--shc-orange, #f68634);
}

.western-gts-heading {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 1.2;
	font-weight: 500;
	color: var(--shc-navy, #2f3283);
}

.western-gts-description {
	margin: 0 0 28px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #767686;
}

/*
 * No .western-gts-button rule here: the CTA reuses the site-wide
 * .site-header-custom__btn/--contact component (western-style.css) —
 * same pill button already used for "Contact" in the header and
 * "Explore our tours" in the banner, including its GSAP per-character
 * hover animation (script.js targets .site-header-custom__btn-label
 * globally, not just the header) — so this button matches and animates
 * the same way as every other primary CTA on the site.
 */

.western-gts-slider {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Separate positioning context from the pagination pill below it, so the
 * prev/next arrows' "top: 50%" (set in western_gts CSS further down)
 * centers on the card row itself, not on the card row + pagination pill
 * combined.
 */
.western-gts-track {
	position: relative;
}

.western-gts-track .swiper {
	/*
	 * Must stay clipped: Swiper lays out every slide in a row inside
	 * .swiper-wrapper and only shifts it with transform: translateX() to
	 * bring the active ones into view — it never removes the
	 * off-viewport slides from the layout. overflow: visible here would
	 * un-clip that row, leaving already-scrolled-past cards rendered
	 * (and visually spilling into the intro text column to the left)
	 * instead of hidden outside the frame.
	 */
	overflow: hidden;
	padding: 6px;
}

.western-gts-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: 20px;
	background-color: #ffffff;
	box-shadow: 0 2px 18px rgba(38, 38, 58, 0.08);
	overflow: hidden;
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.western-gts-card:hover,
.western-gts-card:focus-visible {
	color: inherit;
	text-decoration: none;
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(38, 38, 58, 0.16);
}

.western-gts-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	background-color: #f1f1f6;
}

.western-gts-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.western-gts-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--shc-navy, #2f3283);
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
}

.western-gts-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px;
}

.western-gts-card__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	color: var(--shc-navy, #2f3283);
}

.western-gts-card__location {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 16px;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: #8c8c9a;
}

.western-gts-card__pin {
	flex: none;
	color: #a9a9b8;
}

.western-gts-card__footer {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid #eceaf5;
}

.western-gts-card__price {
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.western-gts-card__price-label {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	color: #8c8c9a;
}

.western-gts-card__price-value {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--shc-orange, #f68634);
}

.western-gts-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--shc-navy, #2f3283);
	white-space: nowrap;
}

/* Pill pagination — same treatment as the "Plan your trip" (Curated
   Journeys) section's .western-destination-slider .swiper-pagination
   above it on this page, so the two carousels read as one family. */
.western-gts-slider .swiper-pagination {
	position: static;
	margin-top: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	height: 20px;
	padding: 12px 18px;
	margin-left: auto;
	margin-right: auto;
	background: #ededed;
	border-radius: 20px;
}

.western-gts-slider .swiper-pagination-bullet {
	background: #c2c2c2;
	opacity: 1;
	margin: 0;
}

.western-gts-slider .swiper-pagination-bullet-active {
	background: var(--shc-orange, #f68634);
}

.western-gts-slider .swiper-pagination.swiper-pagination-lock {
	display: none;
}

/* Prev/next arrows — same treatment as the "Plan your trip" section's
   .western-destination-slider .swiper-button-prev/-next: Swiper's own
   navigation markup, restyled to an orange circle with a white glyph via
   its CSS custom properties. Positioned relative to .western-gts-track
   (the card row alone, not the pagination pill below it or the intro
   text column next to it), so they sit centered on the card edge and
   never overlap the text. */
.western-gts-track .swiper-button-prev,
.western-gts-track .swiper-button-next {
	--swiper-navigation-color: #fff;
	--swiper-navigation-size: 16px;
	top: 50%;
	margin-top: 0;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: var(--shc-orange, #f68634);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: background-color 200ms ease;
}

.western-gts-track .swiper-button-prev:hover,
.western-gts-track .swiper-button-next:hover {
	background: var(--shc-orange-deep, #e0752b);
}

.western-gts-track .swiper-button-prev.swiper-button-disabled,
.western-gts-track .swiper-button-next.swiper-button-disabled {
	opacity: 0.35;
}

.western-gts-track .swiper-button-prev:focus-visible,
.western-gts-track .swiper-button-next:focus-visible {
	outline: 2px solid var(--shc-navy, #2f3283);
	outline-offset: 2px;
}

@media (max-width: 1024px) {
	.western-gts-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.western-gts-intro {
		flex-basis: auto;
		/* Stacked layout still only has left padding from .western-gts-inner
		   (the slider below it bleeds to the right edge), so the text
		   column needs its own cap to keep readable line lengths instead
		   of stretching edge-to-edge. */
		max-width: 520px;
		padding-right: 24px;
	}

	.western-gts-slider {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.western-gts-section {
		padding: 56px 0;
	}

	.western-gts-heading {
		font-size: 28px;
	}

	.western-gts-track .swiper-button-prev,
	.western-gts-track .swiper-button-next {
		display: none;
	}
}