fix: address mobile UI review findings (#16)

- Hide desktop .card-section on mobile, add .m-search-input with same
  HTMX attrs for mobile course search (fixes horizontal overflow)
- Remove dead layoutCount var and .m-layouts-pill block in course-cards
- Remove dead 768px breakpoints from players.css (table hidden at 880px)
- Move .mobile-section-head inside else-block for empty state in both
  ratings-cards and course-cards (fixes section head showing on empty)
- Add tabindex, role=button, aria-expanded, onkeydown to .m-card and
  .m-course-card; toggle aria-expanded in JS toggle functions
- Fix data-history attribute to use <%=  (HTML-escaped) instead of <%-
- Convert var to const/let in all new/changed JS blocks

views/pages/courses.ejs

@@ -25,6 +25,18 @@
             <button class="m-tab-pill__btn m-tab-pill__btn--disabled" type="button" disabled>Import from Tjing</button>
         </div>
 
+        <!-- Mobile search input (hidden on desktop, shown on mobile via CSS) -->
+        <input
+            type="text"
+            class="m-search-input"
+            id="course-search-mobile"
+            name="q"
+            placeholder="Search courses by name or city..."
+            hx-get="/partials/course-table"
+            hx-trigger="input changed delay:300ms, search"
+            hx-target="#courses-table"
+        />
+
         <div id="courses-table" hx-get="/partials/course-table" hx-trigger="load"></div>
 `; %>