/* ==========================================================================
   The Capital — Slider & Content Section
   Left: image carousel with controls contained inside.
   Right: title, gold divider, subtitle, body, two buttons.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Outer section
   ------------------------------------------------------------------ */
.tc-slider-content {
	background: #000 !important;
	/* max-height: 645px; */
	/* min-height: 75vh; */
	overflow: hidden;
}

.tc-slider-content > .elementor-container {
	align-items: flex-start !important;
}

.tc-slider-content-events {
	padding-right: calc((100vw - 1400px) / 2) !important;
}

.tc-slider-content-img {
	height: 100%;
}

.tc-slider-content-img * {
	height: 100% !important;
	object-fit: cover;
}

/* ------------------------------------------------------------------
   2. Slider column — fill height, no gaps
   ------------------------------------------------------------------ */
.tc-sc-slider-col {
	padding: 0 !important;
	width: 55% !important;
	max-width: 55% !important;
	flex: 0 0 55% !important;
	/* Height is set in px by slider-content.js to match .tc-sc-content-col.
	   CSS-only equal-height techniques (align-self:stretch, height:stretch,
	   -webkit-fill-available) all produced inconsistent results across
	   browsers in this nested flex/carousel structure — Safari in particular
	   resolves -webkit-fill-available against a much larger box than
	   intended — so a measured pixel height is used instead. */
}

.tc-sc-slider-col .elementor-widget-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.tc-sc-slider-col,
.tc-sc-slider-col > .elementor-widget-wrap,
.tc-sc-slider-col > .elementor-element-populated {
	padding: 0 !important;
	height: 100%;
}

.tc-sc-slider-col > .elementor-widget-wrap > .elementor-widget,
.tc-sc-slider-col > .elementor-element-populated > .elementor-widget {
	height: 100%;
}

/* ------------------------------------------------------------------
   Events Variation
   ------------------------------------------------------------------ */

.tc-sc-content-col.tc-sc-content-events {
	height: 100% !important;
	height: -webkit-fill-available !important;

	@media (max-width: 768px) {
		height: auto !important
	}
}
 
.tc-sc-content-col.tc-sc-content-events > .elementor-element-populated {
	padding-right: calc((100vw - 1420px) / 2) !important;
	margin-right: 20px;
}

/* ------------------------------------------------------------------
   Inset Variation
   ------------------------------------------------------------------ */

.inset-content {

	@media (max-width: 768px) {
		padding-bottom: 50px !important;
	}
}

.inset-content .tc-sc-content-col {
	background: none;
	flex: 1;
}

.inset-content .tc-sc-content-col > .elementor-widget-wrap.elementor-element-populated {
    background: linear-gradient(225deg, rgba(25, 25, 25, 1) 0%, rgba(0, 0, 0, 1) 50%);
    position: relative;
    height: calc(100% - 80px);
    top: 40px;
    padding: 13% !important;
    right: 200px;
    border: 1px solid rgba(112, 112, 112, .6);
    border-radius: 8px;
    flex-wrap: nowrap;
    width: 38vw;

	@media (max-width: 1200px) {
		width: auto;
		right: 100px;
		padding: 40px 20px !important;
		padding-top: 100px !important;
	}

	@media (max-width: 1024px) {
		height: auto;
		border-radius: 0;
		border: none;
		right: 0;
		top: 0;
	}
}

.inset-content .tc-sc-slider-col {
	padding: 0 !important;
	width: 62% !important;
	max-width: 62% !important;
	flex: 0 0 62% !important;

	@media (max-width: 1200px) {
		width: 55% !important;
		max-width: 55% !important;
		flex: 0 0 55% !important;
	}

	@media (max-width: 1024px) {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}	
}



/* ------------------------------------------------------------------
   Right Gradient Variation
   ------------------------------------------------------------------ */

.tc-slider-content.right-gradient .tc-sc-content-col {
	padding-right: calc((100vw - 1200px) / 2) !important;;
}

