/*
 * Single post (Figma blogSingle 1828:14199; templates/single.html → patterns post-header, post-body,
 * post-related). Header 1600×505.69 from y80 with a dashed bottom rule; body = share (61) | content (764)
 * | contents (328), 64px apart; related cards; footer 108px below. Card styles come from blog.css.
 */

/* Sections sit edge to edge (the main group's flow gap would add 16px between them). */
.rs-post > * {
	margin-block: 0;
}

/* ---- Header (1828:14206): purple-20 → white over the first 300px, dashed #ccc rule below ---- */

.rs-post-head {
	border-bottom: 1px dashed var(--wp--preset--color--gray-20);
	background: linear-gradient(to bottom, var(--wp--preset--color--purple-20) 0, var(--wp--preset--color--white) 300px) no-repeat;
}

.rs-post-head__row {
	align-items: flex-start;
}

.rs-post-head__row > * {
	margin: 0;
}

.rs-post-head__text {
	flex: 1 1 525px;
	min-width: 0;
}

.rs-post-head__text > *,
.rs-post-head__intro > * {
	margin: 0;
}

/* Category pill is 13/20 here (72×28), 11/16 on the cards. */
.rs-post-head__meta .rs-blog-card__cat a {
	font-size: var(--wp--preset--font-size--paragraph-sm);
	line-height: 20px;
	letter-spacing: -0.005em;
}

.rs-post-head__intro {
	align-self: stretch;
}

.rs-post-head__title {
	line-height: calc(38 / 28);
}

.rs-post-head__excerpt p {
	margin: 0;
	line-height: 24px;
}

/* Title block → author: 56px (the column's gap is 24). */
.rs-post-head__text > .rs-post-head__author {
	margin-top: 32px;
	align-items: center;
}

.rs-post-head__author > * {
	margin: 0;
}

.rs-post-head__avatar,
.rs-post-head__avatar img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.rs-post-head__name {
	font-weight: 500;
	line-height: 26px;
}

.rs-post-head__date > *,
.rs-post-head__date time {
	margin: 0;
	line-height: 16px;
	letter-spacing: 0;
}

/* Featured image: 723×376.69, radius 16. */
.rs-post-head__image {
	flex: 0 1 723px;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}

.rs-post-head__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Body row (1828:14232) ---- */

.rs-post-body__row {
	align-items: flex-start;
}

.rs-post-body__row > * {
	margin: 0;
}

/* Share column: 61px wide, 48px round buttons (1px #ccc, 24px icon), 12px apart, sticky under the header. */
.rs-post-body .rs-share {
	position: sticky;
	top: calc(var(--rs-header-clearance) + 8px);
	flex: 0 0 61px;
	align-items: center;
	margin: 0;
	padding: 0 0 8px;
	transition: top 0.3s ease;
}

.rs-post-body .rs-share .wp-social-link {
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--gray-20);
	border-radius: 24px;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--black) !important;
}

.rs-post-body .rs-share .wp-social-link:hover {
	border-color: var(--wp--preset--color--purple-100);
	transform: none;
}

