/**
 * Single blog post (single.php): one centered reading column.
 */

.post-column {
	max-width: var(--measure);
	margin-inline: auto;
}

/* ---------- Header ---------- */

.post-header {
	padding-top: var(--space-7);
}

.post-header__categories a {
	color: inherit;
	text-decoration: none;
}

.post-header__categories a:hover {
	text-decoration: underline;
}

.post-header__title {
	margin-bottom: var(--space-5);
}

.post-meta {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	color: var(--color-text-muted);
	font-size: var(--step--1);
}

.post-meta__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.post-meta__line {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	margin: 0;
}

.post-meta__author {
	color: var(--color-navy);
	font-weight: 600;
}

/* ---------- Featured image ---------- */

.post-image {
	margin-block: var(--space-6) 0;
}

.post-image__img {
	width: 100%;
	border-radius: var(--radius-media);
}

/* Square images would fill the screen: cap the height and crop the rest. */
@media (min-width: 48rem) {

	.post-image__img {
		max-height: 32rem;
		object-fit: cover;
	}
}

/* ---------- Article ---------- */

.post-content {
	padding-top: var(--space-7);
}

.post-content :where(img) {
	height: auto;
}

.post-content :where(figure) {
	margin-block: var(--space-6);
}

.post-content :where(.aligncenter) {
	margin-inline: auto;
}

.post-content :where(figcaption) {
	margin-top: var(--space-2);
	color: var(--color-text-subtle);
	font-size: var(--step--1);
}

/* ---------- After the article ---------- */

.post-footer {
	display: grid;
	gap: var(--space-7);
	padding-block: var(--space-7) var(--section-padding);
}

.post-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.post-share__label {
	margin: 0;
	font-weight: 600;
}

.post-share__list {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-navy);
	transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.post-share__link:hover {
	border-color: var(--color-navy);
	background: var(--color-surface-alt);
	color: var(--color-navy);
}

.author-box {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
}

.author-box__avatar {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.author-box__name {
	margin-bottom: var(--space-2);
}

.author-box__bio {
	color: var(--color-text-muted);
}

@media (max-width: 30rem) {

	.author-box {
		flex-direction: column;
	}
}

.post-cta {
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--color-surface-accent);
}

.post-cta__heading {
	margin-bottom: var(--space-2);
}

.post-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
}

/* ---------- Related posts ---------- */

.post-related__heading {
	margin-bottom: var(--space-6);
}