/* Gigxie — browse/search page */

/* ---------- Page head ----------
   Vertical rhythm, all multiples of 8:
   40 above h1 · 24 blurb→chips · 24 chips→toolbar · 24 toolbar→(chips)→grid · 32 →grid */
.browse-head { padding: 40px 0 0; }
.browse-head .breadcrumbs { margin-bottom: 16px; }
.browse-head h1 { font-size: var(--fs-h3); letter-spacing: -0.02em; margin-bottom: 8px; }
.browse-head .browse-blurb { font-size: 18px; color: var(--body); max-width: 62ch; }
@media (max-width: 720px) {
  .browse-head { padding-top: 32px; }
  .browse-head .browse-blurb { font-size: 16px; }
}

/* ---------- Subcategory chip row ---------- */
.subcat-row { margin-top: 24px; }
.subcat-row .chip { font-size: 13px; }   /* padding comes from .chip: 8px 16px */

/* ---------- Toolbar ---------- */
.browse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 0;
}
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Dropdown-styled-as-chip select */
.fselect { position: relative; display: inline-flex; }
.fselect select {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 36px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease), transform var(--ease);
}
.fselect select:active { transform: scale(.97); }
.fselect::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  color: var(--muted);
  pointer-events: none;
  transition: color var(--ease);
}
.fselect select:hover { border-color: var(--brand); color: var(--brand); }
.fselect:hover::after { color: var(--brand); }
.fselect select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fselect select.is-set { background: var(--ink); border-color: var(--ink); color: #fff; }
.fselect:has(select.is-set)::after { color: #fff; }

/* Rating toggle chip */
.chip-rating svg { width: 14px; height: 14px; fill: var(--star); flex: none; }
.chip-rating[aria-pressed="true"] svg { fill: var(--accent); }

/* The sort row always takes its own line. Sharing the toolbar's first line put it
   exactly on the wrap threshold at 1280px, so whether it wrapped depended on how
   many characters the result count happened to have ("3 services available" fitted,
   "24 services available" did not) — and any filter change could grow the toolbar
   by ~50px and shove the entire grid down the page. */
.sort-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex-basis: 100%;
}
/* Reserved width: without it the count's own text ("3 services available" vs
   "Showing 1–24 of 96") decides whether the sort row wraps, so changing a filter
   could grow the toolbar by ~50px and shove the whole grid down the page. */
.result-count { font-size: 14px; color: var(--muted); white-space: nowrap; min-width: 15rem; text-align: right; }
.sort-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .sort-row { margin-left: 0; width: 100%; justify-content: space-between; }
  /* the sort row already owns its own line here, so nothing depends on the
     count's width — reserving 15rem of it would just wrap on a phone */
  .result-count { min-width: 0; text-align: left; }
}

/* ---------- Active filter chips ---------- */
.active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
#result-count:focus { outline: none; }
#result-count:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
/* .browse-toolbar, .chip-row and .active-filters all set display, which would beat
   the UA's zero-specificity [hidden] rule. components.css carries one global
   `[hidden] { display: none !important }` that covers all three — don't re-patch
   them one at a time here. */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 16px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 600;
  border: 0;
  transition: background var(--ease), color var(--ease);
}
.filter-tag:hover { background: #E7DCFF; }
.filter-tag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.filter-tag .tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(108, 59, 255, .14);
}
.filter-tag .tag-x svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; }
.clear-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  transition: color var(--ease);
}
.clear-all:hover { color: var(--danger); }
.clear-all:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Grid: 4 / 3 / 2 / 1 ---------- */
.browse-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); margin-top: 32px; }
@media (max-width: 1180px) { .browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .browse-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 540px)  { .browse-grid { grid-template-columns: 1fr; } }
/* Hold a screenful open until the first render puts something in the grid. The page
   script fills this from the API, so on a cold load the browser paints the "Keep
   exploring Gigxie" block right under the toolbar and then throws it off the bottom of
   the screen when the cards land — 0.34 of layout shift, all of it from this one jump.
   :empty stops matching the moment the grid has any child, including the no-results
   message, so nothing after the first frame is affected. */
.browse-grid:empty { min-height: 60vh; }

/* Saved heart state lives in components.css (.chip-save), focus ring in .chip:focus-visible. */

/* ---------- Skeleton shimmer ---------- */
.sk-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg);
}
.sk {
  background: linear-gradient(90deg, #EFEFF6 25%, #F9F9FD 50%, #EFEFF6 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s linear infinite;
}
@keyframes sk-shimmer { to { background-position: -200% 0; } }
.sk-thumb { aspect-ratio: 16 / 10; }
.sk-body { padding: 12px 16px 16px; display: grid; gap: 12px; }   /* matches .gig-body */
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.w60 { width: 60%; }
.sk-line.w90 { width: 90%; }
.sk-line.w40 { width: 40%; }

/* Empty state lives in components.css — browse, gig and seller all use it. */

/* ---------- Pagination ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.page-nums { display: flex; align-items: center; gap: 4px; }
.page-nav,
.page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.page-num { padding: 0 8px; border-color: transparent; font-weight: 500; }
.page-nav:not(:disabled):hover,
.page-num:not([aria-current]):hover { border-color: var(--brand); color: var(--brand); }
.page-nav:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
.page-num[aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  cursor: default;
}
.page-gap { min-width: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.page-nav:focus-visible,
.page-num:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 540px) {
  .pager { margin-top: 32px; }
  .page-nav { padding: 0 12px; }
}

/* ---------- Below-grid SEO block ---------- */
.browse-seo {
  margin-top: 72px;
  padding: 40px 0 96px;
  border-top: 1px solid var(--line);
}
.browse-seo .seo-title { font-size: 24px; margin-bottom: 8px; }
.browse-seo .seo-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 32px 0 16px;
}
.seo-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-tags a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.seo-tags a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.seo-faq { max-width: 76ch; }
.seo-faq .accordion-body p { color: var(--body); }
@media (max-width: 720px) {
  .browse-seo { margin-top: 56px; padding: 32px 0 64px; }
}