.wm-caseslider {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.wm-caseslider-container {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.wm-caseslider-track {
	display: flex;
	transition-property: transform;
	transition-timing-function: ease;
}

/* The whole slide is the link to the case; the button inside is plain text. */
.wm-caseslider-slide {
	flex-shrink: 0;
	box-sizing: border-box;
	display: block;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* Elementor's kit underlines links with a more specific selector than a bare
   class, and a descendant cannot cancel a line its ancestor draws — so the
   decoration is killed on the anchor itself, in every state. The button's
   hover underline is a pseudo-element and is not affected. */
.wm-caseslider .wm-caseslider-slide,
.wm-caseslider .wm-caseslider-slide:hover,
.wm-caseslider .wm-caseslider-slide:focus,
.wm-caseslider .wm-caseslider-slide:visited,
.wm-caseslider .wm-caseslider-slide .wm-caseslider-title,
.wm-caseslider .wm-caseslider-slide .wm-caseslider-btn {
	text-decoration: none !important;
}

/* Card */
.wm-caseslider-card {
	position: relative;
	overflow: hidden;
	height: 640px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	border-radius: 16px;
	background-color: #1a1a1a;
	color: #fff;
}

/* The cover image lives on its own layer so hover can scale it without
   moving the card's padding, text or the decorative triangle. The card
   clips the overflow, so the zoom stays inside the rounded corners. */
.wm-caseslider-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform .5s ease;
}

.wm-caseslider-card:hover .wm-caseslider-bg,
.wm-caseslider-card:focus-within .wm-caseslider-bg {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.wm-caseslider-bg {
		transition-duration: .01ms;
	}
}

/* Optional darkening mask (off by default, driven by the Image Overlay control). */
.wm-caseslider-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: transparent;
}

/* Decorative bottom-left triangle (translucent).
   Browsers do not reliably clip backdrop-filter to a clip-path (the blur
   renders as a rectangle, ignoring the triangle), so instead of a real blur
   we use a translucent fill that reads as a frosted wedge. */
.wm-caseslider-triangle {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50%;
	pointer-events: none;
	z-index: 1;
	background: #ECECFA6E;
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.wm-caseslider-top,
.wm-caseslider-bottom {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.wm-caseslider-bottom {
	min-height: 50%;
	justify-content: space-between;
}

/* Keeps the button at the bottom when the title is hidden. */
.wm-caseslider-btn:only-child {
	margin-top: auto;
}

.wm-caseslider-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 48px;
	object-fit: contain;
}

.wm-caseslider-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	max-width: 100%;
	overflow-wrap: break-word;
}

.wm-caseslider-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	padding: 0;
	border: 0 solid transparent;
	border-radius: 0;
	background-color: transparent;
	color: #fff;
	font-size: 20px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition-property: color, background-color, border-color, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

/* The hover underline is a pseudo-element rather than text-decoration:
   text-decoration cannot be transitioned, and it would also be overridden
   by the typography control Elementor prints for the normal state. */
.wm-caseslider-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

/* Driven by the card, not the button: the underline appears whenever the
   card is hovered (or holds keyboard focus), including over the button itself. */
.wm-caseslider-card:hover .wm-caseslider-btn::after,
.wm-caseslider-card:focus-within .wm-caseslider-btn::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wm-caseslider-btn,
	.wm-caseslider-btn::after {
		transition-duration: 0.01ms;
	}
}

/* Nav — desktop: to the left of the slider, vertically centered */
.wm-caseslider-nav {
	order: -1;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.wm-caseslider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 50%;
	line-height: 1;
	font-size: 18px;
	transition: all 0.3s ease;
}

.wm-caseslider-arrow i {
	font-size: inherit;
}

.wm-caseslider-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.wm-caseslider-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Tablet + mobile — arrows below the slides, centered */
@media (max-width: 1024px) {
	.wm-caseslider {
		flex-direction: column;
		align-items: stretch;
	}

	.wm-caseslider-container {
		width: 100%;
	}

	.wm-caseslider-nav {
		order: 0;
		width: 100%;
		justify-content: center;
	}
}