.spoke-crosslinks
{
	margin-top: calc(var(--defaultInterval)*2);
	padding: calc(var(--defaultInterval)*1.5) 0;
	border-radius: 0;
}
/* Background token: mixed down to a soft tint at render time (see
   --crosslink-bg, set inline by PHP) so any palette color reads as a
   quiet backdrop rather than a full-strength block. The section itself
   runs edge-to-edge (it has no .entry-content ancestor, so the theme's
   width-tier clamp never touches it) -- .spoke-crosslink-inner insets
   the actual content back to the page's normal text width. */
.spoke-crosslinks[data-crosslink-bg]
{
	background: color-mix(in srgb, var(--crosslink-bg) 16%, #fff);
}
.spoke-crosslink-inner
{
	max-width: var(--boxedWidth);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--defaultInterval);
	padding-right: var(--defaultInterval);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: calc(var(--defaultInterval)*1.5);
}

/* Row 1 -- hub tile beside a text stack (heading + comma-separated spoke
   list), vertically centered against the tile so the heading reads as
   the tile's caption rather than a banner above the whole row. */
.spoke-crosslink-primary
{
	display: flex;
	flex-direction: column;
}
.spoke-crosslink-primary-row
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--defaultInterval)*1.5);
}
.spoke-crosslink-primary-row--single
{
	justify-content: center;
}
.spoke-crosslink-primary-text
{
	display: flex;
	flex-direction: column;
	gap: calc(var(--defaultInterval)*.35);
	max-width: 32em;
}

.spoke-crosslink-hub-tile
{
	display: block;
	flex-shrink: 0;
	width: var(--crosslink-hub-size, 200px);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--colA, #355067);
	border: 2px solid var(--colA);
	transition: transform .15s ease, border-color .2s ease;
}
.spoke-crosslink-hub-tile:hover
{
	border-color: var(--colB);
}
.spoke-crosslink-hub-tile:active
{
	transform: scale(0.97);
	transition-duration: .05s;
}
/* Background expand on hover -- same technique as Display Posts
   (displayPosts.css: ".block.displayPosts a:hover .wrapper .image").
   The tile clips (overflow:hidden above); the image itself scales up
   inside it, reading as the button's background "growing" on hover. */
.spoke-crosslink-hub-tile-img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: var(--defaultTransition);
}
.spoke-crosslink-hub-tile:hover .spoke-crosslink-hub-tile-img
{
	transform: scale(1.15);
}

/* Row 2 -- blog posts and case studies, side by side. No divider line
   between row 1 and row 2 -- gap spacing on .spoke-crosslink-inner
   is the only separation. */
.spoke-crosslink-columns
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 calc(var(--defaultInterval)*1.5);
	align-items: start;
}
.spoke-crosslink-columns--single
{
	grid-template-columns: 1fr;
}
.spoke-crosslink-col + .spoke-crosslink-col
{
	padding-left: calc(var(--defaultInterval)*1.5);
	border-left: 1px solid rgba(0,0,0,0.08);
}

/* #SD prefix to out-specificity the sitewide "#SD H4 {...}" rule in
   headings.css -- an ID selector beats any number of chained classes, so
   without it every heading here (base style AND the Type Role overrides
   below) silently loses to the sitewide H4 default. */
#SD .spoke-crosslink-col h4
{
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--colD);
	text-transform: lowercase;
	margin: 0 0 calc(var(--defaultInterval)*.5);
}
/* Spokes heading sits large and left-aligned beside the hub tile, doubling
   as the link to the hub page (wraps an <a> when the hub tile exists). */
#SD .spoke-crosslink-primary-text h4
{
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 1.05;
	color: var(--colD);
	text-transform: lowercase;
	margin: 0;
	text-wrap: balance;
}
.spoke-crosslink-primary-text h4 a
{
	color: inherit;
	text-decoration: none;
}
.spoke-crosslink-primary-text h4 a:hover
{
	color: var(--colB);
}
/* #SD prefix to out-specificity any sitewide ul/li reset (same technique
   as .block.displayPosts .dp-title in displayPosts.css) -- guarantees the
   bullet lines up flush with the heading above it, no inherited indent. */
#SD .spoke-crosslink-list
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--defaultInterval)*.5);
}
#SD .spoke-crosslink-list li
{
	margin: 0;
	padding: 0;
}
/* Traditional bullet, true hanging indent: text-indent pulls the marker
   left by the same amount padding-left pushes the block right, so
   wrapped lines land under the link text, not under the bullet. Same
   marker and colors for spokes, blog, and case studies. */
