/**
 * framework/event-listing. The section's look comes from ibia.css (the
 * .ibia-events / __bar / .ibia-segmented / __layout / .ibia-filters rules
 * the hand-built pages used); this file only adds what the block changes.
 *
 * 1. The pills are real <button>s now (they filter, they do not navigate),
 *    so they lose the browser's button chrome and look as the links did.
 * 2. The spacing that used to be keyed to the five listing pages' ids
 *    (ibia.css :is(.page-id-165, …-316) rules) belongs to the block instead,
 *    so it follows the block onto any page.
 */

/* 1 */
.ibia-event-listing .ibia-segmented button.wp-block-button__link {
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.ibia-event-listing .ibia-segmented button.wp-block-button__link:focus-visible {
	outline: var(--fw-focus-width, 2px) solid var(--fw-focus-colour, currentColor);
	outline-offset: 2px;
}
/* Only Upcoming / Past in the bar: keep it on the right. */
.ibia-event-listing .ibia-events__bar > .ibia-segmented--time:only-child { margin-left: auto; }

/* 2 */
.ibia-events.ibia-event-listing { padding-bottom: 0 !important; --ibia-ev-page-bg: transparent; }
.ibia-event-listing .ibia-events__bar { margin-top: 40px !important; border-radius: 4px; }
.ibia-event-listing .ibia-events__layout { margin-top: 39.5px !important; margin-bottom: 0 !important; }
.ibia-event-listing .ibia-filters { margin-top: 0 !important; }
body:has(.ibia-event-listing) .ibia-footer { margin-top: 51px !important; }

/* The heading is a core/heading inside the block: same place as before. */
.ibia-event-listing > .ibia-events__title { margin-top: 40px !important; }

@media (max-width: 900px) {
	.ibia-event-listing .ibia-events__bar { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
}