/* SSR Listing Hero — design 1a. One file for the whole top of a listing page.
   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-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-sticky-top: var(--ssr-sticky-top, 0px);

  box-sizing: border-box;
  max-width: var(--wp--style--global--wide-size, 1164px);
  margin: 0 auto;
  padding: 22px 24px 8px;
  font-family: var(--h-body);
  color: var(--h-ink);
}
.ssr-hero *, .ssr-hero *::before, .ssr-hero *::after { box-sizing: border-box; }
.ssr-hero p:empty { display: none; }

/* Breadcrumbs (SEOPress markup) */
.ssr-hero__crumbs { font-size: 12px; 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: 7px; align-items: center; }
.ssr-hero__crumbs li { margin: 0; display: inline-flex; gap: 7px; 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: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--h-ink); text-wrap: balance; }
.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: 16px; background: var(--h-border); flex: none; }
.ssr-hero__places { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14px; color: var(--h-muted); }
.ssr-hero__dot { font-size: 10px; opacity: .55; }

.ssr-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--h-pill); font-size: 11px; 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: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.ssr-hero__pricemeta { margin-top: 4px; font-size: 13px; color: var(--h-muted); }
.ssr-hero__actions { display: flex; 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 16px; border: 1px solid transparent; border-radius: var(--h-pill); font-family: var(--h-display); font-size: 14px; 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 20px; 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. */
.ssr-hero__save .favorite-button-wrapper { margin: 0; }
.ssr-hero__save .favorite-button.favorite-button-main { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; width: auto; min-width: 0; margin: 0; padding: 0 16px; border: 1px solid var(--h-dark); border-radius: var(--h-pill); background: transparent; color: var(--h-ink); font-family: var(--h-display); font-size: 14px; 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: 16px; height: 16px; }
.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: 12px; 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 the 1a 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 strip: boxed version of [ssr_stat_row] — hairlines from a 1px gap over the border colour */
.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; padding: 14px 20px; border: 0; background: var(--h-surface); min-width: 0; }
.ssr-hero__stats .ssr-stats__icon { flex: none; width: 20px; height: 20px; color: var(--charcoal-500, #6f6d73); }
.ssr-hero__stats .ssr-stats__v { font-family: var(--h-display); font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.ssr-hero__stats .ssr-stats__l { font-size: 11.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: 18px; 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 { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid var(--h-border); border-radius: var(--h-pill); background: var(--h-surface); color: var(--h-muted); font-size: 13px; 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, 1164px); 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) + 60px); }

/* Responsive */
@media (max-width: 1024px) {
  .ssr-hero__stats .ssr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ssr-hero { padding: 16px 16px 4px; }
  .ssr-hero__head { flex-direction: column; gap: 14px; margin-top: 12px; }
  .ssr-hero__title { font-size: 24px; }
  .ssr-hero__deal { text-align: left; width: 100%; }
  .ssr-hero__price { font-size: 28px; }
  .ssr-hero__actions { justify-content: flex-start; flex-wrap: wrap; }
  .ssr-hero__actions .ssr-btn--cta { flex: 1 1 100%; }
  .ssr-hero__gallery { margin-top: 16px; }
  .ssr-hero__stats .ssr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssr-hero__stats .ssr-stats__item, .ssr-hero__stats .ssr-stats__item.is-first { padding: 12px 14px; gap: 10px; }
  .ssr-hero__navinner { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .ssr-hero__navinner::-webkit-scrollbar { display: none; }
  .ssr-hero__nav.is-stuck { padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ssr-hero *, .ssr-hero *::before, .ssr-hero *::after { transition: none !important; }
}
@media print {
  .ssr-hero__actions, .ssr-hero__navwrap { display: none; }
}