/**
 * WSDC before and afters hub. Loaded on template-before-afters.php on top of
 * main.css and treatment.css (the .td-ba-card, .ba-split and .ba-tag styles
 * come from treatment.css so cards match the rest of the site).
 *
 * @package wsdc
 */

/* ── In-hero search and filter tags ─────────────────────────────────── */
.ba-hero__tools { width: 100%; max-width: 640px; margin: var(--s-5) 0 0; }
/* The search field uses the shared .hero-search pill (main.css) so it matches
   every other landing page. Only its spacing within the hero is set here. */
.ba-hero__form { margin: 0 0 var(--s-4); max-width: 560px; }

.ba-hero__chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-start; }
.ba-hero__chip {
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 999px;
	padding: .5rem 1.05rem;
	cursor: pointer;
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.ba-hero__chip:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.ba-hero__chip.is-active { background: #fff; color: var(--mirage); border-color: #fff; }
.ba-hero__count { margin: var(--s-4) 0 0; font-size: .85rem; color: rgba(255,255,255,.82); }
.ba-hero__count[hidden] { display: none; }

/* ── Results ────────────────────────────────────────────────────────── */
.bahub { padding-block: var(--section-y); }
/* The card, group and load-more use non-default display, which would override
 * the hidden attribute, so make hidden win for filtering. */
.bahub [hidden] { display: none !important; }

.ba-group { margin-bottom: var(--s-8); }
.ba-group:last-of-type { margin-bottom: 0; }
.ba-group__title {
	display: flex;
	align-items: center;
	gap: .9rem;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.7rem;
	color: var(--mirage);
	margin: 0 0 var(--s-5);
}
.ba-group__rule { width: 28px; height: 2px; background: var(--barley); flex: none; }
.ba-group__n {
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	color: var(--ink-muted);
	background: var(--light-grey);
	border-radius: 999px;
	padding: .12rem .6rem;
}
.ba-group__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6) var(--s-4);
}
.ba-group__more { margin-top: var(--s-5); text-align: center; }
.ba-empty { color: var(--ink-muted); font-size: 1rem; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ba-group__grid { grid-template-columns: repeat(2, 1fr); }
	.ba-group__title { font-size: 1.45rem; }
}
@media (max-width: 560px) {
	.ba-group__grid { grid-template-columns: 1fr; }
}