/* ==========================================================================
   Portfolio Moguls — Buy index
   Flattened from raw/Buy - Verified Properties for Sale.dc.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Page header + verification banner
   -------------------------------------------------------------------------- */

.pm-buyhead {
  border-bottom: 1px solid var(--pm-border);
  padding-block: 30px 24px;
}

.pm-buyhead__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}

.pm-buyhead__h1 { margin-top: 8px; }

.pm-buyhead__count {
  font-size: 13px;
  color: var(--pm-muted);
  margin: 0;
}

.pm-verifybanner {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  background: var(--pm-surface-alt);
  border: 1px solid var(--pm-border);
  border-left: 3px solid var(--pm-green);
  border-radius: var(--pm-radius-lg);
  padding: 14px 18px;
}

.pm-verifybanner__tick { flex: none; line-height: 0; }

.pm-verifybanner__text {
  flex: 1;
  min-width: 240px;
  font-size: 14px;
  color: var(--pm-text);
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .pm-verifybanner__text { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   2 · Filter bar
   -------------------------------------------------------------------------- */

.pm-filters {
  position: sticky;
  /* 0, not var(--pm-header-h): the header became a fixed overlay (2026-08-06)
     and no longer occupies the top of the flow. When it slides back in on an
     upward scroll it passes OVER the stuck bar, which is the standard
     behaviour of this pattern, not a defect. */
  top: 0;
  z-index: 30;
  background: var(--pm-white);
  border-bottom: 1px solid var(--pm-border);
}

.pm-filters__mobilebar { padding-block: 12px; }

.pm-filters__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--pm-white);
  border: 1px solid var(--pm-navy);
  color: var(--pm-navy);
  padding: 12px;
  border-radius: var(--pm-radius);
  font-weight: 700;
  font-size: 14.5px;
}

.pm-filters__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: var(--pm-navy);
  color: var(--pm-white);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
}

/* Collapsed by default on small screens. Revealed by the toggle, or
   permanently if JavaScript never runs (html.no-js). */
.pm-filters__panel {
  display: none;
  padding-bottom: 16px;
}

.pm-filters__panel.is-open,
.no-js .pm-filters__panel { display: block; }

.pm-filters__grouplabel,
.pm-field__label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-stamp);
  font-weight: 700;
  margin-bottom: 8px;
}

.pm-filters__chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-chipbtn {
  font-family: var(--pm-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--pm-radius-sm);
  white-space: nowrap;
  background: var(--pm-white);
  color: var(--pm-navy);
  border: 1px solid var(--pm-border);
}

.pm-chipbtn:hover,
.pm-chipbtn:focus-visible {
  border-color: var(--pm-navy);
  color: var(--pm-navy);
}

.pm-chipbtn.is-on {
  background: var(--pm-navy);
  color: var(--pm-white);
  border-color: var(--pm-navy);
}

.pm-filters__selects {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.pm-field { display: block; }

.pm-select {
  width: 100%;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  padding: 11px 12px;
  font-family: var(--pm-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-navy);
  background: var(--pm-white);
  cursor: pointer;
}

.pm-filters__spacer { display: none; }

.pm-filters__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.pm-filters__apply { flex: 1; }

@media (min-width: 900px) {
  .pm-filters__mobilebar { display: none; }

  .pm-filters__panel {
    display: block;
    padding-block: 16px 15px;
  }

  .pm-filters__grouplabel { display: none; }

  .pm-filters__selects {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--pm-hairline);
  }

  .pm-field { width: auto; }
  .pm-select { min-width: 150px; width: auto; }
  .pm-field--sort .pm-select { min-width: 170px; }
  .pm-filters__spacer {
    display: block;
    flex: 1;
  }

  /* With JS the selects submit on change and the results notice already
     carries "Clear all", so the whole action row is redundant here. It stays
     on the no-JS path, where the form needs a submit. */
  .pm-filters__actions {
    margin-top: 12px;
    align-items: flex-end;
  }

  .pm-filters__apply { flex: none; }
  .js .pm-filters__actions { display: none; }
}

/* --------------------------------------------------------------------------
   3 · Grid, empty state, pagination
   -------------------------------------------------------------------------- */

.pm-buygrid { padding-block: 28px 8px; }

.pm-buygrid__filtered {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--pm-muted);
  margin: 0 0 18px;
}

.pm-buygrid__filtered a {
  color: var(--pm-navy);
  font-weight: 600;
  text-decoration: underline;
}

.pm-empty {
  border: 1px dashed var(--pm-border);
  border-radius: var(--pm-radius-lg);
  padding: 40px 24px;
  text-align: center;
  color: var(--pm-muted);
}

.pm-empty__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-text);
  margin: 0;
}

.pm-empty__body {
  font-size: 14px;
  margin: 6px 0 0;
}

.pm-buygrid .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  justify-content: center;
}

.pm-buygrid .page-numbers a,
.pm-buygrid .page-numbers span {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-navy);
}

.pm-buygrid .page-numbers .current {
  background: var(--pm-navy);
  color: var(--pm-white);
  border-color: var(--pm-navy);
}

/* --------------------------------------------------------------------------
   4 · Buyer Representation band
   -------------------------------------------------------------------------- */

.pm-interrupt-wrap { padding-block: 24px 8px; }

.pm-interrupt {
  background: var(--pm-navy);
  color: var(--pm-on-navy);
  border-radius: var(--pm-radius-lg);
  border-top: var(--pm-rule-accent);
  padding: 22px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.pm-interrupt__text { max-width: 640px; }

.pm-interrupt__heading {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin: 8px 0;
}

.pm-interrupt__body {
  font-family: var(--pm-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--pm-on-navy-soft);
  margin: 0;
}

@media (min-width: 900px) {
  .pm-interrupt { padding: 28px 32px; }
  .pm-interrupt__heading { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   5 · Neighborhood tiles
   -------------------------------------------------------------------------- */

.pm-hoods { padding-block: 44px 52px; }

.pm-hoods__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.pm-hoods__intro {
  font-size: 14px;
  color: var(--pm-muted);
  margin: 8px 0 0;
}

.pm-hoods__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pm-hood {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  padding: 18px 18px 16px;
  background: var(--pm-white);
  color: inherit;
  min-height: 132px;
}

.pm-hood:hover,
.pm-hood:focus-visible {
  color: inherit;
  border-color: var(--pm-action);
}

.pm-hood__name {
  display: block;
  font-family: var(--pm-font-ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--pm-navy);
}

.pm-hood__char {
  display: block;
  font-size: 12.5px;
  color: var(--pm-muted);
  margin-top: 3px;
  line-height: 1.35;
}

.pm-hood__stat {
  display: block;
  border-left: 2px solid var(--pm-action);
  padding-left: 11px;
}

.pm-hood__figure {
  display: block;
  font-family: var(--pm-font-ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--pm-navy);
  line-height: 1.1;
}

.pm-hood__statlabel {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pm-stamp);
  font-weight: 600;
  margin-top: 3px;
}

@media (min-width: 1024px) {
  .pm-hoods__grid { grid-template-columns: repeat(4, 1fr); }
}