/* Custom Elementor Addons - Flip Hover Box */

.cea-fhb {
	display: block;
	width: 100%;
	text-decoration: none;
}

/* Media (image) area: holds the hover swap. Title lives OUTSIDE this box. */
.cea-fhb-media {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	overflow: hidden;
}

.cea-fhb-image-primary,
.cea-fhb-image-secondary {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition-property: opacity, transform;
	transition-timing-function: ease;
	transition-duration: 0.4s;
}

/* Primary image defines the height of the media box. */
.cea-fhb-media--has-hover .cea-fhb-image-primary {
	position: relative;
	z-index: 1;
}

/* Secondary image is overlaid exactly on top of the primary one. */
.cea-fhb-media--has-hover .cea-fhb-image-secondary {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

/* Single image (no hover) still fills the media box. */
.cea-fhb-media:not(.cea-fhb-media--has-hover) .cea-fhb-image-primary {
	position: relative;
}

/* Title: always visible, fixed below the image, no background. */
.cea-fhb-title {
	margin: 15px 0 0;
	display: block;
	line-height: normal;
	background: none;
	transition: color 0.3s ease;
}

/* ============================================================
 * Hover animations
 * Default state: primary visible, secondary hidden.
 * Hover state: primary hidden, secondary shown (animated).
 * ============================================================ */

/* ---- FADE (default) ---- */
.cea-fhb-media--has-hover .cea-fhb-image-secondary {
	opacity: 0;
}
.cea-fhb:hover .cea-fhb-media--has-hover .cea-fhb-image-primary {
	opacity: 0;
}
.cea-fhb:hover .cea-fhb-media--has-hover .cea-fhb-image-secondary {
	opacity: 1;
}

/* ---- ZOOM ---- */
.cea-fhb--anim-zoom .cea-fhb-image-secondary {
	transform: scale(1.2);
	opacity: 0;
}
.cea-fhb--anim-zoom:hover .cea-fhb-image-primary {
	transform: scale(1.2);
	opacity: 0;
}
.cea-fhb--anim-zoom:hover .cea-fhb-image-secondary {
	transform: scale(1);
	opacity: 1;
}

/* ---- SLIDE UP ---- */
.cea-fhb--anim-slide_up .cea-fhb-image-secondary {
	transform: translateY(100%);
	opacity: 1;
}
.cea-fhb--anim-slide_up:hover .cea-fhb-image-primary {
	transform: translateY(-100%);
}
.cea-fhb--anim-slide_up:hover .cea-fhb-image-secondary {
	transform: translateY(0);
}

/* ---- SLIDE DOWN ---- */
.cea-fhb--anim-slide_down .cea-fhb-image-secondary {
	transform: translateY(-100%);
	opacity: 1;
}
.cea-fhb--anim-slide_down:hover .cea-fhb-image-primary {
	transform: translateY(100%);
}
.cea-fhb--anim-slide_down:hover .cea-fhb-image-secondary {
	transform: translateY(0);
}

/* ---- SLIDE LEFT ---- */
.cea-fhb--anim-slide_left .cea-fhb-image-secondary {
	transform: translateX(100%);
	opacity: 1;
}
.cea-fhb--anim-slide_left:hover .cea-fhb-image-primary {
	transform: translateX(-100%);
}
.cea-fhb--anim-slide_left:hover .cea-fhb-image-secondary {
	transform: translateX(0);
}

/* ---- SLIDE RIGHT ---- */
.cea-fhb--anim-slide_right .cea-fhb-image-secondary {
	transform: translateX(-100%);
	opacity: 1;
}
.cea-fhb--anim-slide_right:hover .cea-fhb-image-primary {
	transform: translateX(100%);
}
.cea-fhb--anim-slide_right:hover .cea-fhb-image-secondary {
	transform: translateX(0);
}

/* Editor preview: keep a sane min height. */
.elementor-editor-active .cea-fhb-media {
	min-height: 150px;
}