/* [ssr_listing_nearby] — design 22a. Section chrome around WP Grid Builder grid 41.
   The rows themselves are card 61 (WPGB > Cards > Comp Card v4 > Global CSS); this file owns the
   shell, the filters, the column header, the footer — and the COLUMN GEOMETRY, which card 61
   consumes through the --n-* custom properties below with literal fallbacks. There is exactly one
   track list on the page; the earlier hand-written header block had a second copy and the two
   drifted 24px apart. */

.ssr-nearby {
  /* ---- column geometry: the single source. Card 61's Global CSS reads these. ---- */
  --n-thumb: 60px;                                  /* thumbnail column */
  --n-gap:   12px;                                  /* gap between every column */
  --n-pad:   16px;                                  /* row + header horizontal padding */
  --n-rest:  110px 72px 72px 48px 60px 60px 136px;  /* price sqft $/sqft beds built acres status */
  --n-addr:  minmax(140px, 1fr);                    /* address column */

  --n-ink:      var(--text-on-light, #2f2e30);
  --n-muted:    var(--text-on-light-muted, #6f6d73);
  --n-rule:     var(--border-on-light, #d6d5d8);
  --n-surface:  var(--surface-light, #fff);
  --n-muted-bg: var(--surface-light-muted, #f7f7f6);
  --n-strong:   var(--charcoal-700, #414042);
  --n-link:     var(--text-link, #0a3a5c);
  --n-display:  var(--font-display, Outfit, system-ui, sans-serif);
  --n-body:     var(--font-body, 'Public Sans', system-ui, sans-serif);
  --n-max:      var(--wp--style--global--wide-size, 1240px); /* Site Editor > Styles > Layout */

  display: block;
  background: var(--n-surface);
  padding: 48px 24px;
  font-family: var(--n-body);
  color: var(--n-ink);
}

.ssr-nearby *, .ssr-nearby *::before, .ssr-nearby *::after { box-sizing: border-box; }

/* wpautop wraps runs of inline elements in <p>; the ones it injects carry no class, the
   section's own (.ssr-nearby__note) do and keep their rules. */
.ssr-nearby p:not([class]) { display: contents; margin: 0; padding: 0; }
.ssr-nearby p:empty { display: none; }

.ssr-nearby__inner { max-width: var(--n-max); margin-inline: auto; }

/* ---------- heading row ---------- */

.ssr-nearby__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.ssr-nearby__title {
  margin: 0;
  font-family: var(--n-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--n-ink);
}

.ssr-nearby__near { font-size: 14px; color: var(--n-muted); }

/* ---------- filters ---------- */

/* 22a caps this at 760px, but 22a's four controls are 40px selects. These are the real facets —
   a wrapping pill row, two sliders and a date input — so 760 forces the Status pills onto two
   lines and leaves the four cells ragged. --n-filters-max is the knob; drop it to 760px if the
   facets ever become selects. */
.ssr-nearby__filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 12px 16px;
  margin-bottom: 20px;
  max-width: var(--n-filters-max, 920px);
}

.ssr-nearby__filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ssr-nearby__flabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--n-ink);
  line-height: 1.3;
}

/* The four facets are structurally different controls and will never be the same height. Give
   them a common floor and centre each one in it so the row reads as one band rather than four
   ragged cells. (WPGB also paints .wpgb-facet at 0.01 opacity until its JS runs, which would
   collapse the cell without a floor.) */
.ssr-nearby__fcontrol {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.ssr-nearby__fcontrol > .wpgb-facet { margin: 0; width: 100%; }

/* ---------- table shell ---------- */

.ssr-nearby__table {
  border: 1px solid var(--n-rule);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
}

/* ---------- column header ----------
   Nine tracks, the same list the card row uses. "Address" spans tracks 1-2 so the label starts
   over the thumbnail, the way 22a draws it. */

.ssr-nearby__cols {
  display: grid;
  grid-template-columns: var(--n-thumb) var(--n-addr) var(--n-rest);
  column-gap: var(--n-gap);
  align-items: center;
  padding: 12px var(--n-pad);
  background: var(--n-muted-bg);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.04em);
  color: var(--n-muted);
}

.ssr-nearby__cols > * { text-align: right; min-width: 0; }
.ssr-nearby__cols > .is-addr { grid-column: 1 / span 2; text-align: left; }
.ssr-nearby__cols > .is-left { text-align: left; }

/* ---------- rows (card 61 lives here) ---------- */

/* The grid's gutter would inset every row from the shell and break the column alignment. Set
   columns = 1 and both gaps = 0 on grid 41 as well; this is the belt to that brace. */
.ssr-nearby__rows .wpgb-card { padding: 0; }

/* ---------- footer ---------- */

.ssr-nearby__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px var(--n-pad);
  background: var(--n-muted-bg);
  border-top: 1px solid var(--n-rule);
}

.ssr-nearby__count { font-size: 13px; color: var(--n-muted); min-width: 0; }
.ssr-nearby__count .wpgb-facet { display: inline; }
.ssr-nearby__more { display: flex; }

/* Load more — the BUTTON'S LOOK BELONGS TO WPGB FACET STYLE 14 ("Load More Button"), set in the
   Style editor and passed as more_style. Colour, border, radius, padding and type all come from
   there. This adds only the two things the Style editor has no control for: the flex context and
   22a's chevron. Re-adding visual properties here would fight Style 14 on source order. */
.ssr-nearby__more .wpgb-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ssr-nearby__more .wpgb-load-more::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  /* chevron-down, matching 22a's icon slot */
  -webkit-mask: no-repeat center / 14px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  mask: no-repeat center / 14px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
}

.ssr-nearby__more .wpgb-load-more:disabled { opacity: 0.45; cursor: not-allowed; }

/* 22a swaps in "Search all homes" once everything is shown. WPGB's load-more facet returns ''
   when nothing remains (class-load-more.php:92), so the button element is absent, not hidden. */
.ssr-nearby__all {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-link);
  text-decoration: none;
}

.ssr-nearby__allwrap { display: none; }
.ssr-nearby__foot:not(:has(.wpgb-load-more)) .ssr-nearby__allwrap { display: block; }
.ssr-nearby__foot:not(:has(.wpgb-load-more)) .ssr-nearby__all { display: inline-flex; }
.ssr-nearby__all:hover { color: var(--text-link-hover, #0e4d5c); text-decoration: underline; }
.ssr-nearby__all svg { flex: 0 0 16px; }

/* ---------- disclaimer ---------- */

.ssr-nearby .ssr-nearby__note {
  display: block;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
  color: var(--n-muted);
}

/* ---------- mobile (767 is the page-wide switch) ---------- */

@media (max-width: 767px) {
  .ssr-nearby { padding: 32px 16px; }
  .ssr-nearby__title { font-size: 22px; }
  .ssr-nearby__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  /* The column header is meaningless once card 61 drops to its 1g stacked row. */
  .ssr-nearby__cols { display: none; }
  .ssr-nearby__foot { padding: 12px; }
  .ssr-nearby__more .wpgb-load-more { width: 100%; }
}