/**
 * Destination Slider — shared structural CSS.
 *
 * Loaded on both the front end and inside the block editor (block.json
 * "style"). Actual slide sizing/positioning at runtime is handled by
 * Swiper itself (block/view.js) via inline styles it sets on
 * ".swiper-slide" once initialized — the width formula below only
 * covers the brief pre-JS-init moment, so slides already sit at
 * roughly the right width instead of stacking full-width and then
 * visibly snapping into place.
 *
 * Colors/fonts intentionally reuse the site's existing globals rather
 * than redeclaring them: h1-h6 already get "The Seasons" serif from
 * wp-content/themes/generatepress/assets/css/western-style.css, and
 * body copy already gets "Inter" from the same file, so neither is
 * repeated here. Pagination colors adapt the values already proven for
 * the existing banner slider's ".banner .swiper-pagination" in that
 * same stylesheet, scoped under this block's own class so the two
 * sliders' pagination never collide.
 */

.western-destination-slider {
	--ds-visible: 5;
	--ds-gap: 24px;
	--ds-radius: 16px;
	--ds-pad-top: 80px;
	--ds-pad-bottom: 80px;
	padding-top: var(--ds-pad-top);
	padding-bottom: var(--ds-pad-bottom);
}

.western-destination-slider .swiper {
	width: 100%;
	overflow: hidden;
}

.western-destination-slider .swiper-slide {
	width: calc((100% - (var(--ds-visible) - 1) * var(--ds-gap)) / var(--ds-visible));
	height: auto;
}

.western-destination-slider__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* No explicit height/px value — the 4:5 portrait ratio from the reference
   design comes from aspect-ratio, so images scale naturally with the
   card's own (already-responsive) width instead of needing separate
   desktop/tablet/mobile pixel heights that can crop inconsistently. */
.western-destination-slider__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ds-radius);
	margin-bottom: 16px;
}

/*
 * Hover zoom — "Discover destinations that inspire" only, not every
 * section built from this shared block (e.g. "Curated journeys" next to
 * it uses its own framed-oval image treatment, and a second, unrelated
 * default-style instance is nested inside the "Top Destinations" trust
 * grid elsewhere on the page). Scoped to the section wrapper rather than
 * the block/card-style alone so it can't leak into either of those.
 *
 * .western-destination-slider__card clips the zoom (overflow:hidden +
 * matching border-radius) since the image has no dedicated media
 * wrapper of its own here — it's a direct child of the card, sitting
 * above the title/description. transform-origin: center bottom keeps
 * the image's bottom edge fixed in place as it grows, so the zoom
 * expands upward/sideways (cleanly clipped by the card) instead of
 * downward into that text.
 */
.western-discover-section:not(.western-curated-journeys) .western-destination-slider__card {
	overflow: hidden;
	border-radius: var(--ds-radius);
}

.western-discover-section:not(.western-curated-journeys) .western-destination-slider__image {
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: center bottom;
}

.western-discover-section:not(.western-curated-journeys) .western-destination-slider__link:hover .western-destination-slider__image,
.western-discover-section:not(.western-curated-journeys) .western-destination-slider__link:focus-visible .western-destination-slider__image {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.western-discover-section:not(.western-curated-journeys) .western-destination-slider__image {
		transition: none;
	}
}

.western-destination-slider__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--shc-text, #26263a);
}

.western-destination-slider__description {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #767686;
}

/* Pill pagination — adapted from the existing ".banner .swiper-pagination"
   values in western-style.css, scoped here so it never collides with the
   banner slider's own pagination. */
.western-destination-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-destination-slider .swiper-pagination-bullet {
	background: #c2c2c2;
	opacity: 1;
	margin: 0;
}

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

/* Swiper itself already adds "swiper-pagination-lock" (and hides it via
   its own bundled CSS) whenever there's nothing to page through — i.e.
   exactly the "only one bullet" case, since bullet count is 1 whenever
   all slides fit in one view. Our own ".swiper-pagination{display:flex}"
   rule above is more specific than Swiper's ".swiper-pagination-lock
   {display:none}", so it was winning and keeping the pill visible with
   a single, non-functional dot. This restores Swiper's own behavior:
   hidden when locked (1 bullet), shown once there's more than one. */
.western-destination-slider .swiper-pagination.swiper-pagination-lock {
	display: none;
}

/* Category pill toggle (e.g. International / Domestic) — only present
   when the block's "categories" attribute has 2+ entries; a plain
   single-dataset slider has none of this markup at all. */
