/**
 * A single post, from the Blog post (single) page: Standard post 38:551,
 * Article 22:3 and the phone and tablet frames beside them.
 */

/* Sections meet edge to edge. */
.abhinav-post-title,
.abhinav-post-body,
.abhinav-post-author,
.abhinav-keep-reading {
	margin-block: 0;
}

.wp-block-group.abhinav-post-title {
	padding-block: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
}

.wp-block-group.abhinav-post-body {
	padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
}

.wp-block-group.abhinav-post-author {
	padding-block: var(--wp--preset--spacing--32);
}

.wp-block-group.abhinav-keep-reading {
	padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--64);
}

/* The category above a title, and the date and reading time under it. */
.abhinav-kicker,
.abhinav-post-meta,
.abhinav-post-card .wp-block-post-time-to-read {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
}

.abhinav-post-meta > * {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

.abhinav-kicker a {
	color: inherit;
	text-decoration: none;
}

.abhinav-kicker a:hover {
	text-decoration: underline;
}

/* Topics: outline pills, as the tag state is drawn. */
.wp-block-post-terms.abhinav-topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	padding-top: var(--wp--preset--spacing--8);
}

.abhinav-topics .wp-block-post-terms__separator {
	display: none;
}

.abhinav-topics a {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.43;
	text-decoration: none;
}

.abhinav-topics a:hover {
	background-color: var(--wp--preset--color--line-subtle);
}

/* On this page: the design's quiet list, with the turmeric triangle on the
   section being read. Two classes, to outrank the block's own look. */
.abhinav-post-aside .resha-toc {
	border-left: 0;
	padding-left: 0;
}

.abhinav-post-aside .resha-toc__title {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.abhinav-post-aside .resha-toc__link {
	display: block;
	padding-left: calc(var(--wp--custom--marker--triangle-height) + var(--wp--preset--spacing--12));
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--body-m);
}

.abhinav-post-aside .resha-toc__link.is-current {
	color: var(--wp--preset--color--contrast);
}

.abhinav-post-aside .resha-toc__link.is-current::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--wp--custom--marker--triangle-height);
	height: var(--wp--custom--marker--triangle-width);
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Author. */
.abhinav-author-box {
	padding-top: var(--wp--preset--spacing--24);
	border-top: var(--wp--custom--stroke--line) solid var(--wp--preset--color--line-subtle);
}

.abhinav-author-portrait {
	flex: none;
	width: var(--wp--preset--spacing--96);
	margin: 0;
}

.abhinav-author-portrait img {
	display: block;
	width: 100%;
}

.wp-block-group .abhinav-author-name {
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.abhinav-small-buttons {
	margin-block-start: var(--wp--preset--spacing--12);
}

.abhinav-small-buttons .wp-block-button__link {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}

/* Keep reading: cards ruled off, no gap between rows when they stack. */
.abhinav-keep-reading .wp-block-post-template {
	row-gap: 0;
}

.abhinav-post-card {
	padding-block: var(--wp--preset--spacing--16);
	border-top: var(--wp--custom--stroke--construction) solid var(--wp--preset--color--line-subtle);
}

.abhinav-post-card > * {
	margin-block: 0;
}

.abhinav-post-card .wp-block-post-title {
	line-height: 1.25;
}

.abhinav-post-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.abhinav-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--underline--hover);
	text-underline-position: from-font;
}

@media (max-width: 599px) {
	.abhinav-author-box {
		flex-direction: column;
	}
}

@media (min-width: 600px) {
	.wp-block-group.abhinav-post-title {
		padding-block: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
	}
}

@media (min-width: 960px) {
	.wp-block-group.abhinav-post-title {
		padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--48);
	}

	.wp-block-group.abhinav-post-body,
	.wp-block-group.abhinav-post-author {
		padding-block: var(--wp--preset--spacing--48);
	}

	.wp-block-group.abhinav-keep-reading {
		padding-block: var(--wp--preset--spacing--48) var(--wp--preset--spacing--96);
	}

	/* The list stays in view under the header and the ridge as you read. */
	.abhinav-post-aside .resha-toc {
		position: sticky;
		top: calc(var(--resha-reading-progress-top, 0px) + var(--wp--preset--spacing--16) + var(--wp--preset--spacing--32));
		padding-top: var(--wp--preset--spacing--8);
	}
}