/*
 * P13-T09 Courses & Events hub: type filter bar.
 *
 * The hub is a Page and lists `iwut_course` items through the canonical
 * `iwut/card` block, so card layout and states live only in card.css. This
 * file is limited to the All / Short Courses / Events filter links that sit
 * above the grid.
 */

.iwut-page-template--hub .course-type-filters {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 auto 36px;
}

.iwut-page-template--hub .course-type-filters .course-type-filter {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid rgba(22, 41, 90, .2);
	background: #fff;
	color: var(--iwut-course-navy, #16295a);
	text-decoration: none;
	font: 600 14px/1 "IWUT Inter", sans-serif;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.iwut-page-template--hub .course-type-filters .course-type-filter:hover,
.iwut-page-template--hub .course-type-filters .course-type-filter:focus-visible,
.iwut-page-template--hub .course-type-filters .course-type-filter.is-active {
	border-color: var(--iwut-course-turquoise, #12938c);
	background: var(--iwut-course-turquoise, #12938c);
	color: #fff;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.iwut-page-template--hub .course-type-filters .course-type-filter {
		transition: none;
	}

	.iwut-page-template--hub .course-type-filters .course-type-filter:hover,
	.iwut-page-template--hub .course-type-filters .course-type-filter:focus-visible,
	.iwut-page-template--hub .course-type-filters .course-type-filter.is-active {
		transform: none;
	}
}