/* Image Accordion Widget Enhancements */

/* Phase 2: Layout & Positioning */
/* Title wrapper - top-left with flexbox and arrow */
.uc_image_accodion .ue_title-wrapper {
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	/* Text left, Icon right */
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	padding: 20px;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Arrow icon styling - prevent B&W filter inheritance */
.uc_image_accodion .ue_arrow_icon {
	display: inline-block;
	object-fit: contain;
	transition: transform 400ms ease;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
	/* margin-left handled by Elementor control */
}

/* Force title wrapper to not inherit grayscale */
.uc_image_accodion_holder:not(.uc_hover):not(:hover) .ue_title-wrapper {
	filter: grayscale(0%) !important;
}

/* Title text alignment */
.uc_image_accodion .ue_title-wrapper .ue_title {
	text-align: left !important;
	flex: 1;
}

/* Subtitle at bottom-left */
.uc_image_accodion .ue_subtitle {
	position: absolute !important;
	bottom: 0;
	left: 0;
	width: 100% !important;
	/* Full width to allow left alignment */
	z-index: 2;
	padding: 20px;
	margin: 0 !important;
	text-align: left !important;

	/* Hide by default */
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 400ms ease;
}

/* Show subtitle ONLY on active (removed hover) */
.uc_image_accodion .uc_image_accodion_holder.uc_hover .ue_subtitle {
	opacity: 1;
	visibility: visible;
}

/* Overlay inner layout */
.uc_image_accodion .uc_overlay_inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
}

/* Background Image styling - NEW */
.uc_image_accodion .uc_bg_image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	z-index: 0;
	transition: transform 400ms ease;
}

/* Phase 3: Visual Effects - B&W Filter */
/* Apply grayscale to the background image only, not the entire holder */
.uc_image_accodion_holder:not(.uc_hover):not(:hover) .uc_bg_image {
	filter: grayscale(100%) !important;
}

.uc_image_accodion_holder.uc_hover .uc_bg_image,
.uc_image_accodion_holder:hover .uc_bg_image {
	filter: grayscale(0%) !important;
}

/* Gradient overlay */
.uc_gradient_overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	pointer-events: none;
	z-index: 0;
	transition: opacity 400ms ease;
	opacity: 0;
	/* Hide by default */
}

/* Show gradient on hover and active */
.uc_image_accodion_holder:hover .uc_gradient_overlay,
.uc_image_accodion_holder.uc_hover .uc_gradient_overlay {
	opacity: 1;
}

/* Phase 4: Arrow Rotation & States */
/* Arrow rotation - closed (0deg), hover (-90deg), active (-180deg) */
.uc_image_accodion .ue_arrow_icon {
	transform: rotate(0deg);
}

.uc_image_accodion .uc_image_accodion_holder:hover .ue_arrow_icon {
	transform: rotate(-90deg);
}

.uc_image_accodion .uc_image_accodion_holder.uc_hover .ue_arrow_icon {
	transform: rotate(-180deg);
}

/* Ensure content doesn't overlap with positioned elements */
.uc_image_accodion .ue-content {
	position: relative;
	z-index: 1;
	padding: 60px 20px;
	/* Space for title and subtitle */
}

/* Override default title visibility - always show */
.uc_image_accodion .uc_content .uc_overlay .ue_title-wrapper {
	visibility: visible !important;
	opacity: 1 !important;
}

.uc_image_accodion .uc_content .uc_image_accodion_holder.uc_hover .ue_title-wrapper {
	visibility: visible !important;
	opacity: 1 !important;
}