/**
 * Learnomy — Catalog stylesheet.
 *
 * Page-specific styles for /courses/ (course-archive.php) and
 * /courses/category/{slug}/ (category-archive.php). Loaded only on
 * those routes via Template_Loader::enqueue_assets() so other pages
 * don't pay for the filter-bar CSS (the view toggle + list view are in
 * shared/course-list-layout.css).
 *
 * Shared primitives consumed but not owned here:
 *   .lrn-course-card*, .lrn-wishlist-btn*, .lrn-empty-state*,
 *   .lrn-grid (base grid utility), .lrn-load-more
 * Those live in learnomy.css because dashboards, single-course, and
 * blocks all render them too.
 *
 * Responsive contract: 1024px (tablet ↔ desktop) and 640px (mobile) only.
 * No intermediate breakpoints. The previous 17-breakpoint sprawl is what
 * this slice is extracting away from. Only a 640px query remains directly
 * in this file (search-suggest tap floor) — the grid's own 1024/1440/640
 * column rules moved to shared/course-list-layout.css (Basecamp
 * 10350179892), which is where My Courses can actually load them too.
 *
 * @package Learnomy
 */

/* ==========================================================================
   Filter bar — search + category + sort + grid/list toggle
   ========================================================================== */

.lrn-filter-bar {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-3);
	flex-wrap:     wrap;
	margin-bottom: var(--lrn-sp-6);
}

.lrn-filter-bar__form {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-3);
	flex-wrap:   wrap;
	flex:        1;
	margin:      0;
	padding:     0;
}

.lrn-filter-bar__search {
	flex:      1;
	min-width: 180px;
}

.lrn-filter-bar__category,
.lrn-filter-bar__sort {
	flex-shrink: 0;
}

/* The grid/list toggle, the course grid's column rules (--cols-N, the
   height-fill li rules) and the list-view layout all live in
   shared/course-list-layout.css: My Courses uses them too, and that sheet
   is the one both routes load (Basecamp 10350179892 — this file only ever
   loads on catalog/category, so a column rule here could never reach
   /account/courses/). */

/* ── Search autocomplete dropdown (BC #10043289391) ─────────────────────── */
.lrn-search-suggest-wrap {
	position: relative;
}

.lrn-search-suggest {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + var(--lrn-sp-2));
	z-index: 20;
	background: var(--lrn-bg);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--lrn-text) 14%, transparent);
	max-height: 320px;
	overflow-y: auto;
}

.lrn-search-suggest[hidden] {
	display: none;
}

.lrn-search-suggest__item {
	display: block;
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	color: var(--lrn-text);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--lrn-border) 60%, transparent);
}

.lrn-search-suggest__item:last-child {
	border-bottom: 0;
}

.lrn-search-suggest__item:hover,
.lrn-search-suggest__item:focus,
.lrn-search-suggest__item.is-active {
	background: var(--lrn-bg-hover);
	color: var(--lrn-accent);
}

.lrn-search-suggest__empty {
	margin: 0;
	padding: var(--lrn-sp-3);
	color: var(--lrn-text-secondary);
}

.lrn-search-suggest__empty[hidden] {
	display: none;
}

/* Tap floor (technique 1, see "Tap targets" in learnomy.css). A suggestion row
   is 8px of padding around 14px text, so it renders ~37px. It sits at the end
   of the file rather than in the 640px block above because the component's own
   `display: block` is declared later and would otherwise win on source order. */
@media (max-width: 640px) {
	.lrn-search-suggest__item {
		display:     flex;
		align-items: center;
		min-height:  var(--lrn-touch-min);
	}
}

/*
 * Catalog search submit.
 *
 * The grid layout shipped without one: its only buttons were the view
 * toggles, so Enter was the sole way to run a search and nothing said so
 * (Basecamp 10171341067). Typing deliberately does not live-filter, since a
 * debounced reload used to eat characters mid-word (10042899710), which makes
 * a visible control the only honest affordance.
 */
.lrn-filter-bar__submit {
	flex-shrink: 0;
}