/**********************************************************************************************************/
/* GSAP Carousel ******************************************************************************************/
/**********************************************************************************************************/
[data-widget="gsap-carousel"]{
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: var(--gutter-600);
	align-items: flex-start;
	min-width: 0;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.4s ease;
}
[data-widget="gsap-carousel"].carousel-initialized{
	opacity: 1;
}
[data-widget="gsap-carousel"][data-carousel-overflow]{
	overflow: visible;
}
/* Clip overflow at section boundary so slides don't bleed into adjacent sections */
[data-component]:has([data-carousel-overflow]){
	overflow: hidden;
}
@media(min-width: 1025px){
	[data-widget="gsap-carousel"]{
		row-gap: var(--gap-global);
	}
}


/********************/
/* Wrapper **********/
/********************/
[data-widget="gsap-carousel"] .carousel-wrapper{
	display: flex;
	align-items: stretch;
	will-change: transform;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent; /* remove iOS tap flash on touch */
	cursor: grab;
}
/* Prevent iOS from trying to drag images out of the carousel */
[data-widget="gsap-carousel"] img{
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}
[data-widget="gsap-carousel"] .carousel-wrapper.is-dragging{
	cursor: grabbing;
}
[data-widget="gsap-carousel"][data-carousel-drag="false"] .carousel-wrapper{
	cursor: default;
	touch-action: auto;
}
[data-widget="gsap-carousel"][data-carousel-autoplay="smooth"] .carousel-wrapper{
	cursor: default;
}

/********************/
/* Slides ***********/
/********************/
[data-widget="gsap-carousel"] .carousel-wrapper > *{
	flex-shrink: 0;
	height: auto;
}
[data-widget="gsap-carousel"] .carousel-wrapper > * > .item{
	height: 100%;
}

/**********************************************************************************************************/
/* Arrows **************************************************************************************************/
/**********************************************************************************************************/
[data-widget="gsap-carousel"][data-carousel-arrows]{
	--carousel-arrow-size: var(--size-500, 50px);
	--carousel-arrow-gap: var(--gap-200);
}
[data-widget="gsap-carousel"] .carousel-btn{
	width: var(--carousel-arrow-size);
	height: var(--carousel-arrow-size);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--border);
	border-radius: 50%;
	background: transparent;
	overflow: hidden;
	padding: 0;
}
[data-widget="gsap-carousel"] .carousel-btn,
[data-widget="gsap-carousel"] .carousel-btn svg path{
	transition: var(--trans);
}
[data-widget="gsap-carousel"] .carousel-btn-prev{
	left: calc(var(--carousel-arrow-size) * 0.25);
}
[data-widget="gsap-carousel"] .carousel-btn-next{
	right: calc(var(--carousel-arrow-size) * 0.25);
}
[data-widget="gsap-carousel"] .carousel-btn.is-disabled{
	--disabled: 0;
	opacity: var(--disabled);
	pointer-events: none;
}
[data-widget="gsap-carousel"] .carousel-btn:not(.is-disabled):hover,
[data-widget="gsap-carousel"] .carousel-btn:not(.is-disabled):focus-visible{
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}
[data-widget="gsap-carousel"] .carousel-btn:not(.is-disabled):hover svg path,
[data-widget="gsap-carousel"] .carousel-btn:not(.is-disabled):focus-visible svg path{
	fill: var(--color-white);
}

/* [Case: Arrows Top] */
[data-carousel-arrows-position="top"] .carousel-btn{
	top: 0;
	bottom: auto;
	transform: translate(0%, 0%);
}
[data-carousel-arrows-position="top"] .carousel-btn-prev{
	left: auto;
	right: calc(var(--carousel-arrow-size) + var(--gutter-200));
}
[data-carousel-arrows-position="top"] .carousel-btn-next{
	right: 0;
}
[data-component] > *:not(.container) > [data-widget="gsap-carousel"][data-carousel-arrows-position="top"] .carousel-btn-prev{
	left: auto;
	right: calc(var(--carousel-arrow-size) + var(--carousel-arrow-gap) + var(--padding-container-inline));
}
[data-component] > *:not(.container) > [data-widget="gsap-carousel"][data-carousel-arrows-position="top"] .carousel-btn-next{
	right: var(--padding-container-inline);
}

/* [Case: Arrows Bottom] */
[data-carousel-arrows-position="bottom"] .carousel-btn,
[data-carousel-arrows-position="bottom-left"] .carousel-btn,
[data-carousel-arrows-position="bottom-right"] .carousel-btn{
	top: auto;
	bottom: 0;
	transform: translate(0%, 0%);
}

/* [Case: Arrows Bottom Center] */
[data-carousel-arrows-position="bottom"] .carousel-btn-prev{
	left: calc(50% - var(--carousel-arrow-size) - var(--gutter-100));
}
[data-carousel-arrows-position="bottom"] .carousel-btn-next{
	left: calc(50% + var(--gutter-100));
}

