/* SSR Listing Hero — desktop is design 1a/18a with 1a's bordered stat blocks, mobile (≤767px) is
   design 19a. Text sits about a point larger than the canvas draws it, by request.
   Tokens fall back to the design-system values if the site-wide ones are ever removed. */

.ssr-hero {
  --h-ink: var(--text-on-light, #2f2e30);
  --h-muted: var(--text-on-light-muted, #6f6d73);
  --h-icon: var(--charcoal-500, #6f6d73);
  --h-border: var(--border-on-light, #d6d5d8);
  --h-surface: var(--surface-light, #fff);
  --h-fill: var(--charcoal-50, #f7f7f6);
  --h-fill-2: var(--charcoal-100, #ececed);
  --h-dark: var(--charcoal-700, #414042);
  --h-cta: var(--accent-cta, #ff5a5f);
  --h-cta-hover: var(--accent-cta-hover, #ea3f45);
  --h-cta-active: var(--accent-cta-active, #c92e34);
  --h-green-bg: var(--green-100, #f4fad1);
  --h-green-ink: var(--green-700, #8fa317);
  --h-display: var(--font-display, Outfit, system-ui, sans-serif);
  --h-body: var(--font-body, "Public Sans", system-ui, sans-serif);
  --h-radius: var(--radius-lg, 14px);
  --h-radius-md: var(--radius-md, 8px);
  --h-pill: var(--radius-pill, 999px);
  --h-focus: var(--state-focus-ring, #ff5a5f);
  --h-scrim: rgba(26, 26, 27, .55);
  --h-sticky-top: var(--ssr-sticky-top, 0px);

  box-sizing: border-box;
  /* Page width comes from the Site Editor (Styles > Layout, 1240px on 2026-09-08). The 24px gutters sit
     OUTSIDE that width so the content box matches every other section, not 48px short of it. */
  max-width: calc(var(--wp--style--global--wide-size, 1240px) + 48px);
  margin: 0 auto;
  padding: 26px 24px 8px;
  font-family: var(--h-body);
  font-size: 15px;
  color: var(--h-ink);
}
.ssr-hero *, .ssr-hero *::before, .ssr-hero *::after { box-sizing: border-box; }
/* wpautop wraps runs of inline elements in <p> and splits around block elements. The section has no
   intentional paragraphs, so injected ones become transparent and their children lay out as if they were not there. */
.ssr-hero p { display: contents; margin: 0; padding: 0; }
.ssr-hero p:empty { display: none; }
.ssr-hero br { display: none; }

/* Mobile-only parts stay out of the desktop layout entirely. The strip also carries the gallery
   plugin's .ss-gallery class, whose own stylesheet prints after this one, so the strip rules are
   written with two class selectors to outrank it. */
.ssr-hero .ssr-hero__strip, .ssr-hero__subline, .ssr-hero__dock { display: none; }

/* Breadcrumbs (SEOPress markup) */
.ssr-hero__crumbs { font-size: 14.5px; font-weight: 500; color: var(--h-muted); }
.ssr-hero__crumbs ol, .ssr-hero__crumbs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ssr-hero__crumbs li { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.ssr-hero__crumbs a { color: inherit; text-decoration: none; }
.ssr-hero__crumbs a:hover { color: var(--h-ink); text-decoration: underline; }
.ssr-hero__crumbs li:last-child, .ssr-hero__crumbs [aria-current] { color: var(--h-ink); }

/* Info header */
.ssr-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 14px; }
.ssr-hero__id { min-width: 0; }
.ssr-hero__title { margin: 0; font-family: var(--h-display); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--h-ink); }
.ssr-hero__locality { font-weight: 500; color: var(--h-muted); }
.ssr-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.ssr-hero__sep { width: 1px; height: 17px; background: var(--h-border); flex: none; }
/* Places as one grey line, 14px between them, charcoal icons 6px from their word */
.ssr-hero__places { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--h-muted); }
.ssr-place { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ssr-place__icon { flex: none; width: 16px; height: 16px; color: var(--h-icon); }

.ssr-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--h-pill); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.ssr-badge--brand { background: var(--h-green-bg); color: var(--h-green-ink); }
.ssr-badge--neutral { background: var(--h-fill-2); color: var(--h-dark); }
.ssr-badge--cta { background: var(--coral-100, #ffe4e5); color: var(--coral-700, #c92e34); }
.ssr-badge--warning { background: #fff3d6; color: #8a5a12; }
.ssr-badge--success { background: var(--h-dark); color: #fff; }

.ssr-hero__deal { flex: none; text-align: right; }
.ssr-hero__price { font-family: var(--h-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.ssr-hero__pricemeta { margin-top: 3px; font-size: 14px; color: var(--h-muted); }
.ssr-hero__actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }

/* Buttons: one coral call to action, everything else quiet */
.ssr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 17px; border: 1px solid transparent; border-radius: var(--h-pill); font-family: var(--h-display); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 160ms ease, color 160ms ease, transform 120ms ease, border-color 160ms ease; }
.ssr-btn:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 3px; }
.ssr-btn--ghost { background: transparent; color: var(--h-ink); position: relative; }
.ssr-btn--ghost:hover { background: var(--h-fill); }
.ssr-btn--cta { background: var(--h-cta); color: #fff; padding: 0 21px; box-shadow: var(--shadow-cta, 0 8px 20px rgba(255, 90, 95, .35)); }
.ssr-btn--cta:hover, .ssr-btn--cta:focus-visible { background: var(--h-cta-hover); color: #fff; transform: translateY(-1px); }
.ssr-btn--cta:active { background: var(--h-cta-active); transform: none; }

/* The existing [favorite_button] output, restyled as the secondary pill. Its wrapper and Kadence's
   "full width" button class both try to take the whole row; keep it inline. */
.ssr-hero__save { display: flex; flex: none; }
.ssr-hero__save .favorite-button-wrapper, .ssr-hero__save p { display: inline-flex !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.ssr-hero__save .favorite-button.favorite-button-main, .ssr-hero__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(--h-dark); border-radius: var(--h-pill); background: transparent; color: var(--h-ink); font-family: var(--h-display); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: none; transition: background 160ms ease, color 160ms ease; }
.ssr-hero__save .favorite-button.favorite-button-main:hover { background: var(--h-fill); color: var(--h-ink); }
.ssr-hero__save .favorite-button.favorite-button-main:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 3px; }
.ssr-hero__save .favorite-icon { display: inline-flex; line-height: 0; }
.ssr-hero__save .favorite-icon svg { width: 17px; height: 17px; }
.ssr-hero__save .kt-btn-inner-text { font: inherit; }

.ssr-hero__toast { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 6px 10px; border-radius: 6px; background: var(--h-dark); color: #fff; font-family: var(--h-body); font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.ssr-hero__toast.is-on { opacity: 1; }

/* Gallery: the mosaic block already lays itself out; give it 1a's shape */
.ssr-hero__gallery { margin-top: 20px; }
.ssr-hero__gallery .ss-gallery__mosaic { --ss-mosaic-ratio: 2.55; --ss-mosaic-hero: 1.55fr; --ss-mosaic-radius: var(--h-radius); }

/* Stat blocks — 1a: one bordered strip, five equal cells, hairlines between them. The hairlines
   are a 1px gap over the border colour, so they survive any wrap. */
.ssr-hero__stats { margin-top: 20px; }
.ssr-hero__stats .ssr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; border: 1px solid var(--h-border); border-radius: var(--h-radius-md); background: var(--h-border); overflow: hidden; }
.ssr-hero__stats .ssr-stats__item, .ssr-hero__stats .ssr-stats__item.is-first { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 20px; border: 0; background: var(--h-surface); }
.ssr-hero__stats .ssr-stats__icon { flex: none; width: 22px; height: 22px; color: var(--h-icon); }
.ssr-hero__stats .ssr-stats__v { font-family: var(--h-display); font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.ssr-hero__stats .ssr-stats__l { font-size: 12.5px; line-height: 1.3; color: var(--h-muted); }

/* Section nav: pills in flow, then a fixed bar once scrolled past */
.ssr-hero__navwrap { margin-top: 20px; position: relative; }
.ssr-hero__navsentinel { position: absolute; top: calc(-1 * var(--h-sticky-top) - 1px); height: 1px; width: 1px; }
.ssr-hero__nav { min-height: 36px; }
.ssr-hero__navinner { display: flex; flex-wrap: wrap; gap: 8px; }
.ssr-pill[hidden] { display: none; }
.ssr-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 17px; border: 1px solid var(--h-border); border-radius: var(--h-pill); background: var(--h-surface); color: var(--h-muted); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.ssr-pill:hover { background: var(--h-fill); color: var(--h-ink); }
.ssr-pill:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; }
.ssr-pill.is-active { background: var(--h-dark); border-color: var(--h-dark); color: #fff; }

.ssr-hero__nav.is-stuck { position: fixed; top: var(--h-sticky-top); left: 0; right: 0; z-index: 60; padding: 8px 24px; background: color-mix(in srgb, var(--h-surface) 92%, transparent); border-bottom: 1px solid var(--h-border); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
.ssr-hero__nav.is-stuck .ssr-hero__navinner { max-width: var(--wp--style--global--wide-size, 1240px); margin: 0 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ssr-hero__nav.is-stuck .ssr-hero__navinner::-webkit-scrollbar { display: none; }
[id] { scroll-margin-top: calc(var(--ssr-sticky-top, 0px) + 62px); }

/* Tablet: the five stat cells become three per row; a lone last cell stretches across its row. */
@media (max-width: 1024px) {
  .ssr-hero__stats .ssr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ssr-hero__stats .ssr-stats__item:nth-child(5):last-child { grid-column: 2 / 4; }
  .ssr-hero__stats .ssr-stats__item:nth-child(4):last-child { grid-column: 1 / -1; }
}

/* ══════════════════════════════ 19a: mobile ══════════════════════════════ */
@media (max-width: 767px) {
  .ssr-hero { padding: 0 18px 8px; }
  .ssr-hero__crumbs, .ssr-hero__gallery, .ssr-hero__actions, .ssr-hero__locality, .ssr-hero__sep, .ssr-hero__places, .ssr-hero__psep { display: none; }

  /* Swipe strip first, edge to edge: each photo 90% of the width, 4:3, snapping to the start. */
  /* The tile is a locked 4/3 window, but ss-gallery.css sizes the photo from
     --ss-gallery-ratio, which defaults to 3/2 — so every tile carried ~28px of
     dead space under the photo, and the absolutely-positioned counter sat in it
     rather than on the image. Set the plugin's own variable instead of fighting
     its .ss-gallery__link img rule, which has the same specificity as ours and
     wins on source order. */
  .ssr-hero .ssr-hero__strip { display: block; position: relative; gap: 0; margin: 0 -18px; --ss-gallery-ratio: 4 / 3; }
  .ssr-strip__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ssr-strip__track::-webkit-scrollbar { display: none; }
  .ssr-strip__tile { flex: 0 0 90%; aspect-ratio: 4 / 3; scroll-snap-align: start; display: block; overflow: hidden; line-height: 0; }
  .ssr-strip__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ssr-strip__tile:focus-visible { outline-offset: -3px; }
  .ssr-strip__btn { position: absolute; top: 12px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--h-pill); background: var(--h-scrim); color: #fff; cursor: pointer; text-decoration: none; }
  .ssr-strip__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .ssr-strip__back { left: 12px; }
  .ssr-strip__tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
  .ssr-strip__tools .ssr-strip__btn { position: static; }
  .ssr-strip__save { display: flex; }
  .ssr-strip__save .favorite-button-mini { width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; background: var(--h-scrim) !important; color: #fff !important; }
  .ssr-strip__save .favorite-button-mini svg { width: 17px; height: 17px; }
  .ssr-strip__count { position: absolute; right: 12px; bottom: 12px; padding: 6px 11px; border-radius: var(--h-pill); background: var(--h-scrim); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }

  /* Badges first, address, then the sub-line and the price row. */
  .ssr-hero__head { flex-direction: column; gap: 0; margin-top: 18px; }
  .ssr-hero__id { display: flex; flex-direction: column; }
  .ssr-hero__tags { order: -1; margin: 0; gap: 8px; }
  .ssr-hero__title { margin-top: 12px; font-size: 26px; line-height: 1.15; }
  .ssr-hero__subline { display: block; margin-top: 4px; font-size: 15px; color: var(--h-muted); }
  .ssr-hero__deal { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; width: 100%; margin-top: 14px; text-align: left; }
  .ssr-hero__price { font-size: 30px; }
  .ssr-hero__pricemeta { display: contents; }
  .ssr-hero__ppsf { font-size: 14px; color: var(--h-muted); }
  .ssr-hero__listed { flex-basis: 100%; margin-top: 3px; font-size: 13px; color: var(--h-muted); }

  /* Stats: 19a's bordered three-column grid, no icons; the last cell spans the rest of its row,
     which is what gives Year built its wider block. */
  .ssr-hero__stats { margin-top: 16px; }
  .ssr-hero__stats .ssr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ssr-hero__stats .ssr-stats__item, .ssr-hero__stats .ssr-stats__item.is-first { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; }
  .ssr-hero__stats .ssr-stats__item:nth-child(5):last-child { grid-column: 2 / 4; }
  .ssr-hero__stats .ssr-stats__item:nth-child(4):last-child { grid-column: 1 / -1; }
  .ssr-hero__stats .ssr-stats__icon { display: none; }
  .ssr-hero__stats .ssr-stats__v { font-size: 17px; }
  .ssr-hero__stats .ssr-stats__l { font-size: 12px; }

  /* Pills: one scrolling row with a rule under it; the same bar pins to the top once passed. */
  .ssr-hero__navwrap { margin: 16px -18px 0; }
  .ssr-hero__nav { padding: 10px 18px; background: var(--h-surface); border-bottom: 1px solid var(--h-border); }
  .ssr-hero__navinner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ssr-hero__navinner::-webkit-scrollbar { display: none; }
  .ssr-pill { flex: none; padding: 0 16px; }
  .ssr-hero__nav.is-stuck { padding: 10px 18px; background: var(--h-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  [id] { scroll-margin-top: calc(var(--ssr-sticky-top, 0px) + 66px); }

  /* Bottom bar: facts and Save, no call button. Fixed, not sticky — sticky inside the section
     would stop at the section's own bottom edge. Off screen until the price has scrolled away. */
  .ssr-hero__dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: flex; align-items: center; gap: 12px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--h-surface); border-top: 1px solid var(--h-border); box-shadow: 0 -4px 14px rgba(26, 26, 27, .06); opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
  .ssr-hero__dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .ssr-hero__dockthumb { flex: none; width: 44px; height: 44px; border-radius: var(--h-radius-md); object-fit: cover; background: var(--h-fill, #f7f7f6); }
  .ssr-hero__dockid { flex: 1; min-width: 0; }
  .ssr-hero__dockline { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .ssr-hero__dockaddr { font-family: var(--h-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--h-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ssr-hero__dockline .ssr-badge { flex: none; }
  .ssr-hero__dockmeta { margin-top: 3px; font-size: 15px; line-height: 1.3; color: var(--h-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ssr-hero__dockprice { font-family: var(--h-display); font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; }
  .ssr-hero__docksave { flex: none; display: flex; }
  .ssr-hero__docksave .favorite-button-mini { width: 44px !important; height: 44px !important; padding: 0 !important; border: 1px solid var(--h-border) !important; border-radius: var(--h-pill) !important; background: transparent !important; color: var(--h-icon) !important; }
  .ssr-hero__docksave .favorite-button-mini.is-favorited { border-color: var(--h-dark) !important; }
  .ssr-hero__docksave .favorite-button-mini svg { width: 20px; height: 20px; }
  /* While the bar is up the page needs room under it. */
  body.ssr-has-dock { padding-bottom: 74px; }
  body.ssr-has-dock .sticky-sub-header { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ssr-hero *, .ssr-hero *::before, .ssr-hero *::after { transition: none !important; }
}
@media print {
  .ssr-hero__actions, .ssr-hero__navwrap, .ssr-hero__dock, .ssr-hero__strip { display: none; }
  .ssr-hero__gallery { display: block; }
}

/* ---- 20c location pills: below the stat blocks, above the nav ------------
   Mobile only. Above 767px these same facts are the grey .ssr-hero__places
   line in the tag row, so exactly one of the two is ever on screen. */
.ssr-hero__pins { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ssr-pin { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--h-border); border-radius: var(--h-radius-pill, 999px); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--h-ink); text-decoration: none; }
.ssr-pin__icon { flex: none; color: var(--h-icon); }
a.ssr-pin:hover, a.ssr-pin:focus-visible { background: var(--h-fill, #f7f7f6); color: var(--h-ink); }
.ssr-pin:focus-visible { outline: 2px solid var(--h-ring, #ff5a5f); outline-offset: 2px; }
.ssr-pin__mls { font-size: 12.5px; color: var(--h-muted); }

@media (max-width: 767px) {
  .ssr-hero__pins { display: flex; }
}