/* [ssr_property_hero] — the off-market property hero. Own classes; tokens aliased locally with
   literal fallbacks like every other section; 767px is the mobile switch. */

.ssr-phero {
  --ph-ink:      var(--text-on-light, #2f2e30);
  --ph-muted:    var(--text-on-light-muted, #6f6d73);
  --ph-dark:     var(--charcoal-700, #414042);
  --ph-border:   var(--border-on-light, #d6d5d8);
  --ph-line:     var(--charcoal-100, #ececed);
  --ph-fill:     var(--charcoal-50, #f7f7f6);
  --ph-surface:  var(--surface-light, #fff);
  --ph-cta:      var(--accent-cta, #ff5a5f);
  --ph-cta-hover: var(--accent-cta-hover, #ea3f45);
  --ph-focus:    var(--state-focus-ring, #ff5a5f);
  --ph-brand-bg: var(--green-100, #f4fad1);
  --ph-brand-fg: var(--accent-brand-strong, #8fa317);
  --ph-success-bg: #e4f6ea;
  --ph-success-fg: #2d7c4d;
  --ph-pill:     var(--radius-pill, 999px);
  --ph-radius:   var(--radius-lg, 14px);
  --ph-radius-md: var(--radius-md, 8px);
  --ph-display:  var(--font-display, Outfit, system-ui, sans-serif);
  --ph-body:     var(--font-body, 'Public Sans', system-ui, sans-serif);
  --ph-max:      var(--wp--style--global--wide-size, 1240px);

  display: block;
  background: var(--ph-surface);
  padding: 40px 24px 48px;
  font-family: var(--ph-body);
  color: var(--ph-ink);
}
.ssr-phero p:not([class]) { display: contents; margin: 0; padding: 0; }
.ssr-phero p:empty { display: none; }

.ssr-phero__inner {
  max-width: var(--ph-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 40px 56px;
  align-items: start;
}

/* ---- main column ---- */
.ssr-phero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.ssr-phero__pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--ph-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.ssr-phero__pill--neutral { background: var(--ph-line); color: var(--ph-dark); }
.ssr-phero__pill--success { background: var(--ph-success-bg); color: var(--ph-success-fg); }
.ssr-phero__pill--brand   { background: var(--ph-brand-bg); color: var(--ph-brand-fg); }
.ssr-phero__crumbs {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ph-muted);
}
.ssr-phero .ssr-phero__title {
  margin: 0;
  font-family: var(--ph-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.08;
  color: var(--ph-ink);
}
.ssr-phero__locality {
  margin-top: 6px;
  font-size: 18px;
  color: var(--ph-muted);
}
.ssr-phero .ssr-phero__lead {
  display: block;
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ph-ink);
}
/* Action row: the v2 hero's 36px pill system (hero.css .ssr-btn / .ssr-btn--cta / .ssr-hero__save),
   so the two heroes read as one family. */
.ssr-phero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.ssr-phero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 17px;
  border: 1px solid var(--ph-dark);
  border-radius: var(--ph-pill);
  background: transparent;
  color: var(--ph-ink);
  font-family: var(--ph-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease, border-color 160ms ease;
}
.ssr-phero__btn:hover { background: var(--ph-fill); color: var(--ph-ink); }
.ssr-phero__btn:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 3px; }
.ssr-phero__btn--primary {
  padding: 0 21px;
  border-color: transparent;
  background: var(--ph-cta);
  color: #fff;
  box-shadow: var(--shadow-cta, 0 8px 20px rgba(255, 90, 95, .35));
}
.ssr-phero__btn--primary:hover, .ssr-phero__btn--primary:focus-visible { background: var(--ph-cta-hover); color: #fff; transform: translateY(-1px); }
.ssr-phero__btn--primary:active { transform: none; }

/* [favorite_button] output, restyled as the v2 hero's outlined Save pill. The plugin wraps its
   button in a paragraph and a Kadence-style wrapper, hence the !important resets. */
.ssr-phero__save { display: flex; flex: none; }
.ssr-phero__save .favorite-button-wrapper, .ssr-phero__save p { display: inline-flex !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.ssr-phero__save .favorite-button.favorite-button-main, .ssr-phero__save .kb-button.kt-btn-width-type-full { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none !important; height: 36px; width: auto !important; min-width: 0; margin: 0; padding: 0 17px; border: 1px solid var(--ph-dark); border-radius: var(--ph-pill); background: transparent; color: var(--ph-ink); font-family: var(--ph-display); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: none; transition: background 160ms ease, color 160ms ease; }
.ssr-phero__save .favorite-button.favorite-button-main:hover { background: var(--ph-fill); color: var(--ph-ink); }
.ssr-phero__save .favorite-button.favorite-button-main:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 3px; }
.ssr-phero__save .favorite-icon { display: inline-flex; line-height: 0; }
.ssr-phero__save .favorite-icon svg { width: 17px; height: 17px; }
.ssr-phero__save .kt-btn-inner-text { font: inherit; }
.ssr-phero__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ph-muted);
  max-width: 60ch;
}
.ssr-phero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ph-line);
}
.ssr-phero__navpill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--ph-pill);
  background: var(--ph-fill);
  color: var(--ph-dark);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.ssr-phero__navpill:hover { background: var(--ph-line); }

/* ---- facts card ---- */
.ssr-phero__facts {
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
  padding: 22px 24px 8px;
  background: var(--ph-surface);
}
.ssr-phero .ssr-phero__facts-title {
  margin: 0 0 6px;
  font-family: var(--ph-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ph-ink);
}
.ssr-phero__dl { margin: 0; }
.ssr-phero__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--ph-line);
  align-items: start;
}
.ssr-phero__row:first-child { border-top: 0; }
.ssr-phero__row dt {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ph-muted);
  line-height: 1.5;
}
.ssr-phero__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}
.ssr-phero__row dd .ssr-phist__src {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ph-muted);
}
.ssr-phero__row dd .ssr-phist__idx { height: 16px; width: auto; display: inline-block; vertical-align: middle; }

@media (max-width: 767px) {
  .ssr-phero { padding: 28px 16px 36px; }
  .ssr-phero__inner { grid-template-columns: 1fr; gap: 28px; }
  .ssr-phero .ssr-phero__title { font-size: 30px; }
  .ssr-phero__locality { font-size: 16px; }
  .ssr-phero__row { grid-template-columns: 104px 1fr; }
}