/* GCS Destinations — front-end styles */

/* Elementor (and its container/lazy-load system) can wrap [gcs_destinations] in
   several nested divs that carry overflow:hidden + a collapsed/guessed height
   (e.g. .e-con lazy-load placeholders). overflow/height fixes on our own grid
   can't undo clipping happening on an ANCESTOR, so we reach up and neutralize
   it on every common Elementor wrapper class that contains our grid anywhere
   inside it. Scoped via :has() so unrelated sections of the site are untouched. */
.elementor-shortcode:has(.gcs-destinations-grid),
.elementor-shortcode:has(.gcs-destinations-slider),
.elementor-widget-shortcode:has(.gcs-destinations-grid),
.elementor-widget-shortcode:has(.gcs-destinations-slider),
.elementor-widget-container:has(.gcs-destinations-grid),
.elementor-widget-container:has(.gcs-destinations-slider),
.elementor-element:has(.gcs-destinations-grid),
.elementor-element:has(.gcs-destinations-slider),
.e-con:has(.gcs-destinations-grid),
.e-con:has(.gcs-destinations-slider),
.e-con-inner:has(.gcs-destinations-grid),
.e-con-inner:has(.gcs-destinations-slider),
.e-parent:has(.gcs-destinations-grid),
.e-parent:has(.gcs-destinations-slider) {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	contain: none !important;
	content-visibility: visible !important;
	align-self: start !important;
	width: 100% !important;
	flex: 1 1 auto !important;
}

.gcs-destinations-grid,
.gcs-destinations-grid *,
.gcs-destinations-grid *::before,
.gcs-destinations-grid *::after {
	box-sizing: border-box;
}

.gcs-destinations-grid {
	--gcs-navy: #06222b;
	--gcs-teal: #12808f;
	--gcs-teal-bright: #17a7b8;
	--gcs-ink: #0a2e36;
	--gcs-white: #ffffff;
	--gcs-radius: 20px;

	display: grid;
	width: 100% !important;
	flex: 1 1 auto !important;
	grid-template-columns: repeat(var(--gcs-columns, 3), minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: 28px;
	margin: 32px 0;
	padding-bottom: 8px;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
	align-self: start !important;
	align-items: start;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (max-width: 900px) {
	.gcs-destinations-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.gcs-destinations-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.gcs-destination-title {
		font-size: 20px;
	}
}

@media (max-width: 380px) {
	.gcs-destination-footer {
		padding: 14px 16px;
	}

	.gcs-destination-title {
		font-size: 18px;
	}

	.gcs-call-fab-text {
		display: none;
	}

	.gcs-call-fab-icon {
		width: 38px;
		height: 38px;
	}
}

.gcs-destination-card {
	position: relative !important;
	border-radius: var(--gcs-radius);
	overflow: hidden !important;
	background: var(--gcs-navy);
	box-shadow: 0 10px 30px rgba(6, 34, 43, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	isolation: isolate;
}

.gcs-destination-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(6, 34, 43, 0.26);
}

.gcs-destination-image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: #0e4550;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	overflow: hidden !important;
	display: grid !important;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.gcs-destination-overlay {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	background: linear-gradient(
		180deg,
		rgba(6, 34, 43, 0) 40%,
		rgba(6, 34, 43, 0.78) 100%
	);
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.gcs-destination-footer {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	align-self: end;
	justify-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	box-sizing: border-box;
	width: 100%;
}

/* Fallback for any environment where aspect-ratio gets stripped/unsupported */
@supports not (aspect-ratio: 4 / 3) {
	.gcs-destination-image {
		height: 0;
		padding-top: 75%;
	}
}

.gcs-destination-title {
	margin: 0;
	color: #ffffff !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcs-call-fab {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.gcs-call-fab-text {
	color: var(--gcs-white);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.gcs-call-fab-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gcs-teal-bright);
	color: var(--gcs-white);
	box-shadow: 0 4px 14px rgba(6, 34, 43, 0.35);
	border: 2px solid rgba(255, 255, 255, 0.85);
	transition: background 0.2s ease, box-shadow 0.2s ease;
	animation: gcs-call-shake 2.6s ease-in-out infinite;
	transform-origin: 50% 30%;
}

.gcs-call-fab-icon svg {
	display: block;
}

.gcs-call-fab:hover .gcs-call-fab-icon,
.gcs-call-fab:focus-visible .gcs-call-fab-icon {
	background: var(--gcs-teal);
	box-shadow: 0 6px 18px rgba(6, 34, 43, 0.45);
	outline: none;
}

/* Ringing shake — pauses between bursts so it reads as "incoming call", not constant jitter. */
@keyframes gcs-call-shake {
	0%, 78%, 100% {
		transform: rotate(0deg);
	}
	80% {
		transform: rotate(-14deg);
	}
	82% {
		transform: rotate(12deg);
	}
	84% {
		transform: rotate(-10deg);
	}
	86% {
		transform: rotate(8deg);
	}
	88% {
		transform: rotate(-6deg);
	}
	90% {
		transform: rotate(4deg);
	}
	92%, 100% {
		transform: rotate(0deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gcs-call-fab-icon {
		animation: none;
	}
}

/* ===================== Slider layout ===================== */
/* [gcs_destinations layout="slider"] — fan/coverflow carousel: portrait cards
   absolutely stacked in a stage, JS applies translate/rotate/scale/opacity
   per card based on distance from the active (center) card. Round prev/next
   buttons below, matching the "Our Featured Destination" reference style. */

.gcs-destinations-slider {
	width: 100% !important;
	margin: 32px 0;
	isolation: isolate;
	position: relative;
	z-index: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gcs-destinations-slider,
.gcs-destinations-slider * {
	box-sizing: border-box;
}

.gcs-slider-stage {
	position: relative;
	isolation: isolate;
	width: 100%;
	height: clamp(320px, 42vw, 460px);
	overflow: hidden;
}

.gcs-slider-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(200px, 26vw, 320px);
	height: 100%;
	transform: translate(-50%, -50%);
	will-change: transform, opacity;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease;
}

.gcs-slider-item .gcs-destination-card {
	width: 100%;
	height: 100%;
	margin: 0;
}

.gcs-slider-item .gcs-destination-image {
	height: 100%;
	aspect-ratio: auto;
}

.gcs-slider-item .gcs-destination-title {
	font-size: 18px;
}

.gcs-slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}

.gcs-slider-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid #cfd8da;
	background: #ffffff;
	color: #12808f;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	padding: 0;
}

.gcs-slider-btn:hover,
.gcs-slider-btn:focus-visible {
	background: #17a7b8;
	border-color: #17a7b8;
	color: #ffffff;
	outline: none;
}

.gcs-slider-btn svg {
	display: block;
}