/* Gold Top — Banner carousel + split-link banner
 * Self-contained, no external dependencies. Mirrors the free Image Carousel
 * behaviour while supporting whole-image links and 3-way split links.
 *
 * EVERY rule is scoped under the .gt-bc wrapper that wraps each shortcode's
 * output, so nothing here can affect any other element on the page. The wrapper
 * also contains its own horizontal scrolling (no page-level overflow / scroll
 * chaining).
 */

.gt-bc {
	display: block;
	max-width: 100%;
}

/* opt-in full-bleed: break out of a boxed container to span the viewport
 * (works regardless of the parent container's padding / centering) */
.gt-bc--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.gt-bc *,
.gt-bc *::before,
.gt-bc *::after {
	box-sizing: border-box;
}

/* ---------- single banner ---------- */
.gt-bc .gt-banner {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	border-radius: var(--gt-radius, 0);
	overflow: hidden;
}

.gt-bc .gt-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

/* When an aspect-ratio is locked, fill it. */
.gt-bc .gt-banner--ratio .gt-banner__img {
	height: 100%;
	object-fit: cover;
}

/* whole-image link */
.gt-bc .gt-banner__full {
	display: block;
	line-height: 0;
}

/* three equal clickable thirds overlaid on the same image */
.gt-bc .gt-banner__zones {
	position: absolute;
	inset: 0;
	display: flex;
}

.gt-bc .gt-banner__zone {
	flex: 1 1 0;
	display: block;
	min-width: 0;
	transition: background-color 0.18s ease;
}

.gt-bc .gt-banner__zone:not(.gt-banner__zone--empty):hover,
.gt-bc .gt-banner__zone:not(.gt-banner__zone--empty):focus-visible {
	background-color: rgba(0, 0, 0, 0.06);
	outline: none;
}

.gt-bc .gt-banner__zone--empty {
	pointer-events: none;
}

/* ---------- carousel ---------- */
.gt-bc .gt-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.gt-bc .gt-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* No scroll-behavior here on purpose. Smoothness is requested per call
	   in JS via scrollTo({behavior:"smooth"}); setting scroll-behavior:smooth
	   here would also smooth-animate direct scrollLeft assignments, which
	   makes the loop's post-wrap teleport visible as a long backward scroll. */
	overscroll-behavior-x: contain; /* never chain horizontal scroll to the page */
	-ms-overflow-style: none;
	scrollbar-width: none;
	border-radius: var(--gt-radius, 0);
}

.gt-bc .gt-carousel__viewport::-webkit-scrollbar {
	display: none;
}

/* mouse drag-to-slide affordance */
.gt-bc .gt-carousel__viewport.is-draggable {
	cursor: grab;
}

.gt-bc .gt-carousel__viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none; /* follow the pointer freely; snap re-applies on release */
	user-select: none;
}

.gt-bc .gt-carousel__viewport.is-dragging a,
.gt-bc .gt-carousel__viewport.is-dragging img {
	cursor: grabbing;
}

.gt-bc .gt-carousel__viewport img {
	-webkit-user-drag: none;
	user-select: none;
}

.gt-bc .gt-carousel__track {
	display: flex;
	gap: var(--gt-gap, 0px);
}

/* Each banner becomes a slide sized by --gt-per (slides per view). */
.gt-bc .gt-carousel .gt-banner {
	flex: 0 0 calc((100% - (var(--gt-per, 1) - 1) * var(--gt-gap, 0px)) / var(--gt-per, 1));
	scroll-snap-align: start;
	border-radius: 0; /* radius handled by the viewport when in a carousel */
}

/* arrows */
.gt-bc .gt-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #1c2430;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.gt-bc .gt-carousel__arrow:hover {
	background: #ffffff;
}

.gt-bc .gt-carousel__arrow svg {
	width: 22px;
	height: 22px;
}

.gt-bc .gt-carousel__arrow--prev {
	left: 14px;
}

.gt-bc .gt-carousel__arrow--next {
	right: 14px;
}

.gt-bc .gt-carousel__arrow[hidden],
.gt-bc .gt-carousel__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* dots */
.gt-bc .gt-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.gt-bc .gt-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(28, 36, 48, 0.28);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.gt-bc .gt-carousel__dot:hover {
	background: rgba(28, 36, 48, 0.5);
}

.gt-bc .gt-carousel__dot.is-active {
	background: #f35b04;
	transform: scale(1.15);
}

.gt-bc .gt-carousel__dots[hidden] {
	display: none;
}

/* Reduced-motion handling lives in JS: scrollToRaw() passes smooth=false
   when reduceMotion is set, which uses direct scrollLeft assignment (instant
   by default now that no scroll-behavior CSS is in effect). */