/* [Case: Arrows Bottom Left] */
[data-carousel-arrows-position="bottom-left"] .carousel-btn-prev{
	left: 0;
}
[data-carousel-arrows-position="bottom-left"] .carousel-btn-next{
	left: calc(var(--carousel-arrow-size) + var(--carousel-arrow-gap));
}
[data-component] > *:not(.container) > [data-widget="gsap-carousel"][data-carousel-arrows-position="bottom-left"] .carousel-btn-prev{
	left: var(--padding-container-inline);
}
[data-component] > *:not(.container) > [data-widget="gsap-carousel"][data-carousel-arrows-position="bottom-left"] .carousel-btn-next{
	left: calc(var(--carousel-arrow-size) + var(--carousel-arrow-gap) + var(--padding-container-inline));
}

/* [Case: Arrows Bottom Right] */
[data-carousel-arrows-position="bottom-right"] .carousel-btn-prev{
	left: auto;
	right: calc(var(--carousel-arrow-size) + var(--carousel-arrow-gap));
}
[data-carousel-arrows-position="bottom-right"] .carousel-btn-next{
	right: 0;
}
[data-component] > *:not(.container) > [data-widget="gsap-carousel"][data-carousel-arrows-position="bottom-right"] .carousel-btn-prev{
	left: auto;
	right: calc(var(--carousel-arrow-size) + var(--carousel-arrow-gap) + var(--padding-container-inline));
}
[data-component] > *:not(.container) > [data-widget="gsap-carousel"][data-carousel-arrows-position="bottom-right"] .carousel-btn-next{
	right: var(--padding-container-inline);
}

/* Arrows Padding Compensation */
@media(min-width: 1025px){
	[data-carousel-arrows-position="top"]:not(.insufficient-slides) .carousel-wrapper{
		padding-top: calc(var(--carousel-arrow-size) + var(--gutter));
	}
	[data-carousel-arrows-position="bottom"]:not(.insufficient-slides) .carousel-wrapper,
	[data-carousel-arrows-position="bottom-left"]:not(.insufficient-slides) .carousel-wrapper,
	[data-carousel-arrows-position="bottom-right"]:not(.insufficient-slides) .carousel-wrapper{
		padding-bottom: calc(var(--carousel-arrow-size) + var(--gap-global) / 2);
	}
}

/* Hide arrows on mobile/tablet */
@media(max-width: 1024px){
	[data-widget="gsap-carousel"] .carousel-btn{
		display: none;
	}
	/* Disable GPU pre-compositing on iOS — will-change:transform causes iOS Safari to render
	   the wrapper layer at an incorrect scale, making all slide content (text + images) appear zoomed */
	[data-widget="gsap-carousel"] .carousel-wrapper{
		will-change: auto;
	}
}