.western-destination-slider__categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.western-destination-slider__category-btn {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 24px;
	border-radius: 999px;
	border: 1px solid var(--shc-border, #eceaf5);
	background: transparent;
	color: var(--shc-text, #26263a);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.western-destination-slider__category-btn.is-active {
	background: var(--shc-navy, #2f3283);
	border-color: var(--shc-navy, #2f3283);
	color: #fff;
}

.western-destination-slider__category-btn:hover:not(.is-active) {
	border-color: var(--shc-navy, #2f3283);
}

.western-destination-slider__category-btn:focus-visible {
	outline: 2px solid var(--shc-navy, #2f3283);
	outline-offset: 2px;
}

.western-destination-slider__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Smooth category-switch fade (view.js toggles ".is-switching" on
   ".swiper" around the removeAllSlides()/appendSlide() swap). Timing
   lives in one place (--ds-fade-ms, set in render.php) and is read back
   by view.js the same way --ds-visible/--ds-gap already are. */
.western-destination-slider .swiper {
	transition: opacity var(--ds-fade-ms, 180ms) ease;
}

.western-destination-slider .swiper.is-switching {
	opacity: 0;
}

/* Prev/next arrows — new, opt-in via the "showArrows" attribute. Reuses
   Swiper's own navigation module/markup, restyled to an orange circle
   with a white glyph via its CSS custom properties, vertically centered
   against the cards regardless of the (larger-than-default) button size. */
.western-destination-slider .swiper-button-prev,
.western-destination-slider .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-destination-slider .swiper-button-prev:hover,
.western-destination-slider .swiper-button-next:hover {
	background: var(--shc-orange-deep, #e0752b);
}

.western-destination-slider .swiper-button-prev.swiper-button-disabled,
.western-destination-slider .swiper-button-next.swiper-button-disabled {
	opacity: 0.35;
}

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

/* Tall organic/oval card image with a thick white frame — new, opt-in
   via cardStyle:"framed-oval" (default remains today's plain rounded
   rectangle, no wrapper markup at all). Padding-based, not box-shadow:
   a solid-spread box-shadow paints outside the element's own box and
   would get clipped by ".swiper { overflow:hidden }" or bleed into the
   next card; padding keeps the frame fully inside normal box layout. */
.western-destination-slider__image-frame {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 15px solid #fff;
	border-radius: 50% 50% 45% 45% / 62% 62% 22% 22%;
	margin-bottom: 16px;
}

.western-destination-slider__image-frame .western-destination-slider__image {
	width: 100%;
	border-radius: 46% 46% 40% 40% / 58% 58% 20% 20%;
	margin-bottom: 0;
}

/* Icon panel card — new, opt-in via cardStyle:"icon-panel". A tall,
   solid-color panel (alternating orange/indigo, the site's existing
   --shc-orange/--shc-navy tokens) with a centered white line-art icon,
   title and description — used by the "Everything a journey needs"
   services section. Scoped entirely under [data-card-style="icon-panel"]
   so the two existing photo-based sections (default / framed-oval) are
   completely unaffected. */
.western-destination-slider[data-card-style="icon-panel"] .western-destination-slider__card {
	justify-content: center;
	height: 100%;
	aspect-ratio: 3 / 4;
	box-sizing: border-box;
	padding: 40px 28px;
	border-radius: 24px;
	color: #fff;
}

.western-destination-slider[data-card-style="icon-panel"] .swiper-slide:nth-child(odd) .western-destination-slider__card {
	background: var(--shc-orange, #f68634);
}

.western-destination-slider[data-card-style="icon-panel"] .swiper-slide:nth-child(even) .western-destination-slider__card {
	background: var(--shc-navy, #2f3283);
}

.western-destination-slider__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 28px;
}

.western-destination-slider__icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.western-destination-slider[data-card-style="icon-panel"] .western-destination-slider__title {
	color: #fff;
	font-size: 22px;
}

.western-destination-slider[data-card-style="icon-panel"] .western-destination-slider__description {
	color: rgba(255, 255, 255, 0.85);
	max-width: 85%;
}

/* Arrows overlap the card row's edges (instead of sitting just inside
   it, the default / framed-oval treatment) and switch to the indigo
   token instead of orange, matching this section's own palette. */
.western-destination-slider[data-card-style="icon-panel"] .swiper-button-prev,
.western-destination-slider[data-card-style="icon-panel"] .swiper-button-next {
	background: var(--shc-navy, #2f3283);
}

.western-destination-slider[data-card-style="icon-panel"] .swiper-button-prev:hover,
.western-destination-slider[data-card-style="icon-panel"] .swiper-button-next:hover {
	background: var(--shc-navy-deep, #262a6e);
}

.western-destination-slider[data-card-style="icon-panel"] .swiper-button-prev {
	left: -22px;
}

.western-destination-slider[data-card-style="icon-panel"] .swiper-button-next {
	right: -22px;
}

@media (max-width: 575px) {
	.western-destination-slider[data-card-style="icon-panel"] .swiper-button-prev {
		left: 4px;
	}
	.western-destination-slider[data-card-style="icon-panel"] .swiper-button-next {
		right: 4px;
	}
}

/* Testimonial card — new, opt-in via cardStyle:"testimonial". White,
   left-aligned card with a star rating, serif quote, thin divider and
   an avatar/name/meta author row — used by the "What our Travelers are
   saying" section. Scoped entirely under [data-card-style="testimonial"]
   so the other three cardStyles are unaffected. */
.western-destination-slider[data-card-style="testimonial"] .western-destination-slider__card {
	align-items: flex-start;
	text-align: left;
	justify-content: space-between;
	height: 100%;
	box-sizing: border-box;
	padding: 36px 32px;
	background: #fff;
	border: 1px solid var(--shc-border, #eceaf5);
	border-radius: 20px;
	box-shadow: 0 4px 24px rgba(38, 38, 58, 0.05);
}

.western-destination-slider__rating {
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1;
}

.western-destination-slider__star {
	color: var(--shc-border, #eceaf5);
	margin-right: 2px;
}

.western-destination-slider__star.is-filled {
	color: var(--shc-orange, #f68634);
}

.western-destination-slider__quote {
	margin: 0 0 24px;
	font-family: "The Seasons", serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--shc-text, #26263a);
}

.western-destination-slider__divider {
	width: 100%;
	margin: 0 0 20px;
	border: none;
	border-top: 1px solid var(--shc-border, #eceaf5);
}

.western-destination-slider__author {
	display: flex;
	align-items: center;
	gap: 14px;
}

.western-destination-slider__avatar {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;
	min-width: 48px;

	border-radius: 50%;

	background: #f68634;
	color: #ffffff;

	font-size: 18px;
	font-weight: 700;
	line-height: 1;

	text-transform: uppercase;

	flex-shrink: 0;
}

.western-destination-slider__author-info {
	display: flex;
	flex-direction: column;
}

.western-destination-slider__name {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--shc-text, #26263a);
}

.western-destination-slider__meta {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: #9a9aa5;
}

/* Pagination sits lower-right for this section instead of centered
   (the reference places it toward the bottom-right of the slider
   column). The pill is display:inline-flex, so margin:auto has no
   effect on its own horizontal position — text-align on its
   containing block is what actually moves an inline-level box, so
   that's overridden here instead (safe: every other testimonial
   element is an explicit flex item with its own align-items/text-align
   already set, so this only ever reaches the pagination pill). */
.western-destination-slider[data-card-style="testimonial"] {
	text-align: right;
}

.western-destination-slider[data-card-style="testimonial"] .swiper-pagination {
	margin-left: 0;
	margin-right: 0;
}

/* Logo card — new, opt-in via cardStyle:"logo". Just a single image,
   vertically/horizontally centered, no background/border/shadow/frame
   — used by the "Colleges & corporates who travel with us" section.
   object-fit:contain + a shared max-height (not a fixed width/height)
   keeps every logo at its own natural aspect ratio while still landing
   at a visually consistent scale next to its neighbors, since partner
   logos vary a lot in proportions (a square mark next to a wide
   wordmark). Scoped under [data-card-style="logo"] so the other four
   cardStyles are unaffected. */
.western-destination-slider[data-card-style="logo"] .western-destination-slider__card {
	justify-content: center;
	height: 100%;
}

.western-destination-slider__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80px;
	margin: 0 auto;
	object-fit: contain;
}

.western-destination-slider__logo-placeholder {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: #9a9aa5;
	text-align: center;
}

@media (max-width: 575px) {
	.western-destination-slider__logo {
		max-height: 56px;
	}
}

/* Team member card — new, opt-in via cardStyle:"team". Portrait photo
   with a bottom gradient overlay and a name/role caption — the same
   image-with-caption-overlay technique already used by
   .western-founder-photo / .western-emi-banner / .western-page-hero in
   the theme's own western-style.css, reused here instead of inventing a
   second version of it. Used by the "Management Team" section. Scoped
   entirely under [data-card-style="team"] so the other five cardStyles
   are unaffected. */
.western-destination-slider[data-card-style="team"] .western-destination-slider__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--ds-radius);
	aspect-ratio: 4 / 5;
	height: 100%;
	box-sizing: border-box;
}

.western-destination-slider[data-card-style="team"] .western-destination-slider__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 25, 60, 0) 45%, rgba(15, 20, 50, 0.85) 100%);
	pointer-events: none;
}

.western-destination-slider__team-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.western-destination-slider__team-caption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.western-destination-slider__team-name {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
}

.western-destination-slider__team-role {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: var(--shc-orange, #f68634);
}

@media (prefers-reduced-motion: reduce) {
	.western-destination-slider .swiper-wrapper {
		transition-duration: 0ms !important;
	}
	.western-destination-slider .swiper {
		transition: none !important;
	}
}