/* Capabilities index (patterns/capabilities-overview.php). Values from the old app/capabilities/page.tsx and capability-index-tile.tsx. */
.sp-capabilities-overview.sp-capabilities-overview {
	margin-top: 20px;
}
.sp-capabilities-overview {
	padding-block: 88px 56px;
	background: var(--wp--preset--color--white);
}
@media (min-width: 1024px) {
	.sp-capabilities-overview { padding-block: 120px 100px; }
}
.sp-capabilities-overview .sp-capabilities-overview__title.sp-capabilities-overview__title {
	margin-bottom: 16px;
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.025em;
	white-space: pre-line;
}
@media (min-width: 1024px) {
	.sp-capabilities-overview .sp-capabilities-overview__title.sp-capabilities-overview__title { margin-bottom: 20px; }
}
.sp-capabilities-overview .sp-capabilities-overview__subheadline.sp-capabilities-overview__subheadline {
	margin-bottom: 24px;
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--black);
}
@media (min-width: 1024px) {
	.sp-capabilities-overview .sp-capabilities-overview__subheadline.sp-capabilities-overview__subheadline { font-size: 20px; line-height: 28px; }
}
.sp-capabilities-overview .sp-capabilities-overview__description.sp-capabilities-overview__description {
	max-width: 672px;
	margin-bottom: 56px;
	font-size: 16px;
	line-height: 1.625;
	white-space: pre-line;
	color: var(--wp--preset--color--black);
	opacity: 0.6;
}
@media (min-width: 1024px) {
	.sp-capabilities-overview .sp-capabilities-overview__description.sp-capabilities-overview__description { margin-bottom: 82px; font-size: 18px; }
}
.sp-capabilities-overview .sp-capabilities-overview__tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
@media (min-width: 768px) {
	.sp-capabilities-overview .sp-capabilities-overview__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-capabilities-overview .sp-capabilities-overview__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--black) 10%, transparent);
	background: var(--wp--preset--color--white);
	transition: all 0.2s;
}
@media (min-width: 1280px) {
	.sp-capabilities-overview .sp-capabilities-overview__tile { padding: 32px; }
}
.sp-capabilities-overview .sp-capabilities-overview__tile:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--primary);
}
.sp-capabilities-overview .sp-capabilities-overview__tile-title.sp-capabilities-overview__tile-title {
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--black);
}
@media (min-width: 1280px) {
	.sp-capabilities-overview .sp-capabilities-overview__tile-title.sp-capabilities-overview__tile-title { font-size: 28px; }
}
.sp-capabilities-overview .sp-capabilities-overview__tile-title a { display: block; }
@media (min-width: 1024px) {
	.sp-capabilities-overview .sp-capabilities-overview__title.sp-capabilities-overview__title { width: fit-content; }
}
/* The whole tile is the link: the heading's link stretches over it. */
.sp-capabilities-overview .sp-capabilities-overview__tile-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sp-capabilities-overview .sp-capabilities-overview__tile-text {
	font-size: 16px;
	line-height: 1.625;
	color: color-mix(in srgb, var(--wp--preset--color--black) 60%, transparent);
}
.sp-capabilities-overview .sp-capabilities-overview__explore.sp-capabilities-overview__explore {
	display: inline-flex;
	align-items: center;
	margin-top: 32px;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--black) 40%, transparent);
	transition: color 0.2s;
}
.sp-capabilities-overview .sp-capabilities-overview__arrow {
	margin-left: 8px;
	transition: transform 0.2s;
}
.sp-capabilities-overview .sp-capabilities-overview__tile:hover .sp-capabilities-overview__explore { color: var(--wp--preset--color--black); }
.sp-capabilities-overview .sp-capabilities-overview__tile:hover .sp-capabilities-overview__arrow { transform: translateX(4px); }