/* ==========================================================================
   blog.css — blog index, archives and single post.
   ========================================================================== */

/* Index & archives ---------------------------------------------------------- */
.cat-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.cat-nav__pill {
	font-size: 15px; font-weight: 500; padding: 8px 16px; border-radius: 99px;
	border: 1px solid var(--cx-line); color: var(--cx-text); background: #fff; transition: .15s;
}
.cat-nav__pill:hover { border-color: var(--cx-indigo); color: var(--cx-indigo); }
.cat-nav__pill.is-active { background: var(--cx-indigo); border-color: var(--cx-indigo); color: #fff; }

.blog-lead { margin-bottom: 32px; }
.blog-lead .post-card--feature { flex-direction: row; }
.blog-lead .post-card--feature .post-cover { width: 56%; flex: none; aspect-ratio: auto; min-height: 360px; }
.blog-lead .post-card--feature .post-card__body { justify-content: center; }
@media (max-width: 991.98px) {
	.blog-lead .post-card--feature { flex-direction: column; }
	.blog-lead .post-card--feature .post-cover { width: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

/* Single post --------------------------------------------------------------- */
.post-single__head { background: var(--cx-tint); padding-bottom: clamp(120px, 14vw, 200px); }
.post-single__intro { max-width: 860px; }
.post-single__title { font-size: clamp(36px, 4.4vw, 56px); }
.post-single__lead { margin-top: 20px; font-size: 19px; max-width: 64ch; }
.post-single__byline { margin-top: 28px; padding-top: 0; }
.post-single__byline .post-meta { font-size: 13px; }

.post-single__cover { margin: calc(-1 * clamp(96px, 12vw, 168px)) 0 0; }
.post-single__cover img, .post-single__cover .post-cover { width: 100%; border-radius: var(--cx-r-lg); display: block; aspect-ratio: 16 / 7; object-fit: cover; }
.post-single__cover figcaption { font-size: 14px; color: var(--cx-muted); margin-top: 10px; text-align: center; }

.post-single__body {
	display: grid;
	grid-template-columns: 64px minmax(0, 720px);
	gap: clamp(24px, 4vw, 64px);
	justify-content: center;
	padding-block: clamp(48px, 6vw, 72px) 32px;
}
.share { position: sticky; top: calc(var(--cx-header-h) + 32px); align-self: start; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.share__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-soft); }
.share__btn {
	width: 42px; height: 42px; border-radius: 99px; border: 1px solid var(--cx-line); background: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--cx-ink); transition: .15s;
}
.share__btn .ms { font-size: 20px; }
.share__btn:hover { border-color: var(--cx-indigo); color: var(--cx-indigo); }
.share__btn.is-copied { background: var(--cx-indigo); border-color: var(--cx-indigo); color: #fff; }
@media (max-width: 767.98px) {
	.post-single__body { grid-template-columns: minmax(0, 1fr); }
	.share { position: static; flex-direction: row; order: 2; }
}
.post-single__tags { max-width: 720px; margin: 0 auto clamp(56px, 7vw, 96px); padding-left: calc(64px + clamp(24px, 4vw, 64px)); }
.post-single__tags .chip:hover { color: var(--cx-indigo); border-color: var(--cx-indigo-100); }
@media (max-width: 767.98px) { .post-single__tags { padding-left: 0; } }

/* Comments ------------------------------------------------------------------ */
.post-comments { max-width: 720px; margin-inline: auto; }
.comments__title { margin-bottom: 24px; }
.comments__list { list-style: none; padding: 0; margin: 0 0 48px; }
.comments__list .comment-body { padding: 20px 0; border-bottom: 1px solid var(--cx-line-soft); }
.comments__list .children { list-style: none; padding-left: 32px; }
.comments__list .avatar { width: 40px; height: 40px; margin-right: 10px; border-radius: 99px; display: inline-block; vertical-align: middle; }
.comments__list .comment-meta { font-size: 14px; color: var(--cx-muted); margin-bottom: 8px; }
.comments__list .comment-meta a { color: inherit; }
.comments__list .fn { font-weight: 600; color: var(--cx-ink); font-style: normal; }
.comments__reply { margin-bottom: 16px; }
.comment-form .comment-notes, .comment-form .logged-in-as { font-size: 14px; color: var(--cx-muted); }