/**
 * Foundation Right Pro - Blog (Post Listings page + single post)
 *
 * The listings grid/cards, pagination, banner and CTA all reuse existing
 * components (home.css's .frp-blog__grid, base.css's .frp-pagination,
 * page-banner.css, about.css's CTA banner, faq.css's pill nav). Only the
 * pieces genuinely unique to blog browsing/reading are styled here.
 */

/* ==========================================================================
   1. Category filter (Post Listings page) - reuses .frp-faq-toc, just
   needs an active/selected state that the FAQ jump-nav never needed.
   ========================================================================== */

.frp-faq-toc__link.is-active {
	border-color: var(--frp-maroon);
	background: var(--frp-maroon);
	color: var(--frp-white);
}

/* ==========================================================================
   2. Single post header (category badge + meta row inside the page banner)
   ========================================================================== */

.frp-post-category {
	display: inline-flex;
	margin-bottom: var(--frp-space-4);
	padding: 6px 16px;
	border-radius: var(--frp-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	color: var(--frp-white);
	font-size: var(--frp-fs-xs);
	font-weight: var(--frp-fw-semibold);
	letter-spacing: var(--frp-ls-eyebrow);
	text-transform: uppercase;
}

.frp-post-category a {
	color: inherit;
}

.frp-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--frp-space-5);
	margin-top: var(--frp-space-4);
	color: var(--frp-on-dark-70);
	font-size: var(--frp-fs-sm);
}

.frp-post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--frp-space-2);
}

/* ==========================================================================
   3. Featured image - pulled up over the banner seam, matching the
   homepage hero badges' "straddle the seam" treatment.
   ========================================================================== */

.frp-post-image {
	position: relative;
	z-index: 2;
	margin-top: clamp(-5rem, -2rem - 8vw, -8rem);
	margin-bottom: var(--frp-space-10);
}

.frp-post-image img {
	width: 100%;
	aspect-ratio: 16 / 8;
	border-radius: var(--frp-radius-xl);
	object-fit: cover;
	box-shadow: var(--frp-shadow-lg);
}

/* ==========================================================================
   4. Tags + author box
   ========================================================================== */

.frp-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--frp-space-2);
	margin-top: var(--frp-space-8);
}

.frp-post-tags a {
	padding: 6px 16px;
	border-radius: var(--frp-radius-pill);
	background: var(--frp-grey-50);
	color: var(--frp-grey-500);
	font-size: var(--frp-fs-xs);
	font-weight: var(--frp-fw-medium);
}

.frp-post-tags a:hover {
	background: var(--frp-maroon-10);
	color: var(--frp-maroon);
}

.frp-author-box {
	display: flex;
	align-items: center;
	gap: var(--frp-space-5);
	margin-top: var(--frp-space-12);
	padding: var(--frp-space-6);
	border: var(--frp-border);
	border-radius: var(--frp-radius-lg);
	background: var(--frp-grey-50);
}

.frp-author-box__avatar img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: var(--frp-radius-circle);
	object-fit: cover;
}

.frp-author-box__name {
	margin: 0 0 4px;
	font-size: var(--frp-fs-lead);
}

.frp-author-box__bio {
	margin: 0;
	color: var(--frp-grey-500);
	font-size: var(--frp-fs-sm);
}

/* ==========================================================================
   5. Related posts
   ========================================================================== */

.frp-related-posts {
	margin-top: var(--frp-space-8);
}