/* Software Development page patterns. Tokens only. */

.xa-sdsk__card {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(36px, 5vw, 80px);
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 40px;
	border: 1.5px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	background-image:
		linear-gradient(var(--wp--preset--color--surface-2) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--surface-2) 1px, transparent 1px);
	background-size: 32px 32px;
}

.xa-sdsk__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 36px;
	align-items: center;
}

.xa-sdsk__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.xa-sdsk__title {
	margin: 0;
	font-size: clamp(44px, 6vw, 96px);
	letter-spacing: -0.055em;
	line-height: 0.9;
}

.xa-sdsk__lede {
	max-width: 460px;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}

/* Hand-drawn sketch: connectors are a background SVG, boxes are text. */
.xa-sdsk__draw {
	position: relative;
	justify-self: center;
	width: min(100%, 420px);
	height: 300px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg stroke='%2312201A' stroke-width='2.5' fill='none' stroke-dasharray='6 5'%3E%3Cpath d='M95 72 Q 120 105 150 128'/%3E%3Cpath d='M320 66 Q 300 100 280 124'/%3E%3Cpath d='M100 238 Q 125 210 150 186'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	font-family: var(--wp--preset--font-family--hand);
	color: var(--wp--preset--color--ink);
}

.xa-sdsk__box {
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 14px 20px;
	border: 2.5px solid var(--wp--preset--color--ink);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	font-size: 26px;
	line-height: 1;
	white-space: nowrap;
}

.xa-sdsk__box.is-a {
	left: 4%;
	top: 8%;
	transform: rotate(-3deg);
}

.xa-sdsk__box.is-b {
	right: 6%;
	top: 4%;
	transform: rotate(2deg);
}

.xa-sdsk__box.is-hub {
	left: 30%;
	top: 36%;
	padding: 18px 24px;
	border: 3px solid var(--wp--preset--color--accent);
	border-radius: 20px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	font-size: 32px;
	transform: rotate(-1deg);
}

.xa-sdsk__box.is-c {
	left: 8%;
	bottom: 6%;
	transform: rotate(3deg);
}

.xa-sdsk__box.is-note {
	right: 2%;
	bottom: 0;
	padding: 12px 18px;
	border: 2.5px dashed var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral-text);
	font-size: 24px;
	transform: rotate(-4deg);
}

@media (max-width: 420px) {
	.xa-sdsk__box {
		padding: 10px 14px;
		font-size: 20px;
	}

	.xa-sdsk__box.is-hub {
		left: 22%;
		font-size: 24px;
	}
}