/* ============================================================================
   ATLAS REDESIGN — Listings screen styles  ·  Phase 2
   Branch: atlas-redesign-2026-06-29

   Prefix: .rd-listings. Tokens only (--r-*) — both Calm + Operator auto-work.
   Mirrors the Pipeline page chrome (header, KPI tiles) and adds the property
   card grid + image-integrity placeholder band. No hardcoded hex.
   ========================================================================== */

.rd-listings {
  font-family: var(--r-font-body);
  color: var(--r-body);
  padding: var(--r-gutter);
  max-width: var(--r-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- page header --------------------------------------------------------- */
.rd-lst-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.rd-lst-head-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-lst-eyebrow {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-clay);
}
.rd-lst-h1 {
  font-family: var(--r-font-display);
  font-size: var(--r-fs-h1);
  font-weight: 600;
  line-height: 1.1;
  color: var(--r-ink);
  margin: 0;
}
.rd-lst-org {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-muted);
  margin-top: 2px;
}

/* ---- header actions: segmented filter + New listing ---------------------- */
.rd-lst-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rd-lst-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--r-well);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-control);
}
.rd-lst-seg-btn {
  font-family: var(--r-font-body);
  font-size: var(--r-fs-meta);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--r-muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-radius-control) - 3px);
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--r-dur) var(--r-ease), background var(--r-dur) var(--r-ease),
              box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.rd-lst-seg-btn:hover { color: var(--r-ink); }
.rd-lst-seg-btn:active { transform: scale(.96); }
.rd-lst-seg-btn.is-active {
  color: var(--r-primary);
  background: var(--r-surface);
  box-shadow: var(--r-shadow-card);
}
.rd-lst-seg-btn:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

.rd-lst-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--r-font-body);
  font-size: var(--r-fs-body);
  font-weight: 600;
  color: var(--r-primary-ink);
  background: var(--r-primary);
  border: 0;
  border-radius: var(--r-radius-control);
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: var(--r-shadow-card);
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.rd-lst-new:hover { box-shadow: var(--r-shadow-hover); transform: translateY(-1px); }
.rd-lst-new:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
.rd-lst-new .ph { font-size: 15px; }

/* ---- KPI strip (4-up) ---------------------------------------------------- */
.rd-lst-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.rd-lst-kpi {
  background: var(--r-surface);
  border: 1px solid var(--r-hairline-2);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-shadow-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-lst-kpi-label {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-faint);
}
.rd-lst-kpi-value {
  font-family: var(--r-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--r-ink);
}
.rd-lst-kpi[data-accent="1"] .rd-lst-kpi-value { color: var(--r-primary-2); }

/* ---- property card grid -------------------------------------------------- */
.rd-lst-grid-slot { min-height: 120px; }
.rd-lst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rd-lst-card {
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card);
  overflow: hidden;
  box-shadow: var(--r-shadow-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.rd-lst-card:hover,
.rd-lst-card:focus-visible { box-shadow: var(--r-shadow-hover); transform: translateY(-2px); }
.rd-lst-card:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* photo region — photography-first: taller frame, hover zoom + tint wash */
.rd-lst-photo {
  position: relative;
  height: 172px;
  overflow: hidden;
  background: var(--r-well);
}
.rd-lst-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--r-ease);
}
.rd-lst-card:hover .rd-lst-photo-img,
.rd-lst-card:focus-visible .rd-lst-photo-img { transform: scale(1.06); }
/* subtle bottom-up tint on hover — depth + legibility for the status badge,
   fits the luxury-mountain "editorial" direction rather than a flat crop. */
.rd-lst-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20, 16, 10, .32) 100%);
  opacity: 0;
  transition: opacity var(--r-dur) var(--r-ease);
  pointer-events: none;
}
.rd-lst-card:hover .rd-lst-photo::after,
.rd-lst-card:focus-visible .rd-lst-photo::after { opacity: 1; }

/* image-integrity placeholder band — striped, mono label, never a stock photo */
.rd-lst-photo-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      135deg,
      var(--r-well) 0,
      var(--r-well) 11px,
      var(--r-canvas-raised) 11px,
      var(--r-canvas-raised) 22px
    );
}
.rd-lst-photo-ph-label {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--r-faint);
}

