/* ============================================================
   SSR Listing Comparisons — [ssr_listing_comparisons]
   Design 15a: a four-cell median strip, then dossier rows —
   photo + facts in a 300px rail, the full write-up at reading
   width, a green "Bottom line" kicker closing each row.
   Mobile (<=767px): the strip is 2x2, each row stacks
   address → photo → facts → pills → write-up → bottom line.

   Tokens are aliased locally with literal fallbacks, same as
   the other sections, so the section survives edits to the
   global token block.
   ============================================================ */
.ssr-comps {
  --c-ink:     var(--text-on-light, #2f2e30);
  --c-muted:   var(--text-on-light-muted, #6f6d73);
  --c-dark:    var(--charcoal-700, #414042);
  --c-line:    var(--border-on-light, #d6d5d8);
  --c-hair:    var(--charcoal-100, #ececed);
  --c-fill:    var(--charcoal-50, #f7f7f6);
  --c-surface: var(--surface-light, #fff);
  --c-green:   var(--green-700, #8fa317);
  --c-ring:    var(--state-focus-ring, #ff5a5f);
  --c-display: var(--font-display, Outfit, system-ui, sans-serif);
  --c-body:    var(--font-body, 'Public Sans', system-ui, sans-serif);
  --c-r-lg:    var(--radius-lg, 14px);
  --c-r-pill:  var(--radius-pill, 999px);

  --c-max:   var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */
  --c-rail:  300px;
  --c-gap:   38px;
  --c-photo: 186px;

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

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

/* wpautop wraps runs of inline elements in <p>. Injected paragraphs become transparent to
   layout; the section's own paragraphs carry a class and are restored below — with the root
   class in the selector, because a lone class loses to `.ssr-comps p`. */
.ssr-comps p { display: contents; margin: 0; padding: 0; }
.ssr-comps p:empty { display: none; }

.ssr-comps__inner { max-width: var(--c-max); margin-inline: auto; }

/* ---- Heading -------------------------------------------------------------- */
.ssr-comps__h2 {
  margin: 0;
  font-family: var(--c-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--c-ink);
}
.ssr-comps .ssr-comps__blurb {
  display: block;
  margin: 8px 0 0;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-muted);
  text-wrap: pretty;
}

/* ---- Median strip --------------------------------------------------------- */
.ssr-comps__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  overflow: hidden;
}
.ssr-comps__cell { padding: 16px 22px; border-left: 1px solid var(--c-line); min-width: 0; }
.ssr-comps__cell:first-child { border-left: 0; }
.ssr-comps__cell.is-home { background: var(--c-fill); }
.ssr-comps__celllabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ssr-comps__cell.is-home .ssr-comps__celllabel { color: var(--c-green); }
.ssr-comps__cellval {
  margin-top: 4px;
  font-family: var(--c-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.ssr-comps__cellsub { margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--c-muted); }

/* ---- Rows ----------------------------------------------------------------- */
.ssr-comps__rows { margin-top: 14px; }
.ssr-comps__row {
  display: grid;
  grid-template-columns: var(--c-rail) minmax(0, 1fr);
  gap: var(--c-gap);
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--c-hair);
}
.ssr-comps__row:last-child { border-bottom: 0; padding-bottom: 4px; }

/* left rail */
.ssr-comps__media { min-width: 0; }
.ssr-comps__photo { display: block; border-radius: var(--c-r-lg); overflow: hidden; }
.ssr-comps__photo:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 3px; }
.ssr-comps__img { display: block; width: 100%; height: var(--c-photo); object-fit: cover; }

.ssr-comps__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 14px 0 0;
  padding: 0;
}
.ssr-comps__fact { min-width: 0; }
.ssr-comps__fact dt {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ssr-comps__fact dd {
  margin: 2px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* right: the write-up */
.ssr-comps__body { min-width: 0; }
.ssr-comps__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ssr-comps__h3 {
  margin: 0;
  font-family: var(--c-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--c-ink);
}
.ssr-comps__h3 a { color: inherit; text-decoration: none; }
.ssr-comps__h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ssr-comps__h3 a:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 3px; border-radius: 4px; }
.ssr-comps__when { display: flex; align-items: center; }

/* The badge is the hero's: uppercase, pill, charcoal for a sale that has closed. Scoped so
   another section's .ssr-badge--success cannot restyle it. */
.ssr-comps .ssr-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: var(--c-r-pill);
  font-family: var(--c-body); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.ssr-comps .ssr-badge--success { background: var(--c-dark); color: #fff; }

.ssr-comps__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.ssr-comps__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.35;
  color: var(--c-muted);
}
.ssr-comps__arrow { flex: none; stroke-width: 2.5; }

.ssr-comps__text { margin-top: 16px; }
.ssr-comps .ssr-comps__p {
  display: block;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--c-ink);
  text-wrap: pretty;
}
.ssr-comps .ssr-comps__p + .ssr-comps__p { margin-top: 10px; }

.ssr-comps__bottom { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-hair); }
.ssr-comps__kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--c-green);
}
.ssr-comps__verdict { margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--c-ink); text-wrap: pretty; }
.ssr-comps__fine { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--c-muted); }

/* ---- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ssr-comps { --c-rail: 240px; --c-gap: 24px; --c-photo: 150px; }
}

/* ---- Mobile: 767 is the page's switch ------------------------------------- */
@media (max-width: 767px) {
  .ssr-comps { padding: 40px 16px 36px; }
  .ssr-comps__h2 { font-size: 22px; }

  .ssr-comps__strip { grid-template-columns: 1fr 1fr; }
  .ssr-comps__cell { padding: 14px 16px; }
  .ssr-comps__cell:nth-child(odd) { border-left: 0; }
  .ssr-comps__cell:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .ssr-comps__cellval { font-size: 19px; }

  /* The two columns dissolve so their children can be reordered as one stack. */
  .ssr-comps__row { display: flex; flex-direction: column; gap: 0; padding: 26px 0 24px; }
  .ssr-comps__media, .ssr-comps__body { display: contents; }
  .ssr-comps__head   { order: 1; }
  .ssr-comps__photo  { order: 2; margin-top: 14px; }
  .ssr-comps__facts  { order: 3; margin-top: 14px; }
  .ssr-comps__pills  { order: 4; margin-top: 14px; }
  .ssr-comps__text   { order: 5; }
  .ssr-comps__bottom { order: 6; }

  .ssr-comps__img { height: auto; aspect-ratio: 16 / 10; }
  .ssr-comps__h3 { font-size: 17px; }
}