.tc-carousel {
	--tc-thumb-width: 90px;
	--tc-thumb-height: 60px;
	--tc-thumb-gap: 10px;
	--tc-thumb-radius: 6px;
	--tc-thumb-opacity: 55%;
	--tc-thumb-opacity-active: 100%;
	--tc-section-gap: 10px;
	--tc-overlay-color: #000000;
	--tc-overlay-opacity: 65%;
	--tc-thumb-shadow-blur: 20px;
	--tc-thumb-overlay-inset: 16px;
	--tc-thumb-overlay-shift: 0px;
	--tc-control-size: 44px;
	--tc-control-radius: 8px;
	--tc-control-inset: 16px;
	--tc-control-gap: 8px;
	--tc-align-y: flex-end;
	--tc-align-x: flex-start;
	--tc-text-align: left;
	--tc-overlay-edge: bottom;
	--tc-content-band: auto;
	--tc-content-justify: flex-start;
	--tc-ctrl-top: auto;
	--tc-ctrl-right: var( --tc-control-inset );
	--tc-ctrl-bottom: var( --tc-control-inset );
	--tc-ctrl-left: auto;
	--tc-ctrl-gap-eff: var( --tc-control-gap );
	--tc-prev-pos: static;
	--tc-prev-top: auto;
	--tc-prev-left: auto;
	--tc-prev-right: auto;
	--tc-prev-xform: none;
	--tc-next-pos: static;
	--tc-next-top: auto;
	--tc-next-left: auto;
	--tc-next-right: auto;
	--tc-next-xform: none;
	--tc-toggle-pos: static;
	--tc-toggle-top: auto;
	--tc-toggle-right: auto;
	position: relative; /* anchors overlay thumbnail strip (siblings of main) */
	display: flex;
	flex-direction: column;
	gap: var( --tc-section-gap );
	width: 100%;
	overflow: visible; /* allow overlay thumbs to hang outside the slide */
}

/* Thumbnails left/right: switch wrapper to a row, thumbs strip becomes a
   fixed-width vertical column that matches the main slide's height. */
.tc-carousel[ data-thumbs-pos = 'left' ],
.tc-carousel[ data-thumbs-pos = 'right' ] {
	flex-direction: row;
	align-items: stretch;
}

.tc-carousel[ data-thumbs-pos = 'top' ] .tc-carousel__thumbs {
	order: -1;
}

.tc-carousel[ data-thumbs-pos = 'left' ] .tc-carousel__thumbs {
	order: -1;
}

/* ---------- Main slider ---------- */

.tc-carousel__main {
	position: relative;
	width: 100%;
	height: var( --tc-slide-height, 480px );
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

.tc-slide {
	position: relative;
}

.tc-slide__link {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: var( --tc-align-y, flex-end );
	justify-content: var( --tc-align-x, flex-start );
	background-size: var( --tc-object-fit, cover );
	background-position: center;
	background-repeat: no-repeat;
	text-decoration: none;
}

/* ---------- Overlay (color + transparency, controlled from Style tab) ---------- */
/* color-mix lets one color + one opacity slider drive the whole gradient,
   without Elementor's color picker needing to expose its own alpha. */

.tc-slide__link::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix( in srgb, var( --tc-overlay-color ) var( --tc-overlay-opacity ), transparent ) 0%,
		transparent 55%
	);
}

.tc-carousel[ data-text-pos^= 'top' ] .tc-slide__link::after {
	background: linear-gradient(
		to bottom,
		color-mix( in srgb, var( --tc-overlay-color ) var( --tc-overlay-opacity ), transparent ) 0%,
		transparent 55%
	);
}

.tc-carousel[ data-text-pos^= 'center' ] .tc-slide__link::after,
.tc-carousel[ data-text-pos^= 'above-middle' ] .tc-slide__link::after {
	background: color-mix( in srgb, var( --tc-overlay-color ) var( --tc-overlay-opacity ), transparent );
}

.tc-slide__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: var( --tc-content-justify, flex-start );
	width: 100%;
	max-width: 100%;
	height: var( --tc-content-band, auto );
	max-height: 100%;
	padding: 24px 28px;
	box-sizing: border-box;
	color: #ffffff;
	text-align: var( --tc-text-align, left );
	align-items: var( --tc-align-x, flex-start );
}

