/* Listing pages (category pages + cluster hubs): compact header, ONE consistent filter bar, denser cards so the first
   row of games is on the first screen. Loaded after site.css / hub-style.css; every rule is scoped to body.page-listing,
   so no other page is affected. Markup, links and text are untouched (SEO/AI-search neutral). */

/* ---- header block: breadcrumb + H1 + one-line description ---- */
.page-listing .category-hero { padding: 16px 20px 6px; } /* 20px = the .wrap gutter; a 0 here made the breadcrumb/H1/intro sit flush against the screen edge and 20px left of the grid */
.page-listing .category-hero .breadcrumb { margin-bottom: 6px; }
.page-listing .category-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 4px; }
.page-listing .category-hero p { font-size: 0.98rem; max-width: 780px; margin: 0 0 4px; }

/* ---- filter bar: every hub had its own row of controls and an unstyled search box ---- */
.page-listing [class$="-filters"] { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 10px 0 14px; }
.page-listing [class$="-filter-group"] { display: flex; flex-direction: column; gap: 4px; }
.page-listing [class$="-filter-group"] label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-soft); }
.page-listing input#game-search {
  width: 380px; /* fixed: the filter group is content-sized, so a % width collapsed to the placeholder's own width */
  max-width: 100%;
  min-height: 42px;
  padding: 9px 16px 9px 42px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center;
  background-size: 17px;
}
.page-listing input#game-search::placeholder { color: var(--color-text-soft); }
.page-listing input#game-search:focus { outline: none; border-color: var(--color-primary); }
.page-listing select { min-height: 42px; border-radius: 12px; padding: 8px 12px; }
.page-listing .controls { margin-bottom: 12px; gap: 10px; }
.page-listing .search-box { max-width: 460px; }

/* ---- denser cards ---- */
.page-listing .game-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 8px 0 40px; }
.page-listing .game-card { content-visibility: auto; contain-intrinsic-size: auto 250px; }
.page-listing .game-card__thumb { height: 118px; font-size: 3rem; }
.page-listing .game-card__body { padding: 12px 14px 14px; }
.page-listing .game-card__title { font-size: 1rem; }
.page-listing .game-card__tagline { font-size: 0.85rem; line-height: 1.4; max-height: 2.8em; flex: 0 0 auto; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-listing .game-card__tags { margin-top: auto; flex-wrap: nowrap; overflow: hidden; }
.page-listing .tag { white-space: nowrap; font-size: 0.7rem; padding: 3px 8px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-listing .tag:first-child { flex: 0 0 auto; }
.page-listing .tag:nth-child(n+3) { display: none; } /* two tags per card keeps rows even; all tags stay in the HTML */

@media (max-width: 600px) {
  .page-listing .category-hero { padding-top: 10px; }
  .page-listing input#game-search { width: 100%; }
  /* Filter bar on phones: the groups are content-sized flex items, so the search box (245px) and the selects (200-297px)
     each ended at a different width and every label sat on its own line (~150px for two controls, 256px on the math hub).
     One full-width column with the label INLINE beside its control: same labels, equal control widths, ~50px shorter. */
  .page-listing [class$="-filters"] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; margin: 6px 0 12px; }
  .page-listing [class$="-filter-group"] { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; column-gap: 8px; }
  .page-listing [class$="-filter-group"] label { white-space: nowrap; }
  .page-listing [class$="-filter-group"] select { width: 100%; min-width: 0; }
  .page-listing .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page-listing .game-card__thumb { height: 92px; font-size: 2.6rem; }
  .page-listing .game-card__body { padding: 10px 11px 12px; }
  .page-listing .game-card__title { font-size: 0.95rem; }
  .page-listing .game-card__tags { display: none; }
}