/* ==========================================================================
   Service cards – shared layout & hover animation
   ========================================================================== */

.service-card-1,
.service-card-2,
.service-card-regular {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	--card-transition-fast: 0.18s ease-out;
}

/* Card 1 – dark bg + angled image */
.service-card-1 {
	border-radius: 8px;
	background: #333333;
	padding: 1.25rem;
	min-height: 320px;
	transition: var(--transition);
}

.service-card-1::before {
	content: "";
	position: absolute;
	right: -1.25rem;
	top: -1.25rem;
	height: calc(100% + 2.5rem);
	width: auto;
	background-size: auto 100%;
	background-position: right center;
	background-image: url("https://fuse.club/wp-content/uploads/2025/11/teamphoto1.jpg");
	background-repeat: no-repeat;
	clip-path: polygon(85% 0, 100% 0, 100% 100%, 40% 100%);
	transition: var(--transition);
}

/* Card 2 – dark bg + angled image */
.service-card-2 {
	border-radius: 8px;
	background: #333333;
	padding: 1.25rem;
	min-height: 320px;
	transition: var(--transition);
}

.service-card-2::before {
	content: "";
	position: absolute;
	right: -1.25rem;
	top: -1.25rem;
	height: calc(100% + 2.5rem);
	width: auto;
	background-size: auto 100%;
	background-position: right center;
	background-image: url("https://fuse.club/wp-content/uploads/2025/11/teamphoto2-scaled.jpg");
	background-repeat: no-repeat;
	clip-path: polygon(85% 0, 100% 0, 100% 100%, 40% 100%);
	transition: var(--transition);
}

/* Icon / text / button – desktop hover animation */
.service-card-1 .svg-icon-service-cards,
.service-card-2 .svg-icon-service-cards,
.service-card-regular .svg-icon-service-cards {
	opacity: 1;
	pointer-events: auto;
	align-self: flex-start;
	margin-bottom: 1rem;
	max-height: 70px;
	overflow: hidden;
	transition:
		opacity var(--card-transition-fast),
		max-height var(--card-transition-fast),
		margin-bottom var(--card-transition-fast);
}

.service-card-1 .service-cards-text,
.service-card-2 .service-cards-text,
.service-card-regular .service-cards-text {
	margin-top: auto;
	transition: margin-top var(--card-transition-fast);
}

.service-card-1 .button-service-cards,
.service-card-2 .button-service-cards,
.service-card-regular .button-service-cards {
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	max-height: 0;
	overflow: hidden;
	margin-top: 0;
	transition:
		opacity var(--card-transition-fast),
		transform var(--card-transition-fast),
		max-height var(--card-transition-fast),
		margin-top var(--card-transition-fast);
}

@media (min-width: 993px) {
	.service-card-1:hover .svg-icon-service-cards,
	.service-card-2:hover .svg-icon-service-cards,
	.service-card-regular:hover .svg-icon-service-cards {
		opacity: 0;
		max-height: 0;
		margin-bottom: 0;
	}

	.service-card-1:hover .service-cards-text,
	.service-card-2:hover .service-cards-text,
	.service-card-regular:hover .service-cards-text {
		margin-top: 0;
	}

	.service-card-1:hover .button-service-cards,
	.service-card-2:hover .button-service-cards,
	.service-card-regular:hover .button-service-cards {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		max-height: 60px;
		margin-top: auto;
	}
}

.service-card-1 .svg-icon-1 .elementor-icon,
.service-card-2 .svg-icon-2 .elementor-icon {
	color: var(--color-accent);
}

.service-card-1 h2.elementor-heading-title,
.service-card-2 h2.elementor-heading-title {
	display: block;
	line-height: 1.3;
	font-weight: 500;
	font-size: 1.5rem;
	font-family: var(--font-family-secondary);
	color: #ffffff;
	margin: 0;
}

@media (max-width: 992px) {
	.service-card-1 h2.elementor-heading-title,
	.service-card-2 h2.elementor-heading-title {
		font-size: 1.25rem;
	}
}

.service-card-1 p,
.service-card-2 p {
	margin: 2px 0 1rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
}

/* Mobile – no animation, light background */
@media (max-width: 992px) {
	.service-card-1,
	.service-card-2 {
		min-height: initial;
		background: #F6F6F6;
	}

	.service-card-1::before,
	.service-card-2::before {
		display: none;
	}

	.service-card-1 svg path,
	.service-card-2 svg path {
		fill: #E30B2E !important;
		stroke: #E30B2E !important;
	}

	.service-card-1 .svg-icon-service-cards,
	.service-card-2 .svg-icon-service-cards,
	.service-card-regular .svg-icon-service-cards {
		opacity: 1;
		max-height: none;
		margin-bottom: 0;
		pointer-events: auto;
		transition: none;
	}

	.service-card-1 .service-cards-text,
	.service-card-2 .service-cards-text,
	.service-card-regular .service-cards-text {
		margin-top: 0;
		transition: none;
	}

	.service-card-1 .button-service-cards,
	.service-card-2 .button-service-cards,
	.service-card-regular .button-service-cards {
		opacity: 1;
		pointer-events: auto;
		transform: none;
		max-height: none;
		margin-top: 1rem;
		transition: none;
	}

	.service-card-1:hover .svg-icon-service-cards,
	.service-card-1:hover .service-cards-text,
	.service-card-1:hover .button-service-cards,
	.service-card-2:hover .svg-icon-service-cards,
	.service-card-2:hover .service-cards-text,
	.service-card-2:hover .button-service-cards,
	.service-card-regular:hover .svg-icon-service-cards,
	.service-card-regular:hover .service-cards-text,
	.service-card-regular:hover .button-service-cards {
		opacity: 1;
		max-height: none;
		margin-top: 0;
		transform: none;
	}

	.service-cards-text h2.elementor-heading-title {
		color: #000000 !important;
	}

	.service-card-1 p,
	.service-card-2 p {
		color: rgba(0, 0, 0, 0.7);
	}
}