/* Simple styling for Courses Filter */
.ecf-filter {
	margin: 0 0 1.5em;
	font-family: Arial, sans-serif;
}

.ecf-row {
	margin: .5em 0;
}

.ecf-row label {
	/* fallback baseline for labels; specific rules below will
	   arrange option labels one-per-line while leaving section
	   title labels untouched */
	display: inline-block;
	margin-right: .5em;
}

/* Radio/checkbox option labels should be stacked vertically and
   separate from section headings. All labels which are NOT
   .ecf-title-label will become block-level and show one-per-line. */
.ecf-row label:not(.ecf-title-label) {
	display: block;
	margin: .35em 0;
	font-weight: 400;
}

/* Tidy radio/checkbox spacing so the control sits to the left */
.ecf-row input[type="radio"], .ecf-row input[type="checkbox"] {
	margin-right: .6em;
	margin-left: 0;
	vertical-align: middle;
}

.ecf-submit {
	padding: .4em .8em;
	cursor: pointer;
}

.ecf-search-row {
	margin-bottom: .75em;
}

.ecf-search {
	width: 100%;
	max-width: 420px;
	padding: .45em .6em;
	border: 1px solid #ddd;
	border-radius: 3px;
}

.ecf-category {
	display: inline-block;
	vertical-align: middle;
	max-width: 70%;
}

/* Try to make counts inside the native <option> text appear smaller and grey.
	Note: browser support for styling <option> is limited; this is best-effort.
	For full control consider a custom dropdown component. */
.ecf-category option {
	color: #666;
	font-size: 0.9em;
}

.ecf-category {
	color: inherit;
}

.ecf-results {
	margin-top: 1em;
}

.ecf-item {
	border-bottom: 1px solid #eee;
	padding: .6em 0;
}

.ecf-title {
	margin: 0 0 .25em;
	font-size: 1.05em;
}

.ecf-excerpt {
	color: #666;
	font-size: .95em;
}

.ecf-loading {
	color: #0073aa;
}

.ecf-no-results {
	color: #666;
}

.ecf-error {
	color: #d54e21;
}

.ecf-count {
	color: #888;
	font-size: 0.85em;
	margin-left: .3em;
	display: inline-block;
	vertical-align: middle;
}

.ecf-count-style {
	color: #888;
	font-size: 0.2em;
	margin-left: .3em;
}