.tc-slide__title,
.tc-slide__text {
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * Base typography defaults only — do NOT use CSS variables with fallbacks
 * here. Elementor's Group_Control_Typography writes font-size/weight/etc.
 * onto these selectors; a competing `font-size: var(--x, 1rem)` always
 * resolves to a concrete value and can override Elementor (global fonts
 * still worked because we never set font-family).
 */
.tc-slide__title {
	margin: 0 0 8px;
	font-size: 1.6rem;
	line-height: 1.2;
}

.tc-slide__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.tc-slide__cta {
	display: inline-block;
	box-sizing: border-box;
	margin-top: 16px;
	padding: 12px 24px;
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	border-radius: 4px;
	background-color: #ffffff;
	color: #111111;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.tc-slide__cta:hover,
.tc-slide__cta:focus {
	color: #ffffff;
	background-color: #111111;
}

.tc-slide__cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.swiper-slide-active .tc-slide__cta.tc-anim {
	animation-delay: 0.4s;
}

/* Gutenberg block sets CSS vars via inline style + .tc-carousel--gb */
.tc-carousel--gb .tc-slide__title {
	font-size: var( --tc-title-size, 1.6rem );
	font-weight: var( --tc-title-weight, inherit );
	max-width: var( --tc-title-max-width, 100% );
	color: var( --tc-title-color, inherit );
	background-color: var( --tc-title-bg, transparent );
	padding: var( --tc-title-padding, 0 );
	text-shadow: var( --tc-title-shadow, none );
}

.tc-carousel--gb .tc-slide__text {
	font-size: var( --tc-body-size, 1rem );
	font-weight: var( --tc-body-weight, inherit );
	max-width: var( --tc-body-max-width, 100% );
	color: var( --tc-body-color, inherit );
	background-color: var( --tc-body-bg, transparent );
	padding: var( --tc-body-padding, 0 );
	text-shadow: var( --tc-body-shadow, none );
}

.tc-carousel--gb .tc-slide__cta {
	margin-top: var( --tc-cta-margin-top, 16px );
	padding: var( --tc-cta-padding, 12px 24px );
	border-width: var( --tc-cta-border-width, 0 );
	border-color: var( --tc-cta-border-color, transparent );
	border-radius: var( --tc-cta-radius, 4px );
	background-color: var( --tc-cta-bg, #ffffff );
	color: var( --tc-cta-color, #111111 );
	font-size: var( --tc-cta-size, 1rem );
	font-weight: var( --tc-cta-weight, 600 );
}

.tc-carousel--gb .tc-slide__cta:hover,
.tc-carousel--gb .tc-slide__cta:focus {
	color: var( --tc-cta-color-hover, #ffffff );
	background-color: var( --tc-cta-bg-hover, #111111 );
	border-color: var( --tc-cta-border-color-hover, var( --tc-cta-border-color, transparent ) );
}

/* ---------- Text position (CSS vars from Elementor responsive control;
   data-text-pos kept as fallback for Gutenberg / initial render) ---------- */

.tc-carousel[ data-text-pos^= 'top' ] {
	--tc-align-y: flex-start;
	--tc-overlay-edge: top;
	--tc-content-band: auto;
	--tc-content-justify: flex-start;
}
.tc-carousel[ data-text-pos^= 'above-middle' ] {
	--tc-align-y: flex-start;
	--tc-overlay-edge: center;
	--tc-content-band: 50%;
	--tc-content-justify: flex-end;
}
.tc-carousel[ data-text-pos^= 'center' ] {
	--tc-align-y: center;
	--tc-overlay-edge: center;
	--tc-content-band: auto;
	--tc-content-justify: flex-start;
}
.tc-carousel[ data-text-pos^= 'bottom' ] {
	--tc-align-y: flex-end;
	--tc-overlay-edge: bottom;
	--tc-content-band: auto;
	--tc-content-justify: flex-start;
}

.tc-carousel[ data-text-pos$= 'left' ] {
	--tc-align-x: flex-start;
	--tc-text-align: left;
}
.tc-carousel[ data-text-pos$= 'center' ] {
	--tc-align-x: center;
	--tc-text-align: center;
}
.tc-carousel[ data-text-pos$= 'right' ] {
	--tc-align-x: flex-end;
	--tc-text-align: right;
}

/* Leave headroom for an overlay thumbnail strip so it never sits on top
   of the text content. */
.tc-carousel[ data-thumbs-pos = 'overlay-bottom' ][ data-text-pos^= 'bottom' ] .tc-slide__content {
	padding-bottom: calc( var( --tc-thumb-height ) + var( --tc-thumb-overlay-inset ) * 2 );
}
.tc-carousel[ data-thumbs-pos = 'overlay-top' ][ data-text-pos^= 'top' ] .tc-slide__content {
	padding-top: calc( var( --tc-thumb-height ) + var( --tc-thumb-overlay-inset ) * 2 );
}

/* ---------- Per-slide text animation ---------- */
/* Swiper toggles .swiper-slide-active on the incoming slide; the
   animation replays automatically on every transition (slide or fade). */

.tc-anim {
	opacity: 0;
	transform: translateY( 18px );
}

.swiper-slide-active .tc-anim {
	animation: tc-text-in 0.6s ease forwards;
}

.swiper-slide-active .tc-slide__title.tc-anim {
	animation-delay: 0.1s;
}

.swiper-slide-active .tc-slide__text.tc-anim {
	animation-delay: 0.25s;
}

@keyframes tc-text-in {
	from {
		opacity: 0;
		transform: translateY( 18px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tc-anim {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

/* ---------- Control buttons (prev / play-pause / next) ---------- */

.tc-carousel__controls {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	top: var( --tc-ctrl-top );
	right: var( --tc-ctrl-right );
	bottom: var( --tc-ctrl-bottom );
	left: var( --tc-ctrl-left );
	gap: var( --tc-ctrl-gap-eff, var( --tc-control-gap ) );
	pointer-events: none; /* let clicks pass except on buttons */
}

.tc-carousel__btn {
	pointer-events: auto;
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --tc-control-size );
	height: var( --tc-control-size );
	padding: 0;
	border: 0;
	border-radius: var( --tc-control-radius );
	background-color: var( --tc-control-bg, rgba( 0, 0, 0, 0.45 ) );
	color: var( --tc-control-color, #ffffff );
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.tc-carousel__btn:hover {
	background-color: rgba( 0, 0, 0, 0.65 );
}

.tc-carousel__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.tc-carousel__icon {
	display: block;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* Play icon hidden while running; pause hidden while paused. */
.tc-carousel__btn--toggle .tc-carousel__icon--play {
	display: none;
}

.tc-carousel__btn--toggle.is-paused .tc-carousel__icon--pause {
	display: none;
}

.tc-carousel__btn--toggle.is-paused .tc-carousel__icon--play {
	display: block;
}

/*
 * Autoplay countdown ring on the play/pause button.
 * Progress comes from Swiper's autoplayTimeLeft → --tc-timer-p (1 → 0).
 * Thin white ring via mask; track is a faint white so the ring reads clearly.
 */
.tc-carousel__timer {
	--tc-timer-p: 1;
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: conic-gradient(
		#ffffff calc( var( --tc-timer-p ) * 1turn ),
		rgba( 255, 255, 255, 0.22 ) 0
	);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc( 100% - 2px ),
		#000 calc( 100% - 2px )
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc( 100% - 2px ),
		#000 calc( 100% - 2px )
	);
}

.tc-carousel__btn--toggle.is-paused .tc-carousel__timer {
	opacity: 0.45;
}

/* --- Placement via CSS vars (Elementor responsive) + data-attr fallback --- */

.tc-carousel__btn--prev {
	position: var( --tc-prev-pos, static );
	top: var( --tc-prev-top, auto );
	left: var( --tc-prev-left, auto );
	right: var( --tc-prev-right, auto );
	transform: var( --tc-prev-xform, none );
}

.tc-carousel__btn--next {
	position: var( --tc-next-pos, static );
	top: var( --tc-next-top, auto );
	left: var( --tc-next-left, auto );
	right: var( --tc-next-right, auto );
	transform: var( --tc-next-xform, none );
}

.tc-carousel__btn--toggle {
	position: var( --tc-toggle-pos, static );
	top: var( --tc-toggle-top, auto );
	right: var( --tc-toggle-right, auto );
}

/* data-attribute fallbacks when Elementor responsive vars are not set */
.tc-carousel__controls[ data-controls-pos = 'corner-top-left' ] {
	--tc-ctrl-top: var( --tc-control-inset );
	--tc-ctrl-right: auto;
	--tc-ctrl-bottom: auto;
	--tc-ctrl-left: var( --tc-control-inset );
}

.tc-carousel__controls[ data-controls-pos = 'corner-top-right' ] {
	--tc-ctrl-top: var( --tc-control-inset );
	--tc-ctrl-right: var( --tc-control-inset );
	--tc-ctrl-bottom: auto;
	--tc-ctrl-left: auto;
}

.tc-carousel__controls[ data-controls-pos = 'corner-bottom-left' ] {
	--tc-ctrl-top: auto;
	--tc-ctrl-right: auto;
	--tc-ctrl-bottom: var( --tc-control-inset );
	--tc-ctrl-left: var( --tc-control-inset );
}

.tc-carousel__controls[ data-controls-pos = 'corner-bottom-right' ] {
	--tc-ctrl-top: auto;
	--tc-ctrl-right: var( --tc-control-inset );
	--tc-ctrl-bottom: var( --tc-control-inset );
	--tc-ctrl-left: auto;
}

.tc-carousel__controls[ data-controls-pos = 'sides' ] {
	--tc-ctrl-top: 0;
	--tc-ctrl-right: 0;
	--tc-ctrl-bottom: 0;
	--tc-ctrl-left: 0;
	--tc-ctrl-gap-eff: 0px;
	--tc-prev-pos: absolute;
	--tc-prev-top: 50%;
	--tc-prev-left: var( --tc-control-inset );
	--tc-prev-right: auto;
	--tc-prev-xform: translateY( -50% );
	--tc-next-pos: absolute;
	--tc-next-top: 50%;
	--tc-next-left: auto;
	--tc-next-right: var( --tc-control-inset );
	--tc-next-xform: translateY( -50% );
	--tc-toggle-pos: absolute;
	--tc-toggle-top: var( --tc-control-inset );
	--tc-toggle-right: var( --tc-control-inset );
}

.tc-carousel__btn--prev:active {
	transform: var( --tc-prev-xform, none ) scale( 0.96 );
}

.tc-carousel__btn--next:active {
	transform: var( --tc-next-xform, none ) scale( 0.96 );
}

/* ---------- Thumbnail strip: always [prev | active | next] ---------- */

.tc-carousel__thumbs {
	flex: 0 0 auto;
}

.tc-carousel__thumbs-viewport {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --tc-thumb-gap );
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 4px 0;
}

.tc-carousel[ data-thumbs-pos = 'bottom' ] .tc-carousel__thumbs,
.tc-carousel[ data-thumbs-pos = 'top' ] .tc-carousel__thumbs {
	width: 100%;
}

.tc-carousel[ data-thumbs-pos = 'left' ] .tc-carousel__thumbs,
.tc-carousel[ data-thumbs-pos = 'right' ] .tc-carousel__thumbs {
	width: var( --tc-thumb-width );
	align-self: center;
}

.tc-carousel[ data-thumbs-pos = 'left' ] .tc-carousel__thumbs-viewport,
.tc-carousel[ data-thumbs-pos = 'right' ] .tc-carousel__thumbs-viewport {
	flex-direction: column;
	width: var( --tc-thumb-width );
}

.tc-carousel[ data-thumbs-pos = 'overlay-bottom' ] .tc-carousel__thumbs,
.tc-carousel[ data-thumbs-pos = 'overlay-top' ] .tc-carousel__thumbs {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
	filter: drop-shadow( 0 calc( var( --tc-thumb-shadow-blur ) / 4 ) calc( var( --tc-thumb-shadow-blur ) / 2 ) rgba( 0, 0, 0, 0.45 ) );
}

.tc-carousel[ data-thumbs-pos = 'overlay-bottom' ] .tc-carousel__thumbs {
	bottom: calc( var( --tc-thumb-overlay-inset ) + var( --tc-thumb-overlay-shift ) );
}

.tc-carousel[ data-thumbs-pos = 'overlay-top' ] .tc-carousel__thumbs {
	top: calc( var( --tc-thumb-overlay-inset ) + var( --tc-thumb-overlay-shift ) );
}

.tc-carousel[ data-thumbs-pos = 'overlay-bottom' ] .tc-carousel__thumbs-viewport,
.tc-carousel[ data-thumbs-pos = 'overlay-top' ] .tc-carousel__thumbs-viewport {
	pointer-events: auto;
	padding: 6px;
}

.tc-carousel__thumbs .tc-thumb {
	display: block;
	flex: 0 0 auto;
	width: var( --tc-thumb-width );
	height: var( --tc-thumb-height );
	padding: 0;
	border: 0;
	border-radius: var( --tc-thumb-radius );
	overflow: hidden;
	cursor: pointer;
	opacity: var( --tc-thumb-opacity );
	background: rgba( 0, 0, 0, 0.2 );
	transition: opacity 0.25s ease;
}

.tc-carousel__thumbs .tc-thumb:hover {
	opacity: var( --tc-thumb-opacity-active );
}

.tc-carousel__thumbs .tc-thumb.is-active {
	opacity: var( --tc-thumb-opacity-active );
	box-shadow: 0 0 0 2px #ffffff;
}

.tc-carousel__thumbs .tc-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}