/* ==========================================================================
   CSS 3D Hover Card — Front-end Styles
   Faithfully adapted from the original css-3d-hover demo.
   All colour / sizing overrides are applied via Elementor inline CSS
   ({{WRAPPER}} selectors) so these are sensible defaults only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper — sets the perspective stage
   -------------------------------------------------------------------------- */
.css3dhc-wrapper {
	position: relative;
	width: 300px;
	height: 500px;
	perspective: none;
	/* Centre the card inside whatever Elementor container it lives in */
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Card — the 3-D element
   -------------------------------------------------------------------------- */
.css3dhc-card {
	position: absolute;
	top: 0%;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	perspective: 900px;
	transform: rotateX(60deg) scale(0.7);
	transition: .5s all ease;
	box-shadow: 0px 20px 50px #555;
	overflow: hidden;
	cursor: pointer;
}

/* Hover state — card stands up straight */
.css3dhc-card:hover {
	transform: rotate(0deg) scale(1) translateY(10px);
	z-index: 10;
}

/* --------------------------------------------------------------------------
   Entry animation
   -------------------------------------------------------------------------- */
.css3dhc-card.css3dhc-animate {
	animation: css3dhc-entry 1s linear 1;
}

@keyframes css3dhc-entry {
	0% {
		top: -20%;
		opacity: 0.1;
	}
	100% {
		top: 0%;
	}
}

/* --------------------------------------------------------------------------
   Link overlay — makes the whole card clickable without wrapping everything
   -------------------------------------------------------------------------- */
.css3dhc-link-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: block;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Image panel — top portion of the card
   -------------------------------------------------------------------------- */
.css3dhc-image-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45%;                 /* overridden by Elementor slider */
	overflow: hidden;
	/* Default gradient — overridden by Elementor background group */
	background: linear-gradient(to bottom, #eba65b 30%, #d99267 100%);
}

.css3dhc-image-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.css3dhc-image-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   Story / text panel — bottom portion of the card
   -------------------------------------------------------------------------- */
.css3dhc-story {
	position: absolute;
	top: 45%;                    /* overridden by Elementor image panel height slider */
	bottom: 0;                   /* always fills to card bottom — no calc() needed */
	left: 0;
	width: 100%;
	/* height intentionally omitted: bottom:0 handles it */
	z-index: 5;
	display: flex;
	align-items: flex-start;
	overflow: hidden;            /* clip content to panel, never push outside card */
	/* Default gradient — overridden by Elementor background group */
	background: linear-gradient(to bottom, #eba65b 0%, #d99267 40%);
}

.css3dhc-story-inner {
	width: 100%;
	padding: 10% 20px 20px;      /* overridden by Elementor dimensions */
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */
.css3dhc-title {
	margin: 0 0 8px;
	text-align: center;
	letter-spacing: 2px;
	color: #eeeeee;
	text-shadow: 0 0 10px rgba(238, 238, 238, 0.8);
	/* Typography overridden by Elementor group control */
}

/* --------------------------------------------------------------------------
   Description
   -------------------------------------------------------------------------- */
.css3dhc-description {
	margin: 0;
	font-size: 14px;
	color: #ffffff;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 1px;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Elementor editor — disable the resting tilt so the card is fully visible
   while editing, then restore it on the front end.
   -------------------------------------------------------------------------- */
.elementor-editor-active .css3dhc-card {
	transform: rotateX(0deg) scale(1);
	animation: none;
}