/* ============================================================
   SSR Listing Features — [ssr_listing_features]
   Design 2b: the category rail. The rail is the table of
   contents with counts; the right pane shows one category.

   Trigger: design 21a, the "Full property details" bar — a
   card-style row under About's description with the solid
   charcoal primary button. About hosts it in its main column
   (about.css positions it there); standalone, the bar sizes
   itself like the other sections.

   Mobile (<=767px): the dialog becomes a full-height sheet and
   the rail turns into a sticky horizontal chip strip above the
   panel — the same "pick a category, never scroll a wall" idea
   in one column.

   Tokens are read from the site's Additional CSS when present and
   fall back to literals, so the section renders correctly even if
   the global token block is ever removed. Same pattern as about.css.
   ============================================================ */
.ssr-feat {
  --f-ink:      var(--text-on-light, #2f2e30);
  --f-muted:    var(--text-on-light-muted, #6f6d73);
  --f-body-ink: var(--charcoal-600, #57555a);
  --f-line:     var(--border-on-light, #d6d5d8);
  --f-hair:     var(--charcoal-100, #ececed);
  --f-fill:     var(--surface-light-muted, #f7f7f6);
  --f-surface:  var(--surface-light, #fff);
  --f-dark:     var(--charcoal-700, #414042);
  --f-darker:   var(--charcoal-800, #2f2e30);
  --f-brand:    var(--accent-brand, #d2e82e);
  --f-strong:   var(--accent-brand-strong, #8fa317);
  --f-ring:     var(--state-focus-ring, #ff5a5f);
  --f-scrim:    var(--overlay-dark, rgba(0, 0, 0, .6));
  --f-display:  var(--font-display, Outfit, system-ui, sans-serif);
  --f-body:     var(--font-body, 'Public Sans', system-ui, sans-serif);
  --f-r-md:     var(--radius-md, 8px);
  --f-r-lg:     var(--radius-lg, 14px);
  --f-r-pill:   var(--radius-pill, 999px);
  --f-shadow:   var(--shadow-sm, 0 1px 2px rgba(26,26,27,.06), 0 1px 1px rgba(26,26,27,.04));
  --f-lift:     0 24px 80px rgba(0, 0, 0, .4);
  --f-ease:     var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
  --f-dur:      var(--duration-base, 200ms);

  --f-rail: 280px;
  --f-max:  var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */

  display: block;
  font-family: var(--f-body);
  color: var(--f-ink);
}

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

/* wpautop wraps runs of inline elements in <p> and splits around block elements. Injected
   paragraphs become transparent so their children lay out as if they were not there; this
   section's own paragraphs carry a class and are restored to block below.

   The restoring rules must be written .ssr-feat .ssr-feat__x, not .ssr-feat__x: the rule below
   is a class plus a type selector, so a single class loses to it and the paragraph silently
   keeps display:contents — which drops its padding and margins but still paints the text, so
   it reads as a spacing bug rather than a display one. */
.ssr-feat p { display: contents; margin: 0; padding: 0; }
.ssr-feat p:empty { display: none; }

/* ---- Trigger: 21a details bar ------------------------------------------ */
/* Standalone, the bar takes the same page-width container as About; hosted inside About's main
   column, about.css strips this so the bar takes the column instead. */
.ssr-feat--bar {
  max-width: var(--f-max);
  margin-inline: auto;
  padding: 0 24px;
}

.ssr-feat__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
  background: var(--f-surface);
  box-shadow: var(--f-shadow);
  /* The bar queries its own width to stack the button (below). The modal is a sibling, not a
     child, so containment here cannot turn the fixed-position dialog into a local box. */
  container-type: inline-size;
}

.ssr-feat__baricon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--f-r-md);
  background: var(--f-fill);
  color: var(--f-body-ink);
}

.ssr-feat__bartext { flex: 1 1 0; min-width: 0; }

.ssr-feat__bartitle {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--f-ink);
}

.ssr-feat__barsub {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--f-muted);
  text-wrap: pretty;
}

.ssr-feat__baraction { flex: none; }

/* The design system's primary Button, md: solid charcoal, one step up from the outlined
   secondary and deliberately not coral, which the strategy-call CTA beside it owns. */
.ssr-feat__baropen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--f-r-pill);
  background: var(--f-dark);
  color: #fff;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--f-dur) var(--f-ease), transform 120ms var(--f-ease);
}

.ssr-feat__baropen:hover { background: var(--f-darker); color: #fff; transform: translateY(-1px); }
.ssr-feat__baropen:focus-visible { outline: 2px solid var(--f-ring); outline-offset: 3px; }

/* A narrow column (About's at tablet widths, or any phone): the button drops to its own line
   and fills it, so the title and summary keep a readable measure beside the icon. */
@container (max-width: 560px) {
  .ssr-feat__baraction { flex: 1 1 100%; }
  .ssr-feat__baropen { width: 100%; }
}

/* ---- Trigger: 2b pill (trigger="pill") ----------------------------------- */
.ssr-feat--center { text-align: center; }
.ssr-feat--left   { text-align: left; }
.ssr-feat--right  { text-align: right; }

.ssr-feat__open {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 22px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  background: var(--f-surface);
  box-shadow: var(--f-shadow);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--f-ink);
  cursor: pointer;
  transition: border-color var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease), transform 120ms var(--f-ease);
}

.ssr-feat__open:hover { border-color: var(--f-strong); transform: translateY(-1px); }
.ssr-feat__open:focus-visible { outline: 2px solid var(--f-ring); outline-offset: 3px; }

.ssr-feat__opencount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--f-r-pill);
  background: var(--f-fill);
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--f-muted);
}

/* ---- Modal shell -------------------------------------------------------- */
/* [hidden] would be overridden by the display below, so it is restated at the top. */
.ssr-feat__modal[hidden] { display: none; }

.ssr-feat__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: left;
}