.tc-slider-content.right-gradient .tc-sc-slider-col::before {
	content: '';
	background: linear-gradient(to left, rgba(0, 0, 0, 1) 6%, transparent 50%);
    width: 100%;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tc-slider-content.right-gradient .tc-sc-content-col,
.tc-slider-content.right-gradient .tc-sc-content-col > .elementor-widget-wrap, .tc-sc-content-col > .elementor-element-populated {
	background: none;
	background-image: none;
}

.tc-slider-content.right-gradient .tc-sc-content-col > .elementor-widget-wrap, .tc-sc-content-col > .elementor-element-populated {

	@media (min-width: 1260px) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Make carousel fill the full column height */
.tc-sc-slider-col .elementor-widget-image-carousel,
.tc-sc-slider-col .elementor-image-carousel-wrapper,
.tc-sc-slider-col .elementor-image-carousel,
.tc-sc-slider-col .swiper,
.tc-sc-slider-col .swiper-wrapper {
	height: 100% !important;
}

.tc-sc-slider-col .swiper-wrapper {
	align-items: stretch !important;
}

.tc-sc-slider-col .swiper-slide {
	height: auto !important;
	/* width: 100% !important; */
}

.tc-sc-slider-col .swiper-slide-inner {
	width: 100% !important;
	height: 100% !important;
}

.tc-sc-slider-col .swiper-slide-inner:before {
    content: '';
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 35%);
    width: 100%;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tc-sc-slider-col .swiper-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* ------------------------------------------------------------------
   3. Carousel navigation arrows — contained within slider column
   ------------------------------------------------------------------ */
.tc-sc-carousel .elementor-swiper-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	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.25s ease;
	z-index: 10;
}

.tc-sc-carousel .elementor-swiper-button-next:hover,
.tc-sc-carousel .elementor-swiper-button-prev:hover {
	background: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
	.tc-sc-carousel .elementor-swiper-button-prev {
		left: 15px !important;
	}

	.tc-sc-carousel .elementor-swiper-button-next {
		right: 15px !important;
	}

	.tc-sc-carousel .elementor-swiper-button-prev svg {
		right: 2px;
	}

	.tc-sc-carousel .elementor-swiper-button-next svg {
		left: 2px;
	}
}



.tc-sc-carousel .elementor-swiper-button-prev svg {
	position: relative;
	fill: #000 !important;
}

.tc-sc-carousel .elementor-swiper-button-next svg {
	position: relative;
	fill: #000 !important;
}

.tc-sc-carousel.e-widget-swiper .elementor-swiper-button-prev svg {
	position: relative;
	fill: none !important;
	stroke: #000 !important;
}

.tc-sc-carousel.e-widget-swiper .elementor-swiper-button-next svg {
	position: relative;
	fill: none !important;
	stroke: #000 !important;
}

.tc-sc-carousel .elementor-swiper-button:hover {
	background: rgba(255, 255, 255, 0.75);
}

.tc-sc-carousel .elementor-swiper-button i {
	font-size: 18px;
}

/* Pagination dots — inside slider, bottom-center */
.tc-sc-carousel .swiper-pagination {
	position: absolute;
	bottom: 40px !important;
	z-index: 5;
	display: none;
    align-items: center;
    justify-content: center;
}

.tc-sc-carousel .swiper-pagination-bullet {
	width: 4px;
	height: 4px;
	background: #fff;
	opacity: 0.5;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.tc-sc-carousel .swiper-pagination-bullet-active {
	background: #EBA318;
	opacity: 1;
	width: 8px;
	height: 8px;
}


.tc-sc-carousel.inset {
	padding: 30px !important;
    border: 1px solid rgba(216, 218, 215, .33);
    border-radius: 8px;
}

.tc-sc-slider-col .tc-sc-carousel.inset .swiper-slide img {
	object-fit: contain !important;
}

.tc-sc-carousel.inset .elementor-swiper-button-prev {
	left: 45px !important;
}

.tc-sc-carousel.inset .elementor-swiper-button-next {
	right: 45px !important;
}

/* ------------------------------------------------------------------
   4. Content column
   ------------------------------------------------------------------ */
.tc-sc-content-col {
	background: linear-gradient(to top, rgba(25, 25, 25, 1) 0%, rgba(0, 0, 0, 1) 100%);
	background: linear-gradient(225deg, rgba(25, 25, 25, 1) 0%, rgba(0, 0, 0, 1) 50%);
	width: 100%;
	/* No explicit height — this column sizes to its own content (title,
	   divider, subtitle, body, buttons). slider-content.js reads that
	   natural height and applies it to .tc-sc-slider-col to match. */
}

.tc-sc-content-col .tc-slider-content-heading {
	margin-bottom: 10px !important;
}

.tc-sc-content-col > .elementor-widget-wrap,
.tc-sc-content-col > .elementor-element-populated {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 80px 106px !important;
	background-image: url(/wp-content/themes/the-capital/assets/img/wave-up-2.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.tc-sc-content-col.no-lines > .elementor-widget-wrap,
.tc-sc-content-col.no-lines > .elementor-element-populated {
	background-image: none;
}

.tc-sc-content-col-text ul {

}

.tc-sc-content-col.flipped > .elementor-widget-wrap,
.tc-sc-content-col.flipped > .elementor-element-populated {
	padding-left: calc((100vw - 1400px) / 2) !important;
	padding-right: 120px !important;
}

@media (max-width: 1460px) {
  .tc-sc-content-col.flipped > .elementor-widget-wrap,
  .tc-sc-content-col.flipped > .elementor-element-populated {
    padding-left: 20px !important; /* or whatever the footer uses at that breakpoint */
	padding-right: 20px !important;
  }
}

/* Circle Variation */
.tc-sc-content-col.circle {
	background: none;
}

.tc-prize-partners .tc-logos-slider .elementor-swiper-button {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff !important;
	border: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #000;
	transition: background 0.2s ease;
	padding: 7px;
	display: none !important;
}

.tc-prize-partners .tc-logos-slider .elementor-swiper-button.swiper-button-disabled {
	opacity: 0;
}

.tc-prize-partners .e-con-inner {
	border-top: 1px solid rgba(216, 218, 215, 0.33);
	border-bottom: 1px solid rgba(216, 218, 215, 0.33);
}

/* Unordered list — SVG check-circle bullet */
.tc-sc-content-col-text ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.tc-sc-content-col-text ul li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 14px;
}

.tc-sc-content-col-text ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	background-image: url('../img/check-circle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* ::marker doesn't support border/border-radius — use counter + ::before instead */
.tc-sc-content-col.circle ol {
	list-style: none;
	counter-reset: circle-list;
	padding-left: 0;
	margin: 0;
}

.tc-sc-content-col.circle ol li {
	counter-increment: circle-list;
	position: relative;
	padding-left: 2.8em;
	display: flex;
    min-height: 30px;
    align-items: center;
	margin-bottom: 18px;
}

.tc-sc-content-col.circle .button-gold {
	padding-left: 2.8em;
}

.tc-sc-content-col.circle ol li::before {
	content: counter(circle-list);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border: 1px solid var(--tc-gold, #EBA318);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--tc-white, #ffffff);
	flex-shrink: 0;
}

.tc-sc-content-col.circle > .elementor-widget-wrap, .tc-sc-content-col.circle > .elementor-element-populated {
	background-image: none;
}

.tc-sc-slider-col.circle {
	width: 50% !important;
	max-width: 50% !important;
	flex: 0 0 50% !important;
}

.tc-sc-content-col.flipped.circle.e-con-full,
.tc-sc-content-col.flipped.circle > .elementor-widget-wrap,
.tc-sc-content-col.flipped.circle > .elementor-element-populated {
	padding-left: calc((100vw - 1420px) / 2) !important;
	padding-right: 120px !important;
}

/* Title */
.tc-sc-title {
	margin-bottom: 0 !important;
}

/* Gold divider */
.tc-sc-divider {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

/* Subtitle */
.tc-sc-subtitle {
	margin-bottom: 16px !important;
}

/* Body text */
.tc-sc-body {
	margin-bottom: 24px !important;
}

/* Table */
.tc-slider-content-table p {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
}

.tc-slider-content-table p strong {
	font-weight: 400 !important;
}

/* ------------------------------------------------------------------
   5. Buttons row
   ------------------------------------------------------------------ */
.tc-sc-content-col.flipped .tc-sc-buttons {
	justify-content: flex-start;
}

.tc-sc-buttons {
	/* width: auto !important; */


}

.tc-sc-buttons .elementor-row,
.tc-sc-buttons > .elementor-container {
	justify-content: center;
}

.tc-sc-buttons.left .elementor-row,
.tc-sc-buttons.left > .elementor-container {
	@media (max-width: 767px) {
		justify-content: center;
	}
}

.tc-sc-buttons .elementor-column {
	width: auto !important;
}

/* ------------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------------ */
@media (min-width: 1601px) {
	.tc-sc-content-col.flipped .tc-sc-slider-col {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
	}
}

@media (max-width: 1440px) {
	.tc-sc-slider-col {
		width: 55vw !important;
		max-width: 960px !important;
		flex: 0 0 55vw !important;
	}

	.tc-sc-content-col.flipped.circle.e-con-full {
		padding-left: 20px !important;
	}
	
	.tc-sc-carousel.inset {
		margin-left: 20px;
	}
}

@media (max-width: 1200px) {
	.tc-sc-slider-col {
		width: 50% !important;
		flex: 0 0 50% !important;
	}

	.tc-sc-content-col > .elementor-widget-wrap,
	.tc-sc-content-col > .elementor-element-populated {
		padding: 50px 40px !important;
	}
}

@media (max-width: 1024px) {
	.tc-sc-slider-col {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: none !important;
		height: auto !important;
	}

	.tc-prize-partners .tc-logos-slider .elementor-swiper-button {
		display: flex !important;
	}

	.tc-sc-carousel.inset {
		margin-left: 0;
	}

	.tc-sc-content-col.flipped.circle.e-con-full,
	.tc-sc-content-col.flipped.circle > .elementor-widget-wrap,
	.tc-sc-content-col.flipped.circle > .elementor-element-populated {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	.tc-sc-slider-col.circle {
		width: 100% !important;
		max-width: none !important;
		flex: 0 0 100% !important;
	}
}

@media (max-width: 767px) {
	.tc-sc-carousel .swiper-pagination-bullet {
		margin: 0 4px !important;
	}

	.tc-sc-carousel .swiper-pagination {
		bottom: 20px !important;
	}

	.tc-slider-content {
		max-height: none;
		height: auto;
	}

	.tc-sc-carousel.inset {
		padding: 15px !important;
	}

	.tc-sc-content-col.circle {
		padding-left: 20px;
	}

	/* Stack: slider on top, content below */
	/* .tc-slider-content .elementor-column {
		width: 100% !important;
		flex: 0 0 100% !important;
	} */

	.tc-sc-slider-col .swiper-slide {
		height: auto !important;
		min-height: 300px;
	}

	.tc-sc-slider-col .elementor-widget-image-carousel,
	.tc-sc-slider-col .elementor-image-carousel-wrapper,
	.tc-sc-slider-col .elementor-image-carousel,
	.tc-sc-slider-col .swiper,
	.tc-sc-slider-col .swiper-wrapper {
		height: auto !important;
		min-height: 300px;
	}

	.tc-sc-content-col > .elementor-widget-wrap,
	.tc-sc-content-col > .elementor-element-populated {
		padding: 70px 20px !important;
		padding-bottom: 80px !important;
	}

	/* Stack buttons vertically */
	.tc-sc-buttons .elementor-row,
	.tc-sc-buttons > .elementor-container {
		justify-content: center;
		align-items: center;
		gap: 12px;
	}

	.tc-sc-buttons .elementor-column {
		padding: 0 !important;
	}

	.tc-sc-carousel .elementor-swiper-button {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.tc-sc-carousel .elementor-swiper-button svg {
		width: 16px !important;
		/* left: 0; */
	}

	.tc-slider-content.right-gradient .tc-sc-slider-col::before {
		display: none;
	}

	.tc-sc-carousel.inset .elementor-swiper-button-next {
		right: 30px !important;
	}
	.tc-sc-carousel.inset .elementor-swiper-button-prev {
		left: 30px !important;
	}
}