/**
 * Case study — What We Deployed
 */

.se-cs-deployed {
	padding-block: var(--section-pad-industry, 120px);
	background: var(--color-surface);
	overflow-x: clip;
	max-width: 100%;
	border-top: 1px solid var(--color-line);
}

.se-cs-deployed__head {
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: 20px;
}

.se-cs-deployed__head .section-lede {
	margin-inline: auto;
	max-width: 700px;
	font-weight: 500;
}

.se-cs-deployed__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.se-cs-deployed__slider {
	width: 100%;
}

.se-cs-deployed__viewport {
	width: 100%;
}

.se-cs-deployed__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 1.25rem 0 0;
	min-height: 10px;
}

.se-cs-deployed__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(107, 98, 172, 0.25);
	cursor: pointer;
	transition: background 0.25s, transform 0.25s;
}

.se-cs-deployed__dot.is-active {
	background: var(--color-primary);
	transform: scale(1.3);
}

.se-cs-deployed__dot:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.se-cs-deployed__card {
	background: var(--color-surface-soft);
	border-radius: 20px;
	border: 1px solid var(--color-line);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 24px rgba(15, 15, 37, 0.02);
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
	transform-style: preserve-3d;
}

.se-cs-deployed__card:hover {
	border-color: rgba(107, 98, 172, 0.4);
}

.se-cs-deployed__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.se-cs-deployed__icon .icon {
	width: 24px;
	height: 24px;
}

.se-cs-deployed__card-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--color-ink);
	margin: 0 0 0.75rem;
	line-height: 1.3;
}

.se-cs-deployed__card-text {
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 992px) {
	.se-cs-deployed:not(.is-slider-active) .se-cs-deployed__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.se-cs-deployed.is-slider-active .se-cs-deployed__viewport {
		overflow: hidden;
		touch-action: pan-y;
	}

	.se-cs-deployed.is-slider-active .se-cs-deployed__grid {
		display: flex;
		align-items: stretch;
		gap: 1.25rem;
		will-change: transform;
	}

	.se-cs-deployed.is-slider-active .se-cs-deployed__card {
		flex: 0 0 100%;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.se-cs-deployed.is-slider-active .se-cs-deployed__dots {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.se-cs-deployed.is-slider-active .se-cs-deployed__grid {
		transition: none !important;
	}
}