/**
 * Manhaj LMS — catalog context styles.
 *
 * @package Manhaj\LMS
 */

.mj-catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s3);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mj-s4);
}

.mj-catalog__count {
	margin: 0;
	color: var(--mj-muted);
	font-size: var(--mj-fs-sm);
}

.mj-catalog__views { display: inline-flex; gap: 4px; padding: 4px; background: var(--mj-line-2); border-radius: var(--mj-r-pill); }

.mj-catalog__views .mj-btn {
	min-height: 32px;
	padding: 4px 12px;
	background: transparent;
	color: var(--mj-muted);
	font-size: 12px;
}

.mj-catalog__views .mj-btn.is-active {
	background: var(--mj-surface);
	color: var(--mj-brand-600);
	box-shadow: var(--mj-sh-1);
}

.mj-catalog__pills { display: flex; flex-wrap: wrap; gap: var(--mj-s2); margin-bottom: var(--mj-s4); }

.mj-catalog__pill {
	padding: 6px 14px;
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-pill);
	background: var(--mj-surface);
	color: var(--mj-ink-2);
	font-size: var(--mj-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.mj-catalog__pill.is-active,
.mj-catalog__pill:hover {
	border-color: var(--mj-brand);
	color: var(--mj-brand-600);
	background: var(--mj-brand-50);
}

.mj-catalog__load-more { display: grid; justify-items: center; margin-top: var(--mj-s6); }

.mj-course-list .mj-course-card { flex-direction: row; }

@media (max-width: 720px) {
	.mj-course-list .mj-course-card { flex-direction: column; }
	.mj-catalog__toolbar { gap: var(--mj-s2); }
}