/* =============================================================================
   FPS Review — Category Archive Styles
   Targets shortcode output from category-archive-shortcodes.php.
   Uses The FPS Review dark-theme colour tokens expressed as literal hex values
   (WordPress front-end doesn't load the design-system CSS variables).
   ============================================================================= */

/* ── Page header ─────────────────────────────────────────────────────────── */

.fps-cat-header {
	padding: 32px 0 28px;
	border-bottom: 1px solid #232A38;
	margin-bottom: 0;
}

.fps-cat-crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 500 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #8E96A4;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.fps-cat-crumb a {
	color: #ffffff;
	text-decoration: none;
	transition: color 150ms;
}
.fps-cat-crumb a:hover { color: #5B8AB8; }
.fps-cat-crumb__sep { color: #5A6271; }

.fps-cat-vendor {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}
.fps-cat-vendor__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.fps-cat-vendor__label {
	font: 600 10px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.fps-cat-title {
	font: 800 48px/1 "Barlow Condensed", "Oswald", "Impact", sans-serif;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: #F2F4F7;
	margin-bottom: 8px;
}
.fps-cat-title__dot { color: #C0341E; }

.fps-cat-desc {
	font: 400 15px/1.6 -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #8E96A4;
	max-width: 560px;
	margin: 0 0 6px;
}

.fps-cat-meta {
	font: 500 12px/1 "JetBrains Mono", "Fira Mono", Consolas, monospace;
	color: #ffffff;
	letter-spacing: 0.06em;
}

/* ── Filter wrapper ───────────────────────────────────────────────────────── */

.fps-filters {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 0;
	border-bottom: 1px solid #232A38;
	margin-bottom: 24px;
}

.fps-filter-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.fps-filter-label {
	font: 600 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #ffffff;
	padding-top: 7px;
	min-width: 80px;
	flex-shrink: 0;
	white-space: nowrap;
}

.fps-filter-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* ── Chips ────────────────────────────────────────────────────────────────── */

.fps-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	border-radius: 999px;
	font: 600 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #ffffff;
	background: transparent;
	border: 1px solid #2E384A;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 150ms, color 150ms, background-color 150ms;
	cursor: pointer;
}

.fps-chip:hover {
	color: #F2F4F7;
	border-color: #3D4A60;
	text-decoration: none;
}

.fps-chip--active {
	background: #1F3145;
	border-color: #5B8AB8;
	color: #ffffff;
}

/* GPU vendor dots via href attribute selectors — no JS needed */
.fps-chip[href*="nvidia"]::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #76B900;
	flex-shrink: 0;
}
.fps-chip[href*="amd-rx"]::before,
.fps-chip[href*="manufacturer=amd"]::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ED1C24;
	flex-shrink: 0;
}
.fps-chip[href*="intel-arc"]::before,
.fps-chip[href*="manufacturer=intel"]::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0071C5;
	flex-shrink: 0;
}

/* ── Result count ─────────────────────────────────────────────────────────── */

.fps-result-count {
	text-align: right;
	padding: 4px 0 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.fps-cat-title {
		font-size: 36px;
	}
	.fps-filter-label {
		min-width: 0;
		width: 100%;
	}
	.fps-filter-row {
		flex-direction: column;
		gap: 8px;
	}
}

/* ── Mount placeholders (CLS mitigation) ─────────────────────────────────── */
/* Reserve approximate heights while shortcode HTML is being injected.
   These elements are replaced entirely once content arrives, so the heights
   only matter for the brief window between first paint and script execution. */

[data-fps-sc="fps_category_header"]     { min-height: 130px; }
[data-fps-sc="fps_generation_filter"]   { min-height: 56px;  }
[data-fps-sc="fps_manufacturer_filter"] { min-height: 56px;  }
[data-fps-sc="fps_result_count"]        { min-height: 20px;  }