/**
 * Keystone Theme — Two Paths component
 *
 * Two-card wayfinding section presenting the two ways to work with
 * Movaros (build on the platform vs. fulfilment partner). Dark navy
 * section, white cards floating on top — reads as a navigational
 * picker rather than a pitch.
 *
 * BEM: .keystone-two-paths
 *        __inner  __label  __grid
 *        .keystone-two-paths-card  __heading  __lead  __body  __cta
 */

.keystone-two-paths {
	width: 100vw !important;
	max-width: none !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #0a1220 0%, #121e29 100%);
	padding-block: clamp(3rem, 6vw, 5rem);
	margin-block: 0;
}

.keystone-two-paths__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, clamp(20px, 4vw, 50px));
}

.keystone-two-paths__label {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.keystone-two-paths__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
}

.keystone-two-paths-card {
	background: #fff;
	border: 1px solid #e4e8ee;
	border-radius: var(--keystone-card-radius, 14px);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: var(--keystone-card-shadow);
	transition: var(--keystone-card-shadow-transition), border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.keystone-two-paths-card:hover {
	border-color: #d5dae2;
	box-shadow: var(--keystone-card-shadow-hover);
}

.keystone-two-paths-card__heading {
	font-size: clamp(1.15rem, 2vw, 1.375rem);
	font-weight: 800;
	color: #121e29;
	margin: 0 0 0.625rem;
	line-height: 1.25;
}

.keystone-two-paths-card__lead {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #121e29;
	margin: 0 0 1rem;
	line-height: 1.4;
}

.keystone-two-paths-card__body {
	font-size: 0.9375rem;
	color: #5a6b79;
	line-height: 1.65;
	margin: 0 0 0.875rem;
}

.keystone-two-paths-card__body:last-of-type {
	margin-bottom: 1.5rem;
}

.keystone-two-paths-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 0.875rem 1.75rem;
	border-radius: 999px;
	background: #121e29;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.keystone-two-paths-card__cta:hover {
	background: #263849;
	animation: keystone-button-jiggle 0.4s ease;
}

/* Accent variant — brand orange */
.keystone-two-paths-card__cta--accent {
	background: #ff3b09;
}

.keystone-two-paths-card__cta--accent:hover {
	background: #cc2d00;
}

@media (max-width: 780px) {
	.keystone-two-paths__grid {
		grid-template-columns: 1fr;
	}
}