.spitch-content-card {
	--spitch-card-background: #fffefd;
	--spitch-card-accent: #fd4b55;
	--spitch-card-media-width: 45%;
	--spitch-card-min-height: 420px;
	--spitch-card-triangle-width: clamp(120px, 11vw, 150px);
	--spitch-card-triangle-overlap: calc(var(--spitch-card-triangle-width) * 0.45);
	--spitch-card-column-gap: 100px;
	position: relative;
}

.spitch-content-card.e-con-full,
.spitch-content-card.e-con-boxed {
	position: relative;
	min-height: var(--spitch-card-min-height);
	background: var(--spitch-card-background);
	border-radius: 16px;
	box-shadow: 0 10px 20px rgba(25, 23, 65, 0.07);
	overflow: hidden;
}

.spitch-content-card.e-con-boxed > .e-con-inner {
	position: static;
	width: min(100%, var(--content-width, 100%));
	max-width: var(--content-width, 100%);
}

/*
 * Do not set align-items, justify-content, gap or block padding here.
 * Elementor's standard container controls remain authoritative.
 */
.spitch-content-card.e-con-full,
.spitch-content-card.e-con-boxed > .e-con-inner {
	flex-direction: row;
}

.spitch-content-card.e-con-full > .elementor-element,
.spitch-content-card.e-con-boxed > .e-con-inner > .elementor-element {
	min-width: 0;
}

/* Case Study Look: first child is content, second child is media. */
.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child {
	flex: 0 0 calc(100% - var(--spitch-card-media-width));
	width: calc(100% - var(--spitch-card-media-width));
	max-width: calc(100% - var(--spitch-card-media-width));
	align-self: stretch;
	z-index: 2;
}

/* Keep the logo in normal flow and center all widgets that follow it. */
.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child > .elementor-widget-image:first-child,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child > .elementor-widget-image:first-child {
	flex: 0 0 auto;
}

.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child > .elementor-widget-image:first-child + .elementor-element,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child > .elementor-widget-image:first-child + .elementor-element {
	margin-block-start: auto;
}

.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child > .elementor-element:last-child:not(.elementor-widget-image),
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child > .elementor-element:last-child:not(.elementor-widget-image) {
	margin-block-end: auto;
}

.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: var(--spitch-card-media-width);
	max-width: var(--spitch-card-media-width);
	height: 100%;
	padding: 0;
	min-height: var(--spitch-card-min-height);
	border-radius: 0;
	overflow: hidden;
	z-index: 1;
}

/* Exact Case Study overlay: white broken edge and its red triangle. */
.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child::before,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: url('/wp-content/uploads/2025/02/cs-triangle-shape.svg') no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 2;
}

/* Exact Case Study image mask. */
.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child img,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child img {
	display: block;
	position: absolute;
	inset: -2px -2px -2px 0;
	width: calc(100% + 2px);
	height: calc(100% + 4px);
	max-width: none;
	object-fit: cover;
	-webkit-clip-path: polygon(12.2% 0, 100% 0, 100% 100%, 65.1% 100%, 0 33.5%);
	clip-path: polygon(12.2% 0, 100% 0, 100% 100%, 65.1% 100%, 0 33.5%);
}

/* Triangled: first child is media, second child is content. */
.spitch-content-card--industrial-news.e-con-full > .elementor-element:first-child,
.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element:first-child {
	position: relative;
	flex: 0 0 calc(var(--spitch-card-media-width) + 4px);
	width: calc(var(--spitch-card-media-width) + 4px);
	max-width: calc(var(--spitch-card-media-width) + 4px);
	/* !important prevents Elementor's e-con from overriding and clipping the triangle tip */
	overflow: visible !important;
	z-index: 3;
	-webkit-clip-path: polygon(-2% 0, 98% 50%, 0 98%);
	clip-path: polygon(-2% 0, 98% 50%, 0 98%);
	border-radius: 16px;
}

.spitch-content-card--industrial-news.e-con-full > .elementor-element:last-child,
.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element:last-child {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	/* Gap measured from the right edge of the decorative triangles, not from the media edge. */
	padding-inline-start: max(
		var(--padding-inline-start, 0px),
		calc(var(--spitch-card-column-gap) + var(--spitch-card-triangle-width) - var(--spitch-card-triangle-overlap))
	);
	z-index: 2;
}

/* The image point enters the gap between the decorative outlines. */
.spitch-content-card--industrial-news.e-con-full::after,
.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner::after {
	content: "";
	position: absolute;
	left: calc(var(--spitch-card-media-width) - var(--spitch-card-triangle-overlap));
	top: 50%;
	width: var(--spitch-card-triangle-width);
	height: calc(var(--spitch-card-triangle-width) * 2.5);
	background: var(--spitch-card-accent);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 4;
}