/* Category badges (styleable, clickable) */
.ecf-category-badges {
	margin-top: .5rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.ecf-cat-badge {
	background: #f3f4f6;
	border-radius: 999px;
	padding: .25rem .6rem;
	font-size: .92rem;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
.ecf-cat-badge:focus {
	outline: 2px solid rgba(11,107,191,0.25);
}
.ecf-badge-count {
	background: #536d9e;
	color: #fff;
	padding: .08rem .4rem;
	border-radius: 999px;
	margin-left: .4rem;
	font-weight: 600;
	font-size: .85rem;
}

/* Active badge styling */
.ecf-cat-badge.active {
	background: #0b6bbf;
	color: #fff;
}
.ecf-cat-badge.active .ecf-badge-count {
	background: #fff;
	color: #0b6bbf;
}

/* Section title labels (distinct from option labels) */
.ecf-title-label {
	display: block;
	margin: 1em .5em .5em 0em;
	font-weight: 700;
	font-size: 1rem;
	color: #222;
}
.ecf-title-category { color: #0b6bbf; border-left: 4px solid #0b6bbf; padding-left: .6em; }
.ecf-title-payment  { color: #d35400; border-left: 4px solid #d35400; padding-left: .6em; }
.ecf-title-difficulty { color: #27ae60; border-left: 4px solid #27ae60; padding-left: .6em; }

/* Keep radio/option labels visually lighter so they don't mix with section titles */
.ecf-row label:not(.ecf-title-label) { font-weight: 400; color: inherit; }

/* Counter badge for the category select (placed next to the <select>) */
.ecf-count-select {
	color: #888;
	font-size: 0.85em;
	margin-left: .6em;
	display: inline-block;
	vertical-align: middle;
}

.ecf-row .ecf-count-select {
	margin-top: 0;
}

/* Responsive shell: desktop two-column, mobile off-canvas filter panel */
.ecf-shell {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 20px;
	align-items: start;
}

.ecf-filter-wrap {
	/* filter panel container */
	min-width: 0; /* prevents flex/grid overflow and satisfies linters */
}

.ecf-results-wrap {
	/* results container */
	min-width: 0; /* prevents flex/grid overflow and satisfies linters */
}

.ecf-filter-toggle {
	display: none;
}

.ecf-backdrop {
	display: none;
}

@media (max-width: 860px) {
	.ecf-shell {
		grid-template-columns: 1fr;
	}

	.ecf-filter-toggle {
		display: inline-block;
		margin-bottom: 8px;
		padding: .5em .9em;
		border: 1px solid #ddd;
		background: #fff;
		border-radius: 6px;
		cursor: pointer;
	}

	/* Off-canvas panel */
	.ecf-filter-wrap {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 280px;
		max-width: 85%;
		transform: translateX(-100%);
		transition: transform .28s ease;
		z-index: 10020;
		background: #fff;
		box-shadow: 2px 0 14px rgba(0, 0, 0, 0.12);
		overflow: auto;
		padding: 18px;
	}

	.ecf-filter-wrap {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 280px;
		max-width: 85%;
		transform: translateX(-100%);
		transition: transform .28s ease;
		z-index: 10020;
		background: #fff;
		box-shadow: 2px 0 14px rgba(0, 0, 0, 0.12);
		overflow: auto;
		padding: 18px;
	}

	.ecf-filter-close {
		position: absolute;
		top: 10px;
		right: 10px;
		background: transparent;
		border: none;
		font-size: 1.4rem;
		line-height: 1;
		padding: 6px;
		cursor: pointer;
		color: #333;
		border-radius: 4px;
	}

	.ecf-filter-close:focus {
		outline: 2px solid #0b6bbf;
	}

	.ecf-results-wrap {
		padding-top: 8px;
	}

	.ecf-shell.ecf-open .ecf-filter-wrap {
		transform: translateX(0);
	}

	.ecf-backdrop {
		display: none;
	}

	.ecf-shell.ecf-open .ecf-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 10010;
	}

	/* prevent body scroll when open */
	body.ecf-panel-open {
		overflow: hidden;
	}
}

/* Grid / Card styles for course results */
.ecf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.ecf-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ecf-thumb {
	display: block;
	width: 100%;
	height: 180px;
	overflow: hidden;
	background: #f5f5f5;
}

.ecf-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ecf-thumb-fallback {
	width: 100%;
	height: 180px;
	background: linear-gradient(135deg, #f7f7f7, #efefef);
}

.ecf-card-body {
	padding: 12px 14px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.ecf-card-cat {
	font-size: 12px;
	color: #555;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ecf-meta {
	margin: 6px 0;
}

.ecf-meta-item {
	display: inline-block;
	background: #f0f6ff;
	color: #0b6bbf;
	padding: .25em .5em;
	border-radius: 12px;
	font-size: 12px;
	margin-right: .4em;
}

.ecf-card .ecf-title {
	font-size: 1rem;
	margin: 0 0 .4em;
}

/* Course title link color override to ensure consistent brand color */
.ecf-card .ecf-title a,
.ecf-title a {
	color: #170a75;
}

.ecf-card .ecf-excerpt {
	color: #555;
	font-size: 0.92rem;
	margin-top: auto;
}

/* Simple pagination styling */
.ecf-pagination {
	text-align: center;
	margin: 1em 0;
}

.ecf-pagination a {
	color: #170a75;
	margin: 0 6px;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 6px;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Active page: circular badge */
.ecf-pagination .ecf-page.current,
.ecf-pagination a.current {
	display: inline-flex;
	width: 40px;
	height: 40px;
	padding: 0;
	font-weight: 600; /* stronger emphasis for active page */
	background: #2f1cb8;
	color: #fff;
	border-radius: 50%; /* circle */
	box-shadow: 1px 1px 8px rgba(23,10,117,0.14);
	transform: translateY(-2px);
}

/* Ensure focused/keyboard state is visible for accessibility */
.ecf-pagination a.current:focus,
.ecf-pagination a.current:focus-visible {
	outline: 3px solid rgba(23,10,117,0.18);
	outline-offset: 3px;
}

.ecf-pagination .ecf-prev,
.ecf-pagination .ecf-next {
	font-weight: 700;
	color: #170a75;
}

.ecf-actions{
	margin-top: 2rem;
}

/* Hide the in-panel close button on larger screens where the filter
   panel is always visible (desktop/PC layout). It should only be
   visible in the mobile off-canvas overlay. */
@media (min-width: 861px) {
	.ecf-filter-close {
		display: none !important;
	}

	/* Use a responsive aspect ratio for thumbnails so images always
	   cover the area without forcing an excessive fixed height that
	   can create large gaps. This keeps cards consistent and avoids
	   the large whitespace you observed. */
	/* Make grid items stretch so cards are consistent, and ensure the
	   image area fills the top of the card with no gap. Use a slightly
	   taller aspect ratio (4:3) for a more prominent thumbnail on PC. */
	.ecf-grid {
		align-items: stretch;
	}

	.ecf-card {
		display: flex;
		flex-direction: column;
	}

	a.ecf-thumb,
	.ecf-thumb {
		display: block;
		width: 100%;
		overflow: hidden;
		background: #f5f5f5;
	}

	/* Taller aspect ratio to reduce empty area below the image */
	.ecf-thumb {
		aspect-ratio: 4/3;
		flex: 0 0 auto;
	}

	.ecf-thumb-fallback {
		width: 100%;
		aspect-ratio: 4/3;
		background: linear-gradient(135deg, #f7f7f7, #efefef);
	}

	/* Ensure there is no inline-gap and the image always covers */
	.ecf-thumb img {
		display: block !important;
		width: 100%;
		height: 100% !important;
		object-fit: cover !important;
		margin: 0;
	}

	/* Remove any default margins that might create visual gaps */
	.ecf-card>.ecf-thumb {
		margin: 0;
		padding: 0;
	}

	.ecf-card-body {
		margin-top: 0;
	}
}