/* status badge */
.rd-lst-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--r-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-radius-pill);
  padding: 3px 9px;
  background: var(--r-well);
  color: var(--r-muted);
  box-shadow: var(--r-shadow-card);
}
.rd-lst-badge[data-tone="active"]  { background: var(--r-mint-surface); color: var(--r-mint-ink); }
.rd-lst-badge[data-tone="pending"] { background: color-mix(in srgb, var(--r-amber) 18%, transparent); color: var(--r-amber); }
.rd-lst-badge[data-tone="soon"]    { background: var(--r-well); color: var(--r-muted); }
.rd-lst-badge[data-tone="neutral"] { background: var(--r-well); color: var(--r-muted); }

/* card body */
.rd-lst-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rd-lst-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rd-lst-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.rd-lst-price {
  font-family: var(--r-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--r-ink);
}
.rd-lst-ppsf {
  font-family: var(--r-font-mono);
  font-size: 11px;
  color: var(--r-faint);
  white-space: nowrap;
}
.rd-lst-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--r-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--r-well);
  color: var(--r-muted);
}
.rd-lst-address {
  font-family: var(--r-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--r-ink);
}
.rd-lst-spec {
  font-family: var(--r-font-body);
  font-size: 12.5px;
  color: var(--r-muted);
}
.rd-lst-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--r-hairline);
}
.rd-lst-metric {
  font-family: var(--r-font-mono);
  font-size: 12px;
  color: var(--r-muted);
  white-space: nowrap;
}

/* ---- empty state --------------------------------------------------------- */
.rd-lst-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--r-font-body);
  font-size: var(--r-fs-body);
  color: var(--r-muted);
  background: var(--r-surface);
  border: 1px dashed var(--r-border);
  border-radius: var(--r-radius-card);
  padding: 34px 20px;
  text-align: center;
}
.rd-lst-empty i { font-size: 30px; color: var(--r-faint); }
.rd-lst-empty-title {
  font-family: var(--r-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--r-ink);
}
.rd-lst-empty-note {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-meta);
  letter-spacing: .03em;
  color: var(--r-faint);
  max-width: 360px;
  line-height: 1.5;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .rd-lst-grid { grid-template-columns: repeat(2, 1fr); }
  .rd-lst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .rd-lst-grid { grid-template-columns: 1fr; }
  .rd-lst-head { align-items: flex-start; }
}
@media (max-width: 560px) {
  .rd-lst-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rd-lst-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .rd-lst-seg { justify-content: space-between; }
  .rd-lst-sort-wrap { width: 100%; }
  .rd-lst-sort { width: 100%; }
}

/* W-F5S2: sort select (replaces the no-op New-listing button) */
.rd-lst-sort-wrap { position: relative; display: inline-flex; }
.rd-lst-sort {
  height: 34px; padding: 0 26px 0 10px;
  border: 1px solid var(--r-border); border-radius: var(--r-radius-control);
  background: var(--r-canvas-raised); color: var(--r-ink);
  font-family: var(--r-font-body); font-size: 12.5px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--r-dur) var(--r-ease);
}
.rd-lst-sort:hover { border-color: var(--r-muted); }
.rd-lst-sort:focus-visible { outline: var(--r-focus); outline-offset: 1px; }
/* custom chevron — the native select arrow is suppressed above via appearance:none */
.rd-lst-sort-wrap::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--r-muted);
  border-bottom: 1.5px solid var(--r-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.rd-lst-card { cursor: pointer; }

/* ---- entrance + reduced motion -------------------------------------------- */
@keyframes rd-lst-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.rd-lst-card { animation: rd-lst-rise .3s var(--r-ease) both; }
/* subtle stagger on grid render — first 9 cards step in 30ms apart, the rest
   settle at the same capped delay so a large result set never feels sluggish. */
.rd-lst-grid .rd-lst-card:nth-child(2) { animation-delay: 30ms; }
.rd-lst-grid .rd-lst-card:nth-child(3) { animation-delay: 60ms; }
.rd-lst-grid .rd-lst-card:nth-child(4) { animation-delay: 90ms; }
.rd-lst-grid .rd-lst-card:nth-child(5) { animation-delay: 120ms; }
.rd-lst-grid .rd-lst-card:nth-child(6) { animation-delay: 150ms; }
.rd-lst-grid .rd-lst-card:nth-child(7) { animation-delay: 180ms; }
.rd-lst-grid .rd-lst-card:nth-child(8) { animation-delay: 210ms; }
.rd-lst-grid .rd-lst-card:nth-child(n+9) { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .rd-lst-card, .rd-lst-photo-img, .rd-lst-photo::after { animation: none !important; transition: none !important; }
}
html[data-rmotion="reduced"] .rd-lst-card,
html[data-rmotion="reduced"] .rd-lst-photo-img,
html[data-rmotion="reduced"] .rd-lst-photo::after { animation: none !important; transition: none !important; }