.ssr-feat__scrim {
  position: absolute;
  inset: 0;
  background: var(--f-scrim);
  animation: ssr-feat-fade var(--f-dur) var(--f-ease);
}

.ssr-feat__dialog {
  position: relative;
  display: grid;
  grid-template-columns: var(--f-rail) minmax(0, 1fr);
  width: min(1000px, 100%);
  height: min(600px, 100%);
  overflow: hidden;
  border-radius: var(--f-r-lg);
  background: var(--f-surface);
  box-shadow: var(--f-lift);
  animation: ssr-feat-rise var(--f-dur) var(--f-ease);
}

@keyframes ssr-feat-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ssr-feat-rise { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* ---- Rail --------------------------------------------------------------- */
.ssr-feat__rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 14px;
  background: var(--f-fill);
  border-right: 1px solid var(--f-line);
}

.ssr-feat .ssr-feat__railhead {
  display: block;
  margin: 0;
  padding: 0 10px 10px;
  font: 700 11px/1.2 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--f-muted);
}

.ssr-feat__tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ssr-feat__tab {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--f-r-md);
  background: none;
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  color: var(--f-body-ink);
  cursor: pointer;
  transition: background var(--f-dur) var(--f-ease);
}

.ssr-feat__tab:hover { background: rgba(0, 0, 0, .04); }
.ssr-feat__tab:focus-visible { outline: 2px solid var(--f-ring); outline-offset: -1px; }

.ssr-feat__tab.is-active {
  background: var(--f-surface);
  border-color: var(--f-line);
  box-shadow: var(--f-shadow);
  font-weight: 600;
  color: var(--f-ink);
}

.ssr-feat__tabicon { flex: none; font-size: 15px; line-height: 1; }
.ssr-feat__tabname { flex: 1 1 auto; min-width: 0; }
.ssr-feat__tabnum  { flex: none; font-size: 11.5px; color: var(--f-muted); font-variant-numeric: tabular-nums; }
.ssr-feat__tab.is-active .ssr-feat__tabnum { font-weight: 400; }

/* ---- Body --------------------------------------------------------------- */
.ssr-feat__body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.ssr-feat__close {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  background: var(--f-surface);
  color: var(--f-body-ink);
  cursor: pointer;
  transition: border-color var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease);
}

.ssr-feat__close:hover { border-color: var(--f-body-ink); color: var(--f-ink); }
.ssr-feat__close:focus-visible { outline: 2px solid var(--f-ring); outline-offset: 2px; }

