/* ==========================================================================
   HOME › Programs + course grids — template-parts/home/programs.php,
   tutor/archive-course.php. Card styles live in components.css.
   ========================================================================== */

.programs {
	padding-top: calc(var(--section-y) + 24px);
}

.programs__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin-bottom: var(--s-6);
}

.programs__head .section-head {
	margin-bottom: 0;
}

/* Filter tabs (shared with resources/archive) */
.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--s-6);
}

.tab {
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-pill);
	background: var(--color-surface);
	color: var(--color-text-2);
	font: 700 var(--fs-sm) / 1 var(--font-sans);
	cursor: pointer;
	transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.tab:hover {
	border-color: var(--dli-green-300);
	color: var(--color-primary-text);
}

.tab.is-active {
	border-color: var(--color-invert-bg);
	background: var(--color-invert-bg);
	color: var(--color-invert-text);
}

.programs__grid .course-card.is-filtered {
	display: none;
}