.rs-post-body .rs-share .wp-block-social-link-anchor {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.rs-post-body .rs-share .wp-block-social-link-anchor svg {
	width: 24px;
	height: 24px;
}

/* Figma's icons (core's own SVGs are hidden). */
.rs-post-body .rs-share :is(.wp-social-link-facebook, .wp-social-link-x, .wp-social-link-linkedin, .wp-social-link-mail) svg {
	visibility: hidden;
}

.rs-post-body .rs-share :is(.wp-social-link-facebook, .wp-social-link-x, .wp-social-link-linkedin, .wp-social-link-mail) .wp-block-social-link-anchor {
	background: center / 24px 24px no-repeat;
}

.rs-post-body .rs-share .wp-social-link-facebook .wp-block-social-link-anchor {
	background-image: url("../../images/blog/share-facebook.svg");
}

.rs-post-body .rs-share .wp-social-link-x .wp-block-social-link-anchor {
	background-image: url("../../images/blog/share-x.svg");
}

.rs-post-body .rs-share .wp-social-link-linkedin .wp-block-social-link-anchor {
	background-image: url("../../images/blog/share-linkedin.svg");
}

.rs-post-body .rs-share .wp-social-link-mail .wp-block-social-link-anchor {
	background-image: url("../../images/blog/share-mail.svg");
}

.rs-post-body__main {
	flex: 0 1 764px;
	min-width: 0;
}

/* Figma's row is 61 + 64 + 764 + 64 + 328 = 1281px: keep the content at 764 and let the contents box give
   up the extra pixel. Only once the row has its full width (1600 viewport: 1280; root padding is 40). */
@media (min-width: 1361px) {
	.rs-post-body .rs-post-body__main {
		flex-shrink: 0;
	}

	.rs-post-body .rs-toc {
		flex-shrink: 1;
	}
}

.rs-post-body__main > * {
	width: 100%;
	margin: 0;
}

/* ---- Post content (764 wide): 16/24 #2f2f2f, blocks 24px apart, a heading 8px above its text ---- */

.rs-post .rs-post-content > * {
	margin-block: 0;
}

.rs-post .rs-post-content > * + * {
	margin-block-start: 24px;
}

.rs-post .rs-post-content > :is(h2, h3, h4) + * {
	margin-block-start: 8px;
}

.rs-post-content p,
.rs-post-content li {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--paragraph);
	line-height: 24px;
}

.rs-post-content h2 {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	line-height: calc(38 / 28);
}

.rs-post-content h3 {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-6);
	font-weight: 500;
	line-height: 1.4;
}

.rs-post-content :is(h2, h3) {
	scroll-margin-top: calc(var(--rs-header-clearance) + 16px);
}

.rs-post-content a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rs-post-content .wp-block-image,
.rs-post-content .wp-block-gallery {
	margin-inline: 0;
}

.rs-post-content .wp-block-image img,
.rs-post-content .wp-block-gallery img {
	border-radius: 16px;
}

.rs-post-content .wp-block-gallery {
	--wp--style--unstable-gallery-gap: 16px;
	gap: 16px;
}

/* Key points box (patterns/post-keypoints.php, Figma 1828:14246): purple-20, 1px purple-40, radius 16. */
.rs-post-content .rs-keypoints {
	border-radius: 16px;
	background: var(--wp--preset--color--purple-20);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--purple-40);
}

.rs-keypoints > * {
	margin: 0;
}

.rs-post-content .rs-keypoints__title {
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--stack-sans-headline);
	font-size: var(--wp--preset--font-size--heading-6);
	font-weight: 500;
	line-height: 28px;
	letter-spacing: 0;
}

.rs-keypoints__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-post-content .rs-keypoints__list li {
	position: relative;
	padding-left: 18px;
	color: var(--wp--preset--color--black);
}

.rs-keypoints__list li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--text-muted);
}

/* ---- Comments (1828:14279): py 40, gap 16 ---- */

.rs-post .rs-comments {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px 0;
}

.rs-comments > * {
	margin: 0;
}

.rs-comments__bar {
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--gray-20);
	border-bottom: 1px solid var(--wp--preset--color--gray-20);
}

.rs-comments__bar > * {
	margin: 0;
}

.rs-comments .rs-comments__title {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--wp--preset--color--text-tertiary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--paragraph);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.005em;
}

.rs-comments__title::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background: url("../../images/blog/chat-teardrop-20.svg") center / 20px no-repeat;
}

.rs-comments__add .wp-block-button__link {
	padding: 4px 12px;
	border-radius: 20px;
	background: var(--wp--preset--color--purple-100);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--paragraph);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.005em;
}

.rs-comments__add .wp-block-button__link:hover {
	background: var(--wp--preset--color--purple-90);
}

.rs-comments__list,
.rs-comments__list ol {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-comments__list ol {
	margin-top: 16px;
	padding-left: 24px;
}

.rs-comment {
	padding: 0 0 24px 24px;
	border-bottom: 0.5px solid var(--wp--preset--color--gray-20);
}

.rs-comments__list > li:last-child > .rs-comment {
	border-bottom: 0;
}

.rs-comment > *,
.rs-comment__head > * {
	margin: 0;
}

.rs-comment__head {
	align-items: center;
}

.rs-comment__avatar {
	display: flex;
	flex: none;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--paragraph-sm);
	line-height: 20px;
}

