/**
 * national-search-ssr.css
 * Page-chrome styling specific to the standalone server-rendered listing
 * and market pages (/search/listing/{...}/, /search/market/{...}/).
 * Everything else on these pages reuses national-search.css /
 * national-search-listing-detail.css classes directly — this file only
 * covers the two genuinely new elements identified during design review:
 * the breadcrumb nav and the "no longer active" listing banner. All values
 * are existing --sidx-national-* tokens, no new colors/fonts introduced.
 * See .planning/design/screens/full-fidelity-listing-entities.md.
 */

.sidx-national-ssr-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.sidx-national-ssr-wrap h1 {
  font-size: 22px;
  color: var(--sidx-national-navy);
  margin: 8px 0 20px;
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */

.sidx-national-breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding: 12px 0;
  margin: 0;
  font-size: 13px;
  list-style: none;
}

.sidx-national-breadcrumb a {
  color: var(--sidx-national-navy);
  text-decoration: none;
  white-space: nowrap;
}

.sidx-national-breadcrumb a:hover { text-decoration: underline; }

.sidx-national-breadcrumb a:focus-visible {
  outline: 3px solid var(--sidx-national-navy);
  outline-offset: 2px;
}

.sidx-national-breadcrumb-sep {
  color: var(--sidx-national-text-faint);
}

.sidx-national-breadcrumb-current {
  color: var(--sidx-national-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ─── "No longer active" listing banner ─────────────────────────────────── */

.sidx-national-detail-inactive-banner {
  padding: 12px 16px;
  margin: 16px 0;
  border-left: 4px solid var(--sidx-national-text-faint);
  border-radius: var(--sidx-national-radius-sm);
  background: var(--sidx-national-bg);
  color: var(--sidx-national-text-muted);
  font-size: 15px;
  text-align: left;
}

/* ─── Listing snapshot / feature-category key-value tables ──────────────── */
/* Used by sidx_national_html_kv_table() — a plain SSR equivalent of the
   modal's snapshot/feature/schools tables, same visual language. */

.sidx-national-detail-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}

/* min-width:0 on the grid item + flex-wrap + overflow-wrap on its spans:
   without this, a long unbroken value (e.g. a comma-joined feature-category
   list like "Clubhouse, Pool, Tennis Courts, Fitness Center, Gated") can't
   shrink below its own content width inside justify-content:space-between,
   forcing this row — and the whole page — wider than the viewport on
   mobile. Same root cause as the horizontal-scroll bug already fixed once
   for .sidx-national-detail-layout's own children (min-width:0 there too),
   just never propagated to this deeper table structure. */
.sidx-national-detail-kv-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 6px 0;
  min-width: 0;
  border-bottom: 1px solid var(--sidx-national-border);
  font-size: 14px;
}

.sidx-national-detail-kv-row span:first-child { color: var(--sidx-national-text-muted); }
.sidx-national-detail-kv-row span:last-child {
  color: var(--sidx-national-text);
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.sidx-national-detail-history-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 6px 0;
  min-width: 0;
  border-bottom: 1px solid var(--sidx-national-border);
  font-size: 14px;
}

.sidx-national-detail-history-row span:first-child { color: var(--sidx-national-text-faint); }
.sidx-national-detail-history-row span:last-child { overflow-wrap: anywhere; }

@media (max-width: 599px) {
  .sidx-national-detail-kv-grid {
    grid-template-columns: 1fr;
  }
}