/**
 * Listings: the card, the grid, the filter rail, the mobile sheet.
 * Reads only from tokens.css.
 */

/* The card component lives in card.css — every surface renders it. */

/* ══ PAGE ════════════════════════════════════════════════════════════════ */

.v2-listings-body { display: grid; gap: var(--s-6); align-items: start; padding-block-end: var(--s-12); }
@media (min-width: 960px) {
  .v2-listings-body { grid-template-columns: 268px minmax(0, 1fr); }
}

/* .v2-grid lives in card.css — it is the card grid, and three pages use it. */

.v2-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-block-end: var(--s-3); margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--rule);
}
.v2-count { font-size: var(--t-base); color: var(--ink-body); }
.v2-count b { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); }

/* ── Rail ── */
.v2-rail {
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
@media (min-width: 960px) {
  .v2-rail { position: sticky; top: calc(var(--s-16) + var(--s-4)); max-height: calc(100vh - var(--s-20)); overflow-y: auto; }
}
.v2-rail-head { display: none; align-items: center; justify-content: space-between; margin-block-end: var(--s-4); }
.v2-rail-head h2 { font-family: var(--font-display); font-size: var(--t-lg); }

.v2-filters { display: grid; gap: var(--s-5); }
.v2-f-group { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.v2-f-group legend, .v2-f-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-dim); padding: 0;
}
.v2-f-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.v2-segmented, .v2-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.v2-segmented input, .v2-pills input { position: absolute; opacity: 0; pointer-events: none; }
.v2-segmented span, .v2-pills span {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4); font-size: var(--t-sm); color: var(--ink-body);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.v2-segmented label, .v2-pills label { display: inline-block; }
.v2-segmented input:checked + span, .v2-pills input:checked + span {
  background: var(--accent); color: var(--accent-on); border-color: transparent; font-weight: 600;
}
.v2-segmented input:focus-visible + span, .v2-pills input:focus-visible + span {
  outline: 2px solid var(--brand-gold); outline-offset: 2px;
}
.v2-pills span { padding-inline: var(--s-3); }

.v2-f-check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }
.v2-f-check input { margin-block-start: 3px; accent-color: var(--accent); }

.v2-f-actions { display: grid; gap: var(--s-2); }
/* .v2-btn and its variants live in shell.css: every page uses them. */

/* The rail's own apply button is for the mobile sheet only; on desktop the
   form's submit inside .v2-f-actions is enough and two is confusing. */
.v2-rail-apply { display: none; }

/* ── Pagination ── */
.v2-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  margin-block-start: var(--s-8); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule);
}
.v2-page-btn {
  min-height: 40px; display: inline-flex; align-items: center; padding-inline: var(--s-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  color: var(--ink-body); font-size: var(--t-sm);
}
.v2-page-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.v2-page-of { font-size: var(--t-sm); color: var(--ink-dim); }

/* ── Empty ── */

/* ══ MOBILE SHEET ════════════════════════════════════════════════════════
   The rail becomes a bottom sheet under 960px. The spec the old build shipped
   called for this and never delivered it, so filters on a phone were a column
   of controls above the results that had to be scrolled past to see anything.
   ═════════════════════════════════════════════════════════════════════════ */
.v2-filter-open {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 42px; padding-inline: var(--s-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-card); color: var(--ink); font-size: var(--t-sm);
  font-weight: 600; cursor: pointer; position: relative;
}
.v2-filter-dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--live);
}
@media (min-width: 960px) { .v2-filter-open { display: none; } }

@media (max-width: 959px) {
  .v2-rail {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sheet);
    max-height: 86vh; overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-inline: 0; border-block-end: 0;
    box-shadow: var(--lift-3);
    padding-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    transform: translateY(101%);
    transition: transform var(--slow) var(--ease);
    visibility: hidden;
  }
  .v2-rail[data-open="true"] { transform: translateY(0); visibility: visible; }
  .v2-rail-head { display: flex; }
  .v2-rail-apply {
    display: block; position: sticky; inset-block-end: 0;
    background: var(--surface-card); padding-block: var(--s-3);
    margin-block-start: var(--s-4); border-block-start: 1px solid var(--rule);
  }
  .v2-rail-apply .v2-btn { width: 100%; }
  /* The sheet already has an apply button; the form's own would be a second. */
  .v2-f-actions { display: none; }
  .v2-scrim {
    position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1);
    background: color-mix(in srgb, var(--surface-deep) 52%, transparent);
  }
}

.v2-results[aria-busy="true"] { opacity: .5; transition: opacity var(--fast) var(--ease); }

/**
 * The page wrapper and the results column.
 *
 * `min-width: 0` on the results column is not cosmetic: a grid item defaults to
 * min-width:auto, so one long unbroken string — a Kurdish title with no spaces,
 * or a wide table — pushes the whole column past the viewport and takes the
 * filter rail with it. This is the single most common cause of horizontal
 * scroll in a CSS grid layout.
 */
.v2-listings { display: block; }
.v2-results-col { min-width: 0; }