/* GB Timeline Carousel
 * Layout + timeline navigation. Slide content is the user's own Elementor elements.
 */

.gbtc {
	--gbtc-label-color: #b3b3b3;
	--gbtc-label-color-active: #1a1a1a;
	--gbtc-divider-color: #e5e5e5;
	--gbtc-marker-color: #1a1a1a;
	--gbtc-marker-size: 7px;
	--gbtc-marker-space: 9px;
	--gbtc-active-line-extra: 20px;
	--gbtc-labels-gap: 24px;
	--gbtc-labels-justify: space-between;
	--gbtc-labels-spacing: 48px;
	--gbtc-label-size: 13px;
	--gbtc-label-active-size: 26px;
	--gbtc-label-active-weight: 600;
	--gbtc-label-line-distance: 18px;
	--gbtc-nav-wrap: nowrap;
	--gbtc-nav-overflow-x: auto;
	--gbtc-nav-pad: 0px;
	--gbtc-nav-row-gap: 14px;
	--gbtc-rail-display: block;
	--gbtc-marker-display: block;
	--gbtc-year-display: block;
	--gbtc-year-border-width: 0px;
	--gbtc-arrow-display: none;
	--gbtc-arrow-size: 26px;
	--gbtc-arrow-color: #1a1a1a;
}

/* --- Timeline row: [ ‹ ]  [ scrolling labels ]  [ › ] --- */
.gbtc__timeline {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding-bottom: var(--gbtc-marker-space);
}

/* full-width base rail (hidden in wrap mode) */
.gbtc__timeline::after {
	content: "";
	display: var(--gbtc-rail-display);
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--gbtc-marker-space);
	height: 1px;
	background: var(--gbtc-divider-color);
	z-index: 1;
}

.gbtc__arrow {
	display: var(--gbtc-arrow-display);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--gbtc-arrow-size);
	height: var(--gbtc-arrow-size);
	margin-bottom: calc(var(--gbtc-label-line-distance) - 6px);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gbtc-arrow-color);
	font-size: calc(var(--gbtc-arrow-size) * 0.9);
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: opacity 0.2s ease;
}

.gbtc__arrow:disabled {
	opacity: 0.25;
	cursor: default;
}

.gbtc__timeline.is-arrows-idle .gbtc__arrow {
	visibility: hidden;
}

.gbtc__nav {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: var(--gbtc-nav-wrap);
	align-items: flex-end;
	column-gap: var(--gbtc-labels-gap);
	row-gap: var(--gbtc-nav-row-gap);
	justify-content: var(--gbtc-labels-justify);
	padding-inline: var(--gbtc-nav-pad);
	overflow-x: var(--gbtc-nav-overflow-x);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gbtc__nav::-webkit-scrollbar {
	display: none;
}

.gbtc__year {
	display: var(--gbtc-year-display);
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 2px var(--gbtc-label-line-distance);
	border: 0;
	border-bottom: var(--gbtc-year-border-width) solid var(--gbtc-divider-color);
	background: none;
	font-family: inherit;
	font-size: var(--gbtc-label-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gbtc-label-color);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.25s ease;
}

.gbtc__year.is-active {
	display: block;
	font-size: var(--gbtc-label-active-size);
	font-weight: var(--gbtc-label-active-weight);
	letter-spacing: 0.03em;
	color: var(--gbtc-label-color-active);
}

/* Kill theme / Elementor button focus + active backgrounds, keep a clean keyboard ring */
.gbtc .gbtc__year,
.gbtc .gbtc__year:hover,
.gbtc .gbtc__year:focus,
.gbtc .gbtc__year:focus-visible,
.gbtc .gbtc__year:active,
.gbtc .gbtc__arrow,
.gbtc .gbtc__arrow:hover,
.gbtc .gbtc__arrow:focus,
.gbtc .gbtc__arrow:focus-visible,
.gbtc .gbtc__arrow:active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none;
}

.gbtc .gbtc__year:hover,
.gbtc .gbtc__year:focus-visible {
	color: var(--gbtc-label-color-active);
}

.gbtc .gbtc__year:focus-visible,
.gbtc .gbtc__arrow:focus-visible {
	outline: 2px solid var(--gbtc-label-color-active);
	outline-offset: 3px;
}

/* Active marker = darker accent line + diamond.
 * Positioned by JS (left / width via CSS vars), lives OUTSIDE the scrolling nav
 * (inside .gbtc__timeline) so horizontal scroll never clips it, and sits ABOVE
 * the base rail. */
.gbtc__marker {
	display: var(--gbtc-marker-display);
	position: absolute;
	left: var(--gbtc-marker-x, 50%);
	bottom: var(--gbtc-marker-space);
	width: var(--gbtc-marker-line-w, 120px);
	height: 1px;
	background: var(--gbtc-marker-color);
	transform: translateX(-50%);
	transition: left 0.35s ease, width 0.35s ease;
	pointer-events: none;
	opacity: 0;
	z-index: 3;
}

.gbtc__marker.is-ready {
	opacity: 1;
}

.gbtc__marker::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--gbtc-marker-size);
	height: var(--gbtc-marker-size);
	background: var(--gbtc-marker-color);
	transform: translate(-50%, -50%) rotate(45deg);
}

.gbtc--no-labels .gbtc__timeline {
	display: none;
}

/* --- Carousel viewport --- */
.gbtc__viewport {
	width: 100%;
	margin-top: var(--gbtc-labels-spacing);
	overflow: hidden;
}

.gbtc--no-labels .gbtc__viewport {
	margin-top: 0;
}

.gbtc__viewport .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

/* Keep slides visible/stacked before Swiper initialises (and if JS fails). */
.gbtc__viewport:not(.swiper-initialized) > .swiper-wrapper {
	display: flex;
}

.gbtc__viewport:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
	flex: 0 0 100%;
}

.gbtc__viewport:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:not(:first-child) {
	display: none;
}

/* --- Built-in responsive scaling (overridden by the per-device controls) --- */
@media (max-width: 1024px) {
	.gbtc {
		--gbtc-label-active-size: 20px;
		--gbtc-label-size: 12px;
		--gbtc-labels-gap: 18px;
		--gbtc-labels-spacing: 36px;
		--gbtc-active-line-extra: 14px;
	}
}

@media (max-width: 767px) {
	.gbtc {
		--gbtc-label-active-size: 16px;
		--gbtc-label-size: 11px;
		--gbtc-labels-gap: 14px;
		--gbtc-labels-spacing: 28px;
		--gbtc-active-line-extra: 8px;
		--gbtc-marker-size: 6px;
		--gbtc-label-line-distance: 14px;
	}
}