/**********************************************************************************************************/
/* Pagination (Dots) **************************************************************************************/
/**********************************************************************************************************/
[data-widget="gsap-carousel"] .carousel-pagination{
	width: 100%;
	display: flex;
	justify-content: center;
	gap: var(--gap-200);
}
[data-widget="gsap-carousel"] .carousel-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background-color: var(--color-accent, #000000);
	background-color: var(--color-white, #FFFFFF);
	opacity: 0.20;
	cursor: pointer;
	transition: var(--trans);
	transform: scale(0.8);
	flex-shrink: 0;
	padding: 0;
}
[data-widget="gsap-carousel"] .carousel-dot.is-active{
	opacity: 1;
	transform: scale(1);
}

/* Pagination: Dynamic bullets */
[data-widget="gsap-carousel"] .carousel-pagination.is-dynamic{
	width: auto;
	overflow: hidden;
	justify-content: flex-start;
	align-self: center;
	padding-inline: 0 !important;
}
[data-widget="gsap-carousel"] .carousel-pagination-bullets{
	display: flex;
	align-items: center;
	gap: var(--gap-200);
	transition: transform 0.3s ease;
}
/* Default: all dynamic dots are hidden */
[data-widget="gsap-carousel"] .carousel-pagination.is-dynamic .carousel-dot{
	transform: scale(0.5);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Active: full size */
[data-widget="gsap-carousel"] .carousel-pagination.is-dynamic .carousel-dot.is-active{
	transform: scale(1);
	opacity: 1;
}
/* Distance 1: slightly smaller */
[data-widget="gsap-carousel"] .carousel-pagination.is-dynamic .carousel-dot.is-near-1{
	transform: scale(0.85);
	opacity: 0.6;
}
/* Distance 2: smallest visible */
[data-widget="gsap-carousel"] .carousel-pagination.is-dynamic .carousel-dot.is-near-2{
	transform: scale(0.7);
	opacity: 0.35;
}
/* Distance 3: for window=7 */
[data-widget="gsap-carousel"] .carousel-pagination.is-dynamic .carousel-dot.is-near-3{
	transform: scale(0.55);
	opacity: 0.2;
}

/* Pagination: hidden by default on each breakpoint, shown by its attribute */
@media(min-width: 1025px){
	[data-widget="gsap-carousel"] .carousel-pagination{display: none;}
	[data-widget="gsap-carousel"][data-carousel-pagination-desktop]:not([data-carousel-pagination-desktop="false"]) .carousel-pagination{display: flex;}
}
@media(max-width: 1024px){
	[data-widget="gsap-carousel"][data-carousel-pagination]:not([data-carousel-pagination="false"]) .carousel-pagination{
		display: flex;
		padding-inline: var(--padding-container-inline);
	}
}

/* [Pagination: Inner — overlaid inside the slide area at the bottom edge] */
@media(min-width: 1025px){
	[data-carousel-pagination-position="inner"] .carousel-pagination{
		position: absolute;
		bottom: var(--gap-500);
		left: 0;
		right: 0;
		z-index: 5;
		padding-inline: 0;
		pointer-events: none;
	}
	[data-carousel-pagination-position="inner"] .carousel-dot{
		pointer-events: auto;
		background-color: var(--color-white);
	}
}
@media(min-width: 1025px){
	[data-carousel-pagination-position="inner"] .carousel-pagination{
		bottom: var(--gap-600);
	}
}

/**********************************************************************************************************/
/* Indicator (1 / 10) *************************************************************************************/
/**********************************************************************************************************/
[data-widget="gsap-carousel"] .carousel-indicator-group{
	display: flex;
	align-items: center;
	gap: var(--gutter);
	padding-top: var(--gap-500);
}
[data-widget="gsap-carousel"] .carousel-indicator{
	min-width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-300);
	font-family: var(--ff-heading);
}

/**********************************************************************************************************/
/* Progress Bar *******************************************************************************************/
/**********************************************************************************************************/
[data-widget="gsap-carousel"] .carousel-progress{
	width: 100%;
	height: 3px;
	background: var(--color-black-10);
	border-radius: 2px;
	overflow: hidden;
	margin-top: var(--gap-500);
}
[data-widget="gsap-carousel"] .carousel-progress-bar{
	height: 100%;
	background: var(--color-primary);
	border-radius: 2px;
	width: 0%;
	transition: width 0.3s ease;
}

/**********************************************************************************************************/
/* Insufficient Slides ************************************************************************************/
/**********************************************************************************************************/
[data-widget="gsap-carousel"].insufficient-slides .carousel-btn{
	display: none !important;
}
[data-widget="gsap-carousel"].insufficient-slides .carousel-wrapper{
	cursor: default;
}
[data-widget="gsap-carousel"].insufficient-slides .carousel-pagination,
[data-widget="gsap-carousel"].insufficient-slides .carousel-progress{
	display: none !important;
}


/**********************************************************************************************************/
/* Fan mode [data-carousel-type="fan"] ********************************************************************/
/*                                                                                                        */
/* Slides are absolutely stacked and individually rotated by JS.                                          */
/* The root element must be overflow:visible so fanned cards can extend beyond the wrapper.               */
/* Clipping is delegated to the nearest [data-component] ancestor.                                        */
/**********************************************************************************************************/
[data-widget="gsap-carousel"][data-carousel-type="fan"]{
	overflow: visible;
}
/* Clip rotated cards at the component boundary */
[data-component]:has([data-widget="gsap-carousel"][data-carousel-type="fan"]){
	overflow: hidden;
}
[data-widget="gsap-carousel"][data-carousel-type="fan"] .carousel-wrapper{
	/* JS sets: position:relative; height; display:block — overriding flex */
	overflow: visible;
	cursor: grab;
}
[data-widget="gsap-carousel"][data-carousel-type="fan"] .carousel-wrapper.is-dragging{
	cursor: grabbing;
}
/* Non-active slides hint they are clickable */
[data-widget="gsap-carousel"][data-carousel-type="fan"] .slide{
	cursor: pointer;
}
[data-widget="gsap-carousel"][data-carousel-type="fan"] .slide.slide-active{
	cursor: default;
}
/* Disable links/buttons inside non-active slides so clicks reach the slide's
   goTo() listener instead of navigating to the href */
[data-widget="gsap-carousel"][data-carousel-type="fan"] .slide:not(.slide-active) a,
[data-widget="gsap-carousel"][data-carousel-type="fan"] .slide:not(.slide-active) button{
	pointer-events: none;
}

/**********************************************************************************************************/
/* Fade effect [data-carousel-effect="fade"] **************************************************************/
/*                                                                                                        */
/* Slides are absolutely stacked; JS crossfades between them via opacity.                                 */
/* No x-translation — wrapper height is set by JS to match the tallest slide.                             */
/**********************************************************************************************************/
[data-widget="gsap-carousel"][data-carousel-effect="fade"] .carousel-wrapper{
	/* JS sets: position:relative; height — slides are absolute children */
	width: 100%;
	cursor: default;
}