/* ==========================================================================
   The Capital — Gallery Slider
   Wraps Elementor Pro's Media Carousel widget.
   Centered active slide (52% wide), 50% opacity side peekage.
   Pagination dots left / nav arrows right below the slider.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Section — overflow:hidden clips side slides at section edge
   ------------------------------------------------------------------ */
.tc-gallery-slider {
	background: #000;
	overflow: hidden;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

/* Hide Elementor's built-in swiper nav buttons — we inject our own */
.tc-gallery-slider .elementor-swiper-button {
	display: none !important;
}

.tc-gs-header {
	padding-bottom: 70px !important;
}

/* ------------------------------------------------------------------
   2. Wrapper column — strip Elementor padding
   ------------------------------------------------------------------ */
.tc-gs-wrapper > .elementor-element-populated {
	padding: 0 !important;
}

/* ------------------------------------------------------------------
   3. Widget — JS adds .tc-gallery-carousel to the Elementor widget
      element; all our rules hang off that class instead of a wrapper.
   ------------------------------------------------------------------ */
.tc-gallery-carousel {
	margin-bottom: 0 !important;
}

/* .elementor-swiper is position:relative from Elementor — nav buttons
   are injected here so they're positioned relative to the slider area. */
.tc-gallery-carousel .elementor-swiper {
	overflow: visible !important;
	position: relative;
}

.tc-gallery-carousel .elementor-widget-container {
	overflow: visible !important;
}

.tc-gallery-carousel .elementor-main-swiper {
	min-height: 50vh;
	overflow: visible !important;
	padding-bottom: 0 !important;
	width: 100%;
}

.tc-gallery-carousel .swiper-wrapper {
	align-items: stretch;
}

/* ------------------------------------------------------------------
   4. Slides — 52% wide, 3:2 ratio, dim when not active
   ------------------------------------------------------------------ */
.tc-gallery-carousel .swiper-slide {
	width: 52%;
	aspect-ratio: 3 / 2;
	position: relative;
	overflow: hidden;
	opacity: 0.5;
	transition: opacity 0.4s ease;
	flex-shrink: 0;
}

.tc-gallery-carousel .swiper-slide-active {
	opacity: 1;
}

/* ------------------------------------------------------------------
   5. Slide inner content — Elementor Media Carousel uses a
      background-image on .elementor-carousel-image
   ------------------------------------------------------------------ */

/* Link wrapper */
.tc-gallery-carousel .swiper-slide .swiper-slide-inner,
.tc-gallery-carousel .swiper-slide .elementor-carousel-item-inner {
	display: block;
	height: 100%;
	position: relative;
}

/* Background-image fills the slide */
.tc-gallery-carousel .swiper-slide .elementor-carousel-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Fallback: if the widget ever outputs <img> tags */
.tc-gallery-carousel .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Strip any Elementor widget padding/margin */
.tc-gs-outer .elementor-widget-container {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   7. Controls row — pagination dots centred below
   ------------------------------------------------------------------ */
.tc-gs-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52%;
	margin: 25px auto 0;
}

/* ------------------------------------------------------------------
   8. Pagination dots
   ------------------------------------------------------------------ */
.tc-gs-pagination {
	display: none;
	gap: 8px;
	align-items: center;
	width: auto !important;
	flex-wrap: wrap;
}

.tc-gs-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
	margin: 0 !important;
}

.tc-gs-pagination .swiper-pagination-bullet-active {
	width: 28px;
	border-radius: 4px;
	background: var(--tc-gold, #EBA318);
}

/* ------------------------------------------------------------------
   9. Nav arrows — absolute overlay on .tc-gs-swiper-wrap
      Positioned at the left/right edges of the active slide (52% wide)
   ------------------------------------------------------------------ */
.tc-gs-prev,
.tc-gs-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #000;
	transition: background 0.2s ease;
	padding: 0;
}

.tc-gs-prev svg,
.tc-gs-next svg {
	width: 20px;
	height: 20px;
}

.tc-gs-prev:hover,
.tc-gs-next:hover {
	background: rgba(255, 255, 255, 0.75);
}

.tc-gs-prev.swiper-button-disabled,
.tc-gs-next.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* Position at left/right edges of the 52% active slide */
.tc-gs-prev { left: calc((100% - 52%) / 2 + 16px); }
.tc-gs-next { right: calc((100% - 52%) / 2 + 16px); }

/* ------------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.tc-gallery-carousel .swiper-slide {
		width: 70%;
	}

	.tc-gs-controls {
		width: 70%;
	}

	.tc-gs-prev { left: calc((100% - 70%) / 2 + 16px); }
	.tc-gs-next { right: calc((100% - 70%) / 2 + 16px); }

	.tc-gallery-carousel .elementor-main-swiper {
		min-height: 45vh;
	}

	.tc-gallery-slider.hotel {
		padding-top: 80px !important;
	}
}

@media (max-width: 767px) {
	.tc-gallery-carousel .elementor-main-swiper {
		min-height: 1px;
	}

	.tc-gs-header {
		padding-bottom: 40px !important;
	}

	.tc-gs-header h2 {
		font-size: 40px !important;
		line-height: 1 !important;
	}

	.tc-gallery-slider {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	.tc-gallery-slider.hotel {
		padding-top: 50px !important;
	}

	.tc-gallery-carousel .swiper-slide {
		width: 88%;
	}

	.tc-gs-controls {
		width: 88%;
		margin-top: 28px;
		justify-content: center;
	}

	.tc-gs-pagination {
		flex-wrap: wrap;
	}

	.tc-gs-prev { left: calc((100% - 88%) / 2 + 12px); }
	.tc-gs-next { right: calc((100% - 88%) / 2 + 12px); }
}