/* Blog post body (patterns/blog-post-body.php). Values from the old
 * insight-body-section.tsx, ui/tracing-beam.tsx and portable-text-body.tsx.
 * The article rules style whatever blocks a post holds, so a new post looks
 * right with no classes to add. */
.sp-blog-post-body.sp-blog-post-body {
	margin-bottom: 40px;
}
@media (min-width: 1024px) {
	.sp-blog-post-body.sp-blog-post-body {
		margin-bottom: 64px;
		padding-inline: 50px;
	}
}
.sp-blog-post-body .sp-blog-post-body__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}
@media (min-width: 1280px) {
	.sp-blog-post-body .sp-blog-post-body__inner {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 64px;
	}
}

/* Tracing beam: the bolt dot, and the line assets/js/patterns/blog-post-body.js draws. */
.sp-blog-post-body .sp-blog-post-body__beam {
	position: relative;
	width: 100%;
	height: 100%;
}
@media (min-width: 1024px) {
	.sp-blog-post-body .sp-blog-post-body__beam { padding-left: 48px; }
}
.sp-blog-post-body .sp-blog-post-body__dot {
	position: absolute;
	top: 12px;
	left: -32px;
	display: none;
}
@media (min-width: 1024px) {
	.sp-blog-post-body .sp-blog-post-body__dot { display: block; }
}
.sp-blog-post-body .sp-blog-post-body__bolt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 0 0 19px;
	border-radius: 9999px;
	background: var(--wp--preset--color--black);
}
.sp-blog-post-body .sp-blog-post-body__bolt img {
	width: 10px;
	height: 14px;
}
.sp-blog-post-body .sp-blog-post-body__line {
	display: block;
	margin-left: 16px;
	overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.sp-blog-post-body .sp-blog-post-body__line-glow { display: none; }
}

/* Article text (old PortableTextBody). */
.sp-blog-post-body__content.sp-blog-post-body__content > * {
	margin-top: 0;
	margin-bottom: 0;
}
.sp-blog-post-body__content.sp-blog-post-body__content > p {
	margin-bottom: 24px;
	line-height: 1.625;
	color: color-mix(in srgb, var(--wp--preset--color--black) 80%, transparent);
}
.sp-blog-post-body__content.sp-blog-post-body__content > h2 {
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.025em;
}
.sp-blog-post-body__content.sp-blog-post-body__content > h3 {
	margin-top: 32px;
	margin-bottom: 16px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.025em;
}
.sp-blog-post-body__content.sp-blog-post-body__content > h4 {
	margin-top: 24px;
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.025em;
}
.sp-blog-post-body__content.sp-blog-post-body__content > :is(h1, h5, h6) {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}
.sp-blog-post-body__content.sp-blog-post-body__content > blockquote {
	margin-block: 32px;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--wp--preset--color--primary);
	font-style: italic;
	color: color-mix(in srgb, var(--wp--preset--color--black) 70%, transparent);
}
.sp-blog-post-body__content blockquote > p {
	margin: 0;
}
.sp-blog-post-body__content.sp-blog-post-body__content > :is(ul, ol) {
	margin-bottom: 24px;
	padding-left: 24px;
	color: color-mix(in srgb, var(--wp--preset--color--black) 80%, transparent);
}
.sp-blog-post-body__content > ul { list-style: disc; }
.sp-blog-post-body__content > ol { list-style: decimal; }
.sp-blog-post-body__content > :is(ul, ol) > li {
	line-height: 1.625;
}
.sp-blog-post-body__content > :is(ul, ol) > li + li {
	margin-top: 8px;
}
.sp-blog-post-body__content.sp-blog-post-body__content > figure {
	margin-block: 32px;
}
.sp-blog-post-body__content.sp-blog-post-body__content > figure.sp-post-image--medium {
	max-width: 672px;
	margin-inline: auto;
}
.sp-blog-post-body__content.sp-blog-post-body__content > figure.sp-post-image--small {
	max-width: 384px;
	margin-inline: auto;
}
.sp-blog-post-body__content > figure img {
	width: 100%;
	object-fit: cover;
}
.sp-blog-post-body__content strong { font-weight: 600; }
.sp-blog-post-body__content .sp-underline { text-decoration: underline; }
.sp-blog-post-body__content a {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
	transition: opacity 0.2s;
}
.sp-blog-post-body__content a:hover { opacity: 0.7; }
@media (min-width: 1024px) {
	.sp-blog-post-body__content.sp-blog-post-body__content > :is(p, ul, ol, blockquote) {
		font-size: var(--wp--preset--font-size--large);
	}
	.sp-blog-post-body__content.sp-blog-post-body__content > :is(ul, ol, blockquote) {
		line-height: 28px;
	}
	.sp-blog-post-body__content.sp-blog-post-body__content > h3 {
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 32px;
	}
}

/* Other Insights. */
@media (min-width: 1280px) {
	.sp-blog-post-body .sp-blog-post-body__sticky {
		position: sticky;
		top: 120px;
	}
}
.sp-blog-post-body .sp-blog-post-body__aside-head.sp-blog-post-body__aside-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}
.sp-blog-post-body .sp-blog-post-body__aside-title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 32px;
	font-weight: 500;
	letter-spacing: -0.025em;
}
.sp-blog-post-body .sp-blog-post-body__more {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 24px;
	font-weight: 500;
}
.sp-blog-post-body .sp-blog-post-body__more a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity 0.2s;
}
.sp-blog-post-body .sp-blog-post-body__more a:hover { opacity: 0.7; }
.sp-blog-post-body .sp-blog-post-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.sp-blog-post-body .sp-blog-post-body__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.sp-blog-post-body .sp-blog-post-body__grid { grid-template-columns: minmax(0, 1fr); }
}
.sp-blog-card--side .sp-blog-card__title.sp-blog-card__title {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 28px;
	letter-spacing: -0.5px;
}
@media (min-width: 1024px) {
	.sp-blog-card--side .sp-blog-card__title.sp-blog-card__title { font-size: var(--wp--preset--font-size--large); }
}
@media (min-width: 1280px) {
	.sp-blog-card--side .sp-blog-card__title.sp-blog-card__title { font-size: var(--wp--preset--font-size--x-large); }
}

/* Block-level, as the old link (a flex item): same box as the reference. */
.sp-blog-post-body__more a { display: block; }

/* Deliberately unlike the old site: long web addresses wrap instead of
   pushing the page sideways on phones (the old site scrolled sideways by up
   to 261px on three posts). */
.sp-blog-post-body__content a { overflow-wrap: anywhere; }