/* StreetTasker: category icons and the Browse by category grid (js/categories.js). Tokens only. */
.st-cat-ico { display: inline-block; width: 1em; height: 1em; color: var(--home-cat-icon); flex: 0 0 auto; vertical-align: middle; }
.cc-cat-icon .st-cat-ico { width: 62%; height: 62%; }
.filter-chip .st-cat-ico, .hf-chip .st-cat-ico, .pt-chip .st-cat-ico { width: var(--text-base); height: var(--text-base); margin-right: var(--space-1); }
.hf-chip.active .st-cat-ico, .filter-chip.active .st-cat-ico { color: currentColor; }
.pt-chip .st-cat-ico { width: 1.1em; height: 1.1em; }

/* THE category tile (one style for the whole site; the logged-in homepage row and the landing page grid both use it):
   white tile, small dark-green icon top-left, pale quarter ring in the top-right corner, bold label at the bottom, no count.
   Row spacing is --home-cat-gap (normal spacing). Do not restyle it in a page. DESIGN-SYSTEM.md 4.16. */
.st-catgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--home-cat-gap); margin: 0; padding: 0; list-style: none; }
.st-cattile, .cc-card.cc-card--category {
  position: relative; overflow: hidden; box-sizing: border-box;
  flex: 0 0 var(--home-cat-w); width: var(--home-cat-w); height: var(--home-cat-h); padding: 0 var(--space-1) var(--home-cat-pad-bottom);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; text-align: center; text-decoration: none;
  background: var(--color-bg); border: 0; border-radius: var(--home-cat-radius); box-shadow: var(--home-cat-shadow); color: var(--home-cat-label);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.st-cattile:hover, .cc-card.cc-card--category:hover { background: var(--color-bg); box-shadow: var(--home-cat-shadow-hover); transform: translateY(-2px); }
.st-cattile:focus-visible, .cc-card.cc-card--category:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.st-cattile::before, .cc-card.cc-card--category::before {   /* quarter ring centred on the top-right corner */
  content: ""; position: absolute; top: var(--home-cat-ring-top); right: var(--home-cat-ring-right); width: var(--home-cat-ring-size); height: var(--home-cat-ring-size); box-sizing: border-box;
  border: var(--home-cat-ring-width) solid var(--home-cat-ring); border-radius: 50%; pointer-events: none;
}
.st-cattile > .st-cat-ico, .cc-card.cc-card--category .cc-cat-icon { position: absolute; top: var(--home-cat-icon-top); left: var(--home-cat-icon-left); width: var(--home-cat-icon-size); height: var(--home-cat-icon-size); }
.cc-card.cc-card--category .cc-cat-icon { border-radius: 0; background: none; color: var(--home-cat-icon); font-size: var(--home-cat-icon-size); line-height: 1; }
.cc-card.cc-card--category .cc-cat-icon .st-cat-ico { width: 100%; height: 100%; display: block; }
.st-cattile-label, .cc-card.cc-card--category .cc-cat-label { position: relative; font-family: var(--font-heading); font-size: var(--home-cat-label-size); font-weight: 700; line-height: 1.15; color: var(--home-cat-label); overflow-wrap: normal; }
.cc-card.cc-card--category .cc-cat-count { display: none; }
.cc-card.cc-card--category.cc-skel { background: var(--color-bg); }
@media (max-width: 768px) {
  /* phones: one row, swipe sideways; same tile, same gap */
  .st-catgrid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(-1 * var(--home-pad, var(--space-5))); padding: var(--space-1) var(--home-pad, var(--space-5)) var(--space-2); }
  .st-catgrid::-webkit-scrollbar { display: none; }
  .st-catgrid > li { flex: 0 0 auto; scroll-snap-align: start; }
}

/* StreetTasker logo shown where a tasker photo or task picture is missing. images/logo-mark.png is transparent and cropped to the mark,
   so it always sits on the surface behind it (no white box) and every card shows it at the same size. */
.st-logo-ph { width: 40%; height: 40%; object-fit: contain; display: block; margin: auto; }
.st-tasker-avatar > .st-logo-ph, .cc-avatar > .st-logo-ph { position: absolute; inset: 0; width: 56%; height: 56%; }
.hf-media-ph .st-logo-ph { width: 36%; height: 36%; }
/* Service and task cards: the placeholder is centred with white space all round, never stretched or tiny */
.st-card-media-fallback .st-logo-ph { width: auto; height: 55%; max-width: 55%; aspect-ratio: 1 / 1; margin: 0; }
.st-card-media-fallback .st-cat-ico--card { width: auto; height: 55%; max-width: 55%; aspect-ratio: 1 / 1; }