.ssr-feat__panels { min-height: 0; flex: 1 1 auto; display: flex; }

.ssr-feat__panel[hidden] { display: none; }

.ssr-feat__panel {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 24px;
}

.ssr-feat__panel:focus-visible { outline: 2px solid var(--f-ring); outline-offset: -3px; }

.ssr-feat__phead { padding-right: 46px; } /* clear of the close button */

.ssr-feat__ptitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--f-ink);
}

.ssr-feat__picon { font-size: 20px; line-height: 1; }

.ssr-feat .ssr-feat__pmeta {
  display: block;
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--f-muted);
}

.ssr-feat__prule {
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 10px;
  background: var(--f-brand);
}

/* Multi-column rather than grid: 2b reads down the left column and then down the right, which
   keeps the feed's alphabetical order intact. A grid would need the row count baked in. */
.ssr-feat__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  column-count: 2;
  column-gap: 36px;
}

.ssr-feat__list.is-single { column-count: 1; }

.ssr-feat__item {
  break-inside: avoid;
  margin-bottom: 5px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--f-body-ink);
}

.ssr-feat__pairs {
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.ssr-feat__pair {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--f-hair);
  font-size: 13.5px;
  line-height: 1.5;
}

.ssr-feat__pair:last-child { border-bottom: 0; padding-bottom: 0; }
.ssr-feat__pair dt { margin: 0; color: var(--f-muted); }
.ssr-feat__pair dd { margin: 0; text-align: right; font-weight: 600; color: var(--f-ink); }

/* ---- Body scroll lock --------------------------------------------------- */
body.ssr-feat-open { overflow: hidden; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .ssr-feat { --f-rail: 232px; }
  .ssr-feat__modal { padding: 20px; }
}

@media (max-width: 767px) {
  .ssr-feat--bar { padding: 0 20px; }
  .ssr-feat__bar { gap: 14px; padding: 16px 18px; }
  .ssr-feat__baricon { width: 40px; height: 40px; }
  .ssr-feat__baraction { flex: 1 1 100%; }
  .ssr-feat__baropen { width: 100%; }

  .ssr-feat__modal { padding: 0; align-items: stretch; }

  /* Full sheet, and the rail becomes a sticky chip strip above the panel. */
  .ssr-feat__dialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .ssr-feat__rail {
    min-width: 0;
    padding: 14px 0 0;
    border-right: 0;
    border-bottom: 1px solid var(--f-line);
  }

  .ssr-feat__railhead { padding: 0 16px 10px; }

  .ssr-feat__tabs {
    flex-direction: row;
    gap: 7px;
    padding: 0 16px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px; /* without this the snap eats the strip's own left padding */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ssr-feat__tabs::-webkit-scrollbar { display: none; }

  .ssr-feat__tab {
    flex: 0 0 auto;
    width: auto;
    gap: 7px;
    padding: 8px 13px;
    border-color: var(--f-line);
    border-radius: var(--f-r-pill);
    background: var(--f-surface);
    scroll-snap-align: start;
  }

  .ssr-feat__tabname { flex: 0 0 auto; white-space: nowrap; }

  .ssr-feat__tab.is-active {
    border-color: var(--f-strong);
    background: var(--f-surface);
    box-shadow: inset 0 0 0 1px var(--f-strong);
  }

  .ssr-feat__panel { padding: 20px 16px 32px; }
  .ssr-feat__close { top: 14px; right: 16px; }
  .ssr-feat__phead { padding-right: 44px; }
  .ssr-feat__ptitle { font-size: 18px; }

  /* One column: two columns of 13.5px text do not fit a phone. */
  .ssr-feat__list { column-count: 1; }
  .ssr-feat__item { margin-bottom: 2px; }
  .ssr-feat__pairs { max-width: none; }
}

@media (max-width: 400px) {
  .ssr-feat__open { font-size: 14px; padding: 10px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssr-feat__scrim, .ssr-feat__dialog { animation: none; }
  .ssr-feat__open, .ssr-feat__baropen, .ssr-feat__tab, .ssr-feat__close { transition: none; }
  .ssr-feat__open:hover, .ssr-feat__baropen:hover { transform: none; }
}

@media print {
  .ssr-feat { display: none; }
}