.spoke-crosslink-list li a
{
	display: block;
	padding-left: 1.15em;
	text-indent: -1.15em;
	text-decoration: none;
	color: var(--colA);
	font-weight: 700;
	font-size: 0.906rem;
}
.spoke-crosslink-list li a:hover
{
	color: var(--colB);
}
.spoke-crosslink-list li a::before
{
	content: "\2022" " ";
	color: #000;
	font-weight: 700;
}

/* Spokes list -- plain comma-separated running text under the heading.
   Commas are ordinary text (not a pseudo-element glued to one side), so
   the browser's normal wrapping already keeps punctuation attached to
   its word -- no orphan risk, unlike a pipe separator would have. */
#SD .spoke-crosslink-primary-text .spoke-crosslink-spokes-inline
{
	margin: 0;
	font-family: var(--font-secondary);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--colD);
}
.spoke-crosslink-spokes-inline a
{
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.spoke-crosslink-spokes-inline a:hover
{
	color: var(--colB);
}

/* Type Role overrides -- only apply when a role is chosen on
   Design Tokens > Cross-Linking; otherwise the rules above stand as-is.
   Same [data-*-role] gating pattern as Text Block (textBlock.css). */
#SD .spoke-crosslinks[data-crosslink-heading-spoke-role] .spoke-crosslink-primary-text h4
{
	font-family: var(--crosslink-heading-spoke-family, inherit);
	font-weight: var(--crosslink-heading-spoke-weight, inherit);
	font-style: var(--crosslink-heading-spoke-style, normal);
	font-size: var(--crosslink-heading-spoke-size, inherit);
	line-height: var(--crosslink-heading-spoke-line-height, inherit);
	letter-spacing: var(--crosslink-heading-spoke-letter-spacing, inherit);
	text-transform: var(--crosslink-heading-spoke-text-transform, lowercase);
	color: var(--crosslink-heading-spoke-color, inherit);
}
#SD .spoke-crosslinks[data-crosslink-heading-secondary-role] .spoke-crosslink-columns .spoke-crosslink-col h4
{
	font-family: var(--crosslink-heading-secondary-family, inherit);
	font-weight: var(--crosslink-heading-secondary-weight, inherit);
	font-style: var(--crosslink-heading-secondary-style, normal);
	font-size: var(--crosslink-heading-secondary-size, inherit);
	line-height: var(--crosslink-heading-secondary-line-height, inherit);
	letter-spacing: var(--crosslink-heading-secondary-letter-spacing, inherit);
	text-transform: var(--crosslink-heading-secondary-text-transform, lowercase);
	color: var(--crosslink-heading-secondary-color, inherit);
}
/* Spokes list items get their own Type Role, separate from blog/case
   studies -- scoped to the comma-separated inline list in row 1. */
.spoke-crosslinks[data-crosslink-item-spoke-role] .spoke-crosslink-spokes-inline,
.spoke-crosslinks[data-crosslink-item-spoke-role] .spoke-crosslink-spokes-inline a
{
	font-family: var(--crosslink-item-spoke-family, inherit);
	font-weight: var(--crosslink-item-spoke-weight, inherit);
	font-style: var(--crosslink-item-spoke-style, normal);
	font-size: var(--crosslink-item-spoke-size, inherit);
	line-height: var(--crosslink-item-spoke-line-height, inherit);
	letter-spacing: var(--crosslink-item-spoke-letter-spacing, inherit);
	text-transform: var(--crosslink-item-spoke-text-transform, none);
	color: var(--crosslink-item-spoke-color, inherit);
}
.spoke-crosslinks[data-crosslink-item-secondary-role] .spoke-crosslink-columns .spoke-crosslink-list li a
{
	font-family: var(--crosslink-item-secondary-family, inherit);
	font-weight: var(--crosslink-item-secondary-weight, inherit);
	font-style: var(--crosslink-item-secondary-style, normal);
	font-size: var(--crosslink-item-secondary-size, inherit);
	line-height: var(--crosslink-item-secondary-line-height, inherit);
	letter-spacing: var(--crosslink-item-secondary-letter-spacing, inherit);
	text-transform: var(--crosslink-item-secondary-text-transform, none);
	color: var(--crosslink-item-secondary-color, inherit);
}

@media (max-width: 640px)
{
	.spoke-crosslink-primary-row
	{
		flex-direction: column;
		text-align: center;
	}
	.spoke-crosslink-primary-text
	{
		align-items: center;
	}
	.spoke-crosslink-columns
	{
		grid-template-columns: 1fr;
	}
	.spoke-crosslink-col + .spoke-crosslink-col
	{
		padding-left: 0;
		border-left: none;
		padding-top: calc(var(--defaultInterval)*1.25);
		border-top: 1px solid rgba(0,0,0,0.08);
	}
}