/* ── More Events ──────────────────────────────────────────────────
 * The location-scoped "More Events" band shared by the city pages
 * (page-templates/los-angeles.php, new-york.php): section title, the
 * category filter bar, and the hidden-card rule the filter relies on.
 * Card markup + .event-grid come from event-card.css, which must be
 * enqueued alongside this sheet. Was la-page.css until the NY page grew
 * the same section.
 * ────────────────────────────────────────────────────────────────── */

.more-events__title {
	margin: 0 0 var(--space-05);
	font-size: 4.115rem; /* 65.84px — family + tracking from .kodansha-black */
	line-height: 1.1;
	color: var(--color-text);
}

.more-events {
	background: var(--color-background-pale);
	padding: var(--space-07) 0;
	scroll-margin-top: var(--site-header-bump);
}

/* ── More Events filter bar ───────────────────────────────────────
 * Equal-width category tabs above the grid. The active tab (and any
 * hovered tab) inverts to solid black. Filtering itself is handled by
 * js/event-filter.js, which toggles the `hidden` attribute on cards.
 * ────────────────────────────────────────────────────────────────── */

.event-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-04);
	margin-bottom: var(--space-06);
}

.event-filter__btn {
	flex: 1 1 8rem;
	padding: 1rem 1.25rem;
	background: var(--color-white);
	border: var(--border-width-md) solid var(--color-black);
	color: var(--color-black);
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.event-filter__btn:hover,
.event-filter__btn:focus-visible {
	background: var(--color-black);
	color: var(--color-white);
}

.event-filter__btn.is-active {
	background: var(--color-black);
	color: var(--color-white);
}

.event-grid .event-card[hidden] {
	display: none;
}