/* Guide listings (category.php): featured build + text cards. Site tokens from design.css. */

:root { --jba-gutter: 32px; --jba-end: 112px; } /* page-end gap matches the other redesigned pages */
.jba {
	width: min(var(--jb-cw, 1270px), 100%);
	margin: 0 auto var(--jba-end);
	padding-top: 40px;
	display: grid;
	gap: 20px;
}
.jba a { color: inherit; text-decoration: none; }
.jba a:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }

/* topic links */
.jba-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.jba-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 16px; font-size: 14.5px; border: 1px solid var(--ink-border); border-radius: var(--r-pill); transition: border-color .15s ease-out; }
.jba .jba-topics .jba-pill { color: var(--cream-100) !important; } /* a site-wide link colour otherwise wins */
.jba-pill:hover { border-color: var(--glow-500); }
.jba-pill small { font: 400 12px/1 'Space Mono', monospace; color: var(--cream-400); }
.jba .jba-topics .jba-pill[aria-current="page"] { border-color: var(--glow-500); color: var(--glow-300) !important; background: var(--pool-soft); }

.jba-tag, .jba-meta { font: 400 11.5px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-400); }

/* featured build */
.jba-feature {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px 48px;
	padding: 32px;
	background: var(--ink-900);
	border: 1px solid var(--glow-border);
	border-radius: var(--r-card);
	transition: border-color .15s ease-out;
}
.jba-feature:hover { border-color: var(--glow-500); }
.jba-feature-main, .jba-feature-side { display: flex; flex-direction: column; gap: 12px; }
.jba-feature .jba-tag:first-child { color: var(--glow-300); }
.jba-feature-t { font: 400 clamp(28px, 3vw, 40px)/1.15 'Lora', serif; color: var(--cream-100); text-wrap: balance; }
.jba-feature-x { font-size: 17px; line-height: 1.6; color: var(--cream-400); max-width: 62ch; }
.jba-feature-main .jba-meta { margin-top: auto; }
.jba-feature-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.jba-feature-list li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; color: var(--cream-100); }
.jba-feature-go { margin-top: auto; font-weight: 600; color: var(--glow-300); }

/* cards */
.jba-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jba-grid li { margin: 0; }
/* no orphans: a leftover card on the last row stretches across the empty columns */
.jba-grid li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.jba-grid li:last-child:nth-child(3n+2) { grid-column: span 2; }
.jba-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); transition: border-color .15s ease-out; }
.jba-card:hover { border-color: var(--glow-700); }
.jba-card-t { font: 400 21px/1.3 'Lora', serif; color: var(--cream-100); text-wrap: balance; }
.jba-card-x { font-size: 15px; line-height: 1.55; color: var(--cream-400); }
.jba-card .jba-meta { margin-top: auto; padding-top: 4px; }
.jba-empty { color: var(--cream-400); }
.jba-empty a { color: var(--glow-300) !important; }

@media (max-width: 1000px) {
	.jba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jba-grid li:last-child:nth-child(3n+1), .jba-grid li:last-child:nth-child(3n+2) { grid-column: auto; }
	.jba-grid li:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	:root { --jba-gutter: 64px; --jba-end: 80px; }
	.jba { padding-top: 32px; }
	.jba-feature { grid-template-columns: minmax(0, 1fr); padding: 24px; }
}
@media (max-width: 560px) {
	:root { --jba-gutter: 32px; --jba-end: 56px; }
	.jba-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.jba-grid li:last-child:nth-child(n) { grid-column: auto; }
	.jba-card { padding: 20px; }
	.jba-feature { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .jba-pill, .jba-card, .jba-feature { transition: none; } }