/* search.css -- P7.2. The search results screen ONLY.

   Everything structural is already in `components.css` (`.rail`, `.facet-group`,
   `.facet-option`, `.range`, `.listing-grid`, `.card`, `.chip`, `.empty`, `.pagination`) and in
   `layout.css` (`.results` as the two-column grid host). This file holds what the component
   sheet does not have a family for, and NOTHING it does have one for.

   FIVE RULES, matching `lint_spacing.py` and `check_contrast.py`:
     * every length is a `--sp-*` / `--fs-*` / `--rail-w` / `--card-min` token
     * every colour is a `--c-*` token
     * `--c-border` is decorative only; a control edge is `--c-border-strong`
     * the only `@media` widths are the four pinned breakpoints
     * no shadow other than `--shadow-float`, and only on a floating surface
*/

/* ---------------------------------------------------------------- the rail as a form */

.rail__heading {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* The Apply control. It is at the TOP of the rail as well as the bottom, because the rail is
   ~2,400px tall by design (SEARCH-PAGE.md §Truncation abolishes truncation) and a submit only at
   the far end would make the first tick a scroll. */
.rail__apply {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  margin-block-end: var(--sp-4);
}

.rail__apply--end {
  margin-block-start: var(--sp-6);
  margin-block-end: var(--sp-0);
}

.facet-group__threshold {
  margin-block-start: var(--sp-2);
}

/* The two-column option grid. SEARCH-PAGE.md §Truncation: "any term group with more than 12
   values goes two-column", column-major so DOM order stays scalar and tab order follows the
   scale rather than the visual columns. 23 colour grades become 12 rows, not 23. */
.facet-group__options--two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
}

@media (min-width: 480px) {
  .facet-group__options--two-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------- the results pane */

.results__pane {
  min-width: var(--sp-0);          /* a grid item's default `min-width: auto` is what lets a
                                      long card title push the whole column past the viewport */
}

.results__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}

.results__status {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-text-muted);
}

/* A caveat is not an error. `--c-danger` is reserved for a 5xx on this screen (SEARCH-PAGE.md
   §Error); a total the page declines to print, and a sort it declines to apply, are the page
   being careful and read in the warning colour. */
.results__caveat {
  padding: var(--sp-3);
  border-inline-start: var(--sp-1) solid var(--c-warn);
  background-color: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  max-width: var(--measure);
}

.results__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: var(--sp-0);
}

.results__sort {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

@media (min-width: 768px) {
  .results__sort {
    max-width: var(--rail-w);
  }
}

/* ---------------------------------------------------------------- the grid and the card */

/* `.listing-grid` is the sheet's; this makes it a list without making it look like one, so the
   count is announced (SC 1.3.1) and no bullet is drawn. */
ol.listing-grid {
  list-style: none;
  padding: var(--sp-0);
}

/* THE PHOTO SLOT WHEN THERE IS NO PHOTO. Not one listing in this build's catalogue has media,
   and an `<img>` with no `src` is a broken image on every card. The slot states the absence in
   the muted colour at the size the image would have been, so the grid does not reflow the day
   photographs arrive. */
.card__photo--absent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sp-9);
  background-color: var(--c-surface);
  border: var(--border-w) dashed var(--c-border-strong);
  border-radius: var(--radius);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  text-align: center;
}

.card__currency {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------- the sort refusal */

.sort-partition__why {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-text);
  max-width: var(--measure);
}

/* The gap the shipped grammar cannot express. It is muted rather than loud on purpose: it is a
   statement about what zewbie will NOT offer, and a warning colour here would read as an error
   in the buyer's query when the limitation is zewbie's. */
.sort-partition__gap,
.sort-partition__source {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-text-muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- pagination and empty */

.pagination__cap {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-text-muted);
  max-width: var(--measure);
}

.pagination__size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
}

/* `aria-disabled` on a span that is not a link: the sheet styles `.btn[aria-disabled]` and
   `.page-link` separately, and a keyset Previous is neither a live link nor absent. */
.page-link[aria-disabled="true"] {
  color: var(--c-text-muted);
  text-decoration: none;
}

.empty--refused {
  border-inline-start: var(--sp-1) solid var(--c-warn);
  background-color: var(--c-surface);
}