.rs-comment__avatar.is-team {
	border: 0.3px solid var(--wp--preset--color--gray-20);
}

.rs-comment__avatar img {
	display: block;
	width: 17.5px;
	height: 14px;
}

.rs-comment__name {
	line-height: 24px;
}

.rs-comment__text p {
	margin: 0;
	line-height: 24px;
}

.rs-comment__text p + p {
	margin-top: 8px;
}

/* Comment form (not in Figma): the site's input style. */
.rs-comments__form {
	scroll-margin-top: calc(var(--rs-header-clearance) + 16px);
}

.rs-comments__form .comment-reply-title {
	margin: 8px 0 16px;
	font-size: var(--wp--preset--font-size--heading-6);
	font-weight: 500;
	line-height: 1.4;
}

.rs-comments__form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 15px;
	border: 1px solid var(--wp--preset--color--gray-20);
	border-radius: 12px;
	font: inherit;
}

.rs-comments__form :is(input, textarea):focus {
	border-color: var(--wp--preset--color--purple-100);
	outline: none;
}

.rs-comments__form .form-submit .submit,
.rs-comments__form input[type="submit"] {
	padding: 8px 20px;
	border: 0;
	border-radius: 20px;
	background: var(--wp--preset--color--purple-100);
	color: var(--wp--preset--color--white);
	font: inherit;
	cursor: pointer;
}

/* ---- Contents (Figma 1831:16061): 328 wide, #f6f6f6, 1px #ccc, radius 12, items 13/20 medium #666 ---- */

.rs-post-body .rs-toc {
	position: sticky;
	top: calc(var(--rs-header-clearance) + 8px);
	box-sizing: border-box;
	flex: 0 0 328px;
	min-width: 0;
	max-height: calc(100vh - var(--rs-header-clearance) - 24px);
	overflow-y: auto;
	padding: 7px 15px;
	border: 1px solid var(--wp--preset--color--gray-20);
	border-radius: 12px;
	background: #f6f6f6;
	transition: top 0.3s ease;
}

.rs-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-toc a {
	display: block;
	padding: 8px 0;
	color: var(--wp--preset--color--text-tertiary);
	font-size: var(--wp--preset--font-size--paragraph-sm);
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.rs-toc a:hover,
.rs-toc a.is-active {
	color: var(--wp--preset--color--black);
}

/* H3s sit under their H2, indented 16px, with a rule below the group. */
.rs-toc li > ul {
	padding: 0 16px;
	border-bottom: 1px solid var(--wp--preset--color--gray-20);
}

.rs-toc.is-placeholder p {
	margin: 0;
	padding: 8px 0;
	font-size: var(--wp--preset--font-size--paragraph-sm);
}

/* ---- Related (1828:14355): 3 cards, title 20/28 ---- */

.rs-post-related > * {
	margin-block: 0;
}

.rs-post-related > * + * {
	margin-block-start: 48px;
}

.rs-post-related__head > * {
	margin: 0;
}

.rs-post-related__title {
	max-width: 634px;
}

.rs-post-related .rs-blog-grid.is-3-col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.rs-post-related .rs-blog-card__title {
	line-height: 28px;
}

/* ---- Smaller screens ---- */

@media (max-width: 1199px) {
	.rs-post-body .rs-toc {
		display: none;
	}
}

@media (max-width: 1023px) {
	.rs-post-related .rs-blog-grid.is-3-col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.rs-post-head {
		padding-top: 112px !important;
		padding-bottom: 40px !important;
	}

	.rs-post-head .rs-post-head__row {
		flex-direction: column;
		gap: 32px;
	}

	.rs-post-head__text,
	.rs-post-head__image {
		flex-basis: auto;
		width: 100%;
	}

	.rs-post-head__text > .rs-post-head__author {
		margin-top: 8px;
	}

	.rs-post-body .rs-post-body__row {
		flex-direction: column;
		gap: 24px;
	}

	.rs-post-body .rs-share {
		position: static;
		flex-direction: row;
		flex-basis: auto;
		padding: 0;
	}

	.rs-post-body__main {
		flex-basis: auto;
		width: 100%;
	}

	.rs-post-related .rs-blog-grid.is-3-col {
		grid-template-columns: minmax(0, 1fr);
	}
}