.spitch-content-card--industrial-news.spitch-content-card--triangles-1.e-con-full::after,
.spitch-content-card--industrial-news.spitch-content-card--triangles-1.e-con-boxed > .e-con-inner::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cpath d='M117 83 3 150l114 67V83Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cpath d='M117 83 3 150l114 67V83Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.spitch-content-card--industrial-news.spitch-content-card--triangles-2.e-con-full::after,
.spitch-content-card--industrial-news.spitch-content-card--triangles-2.e-con-boxed > .e-con-inner::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cpath d='M117 3 3 70l114 67V3Z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M117 163 3 230l114 67V163Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cpath d='M117 3 3 70l114 67V3Z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M117 163 3 230l114 67V163Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.spitch-content-card--industrial-news.e-con-full > .elementor-element:first-child img,
.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element:first-child img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child .elementor-widget-image,
.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child .elementor-widget-image .elementor-widget-container,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child .elementor-widget-image,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child .elementor-widget-image .elementor-widget-container,
.spitch-content-card--industrial-news.e-con-full > .elementor-element:first-child .elementor-widget-image .elementor-widget-container,
.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element:first-child .elementor-widget-image .elementor-widget-container {
	height: 100%;
}

.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child .elementor-widget-image,
.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child .elementor-widget-image {
	position: absolute;
	inset: 0;
	width: 100%;
}

/* Grow the image widget to fill the flex column instead of using height:100%,
   which does not resolve when the flex item has no explicit height property. */
.spitch-content-card--industrial-news.e-con-full > .elementor-element:first-child .elementor-widget-image,
.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element:first-child .elementor-widget-image {
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * Standard Elementor Button rendered as the Case Study read-more link.
 * No icon needs to be selected in the widget.
 */
.spitch-content-card--customer-contact > .elementor-element:first-child .elementor-widget-button .elementor-button,
.spitch-content-card--customer-contact > .e-con-inner > .elementor-element:first-child .elementor-widget-button .elementor-button,
.spitch-content-card--industrial-news > .elementor-element:last-child .elementor-widget-button .elementor-button,
.spitch-content-card--industrial-news > .e-con-inner > .elementor-element:last-child .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none;
	color: var(--spitch-card-accent) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.2px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.spitch-content-card--customer-contact > .elementor-element:first-child .elementor-widget-button .elementor-button::before,
.spitch-content-card--customer-contact > .e-con-inner > .elementor-element:first-child .elementor-widget-button .elementor-button::before,
.spitch-content-card--industrial-news > .elementor-element:last-child .elementor-widget-button .elementor-button::before,
.spitch-content-card--industrial-news > .e-con-inner > .elementor-element:last-child .elementor-widget-button .elementor-button::before {
	content: "";
	display: block;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M17.1 9 9 0v2.25L14.85 9 9 15.75V18l8.1-9Z' fill='black'/%3E%3Cpath d='M2.7 8.1h12.6v1.8H.9l1.8-1.8Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M17.1 9 9 0v2.25L14.85 9 9 15.75V18l8.1-9Z' fill='black'/%3E%3Cpath d='M2.7 8.1h12.6v1.8H.9l1.8-1.8Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.spitch-content-card .elementor-widget-button .elementor-button-icon {
	display: none;
}

.spitch-content-card .elementor-widget-button .elementor-button:hover,
.spitch-content-card .elementor-widget-button .elementor-button:focus {
	background: transparent !important;
	color: var(--e-global-color-text, #191741) !important;
}

@media (max-width: 767px) {
	.spitch-content-card.e-con-full,
	.spitch-content-card.e-con-boxed > .e-con-inner {
		flex-direction: column;
	}

	.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child > .elementor-widget-image:first-child,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child > .elementor-widget-image:first-child,
	.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child > .elementor-widget-image:first-child + .elementor-element,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child > .elementor-widget-image:first-child + .elementor-element,
	.spitch-content-card--customer-contact.e-con-full > .elementor-element:first-child > .elementor-element:last-child,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:first-child > .elementor-element:last-child {
		margin-block-start: 0;
		margin-block-end: 0;
	}

	.spitch-content-card--customer-contact.e-con-full > .elementor-element,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element,
	.spitch-content-card--industrial-news.e-con-full > .elementor-element,
	.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}

	.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child,
	.spitch-content-card--industrial-news.e-con-full > .elementor-element:first-child,
	.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner > .elementor-element:first-child {
		position: relative;
		inset: auto;
		height: auto;
		min-height: 260px;
		clip-path: none;
	}

	.spitch-content-card--industrial-news.e-con-full::after,
	.spitch-content-card--industrial-news.e-con-boxed > .e-con-inner::after {
		display: none;
	}

	.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child::before,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child::before {
		display: none;
	}

	.spitch-content-card--customer-contact.e-con-full > .elementor-element:last-child img,
	.spitch-content-card--customer-contact.e-con-boxed > .e-con-inner > .elementor-element:last-child img {
		-webkit-mask-image: none;
		mask-image: none;
	}
}