/* ==========================================================================
   Listings Page — Editorial luxury
   ========================================================================== */

/* Let the page inherit the warm-white site background. Cards (--paper,
   pure white) sit cleanly on top for crisp contrast. */

/* Clear the fixed header + sticky filter bar + small breathing room.
   Robust against the filter bar hiding on scroll (handled by scroll-header.js
   toggling `body.header-hidden`, which the filter-bar CSS uses to shift up).
   The page header's own top padding is minimal — this rule owns the safe
   clearance below the sticky filter bar so the title is never obscured. */
.main-content.has-filters:has(.listings-grid),
.main-content.has-filters:has(.empty-state) {
  padding-top: calc(var(--header-height) + var(--filter-height) + var(--space-4));
}

/* The shared .container-wide runs to 1920px, which on a large monitor
   stretches the 3-column grid until each card is nearly 600px wide. Listings
   are browsed, not exhibited: cap this page's container so cards stay at a
   scannable size and the page keeps generous side margins on big screens.
   Scoped to this page's content wrapper; other container-wide users keep
   their full width. */
.main-content.has-filters > .container-wide {
  max-width: 1200px;
}

/* ==========================================================================
   PAGE HEADER — minimal title, tight to the filter bar
   ========================================================================== */
.listings-header-hero {
  padding: 0 0 var(--space-3);
}

.listings-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}

/* ==========================================================================
   Legacy chip classes (removed from markup — kept as no-ops to prevent
   style regressions if any cached template references them). Safe to
   remove in a future cleanup pass.
   ========================================================================== */
.listings-chips,
.listings-chip { /* no-op */ }

/* ==========================================================================
   Listings Header — results summary, editorial
   ========================================================================== */
.listings-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-8);
  flex-wrap: wrap;
}

.results-summary {
  font-family: var(--font-display);
  font-style: normal; /* brand: no italicized body/UI copy */
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--gray-700);
  letter-spacing: -0.01em;
  margin: 0;
}

.results-summary strong {
  font-style: normal;
  font-weight: 400;
  color: var(--navy);
}

/* ==========================================================================
   Pagination — refined page-position indicator
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16) 0 var(--space-12);
  border-top: 1px solid var(--border);
  margin-top: var(--space-12);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-none);
  transition: background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.pagination-btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.pagination-btn svg { width: 12px; height: 12px; }

.pagination-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pagination-prev:hover { transform: translateX(-2px); }
.pagination-next:hover { transform: translateX(2px); }

/* ==========================================================================
   Empty State — editorial, not apologetic
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-6);
  max-width: 520px;
  margin: 0 auto;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  color: var(--cobalt);
  margin-bottom: var(--space-6);
  stroke-width: 1;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

.empty-state-message {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0 0 var(--space-8);
}

.empty-state-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}