/*
 * Public Tasks browser (2026-09-18, tasks page mockup): full-bleed browse
 * surface for /project-marketplace/ (renamed from /tasks-full-page/
 * 2026-09-22, old URL 301s) - filter sidebar, search + sort bar,
 * active-filter chips, result count, grid/list toggle, task cards,
 * explore-more row. Public tokens (--jfpub-*) with fallbacks; icons are
 * inline SVG (lucide never loads on public pages). Card art is a
 * category tile, never stock photography: tasks carry no images on
 * this install (verified: 0 of 12 published).
 *
 * 2026-09-21: removed the per-card colored-letter tile (Featured badge
 * moved inline next to the title instead) and simplified the header's
 * "Post a task" element down to a plain button, employer/admin-gated -
 * see jobsfor_tasks_browse_shortcode() in functions.php.
 */
.jftb-wrap { margin: 0 auto; padding: 20px 0 56px; }
/* Widths come from the parent theme's own .container class on the wrapper
   (same 1200/1376/960/768/420/300 breakpoints as Search Jobs' own
   .container.wpjm-container) - stride-for-stride parity with zero drift,
   so only vertical padding lives here. */
.jftb-crumbs { font-size: 13px; color: var(--jfpub-muted, #65708a); margin: 0 0 10px; }
.jftb-crumbs a { color: var(--jfpub-blue, #07b1e5); text-decoration: none; }
.jftb-crumbs a:hover { text-decoration: underline; }
.jftb-crumbs span { margin: 0 6px; }
.jftb-head { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.jftb-head h1 { margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -.5px; color: var(--jfpub-navy, #0b2668); }
.jftb-head .jftb-sub { margin: 6px 0 0; font-size: 15px; color: var(--jfpub-muted, #65708a); }
.jftb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 20px; border-radius: var(--jfpub-radius-sm, 8px); border: 1px solid var(--jfpub-blue, #07b1e5); background: var(--jfpub-blue, #07b1e5); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.jftb-btn:hover { background: var(--jfpub-blue-hover, #0698c4); border-color: var(--jfpub-blue-hover, #0698c4); color: #fff; }
.jftb-btn svg { width: 16px; height: 16px; }
.jftb-searchrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.jftb-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: var(--jfpub-surface, #fff); border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-sm, 8px); padding: 0 14px; }
.jftb-search svg { width: 18px; height: 18px; color: var(--jfpub-muted, #65708a); flex: none; }
.jftb-search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 46px; font: inherit; font-size: 14px; color: var(--jfpub-ink, #222); }
.jftb-search input:focus { outline: none; }
.jftb-search:focus-within { border-color: var(--jfpub-blue, #07b1e5); box-shadow: 0 0 0 3px rgba(7, 177, 229, .15); }
.jftb-sort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--jfpub-muted, #65708a); white-space: nowrap; }
.jftb-sort select { height: 46px; padding: 0 12px; border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-sm, 8px); background: var(--jfpub-surface, #fff); font: inherit; font-size: 13.5px; color: var(--jfpub-ink, #222); }
.jftb-countrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.jftb-count { font-size: 14px; font-weight: 600; color: var(--jfpub-navy, #0b2668); }
.jftb-view { display: inline-flex; border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-sm, 8px); overflow: hidden; background: var(--jfpub-surface, #fff); }
.jftb-view a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--jfpub-muted, #65708a); text-decoration: none; }
.jftb-view a svg { width: 15px; height: 15px; }
.jftb-view a.is-on { background: var(--jfpub-surface-blue, #eaf6fd); color: var(--jfpub-blue, #07b1e5); }
.jftb-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; align-items: start; }
.jftb-side { display: grid; gap: 0; }
.jftb-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jftb-side-head h2 { margin: 0; font-size: 17px; color: var(--jfpub-navy, #0b2668); }
.jftb-side-head a { font-size: 13px; color: var(--jfpub-blue, #07b1e5); text-decoration: none; }
.jftb-side-head a:hover { text-decoration: underline; }
.jftb-fgroup { border: 0; border-top: 1px solid var(--jfpub-border, #e1e8f0); padding: 14px 0; margin: 0; min-width: 0; }
.jftb-fgroup > legend, .jftb-flabel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--jfpub-navy, #0b2668); padding: 0; margin-bottom: 10px; }
.jftb-fgroup > legend svg, .jftb-flabel svg { width: 16px; height: 16px; color: var(--jfpub-muted, #65708a); }
.jftb-fgroup select, .jftb-fsel { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-sm, 8px); background: var(--jfpub-surface, #fff); font: inherit; font-size: 13.5px; color: var(--jfpub-ink, #222); box-sizing: border-box; }
.jftb-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--jfpub-ink, #222); padding: 5px 0; cursor: pointer; }
.jftb-check input { width: 17px; height: 17px; accent-color: var(--jfpub-blue, #07b1e5); margin: 0; flex: none; }
.jftb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jftb-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: 20px; border: 1px solid transparent; background: #eef3f8; color: var(--jfpub-ink, #222); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.jftb-chip:hover { border-color: var(--jfpub-blue, #07b1e5); }
.jftb-chip.is-on { background: var(--jfpub-surface-blue, #eaf6fd); border-color: var(--jfpub-blue, #07b1e5); color: var(--jfpub-blue, #07b1e5); font-weight: 700; }
.jftb-chip input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.jftb-more { border: 0; background: none; padding: 8px 0 0; color: var(--jfpub-blue, #07b1e5); font-size: 13px; font-weight: 600; cursor: pointer; }
.jftb-searchbtn { width: 100%; justify-content: center; margin-top: 14px; }
/* Active-filter chips (Search Jobs parity): one chip per filter with its
   own remove link, plus a Clear-all that keeps sort + layout. */
.jftb-activefilters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.jftb-activefilters__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.jftb-activefilters__chip { display: inline-flex; align-items: center; gap: 8px; background: var(--jfpub-surface-blue, #eaf6fd); border: 1px solid #bfe3f7; color: var(--jfpub-navy, #0b2668); font-size: 12.5px; font-weight: 600; padding: 6px 8px 6px 12px; border-radius: 20px; }
.jftb-activefilters__chip--note { background: #fdf3e0; border-color: #f0dcae; }
.jftb-activefilters__remove { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(11, 38, 104, .1); color: inherit; font-size: 14px; line-height: 1; text-decoration: none; }
.jftb-activefilters__remove:hover { background: var(--jfpub-blue, #07b1e5); color: #fff; }
.jftb-activefilters__clear { font-size: 13px; font-weight: 700; color: var(--jfpub-blue, #07b1e5); text-decoration: none; white-space: nowrap; }
.jftb-activefilters__clear:hover { text-decoration: underline; }
/* Explore-more row: outward links to the sibling browse surfaces. */
.jftb-satellites { margin-top: 34px; }
.jftb-satellites__title { margin: 0 0 12px; font-size: 19px; color: var(--jfpub-navy, #0b2668); }
.jftb-satellites__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jftb-sat { display: flex; align-items: center; gap: 14px; background: var(--jfpub-surface, #fff); border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-md, 12px); padding: 18px; text-decoration: none; }
.jftb-sat:hover { border-color: #a5d8f8; }
.jftb-sat__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--jfpub-surface-blue, #eaf6fd); color: var(--jfpub-blue, #07b1e5); }
.jftb-sat__icon svg { width: 20px; height: 20px; }
.jftb-sat__body { display: grid; gap: 2px; min-width: 0; }
.jftb-sat__title { font-size: 15px; font-weight: 700; color: var(--jfpub-navy, #0b2668); }
.jftb-sat__desc { font-size: 12.5px; color: var(--jfpub-muted, #65708a); }
.jftb-sat__arrow { margin-left: auto; color: var(--jfpub-blue, #07b1e5); font-weight: 700; }
.jftb-promo { margin-top: 18px; background: var(--jfpub-surface-blue, #eaf6fd); border-radius: var(--jfpub-radius-md, 12px); padding: 18px 16px; }
.jftb-promo strong { display: block; font-size: 15px; color: var(--jfpub-navy, #0b2668); }
.jftb-promo p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--jfpub-muted, #65708a); }
.jftb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jftb-card { display: flex; flex-direction: column; background: var(--jfpub-surface, #fff); border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-md, 12px); overflow: hidden; box-shadow: var(--jfpub-shadow-card); min-width: 0; }
.jftb-card:hover { border-color: #a5d8f8; }
.jftb-flag { display: inline-flex; align-items: center; gap: 5px; background: #fdf3e0; color: #9a6b1a; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; vertical-align: middle; margin-left: 8px; }
.jftb-flag svg { width: 11px; height: 11px; }
.jftb-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.jftb-title { margin: 0; font-size: 15.5px; line-height: 1.35; font-weight: 700; }
.jftb-title a { color: var(--jfpub-navy, #0b2668); text-decoration: none; }
.jftb-title a:hover { color: var(--jfpub-blue, #07b1e5); }
.jftb-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--jfpub-muted, #65708a); }
.jftb-meta span { display: inline-flex; align-items: center; gap: 4px; }
.jftb-meta svg { width: 12px; height: 12px; }
.jftb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.jftb-pills span { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--jfpub-surface-blue, #eaf6fd); color: #0075bc; }
.jftb-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.jftb-price { margin: 0; min-width: 0; font-size: 17px; font-weight: 800; color: var(--jfpub-navy, #0b2668); font-variant-numeric: tabular-nums; }
.jftb-price small { display: block; font-size: 11px; font-weight: 500; color: var(--jfpub-muted, #65708a); }
.jftb-actions { display: flex; flex-shrink: 0; gap: 8px; align-items: center; margin-left: auto; }
.jftb-heart { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--jfpub-border, #e1e8f0); background: var(--jfpub-surface, #fff); color: var(--jfpub-muted, #65708a); cursor: pointer; }
.jftb-heart:hover { border-color: var(--jfpub-blue, #07b1e5); color: var(--jfpub-blue, #07b1e5); }
.jftb-heart.is-saved { border-color: #f0b4b4; color: #d33; }
.jftb-heart.is-saved svg { fill: currentColor; }
.jftb-heart svg { width: 17px; height: 17px; }
.jftb-bid { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 20px; border-radius: 8px; background: var(--jfpub-blue, #07b1e5); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.jftb-bid:hover { background: var(--jfpub-blue-hover, #0698c4); color: #fff; }
/* List view: horizontal cards. */
.jftb-grid.is-list { grid-template-columns: 1fr; }
.jftb-empty { text-align: center; padding: 48px 20px; color: var(--jfpub-muted, #65708a); }
.jftb-empty h2 { color: var(--jfpub-navy, #0b2668); font-size: 19px; margin: 0 0 8px; }
.jftb-empty p { margin: 0 0 16px; font-size: 14px; }
.jftb-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.jftb-pager a, .jftb-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--jfpub-border, #e1e8f0); background: var(--jfpub-surface, #fff); font-size: 13.5px; font-weight: 600; color: var(--jfpub-ink, #222); text-decoration: none; }
.jftb-pager a:hover { border-color: var(--jfpub-blue, #07b1e5); color: var(--jfpub-blue, #07b1e5); }
.jftb-pager .is-cur { background: var(--jfpub-blue, #07b1e5); border-color: var(--jfpub-blue, #07b1e5); color: #fff; }
.jftb-mobilebar { display: none; }
@media (max-width: 1080px) {
	.jftb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jftb-layout { grid-template-columns: 1fr; }
	.jftb-side { display: none; border: 1px solid var(--jfpub-border, #e1e8f0); border-radius: var(--jfpub-radius-md, 12px); padding: 16px; background: var(--jfpub-surface, #fff); }
	.jftb-layout.show-filters .jftb-side { display: grid; }
	.jftb-mobilebar { display: flex; margin-bottom: 12px; }
}
@media (max-width: 640px) {
	.jftb-grid { grid-template-columns: 1fr; }
	.jftb-grid.is-list .jftb-card { flex-direction: column; }
	.jftb-head h1 { font-size: 28px; }
	.jftb-wrap { padding-top: 14px; padding-bottom: 40px; }
	.jftb-satellites__row { grid-template-columns: 1fr; }
}