/* COURSE OVERVIEW PAGE — page-specific tweaks on top of index.css's
   shared chrome (util-bar, header, canvas frame, buttons, footer, wa-btn). */

#courses-hero { min-height: 55vh; padding: 160px 6% 50px; justify-content: center; }

@media (max-width: 768px) {
  #courses-hero { padding: 100px 5% 36px; min-height: 50vh; }
}
#courses-hero .hero-sub { margin: 14px auto 0; text-align: center; }

#cta { justify-content: center; }

/* --- search box above filter chips --- */
.search-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.course-search {
  width: 100%; max-width: 420px; padding: 11px 18px; border-radius: 30px;
  border: 1px solid var(--card-border); background: var(--card-bg);
  color: var(--text); font-family: var(--body); font-size: 14px;
  backdrop-filter: blur(8px); transition: var(--fast);
}
.course-search::placeholder { color: var(--muted); }
.course-search:focus { outline: none; border-color: var(--teal); }
.results-count { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

/* --- course thumbnail images (replaces background-image cards) --- */
.course-img { background: rgba(var(--teal-rgb), 0.08); }
.course-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- fees & scholarships highlight --- */
.fee-highlight {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-left: 3px solid var(--gold);
  border-radius: 14px; padding: 18px 22px; margin-bottom: 28px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fee-highlight .ico { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.fee-highlight h3 { font-size: 0.95rem; color: var(--text); }
.fee-highlight p { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* --- empty filter state --- */
.courses-empty {
  display: none;
  text-align: center;
  color: var(--muted);
  padding: 30px 0;
  font-size: 0.9rem;
}
.courses-empty.show { display: block; }