/*
 * Our Impact — structural frontend CSS.
 *
 * Layout scaffolding only. No color, font, or spacing declarations that
 * belong to the theme. The active theme provides all color tokens, typography,
 * and button styles. Plugin CSS only sets structural rules (grids, flex,
 * sticky positioning, the card stripe, and layout containers).
 *
 * Brief-type color stripe: keyed to .impact-type--{slug} classes.
 * Themes can remap these via the ffa_impact_brief_type_color filter or by
 * overriding the CSS custom properties below.
 */

/* ── Color tokens for brief-type stripes (theme can override) ───────────── */
:root {
	--impact-color-research-briefs:          #004c97;
	--impact-color-program-insights-briefs:  #2a7d4f;
	--impact-color-organization-briefs:      #c8a227;
}

/* ── Archive wrapper ─────────────────────────────────────────────────────── */
.impact-archive {
	width: 100%;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.impact-hero {
	padding: 48px 24px;
}

.impact-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 24px;
}

.impact-stat {
	display: flex;
	flex-direction: column;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.impact-filter-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 12px 24px;
}

.impact-filter-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.impact-filter-bar__search {
	flex: 1 1 200px;
	min-width: 160px;
}

.impact-filter-bar__select {
	flex: 0 1 180px;
}

.impact-filter-bar__count {
	margin-left: auto;
	white-space: nowrap;
}

.impact-filter-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 8px;
}

.impact-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.8em;
	cursor: pointer;
}

.impact-filter-chip__remove {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

/* ── Two-column archive body ─────────────────────────────────────────────── */
.impact-archive__body {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 24px;
}

/* ── Sidebar taxonomy navigator ──────────────────────────────────────────── */
.impact-sidebar {
	width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: 56px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}

.impact-sidebar__section {
	margin-bottom: 24px;
}

.impact-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.impact-sidebar__btn {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 3px;
}

.impact-sidebar__btn.is-active,
.impact-sidebar__btn:hover {
	background: rgba(0, 0, 0, 0.06);
}

/* ── Main card area ──────────────────────────────────────────────────────── */
.impact-archive__main {
	flex: 1;
	min-width: 0;
}

.impact-card-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.impact-card {
	display: flex;
	position: relative;
	overflow: hidden;
}

.impact-card__stripe {
	width: 4px;
	flex-shrink: 0;
	align-self: stretch;
}

.impact-type--research-briefs          .impact-card__stripe { background: var( --impact-color-research-briefs ); }
.impact-type--program-insights-briefs  .impact-card__stripe { background: var( --impact-color-program-insights-briefs ); }
.impact-type--organization-briefs      .impact-card__stripe { background: var( --impact-color-organization-briefs ); }

.impact-card__body {
	flex: 1;
	padding: 16px 20px;
}

.impact-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.impact-card__title {
	margin: 0 0 8px;
}

.impact-card__stat-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.8em;
	margin-bottom: 8px;
}

.impact-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 12px;
}

.impact-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.impact-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.impact-card__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.impact-pagination {
	margin-top: 32px;
	text-align: center;
}

/* ── Featured briefs shortcode ───────────────────────────────────────────── */
.impact-featured-briefs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.impact-featured-briefs .impact-card {
	flex: 1 1 280px;
}

/* ── Single brief ────────────────────────────────────────────────────────── */
.impact-breadcrumb {
	padding: 12px 24px;
}

.impact-single__hero {
	padding: 40px 24px;
}

.impact-single__hero-inner {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}

.impact-single__hero-main {
	flex: 1 1 400px;
}

.impact-single__pills {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.impact-single__byline {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 8px 0;
}

.impact-single__glance {
	flex: 0 1 240px;
	padding: 20px;
	border-radius: 4px;
}

.impact-single__glance-list {
	margin: 0;
}

.impact-single__glance-list dt {
	font-weight: 700;
	margin-top: 12px;
}

.impact-single__glance-list dd {
	margin: 0;
}

/* ── Single two-column body ──────────────────────────────────────────────── */
.impact-single__body {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 32px 24px;
}

.impact-single__main {
	flex: 1;
	min-width: 0;
}

.impact-single__sidebar {
	width: 260px;
	flex-shrink: 0;
	position: sticky;
	top: 24px;
}

.impact-sidebar-card {
	margin-bottom: 24px;
	padding: 16px;
}

/* ── Key points box ──────────────────────────────────────────────────────── */
.impact-key-points {
	padding: 20px 24px;
	border-radius: 4px;
	margin-bottom: 28px;
}

.impact-key-points__list {
	padding-left: 20px;
}

/* ── Quote blocks ────────────────────────────────────────────────────────── */
.impact-blockquote {
	padding: 16px 24px;
	margin: 24px 0;
	border-left: 4px solid currentColor;
}

.impact-blockquote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
}

/* ── Tag cloud ───────────────────────────────────────────────────────────── */
.impact-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ── Related briefs list ─────────────────────────────────────────────────── */
.impact-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.impact-related-item {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.impact-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

.impact-no-results {
	padding: 32px;
	text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.impact-sidebar,
	.impact-single__glance {
		display: none;
	}

	.impact-archive__body,
	.impact-single__body {
		flex-direction: column;
	}

	.impact-single__sidebar {
		width: 100%;
		position: static;
	}
}